Réflexions sur un sytème de colonnes pour les contenus éditoriaux.
Proposer au rédacteur-trice, 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.

Exemple de syntaxe

<ROW>
  <COL></COL>
  <COL></COL>
</ROW> 

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

Faut il 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

On D’expérience , on ne sait pas prévoir tout les contextes ou va être inséré notre contenu. Exemple 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 quel que’l type d’utilisateur saura le gérer ?

CSS et markup

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

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

Micro grid test :

.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: ;
      margin-right: ;
    }
  }
}
// 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