Grillade, (encore) une nouvelle grille en Flexbox

Actualité par (Intégrateur du Dimanche, Strasbourg)
Créé le , mis à jour le (9028 lectures)
Tags : 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 : http://grillade.knacss.com

Le bac à sable sur CodePen : http://codepen.io/raphaelgoetter/pen/EyvbqA?editors=1100

grillade

Commentaires

Ethos a dit le

Salut :-)

Juste pour dire Merci...
(Vivement demain, barbecue au programme ;-)

erwan21a a dit le

C'est une grille quoi... ^^

John973 a dit le

Merci pour cet article ^^

Raphael a dit le

@erwan21a : bien vu, on a essayé de le cacher mais tu l'as démasqué :)

cilou a dit le

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

Ethos a dit le

@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..."

;-)

cilou a dit le

Merci Ethos, l'ayant lu aussi, ma question était stupide... je la reformule : peut t'on utiliser grillade avec la v5 de knacss ? merci

Raphael a dit le

@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.

MeMeN a dit le

Merci et félicitations, cela me semble très utile, je vais l'essayer rapidement.

Maelig a dit le

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

Raphael a dit le

@Maelig : bien vu, ... et résolu ;)

Commenter

Vous devez être inscrit et identifié pour utiliser cette fonction.

Vous identifier (déjà inscrit)

Nouvel inscrit

Être inscrit sur Alsacréations vous permet de :

  • participer à la communauté
  • intervenir sur les actualités
  • créer des sujets sur le forum et y répondre
  • participer aux concours
  • vous inscrire à des événements tels que la KiwiParty
  • publier votre profil

Indiquez un e-mail valide pour recevoir votre mot de passe :

Votre adresse e-mail restera strictement confidentielle, ne sera ni divulguée à un tiers ni spammée.

Annonces par e-mail

Souhaitez-vous recevoir les newsletters officielles par e-mail ?   Fréquence d'envoi : tous les 3 à 6 mois, annulation possible à tout moment

En vous inscrivant, vous confirmez accepter les règles d'utilisation.

Retour à l'accueil