Réflexions sur un sytème de colonnes pour les contenus éditoriaux.
Proposer au rédacteur-trice rédacteur-rice , une solution de mise en forme à l’intérieur, du bloc texte d’un objet éditorial.

-  une syntaxe simple
-  pouvoir intégrer n’importe quel contenu dedans : modèles, médias
-  responsive et mobile first : si le redacteur-rice veut changer en mode tablet/medium
-   pouvoir ajuster les proportions des colonnes

Proposer un modèle ou une wheel ?

L’utilisation d’un modèle comme dans le plugin utilisant bootstrap, oblige a passer par un modèle ouvrant et un fermant pour les container et colonnes.
C’est relativement similaire avec une wheel, mais sans avoir a numéroter les modèles et de manière plus clair.

Avec textwheel :

Deux wheels à créer

Exemple de syntaxe
< cadre <cadre class=« xml »>

Définir le système de grille sur lequel se base les colonnes

Faut il Comment synchroniser, utiliser le système de grille du thème avec nos colonnes ?

• breakpoints :
• gouttière * : inside : padd external : margin
• nombre de colonnes * : dependant du contexte/breakpoint
• largeur de colonne : seulement utile dans le cas de grille statique

D’expérience, on ne sait pas prévoir tout les contextes ou va être inséré notre contenu. Par exemple, premiere idée : insertion dans une newsletter, la on est bon pour transformer nos colonnes en tableau via un filtre si on veut conserver la mise en forme.

On n’a pas forcément de grille ni de framework ^^

On est certainement dans un contexte imbriqué (wrapper/container).

A t’on nécessité de pouvoir spécifier des tailles de colonnes différentes suivant les breakpoints, et que’l type d’utilisateur saura le gérer ?

CSS et markup

Idée 1  :

Utilisation/création Utilisation d’un micro grid framework [1]

- [+] ultra simple
-  [-] limité => trop simple ^^

La solution proposée dans l’article en note , date et un peut limitée , on peut depuis utiliser flexbox et si besoin prévoir un fallback de ce type tout de même ( si on en à besoin ). .

Rapid pour la démo, on crée donc un micro grid framework :
https://codepen.io/mistergraphx/pen/NzmZvO?editors=1000

.dp50 {
  float:left;
  width:50%
}

<!-- 8 column -->
<div class="dp50">
	<div class="dp50">
		<div class="dp50" style="background-color:#666;">1</div>
		<div class="dp50" style="background-color:#444;">2</div>
	</div>
	<div class="dp50">
		<div class="dp50" style="background-color:#666;">3</div>
		<div class="dp50" style="background-color:#444;">4</div>
	</div>
</div>
<div class="dp50">
	<div class="dp50">
		<div class="dp50" style="background-color:#666;">5</div>
		<div class="dp50" style="background-color:#444;">6</div>
	</div>
	<div class="dp50">
		<div class="dp50" style="background-color:#666;">7</div>
		<div class="dp50" style="background-color:#444;">8</div>
	</div>
</div>


Micro  grid  test  : 
&lt; cadre  class='css '>
 . &lt;div  class="clear">&lt;/div >
 &lt;/cadre > row,
.col {
  box-sizing: border-box;
}


.row {
  display: flex;
  flex-wrap: wrap;
  @include media('>phone'){
    flex-wrap: nowrap;
    flex-direction: row;
    flex-shrink: 1 ;
  }
}
.col {
  @include media('>phone'){
    flex: 1;
    padding-right: $small-spacing;
    margin-right: $small-spacing;
    &:last-of-type {
      padding-right: 0;
      margin-right: 0;
    }
  }
}
// Utilities
.col.double{
  flex: 2;
}
.row.bordered .col {
  @include media('>phone'){
    border-right: 1px solid black;
    &:last-of-type {
      border-right: 0px transparent;
    }
  }
}

Le markup attendu

<div class="typeset" itemprop="text">
     <div class="row bordered">
              <div class="col">
              </div>
              <div class="col double">
              </div>
      </div>
            <hr>
       <div class="row">
              <div class="col">
              </div>
              <div class="col">
              </div>
              <div class="col">
              </div>
        </div>
            <hr>
</div>

Sources et solutions disponibes

Spip :

Disposition avec Bootstrap : https://contrib.spip.net/Disposition-avec-Bootstrap