From 7730903714ced877e413ea75f27d5560f73751d6 Mon Sep 17 00:00:00 2001 From: Raphael Goetter Date: Sat, 11 Jul 2015 09:00:44 +0200 Subject: [PATCH] =?UTF-8?q?am=C3=A9lioration=20doc=20grilles?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- doc/03-grilles.md | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/doc/03-grilles.md b/doc/03-grilles.md index fa0817b..8855aa1 100644 --- a/doc/03-grilles.md +++ b/doc/03-grilles.md @@ -6,6 +6,14 @@ Il existe deux types principaux de systèmes de grilles dans KNACSS : 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). +Quelques exemples pour vous échauffer : +- `
` : grille de 4 colonnes également réparties +- `
` : grille de répartition 2/3 - 1/3 +- `
` : grille de 3 colonnes égales, puis 1 colonne sur très petit écran +- `
` : grille de 6 colonnes, puis 3 colonnes sur écran "small", puis 2 colonnes sur écran "tiny". + +Et maintenant passons aux explications ! + **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`). ## Précautions à prendre @@ -76,8 +84,8 @@ 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 : -- `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`) +- 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`) HTML : ```html