From 5195d626f7bd33f0a1aaf422bee9313eba090662 Mon Sep 17 00:00:00 2001 From: raphaelgoettter Date: Wed, 8 Jul 2015 09:34:56 +0200 Subject: [PATCH] =?UTF-8?q?documentation=20grilles=20imbriqu=C3=A9es?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 +- doc/03-grilles.md | 28 +++++++++++++++++++++++++++- doc/illust/imbriquee.png | Bin 0 -> 4539 bytes 3 files changed, 28 insertions(+), 2 deletions(-) create mode 100644 doc/illust/imbriquee.png diff --git a/README.md b/README.md index f01f4ff..7bc862a 100644 --- a/README.md +++ b/README.md @@ -43,7 +43,7 @@ KNACSS est - dans sa grande majorité - compatible avec l'ensemble des navigateu Seules exceptions : - 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! diff --git a/doc/03-grilles.md b/doc/03-grilles.md index 3d463a9..fa0817b 100644 --- a/doc/03-grilles.md +++ b/doc/03-grilles.md @@ -4,7 +4,7 @@ Il existe deux types principaux de systèmes de grilles dans KNACSS : - Les grilles à colonnes é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`). @@ -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. +- 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 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 ``` +## Grilles imbriquées + +Il est parfaitement possible d'imbriquer une grille dans une grille (mais n'en abusez pas !). Par exemple : + +HTML : +```html +
+
+
    +
  • 1
    • +
  • 2
    • +
  • 3
    • +
+
+ +
+``` + +Résultat : +![imbriquée](https://raw.githubusercontent.com/raphaelgoetter/KNACSS/master/doc/illust/imbriquee.png) + ## 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. diff --git a/doc/illust/imbriquee.png b/doc/illust/imbriquee.png new file mode 100644 index 0000000000000000000000000000000000000000..cc76705ea2ad718c21fd9456fae899a016b8e3d0 GIT binary patch literal 4539 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