CKEditor Responsive Plugin

Deze plugin laat je toe om snel kolommen aan te maken in een tekstveld. Ze zijn responsive als je er ook zelf de CSS bij maakt.

Eerst moet je in je tekstformaat de knop actief zetten.

Screen000276.png

Bij klikken kan je kiezen uit verschillende layouts.

Screen000282.png

Enkele voorbeelden

Screen000277.png

Screen000278.png

Dit wordt vertaald naar bijvoorbeeld deze 3 kolommen:


Screen000280.png

Op smartphone ziet dit er zo uit.


Screen000281.png

Wat doet deze module.. Ze zet de kolommen als div klaar met de nodige classes. 
Screen000279.png

De Drupallers veronderstellen nu dat je de responsive code er zelf gaat bij schrijven...

Ik heb dit voor je gedaan (simpele versie) en gebaseerd op de code die de module zelf gebruikt voor zijn CKEditor. Het breekpunt heb ik zelf moeten leggen.

/*
based on the CKEditor Responsive Plugin CSS itself*/

/* 4.85%;  } /* grid_1  */
.onecol,
.grid-1 {
  width: 5.801104972%;
}

/* 13.45%; } /* grid_2  */
.twocol,
.grid-2 {
  width: 14.364640883%;
}

/* 22.05%; } /* grid_3  */
.threecol,
.grid-3 {
  width: 22.928176794%;
}

/* 30.75%; } /* grid_4  */
.fourcol,
.grid-4 {
  width: 31.491712705%;
}

/* 39.45%; } /* grid_5  */
.fivecol,
.grid-5 {
  width: 40.055248616%;
}

/* 48%;    } /* grid_6  */
.sixcol,
.grid-6 {
  width: 48.618784527%;
}

/* 56.75%; } /* grid_7  */
.sevencol,
.grid-7 {
  width: 57.182320438000005%;
}

/* 65.4%;  } /* grid_8  */
.eightcol,
.grid-8 {
  width: 65.74585634900001%;
}

/* 74.05%; } /* grid_9  */
.ninecol,
.grid-9 {
  width: 74.30939226%;
}

/* 82.7%;  } /* grid_10 */
.tencol,
.grid-10 {
  width: 82.87292817100001%;
}

/* 91.35%; } /* grid_11 */
.elevencol,
.grid-11 {
  width: 91.436464082%;
}

/* 100%;   } /* grid_12 */
.twelvecol,
.grid-12 {
  width: 99.999999993%;
}

.onecol,
.twocol,
.threecol,
.fourcol,
.fivecol,
.sixcol,
.sevencol,
.eightcol,
.ninecol,
.tencol,
.elevencol,
.twelvecol,
.grid-1,
.grid-2,
.grid-3,
.grid-4,
.grid-5,
.grid-6,
.grid-7,
.grid-8,
.grid-9,
.grid-10,
.grid-11,
.grid-12 {
  position: relative;
  float: left;
  margin-left: 2.762430939%;

  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/*.ckeditor-col-container {
  background-color: #ffbcbc;
  overflow: hidden;
  margin-bottom: 1em;
}*/

.first-col {
  margin-left: 0;
}

.last-col {
  margin-right: 0;
}

@media only screen and (max-width: 550px) {
   .first-col {
  margin-left: 10px;
}

.last-col {
  margin-right: 10px;
}
.onecol,
.twocol,
.threecol,
.fourcol,
.fivecol,
.sixcol,
.sevencol,
.eightcol,
.ninecol,
.tencol,
.elevencol,
.twelvecol,
.grid-1,
.grid-2,
.grid-3,
.grid-4,
.grid-5,
.grid-6,
.grid-7,
.grid-8,
.grid-9,
.grid-10,
.grid-11,
.grid-12 {
  position: relative;
  float: left;
  margin-left: 2.762430939%;
width:90%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
}