Globox : une grille SCSS sur mesure

Développement d’une grille de mise en page nouvelle génération


Globox est notre nouvel environnement de développement front-end. Comme décrit dans le précédent article, il incorpore une grille SCSS conçue spécifiquement pour se passer des mastodontes comme Bootstrap.

Mais pourquoi recréer une grille ? Pour le poids des frameworks qui les incorporent. Et même s’il en existe qui fonctionnent indépendamment d’une librairie d’interface, elles sont souvent calquées sur le modèle de Bootstrap. C’était l’occasion de revoir le tableau et de proposer une solution plus flexible pour nos besoins.

Le standard en 12 colonnes est celui qui a été le plus adopté car 12 est divisible par 2, 3, 4, et 6, ce qui étend suffisamment le choix de mise en page. Cependant, les contraintes auxquelles répondaient ce modèle sont aujourd’hui dépassées grâce aux préprocesseurs. Il n’est plus nécessaire de prévoir toutes les subdivisions possibles sous forme de classes prêtes à l’emploi. Malgré cela, l’inertie rend l’usage des 12 colonnes persistant et les alternatives viables sont rares.

globox-12-grid

Modèle de grille basé sur 12 colonnes.

Avec la grille Globox, nous avons voulu économiser le namespace en supprimant les classes pré-écrites, et en utilisant les mixins et functions de SCSS, c’est à dire des bouts de codes compilés que s’ils sont utilisés, et qui permettent de restaurer la logique du découpage côté CSS et ainsi éviter la surcharge du DOM (qui réduit la lisibilité des templates). Un exemple de DOM côté Bootstrap :

<div class="Recents">
   <div class="row">
       <div class="col-sm-6 col-md-4 col-lg-3">
           <div class=”Recents-item”>…</div>
       </div>
       <div class="col-sm-6 col-md-4 col-lg-3">
           <div class=”Recents-item”>…</div>
       </div>
       …
   </div>
</div>

Et un exemple de DOM, plus explicite, côté Globox :

<div class="Recents">
   <div class="Recents-wrap">
       <div class="Recents-item">…</div>
       <div class="Recents-item">…</div>
       …
   </div>
</div>

avec un contrôle des dimensions définit côté SCSS :


.Recents {
   @include set-gutter($unit); // gutter definition
 
   &-wrap {
       @include row((sm: 2, md: 3, lg: 4)); // columns definition
   }
 
   &-item {
       // position automatically, nothing to add!
   }
}

La différence majeure est la définition des colonnes. Plutôt que de calculer le nombre d’unités qu’un élément enfant va prendre sur une grille de 12, on définit directement dans le parent le nombre de divisions qu’il aura. Ainsi, si on veut diviser un bloc en 4 colonnes, on écrit une seule fois (sm: 4) et non plus 4 fois col-sm-4. Les éléments enfants n’ont ainsi plus besoin de classe par défaut, plutôt que d’avoir une classe pour chaque breakpoint (palier de taille d’écran). Les cas spécifiques, comme les éléments qui s’étalent sur deux colonnes, ou les “sauts” de colonnes sont également gérés côté SCSS. On peut aussi définir une taille de gouttière différente à chaque appel de la grille. Enfin, un énorme avantage est qu’on n’est pas contraint par les multiples de 12, on peut naturellement répartir des éléments sur 5 ou 7 colonnes, et aller bien au-delà de 12 pour des cas très spécifiques. Le tout, sans chargement de CSS supplémentaire ! Seules les propriétés utilisées sont compilées.

Le bonus de notre grille, est qu’elle reprend la syntaxe de définition des breakpoints de Bootstrap. La transition vers Globox est alors simplifiée pour les développeurs.

globox-breakpoints

Déclarations responsive CSS.

Ainsi notre approche permet une meilleure utilisation des grilles de mise en page en tant qu’outil de développement, de part son nombre libre de colonnes, ses gouttières personnalisables, sa logique appliquée directement dans le style, et son empreinte faible par le découpage en helpers SCSS.

Le site d’Unicorp, par exemple, utilise abondamment ces grilles : www.unicorp.fr.
Voir le code source : github.com/…/globox/_grid.scss.
Documentation : globalis-ms.github.io/globox.

Publié le par Nicolas Torres

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *