Dans la jungle (de plus en plus dense) des systèmes de grilles de mise en forme basés sur CSS3 Flexbox, un nouveau venu est en train de poindre le bout de son nez : Grillade.
Comme son nom le laisse vaguement comprendre, Grillade est un outil de grille CSS, c'est à dire une méthode pour aligner et disposer très rapidement des éléments HTML au sein d'un gabarit de page web. Si le concept vous est étranger, je vous invite à relire cet excellent article de Simon sur les Grilles de mise en page.
Né avec le micro-framework KNACSS, développé chez Alsacréations, Grillade s'émancipe et devient utilisable de manière autonome sans aucune dépendance.
Il est important de préciser que l'outil est actuellement en version beta, sujet à améliorations, et qu'il est prévu de l'intégrer à KNACSS v6, dès qu'il aura été suffisamment éprouvé.
L'objectif avoué de Grillade est de demeurer le plus léger possible (8 Ko, assez loin des grilles complexes de frameworks que l'on ne nommera pas)… tout en proposant l'ensemble des fonctionnalités attendues d'une grille, voire plus :
- responsive webdesign,
- possibilité de préciser le nombre de colonnes,
- modifier la taille de gouttière,
- appliquer des offsets (pull, push),
- réordonner les éléments voire inverser toute la grille,
- dimensionner individuellement chaque enfant,
- réaliser ses propres grilles à l'aide de mixins Sass.
N'hésitez pas à le tester, à le pousser dans ses derniers retranchements et à nous faire tous les retours et critiques constructives pour améliorer cet outil, en commentaire de cette actualité par exemple.
Le lien officiel et la documentation : https://www.knacss.com/#grillade
Le bac à sable sur CodePen : http://codepen.io/raphaelgoetter/pen/EyvbqA?editors=1100
Commentaires
Salut :-)
Juste pour dire Merci...
(Vivement demain, barbecue au programme ;-)
C'est une grille quoi... ^^
Merci pour cet article ^^
@erwan21a : bien vu, on a essayé de le cacher mais tu l'as démasqué :)
Bonjour
J'aimerai bien tester mais il y a un truc que je ne comprends pas trop :
- Dans ce post : "Il est important de préciser que l'outil est actuellement en version beta, sujet à améliorations, et qu'il est prévu de l'intégrer à KNACSS v6..."
- Dans le site http://knacss.com/grillade/ : "Grillade&... est un système de grille simple et élaboré avec CSS3 Flexbox. Il est intégré par défaut dans le micro-framework KNACSS d'Alsacréations..."
- Et http://knacss.com/ --> version 5.0
Donc doit-on le tester tout seul ou peut on (doit-on) utiliser Knacss + grillade ensemble ?
Merci
@cilou : Salut à toi :-)
Je crois que l'auteur de l'article avait anticipé ta question :-)
(2ème paragraphe
"...Né avec le micro-framework KNACSS, développé chez Alsacréations, Grillade s'émancipe et devient utilisable de manière autonome sans aucune dépendance..."
;-)
Merci Ethos, l'ayant lu aussi, ma question était stupide... je la reformule : peut t'on utiliser grillade avec la v5 de knacss ? merci
@cilou : le v5 de KNACSS embarque déjà son système de grille (l'ancêtre de Grillade, en moins évolué).
Si tu y ajoutes Grillade, tu risques d'avoir des collisions dans les noms de classes. Il vaudrait mieux désactiver l'ancienne grille en commentant de @import dans le fichier .scss de KNACSS v5.
Merci et félicitations, cela me semble très utile, je vais l'essayer rapidement.
Top! Un petit détail : sur IE 10 et 11 flex-basis a besoin d'une unité quand on le déclare avec la propriété flex, voir https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored
On voit le soucis en ouvrant le codepen sur un de ces navigateurs. Du coup en mettant "flex: 1 1 0%;" sur les enfants de l'élément grid ça passe mieux. :)
@Maelig : bien vu, ... et résolu ;)