diff --git a/README.md b/README.md index f01f4ff..7bc862a 100644 --- a/README.md +++ b/README.md @@ -43,7 +43,7 @@ KNACSS est - dans sa grande majorité - compatible avec l'ensemble des navigateu Seules exceptions : - les positionnements avancés à base de Flexbox (IE10+ minimum), c'est à dire toutes les classes débutant par `.flex-` -- les grilles de mise en page, également basées sur flexbox (IE10, Android 4.4+), c'est à dire toutes les classes débutant par `.grid-` +- les grilles de mise en page, également basées sur flexbox (IE10, Android 4.4+), c'est à dire toutes les classes débutant par `.grid-`. Note : une alternative, basée sur `inline-block` est cependant proposée automatiquement pour les anciens navigateurs (IE8, Android 2). ## RTFM! diff --git a/doc/03-grilles.md b/doc/03-grilles.md index 3d463a9..fa0817b 100644 --- a/doc/03-grilles.md +++ b/doc/03-grilles.md @@ -4,7 +4,7 @@ Il existe deux types principaux de systèmes de grilles dans KNACSS : - Les grilles à colonnes égales - Les grilles à colonnes inégales -Dans les deux cas, la technique associée depuis KNACSS v4 pour concevoir les grilles est **CSS3 Flexbox**, ce qui signifie que la compatibilité de **cette fonctionnalité sera réservée aux [navigateurs modernes](http://caniuse.com/#search=flexbox)** (IE10, Android 4.4+ et tous les autres). +Dans les deux cas, la technique associée depuis KNACSS v4 pour concevoir les grilles est **CSS3 Flexbox**, ce qui signifie que la compatibilité de **cette fonctionnalité sera réservée aux [navigateurs modernes](http://caniuse.com/#search=flexbox)** (IE10, Android 4.4+ et tous les autres). Note : une alternative, basée sur `inline-block` est cependant proposée automatiquement pour les anciens navigateurs (IE8, Android 2). **NOTE pour les utilisateurs de LESS / Sass :** par défaut, les grilles sont activées dans KNACSS. Si vous avez le moindre souci, vérifiez que `@import "_03-grids";` est présent et non commenté dans votre fichier `less/knacss.less` ou `sass/knacss.scss`). @@ -67,6 +67,9 @@ Par défaut, chaque colonne est séparée de sa voisine par une gouttière dont Les **enfants** directs d'un conteneur, quels qu'ils soient, se répartissent automatiquement au sein de la grille formée par leur conteneur. Par exemple, 6 enfants contenus dans un parent de classe `.grid-3` se répartiront en 3 colonnes de 2 lignes. +- Tester une [grille simple en ligne](http://codepen.io/raphaelgoetter/pen/GAenb?editors=110) (Codepen). +- Tester une [grille de largeur inégale en ligne](http://codepen.io/raphaelgoetter/pen/jmAkx?editors=110) (Codepen). + ## Offsets Il vous est très facile de "pousser" un élément à droite ou à gauche de sa ligne dans la grille, et créer ainsi un espacement volontaire, ce que l'on appelle "offset". @@ -145,6 +148,29 @@ La grille ci-dessous s'affichera en 4 colonnes sur grand écran, puis en 2 colon ``` +## Grilles imbriquées + +Il est parfaitement possible d'imbriquer une grille dans une grille (mais n'en abusez pas !). Par exemple : + +HTML : +```html +
+
+ +
+ +
+``` + +Résultat : +![imbriquée](https://raw.githubusercontent.com/raphaelgoetter/KNACSS/master/doc/illust/imbriquee.png) + ## Plus loin avec les préprocesseurs KNACSS est pensé pour être utilisé à l'aide de preprocesseurs tels que LESS ou Sass. Il existe par conséquent un fichier de variables de configuration et des mixins prévus pour étendre les possibilités des grilles notamment. diff --git a/doc/illust/imbriquee.png b/doc/illust/imbriquee.png new file mode 100644 index 0000000..cc76705 Binary files /dev/null and b/doc/illust/imbriquee.png differ