Une nouvelle grille pour KNACSS

raphael

KNACSS v6 est en préparation, pour l’instant sa sortie est prévue pour mars 2017, et de très nombreuses améliorations et modifications sont prévues (n’hésitez pas d’ailleurs à participer à ce projet sur Github).

Parmi ces nouveautés importantes, un nouveau système de grille est à l’étude.

La version beta de cette grille est d’ores et déjà visible et testable ici :
http://codepen.io/raphaelgoetter/pen/EyvbqA?editors=1100

Capture d’écran 2016-07-31 à 13.36.20

Fonctionnalités préservées par rapport à la v5 :

  • La complexité du système doit rester… simple !
  • Le positionnement demeure Flexbox (encore un peu tôt pour passer à Grid Layout) et le principe est de pouvoir rester très simple par défaut (contrairement à des grilles complexes telles que Bootstrap)
  • Possibilité de préciser le nombre de colonnes en taille d’écran « small » à l’aide du suffixe -small-X (X colonnes)
  • Possibilité d’appliquer une gouttière entre les éléments
  • Possibilité d’offsets (pull / push)
  • Possibilité de réordonner les éléments (au début / à la fin)
  • Possibilité de réaliser ses propres grilles multi-colonnes via un mixin Sass. ex. .o-grid-perso { @include grid(4, 3rem); }

Fonctionnalités nouvelles :

  • Double système de grille automatique selon le nommage choisi :
    • Mono-ligne : possibilité par défaut d’émuler l’objet « autogrid » : .grid affiche sur une ligne autant d’enfants que nécessaires (et de taille identique)
    • Multi-ligne : possibilité de passer en multi-lignes dès que l’on ajoute un suffixe numéroté (ex. .grid-2, .grid-3 … .grid-12)
  • « Mobile-first » : par défaut une grille sera disposée sur une seule colonne, et ne s’active que lorsque l’écran dépasse le breakpoint $tiny
  • Possibilité de définir individuellement la taille de chaque enfant si besoin (ex. .one-half, .one-third, .one-quarter, .two-thirds, etc.)
  • Possibilité d’inverser toute la grille grâce au suffixe --reverse

Fonctionnalités abandonnées par rapport à la v5 :

  • Suppression des grilles de largeurs inégales « uneven grids » (ex. .grid-2-1, .grid-4-1)
  • Suppression de la classe .grid-item-double devenue inutile
  • La gouttière était appliquée par défaut en v5 et ne l’est plus en v6. Elle devient à présent une fonctionnalité à activer avec une classe .has-gutter

Tous les avis et arguments sont les bienvenus (ainsi que les éventuels bugs que vous auriez pu rencontrer)