Grillade, (encore) une nouvelle grille en Flexbox

Actualitécss

Publié par le , mis à jour le (16864 lectures)

css grille framework grid template flexbox bootstrap

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.

grillade capture d'écran

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

grillade

Commentaires

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.

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. :)

Commentaires clos