dbroqua/KNACSS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update 03-grilles.md

Browse source
This commit is contained in:
Raphael Goetter 2015-03-05 18:50:04 +01:00
parent 87fec4dc33
commit fd07ffb723
1 changed files with 8 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
doc/03-grilles.md
View file

@ -24,7 +24,7 @@ Pour vous faire une idée, et jouer avec les valeurs possibles, vous trouverez [
**Exemple de grille de colonnes égales :** **Exemple de grille de colonnes égales :**
![enter image description here](https://raw.githubusercontent.com/raphaelgoetter/KNACSS/master/doc/illust/03-grid-even.png) ![enter image description here](https://raw.githubusercontent.com/raphaelgoetter/KNACSS/master/doc/illust/03-grid-even.png)
**Exemple de grille de colonnes inégales (2/3 - 1/3) :** **Exemple de grille de colonnes inégales (3/4 - 1/4) :**
![enter image description here](https://raw.githubusercontent.com/raphaelgoetter/KNACSS/master/doc/illust/03-grid-uneven.png) ![enter image description here](https://raw.githubusercontent.com/raphaelgoetter/KNACSS/master/doc/illust/03-grid-uneven.png)
## Mise en oeuvre ## Mise en oeuvre
@ -36,12 +36,12 @@ Il est très simple de construire une grille, il vous suffit :
Le **conteneur** sera l'élément HTML que vous voulez (`div`, `section`, `ul`, ...). Il vous suffit simplement de le munir d'une classe selon votre choix de grille : Le **conteneur** sera l'élément HTML que vous voulez (`div`, `section`, `ul`, ...). Il vous suffit simplement de le munir d'une classe selon votre choix de grille :
- `.grid-2`, `.grid-3`, `.grid-4`, ... `.grid-12` pour les grilles de largeur égales - `.grid-2`, `.grid-3`, `.grid-4`, ... `.grid-12` pour les grilles de largeur égale
- `.grid-2-1`, `.grid-1-2`, `.grid-3-1`, ... `.grid-1-4` pour les grilles de largeur inégales (2/3 - 1/3 par exemple) - `.grid-2-1`, `.grid-1-2`, `.grid-3-1`, `.grid-1-3`, `.grid-3-2`, `.grid-2-3`, `.grid-4-1`, `.grid-1-4` pour les grilles de largeurs inégales (2/3 - 1/3 par exemple)
Par défaut, chaque colonne est séparée de sa voisine par une gouttière dont la largeur par défaut est `1em`. Pour modifier ce réglage, il sera nécessaire de passer par la version préprocesseur (LESS, Sass) de KNACSS (voir plus loin). Par défaut, chaque colonne est séparée de sa voisine par une gouttière dont la largeur par défaut est `1em`. Pour modifier ce réglage, il sera nécessaire de passer par la version préprocesseur (LESS, Sass) de KNACSS (voir plus loin).
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 et 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.
## Offsets ## Offsets
@ -49,12 +49,12 @@ Il vous est très facile de "pousser" un élément à droite ou à gauche de sa
Pour cela, appliquez simplement l'une ou l'autre de ces déclarations sur l'élément : Pour cela, appliquez simplement l'une ou l'autre de ces déclarations sur l'élément :
- `margin-left: auto` pour le pousser à droite sur sa ligne - `margin-left: auto` pour le pousser à droite sur sa ligne (ou avec la classe `.left`)
- `margin-right: auto` pour le pousser à gauche sur sa ligne - `margin-right: auto` pour le pousser à gauche sur sa ligne (ou avec la classe `.right`)
## Mise en exergue ## Mise en exergue
Il est possible de mettre un élément particulier en exergue, en doublant sa taille par rapport aux autres, tout en conservant un agencement parfait de la grille. Il est possible de mettre un élément particulier en exergue, en **doublant sa taille** par rapport aux autres, tout en conservant un agencement parfait de la grille.
Pour ce faire, appliquez la classe `.flexitem-double` à cet élément. Pour ce faire, appliquez la classe `.flexitem-double` à cet élément.
@ -113,7 +113,6 @@ CSS compilé (sans Autoprefixer) :
flex: 0 0 auto; flex: 0 0 auto;
width: 16.66666667%; width: 16.66666667%;
display: block; /* IE fix */ display: block; /* IE fix */
padding: 1em;
border-left: 10px solid transparent; border-left: 10px solid transparent;
background-clip: padding-box !important; /* no background on border */ background-clip: padding-box !important; /* no background on border */
} }
@ -143,7 +142,6 @@ section {
} }
section > * { section > * {
display: block; /* IE fix */ display: block; /* IE fix */
padding: 1em;
border-left: 15px solid transparent; border-left: 15px solid transparent;
background-clip: padding-box !important; /* no background on border */ background-clip: padding-box !important; /* no background on border */
} }
@ -158,4 +156,4 @@ section > *:nth-child(even) {
## Article associé ## Article associé
Si vous voulez comprendre dans le détail le fonctionnement des grilles Flexbox de KNACSS, je vous invite à suivre l'article d'Alsacréations ["Une grille responsive avec CSS3 Flexbox et LESS (ou Sass)"](http://www.alsacreations.com/tuto/lire/1659-une-grille-responsive-avec-flexbox-et-LESS.html). Si vous voulez comprendre dans le détail le fonctionnement des grilles Flexbox de KNACSS, je vous invite à suivre l'article d'Alsacréations ["Une grille responsive avec CSS3 Flexbox et LESS (ou Sass)"](http://www.alsacreations.com/tuto/lire/1659-une-grille-responsive-avec-flexbox-et-LESS.html).