Carnet Wiki

Version 10 — il y a 1 semaine 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 :

  1. .row,
  2. .col {
  3.   box-sizing: border-box;
  4. }
  5.  
  6.  
  7. .row {
  8.   display: flex;
  9.   flex-wrap: wrap;
  10.   @include media('>phone'){
  11.     flex-wrap: nowrap;
  12.     flex-direction: row;
  13.     flex-shrink: 1 ;
  14.   }
  15. }
  16. .col {
  17.   @include media('>phone'){
  18.     flex: 1;
  19.     padding-right: $small-spacing;
  20.     margin-right: $small-spacing;
  21.     &:last-of-type {
  22.       padding-right: ;
  23.       margin-right: ;
  24.     }
  25.   }
  26. }
  27. // Utilities
  28. .col.double{
  29.   flex: 2;
  30. }
  31. .row.bordered .col {
  32.   @include media('>phone'){
  33.     border-right: 1px solid black;
  34.     &:last-of-type {
  35.       border-right: 0px transparent;
  36.     }
  37.   }
  38. }

Télécharger

Le markup attendu

  1. <div class="typeset" itemprop="text">
  2.      <div class="row bordered">
  3.               <div class="col">
  4.               </div>
  5.               <div class="col double">
  6.               </div>
  7.       </div>
  8.             <hr>
  9.        <div class="row">
  10.               <div class="col">
  11.               </div>
  12.               <div class="col">
  13.               </div>
  14.               <div class="col">
  15.               </div>
  16.         </div>
  17.             <hr>
  18. </div>

Télécharger

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

  1. <ROW>
  2.   <COL></COL>
  3.   <COL></COL>
  4. </ROW>

Télécharger

extension class et attributs

  1. <ROW bordered>
  2.   <COL double>
  3.   </COL>
  4.   <COL>
  5.   </COL>
  6. </ROW>

Télécharger

Yapuka

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

Fichier wheels/colonnes.yaml

  1. --- # Syntaxe des lignes et colonnes
  2.     #
  3.     # Si on nomme une regle, elle devient surchargeable
  4. col:
  5.  # raccourcis <COL>
  6.   match: "#^(<COL)(.*?)(?:>)(.*?)(</COL>)#ms"
  7.   is_callback: Y
  8.   replace: col
  9.   if_str: '<COL'
  10.   priority: -40
  11.  
  12.  
  13. row:
  14.  # raccourcis <ROW>
  15.   match: "#^(<ROW)(.*?)(?:>)(.*?)(</ROW>)#ms"
  16.   is_callback: Y
  17.   replace: row
  18.   if_str: '<ROW'
  19.   priority: -50

Télécharger

Fichier wheels/colonnes.php

  1. &lt;?php
  2.  
  3.  
  4. if (!defined('_ECRIRE_INC_VERSION')) {
  5.         return;
  6. }
  7.  
  8.  
  9. // @see http://zone.spip.org/trac/spip-zone/browser/_plugins_/todo/trunk/wheels/todo.php
  10.  
  11.  
  12. // La wheel renvoie un tableau à cette callback qui est le résultat d'un preg_match_all.
  13. // Le contenu du tableau est le suivant :
  14. //  - la chaine complète
  15. // 1 - ouverture de la boite
  16. // 2 - class ouverture de la boite
  17. // 3 - Contenu
  18. // 4 - balise fermante
  19.  
  20.  
  21. function row($t){
  22.         return "<div class='row$t[2]'>$t[3]</div>" ;
  23. }
  24.  
  25.  
  26. function col($t){
  27.         return "<div class='col$t[2]'>$t[3]</div>";
  28. }

Télécharger

Fichier css/colonnes.css

  1. .row,
  2. .col {
  3.   box-sizing: border-box;
  4. }
  5.  
  6.  
  7. .row {
  8.   display: flex;
  9.   flex-wrap: wrap;
  10. }
  11.  
  12.  
  13. .col.double {
  14.   flex: 2;
  15. }
  16.  
  17.  
  18. @media (min-width: 481px) {
  19.   .row {
  20.     flex-wrap: nowrap;
  21.     flex-direction: row;
  22.     flex-shrink: 1;
  23.   }
  24.  
  25.  
  26. .col {
  27.     flex: 1;
  28.     padding-right: .75em;
  29.     margin-right: .75em;
  30.   }
  31.   .col:last-of-type {
  32.     padding-right: ;
  33.     margin-right: ;
  34.   }
  35.  
  36.  
  37. .row.bordered .col {
  38.     border-right: 1px solid black;
  39.   }
  40.   .row.bordered .col:last-of-type {
  41.     border-right: 0px transparent;
  42.   }
  43. }

Télécharger

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.

Sources et solutions disponibes

Spip :

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