KNACSS/doc/03-grilles.md

279 lines
11 KiB
Markdown
Raw Normal View History

2015-03-05 17:44:02 +01:00
# Grilles de mise en page
2015-03-05 17:40:31 +01:00
Il existe deux types principaux de systèmes de grilles dans KNACSS :
- Les grilles à colonnes égales
- Les grilles à colonnes inégales
2015-07-08 09:34:56 +02:00
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).
2015-03-05 17:40:31 +01:00
2015-07-11 09:00:44 +02:00
Quelques exemples pour vous échauffer :
- `<div class="grid-4">` : grille de 4 colonnes également réparties
- `<div class="grid-2-1">` : grille de répartition 2/3 - 1/3
- `<div class="grid-3-tiny-1">` : grille de 3 colonnes égales, puis 1 colonne sur très petit écran
- `<div class="grid-6-small-3-tiny-2">` : grille de 6 colonnes, puis 3 colonnes sur écran "small", puis 2 colonnes sur écran "tiny".
Et maintenant passons aux explications&nbsp;!
2015-07-05 17:05:45 +02:00
**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`).
2015-03-05 17:40:31 +01:00
## Précautions à prendre
Qui dit CSS3 dit précautions à prendre.
La bonne nouvelle est que Flexbox est plutôt bien reconnu par l'ensemble des navigateurs de la planète; la mauvaise est que certains anciens navigateurs (Android par exemple) ne reconnaissent que certaines versions précédentes des spécifications. Il est donc encore nécessaire d'employer toute une panoplie de préfixes CSS (`-webkit-`, `-moz-`, `-ms-`, ...) pour être certain que vos grilles fonctionneront partout.
Au sein de la version CSS de KNACSS, l'ensemble des préfixes est présent, **vous n'avez donc pas à vous en soucier**.
**Par contre, dans les versions LESS et Sass de KNACSS, les préfixes n'apparaissent pas** pour ne pas polluer la lecture du fichier de travail. **Il vous sera donc nécessaire de les ajouter**, de préférence automatiquement grâce à un plugin ou aux excellents outils que sont [autoprefixer](https://github.com/postcss/autoprefixer) ou [pleeease](http://pleeease.io/).
## Exemple concret
2015-03-30 12:03:43 +02:00
Pour vous faire une idée, et jouer avec les valeurs possibles, vous trouverez [un exemple "bac à sable"](http://codepen.io/raphaelgoetter/pen/BybOag?editors=110) sur CodePen.
2015-03-05 17:40:31 +01:00
2015-03-05 17:53:02 +01:00
**Exemple de grille de colonnes égales :**
2015-04-01 17:28:29 +02:00
HTML :
```html
2015-04-01 17:33:11 +02:00
<div class="grid-4"> <!-- parent div (ou autre) de 4 colonnes -->
2015-04-01 17:28:29 +02:00
<div>un div ou n'importe quoi d'autre</div>
<div>un 2è div ou n'importe quoi d'autre</div>
<div>un 3è div ou n'importe quoi d'autre</div>
<div>etc.</div>
</div>
```
Résultat :
![grille de largeur égale](https://raw.githubusercontent.com/raphaelgoetter/KNACSS/master/doc/illust/03-grid-even.png)
2015-03-05 17:53:02 +01:00
2015-03-05 18:50:04 +01:00
**Exemple de grille de colonnes inégales (3/4 - 1/4) :**
2015-04-01 17:28:29 +02:00
HTML :
```html
2015-04-01 17:33:11 +02:00
<div class="grid-3-1"> <!-- parent div (ou autre) de 3-1 colonnes -->
2015-04-01 17:28:29 +02:00
<div>un div ou n'importe quoi d'autre</div>
<div>un 2è div ou n'importe quoi d'autre</div>
<div>un 3è div ou n'importe quoi d'autre</div>
<div>etc.</div>
</div>
```
Résultat :
![grille de largeur inégale](https://raw.githubusercontent.com/raphaelgoetter/KNACSS/master/doc/illust/03-grid-uneven.png)
2015-03-05 17:40:31 +01:00
## Mise en oeuvre
Il est très simple de construire une grille, il vous suffit :
- D'un **conteneur**
- D'autant **d'enfants** que vous souhaitez
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 :
2015-03-05 18:50:04 +01:00
- `.grid-2`, `.grid-3`, `.grid-4`, ... `.grid-12` pour les grilles de largeur égale
2015-03-05 18:51:22 +01:00
- `.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 (`.grid-2-1` vaut pour "2/3 - 1/3" par exemple).
2015-03-05 17:40:31 +01:00
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).
2015-03-05 18:50:04 +01:00
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.
2015-03-05 17:40:31 +01:00
2015-07-08 09:34:56 +02:00
- 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).
2015-07-05 17:05:45 +02:00
## Offsets
2015-03-05 17:40:31 +01:00
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".
Pour cela, appliquez simplement l'une ou l'autre de ces déclarations sur l'élément :
2015-07-11 09:00:44 +02:00
- la classe `.right` pour le pousser à droite sur sa ligne (applique un `margin-left: auto`)
- la classe `.left` pour le pousser à gauche sur sa ligne (applique un `margin-right: auto`)
2015-03-05 17:40:31 +01:00
2015-04-01 17:33:11 +02:00
HTML :
```html
<div class="grid-4">
<div>un div ou n'importe quoi d'autre</div>
<div class="right">je suis poussé à droite</div>
<div>un 3è div ou n'importe quoi d'autre</div>
<div>etc.</div>
</div>
```
Résultat :
2015-03-06 09:59:18 +01:00
![offset](https://raw.githubusercontent.com/raphaelgoetter/KNACSS/master/doc/illust/03-offset.png)
2015-03-05 17:40:31 +01:00
## Mise en exergue
2015-03-05 18:50:04 +01:00
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.
2015-03-05 17:40:31 +01:00
2015-04-13 16:10:55 +02:00
Pour ce faire, appliquez la classe `.flex-item-double` à cet élément.
2015-03-05 17:40:31 +01:00
2015-04-01 17:33:11 +02:00
HTML :
```html
<div class="grid-4">
<div>un div ou n'importe quoi d'autre</div>
2015-04-13 16:10:55 +02:00
<div class="flex-item-double">je suis deux fois plus large que mes frères</div>
2015-04-01 17:33:11 +02:00
<div>un 3è div ou n'importe quoi d'autre</div>
<div>etc.</div>
</div>
```
Résultat :
2015-03-06 09:59:18 +01:00
![mise en exergue](https://raw.githubusercontent.com/raphaelgoetter/KNACSS/master/doc/illust/03-double.PNG)
2015-03-05 17:40:31 +01:00
## Pousser au début ou à la fin
Vous pouvez modifier l'ordre d'affichage des éléments au sein d'une grille à l'aide des classes :
2015-07-05 17:05:45 +02:00
- `.flex-item-first` (l'élément apparaîtra avant tous les autres)
2015-04-13 16:10:55 +02:00
- `.flex-item-last` (l'élément apparaîtra tout à la fin de la grille)
2015-03-05 17:40:31 +01:00
2015-04-01 17:33:11 +02:00
HTML :
```html
<div class="grid-4">
<div>un div ou n'importe quoi d'autre</div>
2015-04-13 16:10:55 +02:00
<div class="flex-item-first">je m'affiche avant tous mes frères</div>
2015-04-01 17:33:11 +02:00
<div>un 3è div ou n'importe quoi d'autre</div>
<div>etc.</div>
</div>
```
Résultat :
2015-03-06 09:59:18 +01:00
![preums!](https://raw.githubusercontent.com/raphaelgoetter/KNACSS/master/doc/illust/03-first.PNG)
2015-07-05 17:05:45 +02:00
## Grilles responsive
Vous pouvez définir le nombre de colonnes selon les tailles d'écran à l'aide des mots-clés suivants :
- `-small-*` : définit le nombre de colonnes lorsque le point de rupture atteint la valeur de la variable `small-screen`
- `-tiny-*` : définit le nombre de colonnes lorsque le point de rupture atteint la valeur de la variable `tiny-screen`
La grille ci-dessous s'affichera en 4 colonnes sur grand écran, puis en 2 colonnes sur un écran réduit, puis en une seule colonne sur petit écran :
```html
<div class="grid-4-small-2-tiny-1">
<div>un div ou n'importe quoi d'autre</div>
<div>un 2è div ou n'importe quoi d'autre</div>
<div>un 3è div ou n'importe quoi d'autre</div>
<div>etc.</div>
</div>
```
2015-07-08 09:34:56 +02:00
## 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)
2015-03-05 17:40:31 +01:00
## 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.
### Modifier les variables globales
Les variables de configuration des grilles se trouvent dans le fichier `less/_00-config.less` (pour les utilisateurs de LESS) et `sass/_00-config.scss` (en version Sass) :
```css
@gutter: 1em;
@number: 4; // for equal columns
@left: 2; // left side of uneven columns
@right: 1; // right side of uneven columns
```
Il vous suffit de modifier les valeurs de ces variables de config pour répercuter vos préférences sur l'ensemble du projet dès que vos fichiers LESS/Sass seront compilés en CSS.
### Générer des grilles personnalisées
2015-07-05 17:05:45 +02:00
Indépendamment des variables de configuration, rien de vous empêche de créer une grille personnalisée en incluant directement l'un des deux mixins possibles dans vos éléments :
2015-03-05 17:40:31 +01:00
2015-03-06 09:59:18 +01:00
- `.grid(n)` pour personnaliser une grille de colonnes **égales**. Les arguments sont "n" = nombre de colonnes
- `.uneven-grid(l,r)` pour personnaliser une grille de colonnes **inégales**. Les arguments sont "l" = pour le ratio de la colonne de gauche, "r" = pour le ratio de la colonne de droite
2015-03-05 17:40:31 +01:00
#### Grille de colonnes égales en LESS
2015-08-05 10:03:12 +02:00
**Objectif : je souhaite créer un mixin sur mon élément `.grid-container` afin que celui-ci crée une grille de 6 colonnes égales**
2015-03-05 17:40:31 +01:00
LESS (fichier de développement) :
```css
2015-07-05 17:05:45 +02:00
.grid-container {
.grid(6);
2015-03-05 17:40:31 +01:00
}
```
2015-08-05 10:05:02 +02:00
**Important : il est nécessaire que le nom de votre classe globale contienne la chaîne `grid-` pour que le mixin fonctionne (ex. `grid-container`, `grid-box`, `grid-truc4`, etc.)**
2015-08-05 10:03:12 +02:00
2015-03-05 17:40:31 +01:00
CSS compilé (sans Autoprefixer) :
```css
.grid-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
2015-03-06 09:59:18 +01:00
margin-left: -1em;
2015-03-05 17:40:31 +01:00
}
.grid-container > * {
flex: 0 0 auto;
width: 16.66666667%;
display: block; /* IE fix */
2015-03-06 09:59:18 +01:00
border-left: 1em solid transparent;
background-clip: padding-box !important; /* no background on border */
2015-03-05 17:40:31 +01:00
}
...
```
#### Grille de colonnes inégales en LESS
2015-03-06 09:59:18 +01:00
**Objectif : je souhaite que mon élément `.grid-truc` crée une grille de 2 colonnes réparties en 2/3 et 1/3.**
2015-03-05 17:40:31 +01:00
LESS (fichier de développement) :
```css
2015-07-05 17:05:45 +02:00
.grid-truc {
2015-03-06 09:59:18 +01:00
.uneven-grid(2, 1);
2015-03-05 17:40:31 +01:00
}
```
2015-08-05 10:05:02 +02:00
**Important : il est nécessaire que le nom de votre classe globale contienne la chaîne `grid-` pour que le mixin fonctionne (ex. `grid-container`, `grid-box`, `grid-truc4`, etc.)**
2015-08-05 10:03:12 +02:00
2015-03-05 17:40:31 +01:00
CSS compilé (sans Autoprefixer) :
```css
.grid-truc {
2015-03-05 17:40:31 +01:00
display: flex;
flex-direction: row;
flex-wrap: wrap;
2015-03-06 09:59:18 +01:00
margin-left: -1em;
2015-03-05 17:40:31 +01:00
}
.grid-truc > * {
2015-03-05 17:40:31 +01:00
display: block; /* IE fix */
2015-03-06 09:59:18 +01:00
border-left: 1em solid transparent;
2015-03-05 17:40:31 +01:00
background-clip: padding-box !important; /* no background on border */
}
.grid-truc > *:nth-child(odd) {
2015-03-05 17:40:31 +01:00
width: 66.66666667%;
}
.grid-truc > *:nth-child(even) {
2015-03-05 17:40:31 +01:00
width: 33.33333333%;
}
...
```
## Article associé
2015-03-05 18:50:04 +01:00
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).