diff --git a/doc/03-grilles.md b/doc/03-grilles.md index dbab87b..ec306e1 100644 --- a/doc/03-grilles.md +++ b/doc/03-grilles.md @@ -25,7 +25,7 @@ Pour vous faire une idée, et jouer avec les valeurs possibles, vous trouverez [ HTML : ```html -
/* parent div (ou autre) de 4 colonnes */ +
un div ou n'importe quoi d'autre
un 2è div ou n'importe quoi d'autre
un 3è div ou n'importe quoi d'autre
@@ -40,7 +40,7 @@ Résultat : HTML : ```html -
/* parent div (ou autre) de 3-1 colonnes */ +
un div ou n'importe quoi d'autre
un 2è div ou n'importe quoi d'autre
un 3è div ou n'importe quoi d'autre
@@ -76,6 +76,17 @@ Pour cela, appliquez simplement l'une ou l'autre de ces déclarations sur l'él - `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 (ou avec la classe `.right`) +HTML : +```html +
+
un div ou n'importe quoi d'autre
+
je suis poussé à droite
+
un 3è div ou n'importe quoi d'autre
+
etc.
+
+``` + +Résultat : ![offset](https://raw.githubusercontent.com/raphaelgoetter/KNACSS/master/doc/illust/03-offset.png) ## Mise en exergue @@ -84,6 +95,17 @@ Il est possible de mettre un élément particulier en exergue, en **doublant sa Pour ce faire, appliquez la classe `.flexitem-double` à cet élément. +HTML : +```html +
+
un div ou n'importe quoi d'autre
+
je suis deux fois plus large que mes frères
+
un 3è div ou n'importe quoi d'autre
+
etc.
+
+``` + +Résultat : ![mise en exergue](https://raw.githubusercontent.com/raphaelgoetter/KNACSS/master/doc/illust/03-double.PNG) ## Pousser au début ou à la fin @@ -93,6 +115,17 @@ Vous pouvez modifier l'ordre d'affichage des éléments au sein d'une grille à - `.flexitem-first` (l'élément apparaîtra avant tous les autres) - `.flexitem-last` (l'élément apparaîtra tout à la fin de la grille) +HTML : +```html +
+
un div ou n'importe quoi d'autre
+
je m'affiche avant tous mes frères
+
un 3è div ou n'importe quoi d'autre
+
etc.
+
+``` + +Résultat : ![preums!](https://raw.githubusercontent.com/raphaelgoetter/KNACSS/master/doc/illust/03-first.PNG) ## Plus loin avec les préprocesseurs