Carnet Wiki

Version 9 — Juillet 2018 Mist. GraphX

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

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 ne sait pas prévoir tout les contextes ou va être inséré notre contenu. Exemple 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 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>

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> 

extension class et attributs

&lt;ROW bordered >
   &lt;COL  double >
   &lt;/COL >
   &lt;COL >
   &lt;/COL >
 &lt;/ROW > 
 &lt;/cadre >  . bordered #id_bloc >
  &lt;COL .double></COL>
  <COL></COL>
</ROW> 

Yapuka

mes_options
$GLOBALS['spip_wheels']['raccourcis'][] = 'colonnes.yaml';

Fichier wheels/colonnes.yaml

--- # Syntaxe des lignes et colonnes
    #
    # Si on nomme une regle, elle devient surchargeable
col:
  # raccourcis <COL>
  match: "#^(<COL)(.*?)(?:>)(.*?)(</COL>)#ms"
  is_callback: Y
  replace: col
  if_str: '&lt;COL'
  priority: -40


row:
  # raccourcis <ROW>
  match: "#^(<ROW)(.*?)(?:>)(.*?)(</ROW>)#ms"
  is_callback: Y
  replace: row
  if_str: '<ROW'
  priority: -50

Fichier wheels/colonnes.php

&lt;?php


if (!defined('_ECRIRE_INC_VERSION')) {
	return;
}


// @see http://zone.spip.org/trac/spip-zone/browser/_plugins_/todo/trunk/wheels/todo.php


// La wheel renvoie un tableau à cette callback qui est le résultat d'un preg_match_all.
// Le contenu du tableau est le suivant :
// 0 - la chaine complète
// 1 - ouverture de la boite
// 2 - ouverture de la boite
// 3 - Contenu
// 4 - balise fermante


function row($t){
	return "<div class='row$t[2]'>$t[3]</div>" ;
}


function col($t){
	return "<div class='col$t[2]'>$t[3]</div>";
}

Fichier css/colonnes.css

.row,
.col {
  box-sizing: border-box;
}


.row {
  display: flex;
  flex-wrap: wrap;
}


.col.double {
  flex: 2;
}


@media (min-width: 481px) {
  .row {
    flex-wrap: nowrap;
    flex-direction: row;
    flex-shrink: 1;
  }


.col {
    flex: 1;
    padding-right: 0.75em;
    margin-right: 0.75em;
  }
  .col:last-of-type {
    padding-right: 0;
    margin-right: 0;
  }


.row.bordered .col {
    border-right: 1px solid black;
  }
  .row.bordered .col:last-of-type {
    border-right: 0px transparent;
  }
}

On a donc un premier jet fonctionnel de colonnes dans les contenu avec une syntaxe simple, pouvant être étendu, sans être dépendant d’un framework.

<ROW>{ .bordered #id_bloc }
  <COL>{.double}
  </COL>
  <COL></COL>
</ROW> 

Sources et solutions disponibes

Spip :

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