KNACSS v6 : nouveau Système de grille
raphaelgoetter opened this issue · comments
Je planche actuellement sur une grosse amélioration du système de grille de KNACSS, en vue de le pousser en v6.
Mon test se trouve ici :
http://codepen.io/raphaelgoetter/pen/EyvbqA?editors=1100
Tests : OK sur IE10, IE11, Edge, Chrome, Firefox, Safari 9
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)
Fonctionnalités préservées par rapport à la v5 :
- 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 :
- 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
)
- Mono-ligne : possibilité par défaut d'émuler l'objet "autogrid" :
- "Mobile-first" : par défaut une grille sera disposée sur une 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