documentation grilles imbriquées

This commit is contained in:
raphaelgoettter 2015-07-08 09:34:56 +02:00
parent b88f32f6d0
commit 5195d626f7
3 changed files with 28 additions and 2 deletions

View file

@ -43,7 +43,7 @@ KNACSS est - dans sa grande majorité - compatible avec l'ensemble des navigateu
Seules exceptions : Seules exceptions :
- les positionnements avancés à base de Flexbox (IE10+ minimum), c'est à dire toutes les classes débutant par `.flex-` - 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! ## RTFM!

View file

@ -4,7 +4,7 @@ Il existe deux types principaux de systèmes de grilles dans KNACSS :
- Les grilles à colonnes égales - Les grilles à colonnes égales
- Les grilles à colonnes iné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`). **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. 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 ## 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". 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
</div> </div>
``` ```
## Grilles imbriquées
Il est parfaitement possible d'imbriquer une grille dans une grille (mais n'en abusez pas !). Par exemple :
HTML :
```html
<div class="grid-2-1">
<div>
<ul class="unstyled grid-3">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<aside>
2- lorem ipsum Hopla choucroute !
</aside>
</div>
```
Résultat :
![imbriquée](https://raw.githubusercontent.com/raphaelgoetter/KNACSS/master/doc/illust/imbriquee.png)
## Plus loin avec les préprocesseurs ## 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. 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.

BIN
doc/illust/imbriquee.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB