Début de doc + modif grilles

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "KNACSS",
-  "version": "4.0.0",
+  "version": "4.0.2",
   "homepage": "http://www.knacss.com/",
   "authors": [
     "Raphaël GOETTER, Alsacreations"

css/knacss-unminified.css

@@ -1,5 +1,5 @@
 /*!
-* www.KNACSS.com V4.0.0 BETA (2015-03-05) @author: Raphael Goetter, Alsacreations
+* www.KNACSS.com V4.0.2 BETA (2015-03-05) @author: Raphael Goetter, Alsacreations
 * Licence WTFPL http://www.wtfpl.net/
 */
 /* ----------------------------- */
@@ -399,12 +399,6 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
 .grid-2 > .flexitem-double {
   width: 100%;
 }
-.grid-2 > .flexitem-first {
-  -webkit-box-ordinal-group: 0;
-  -webkit-order: -1;
-      -ms-flex-order: -1;
-          order: -1;
-}
 @media (min-width: 769px) and (max-width: 1024px) {
   .grid-2 > * {
     width: 33.3333%;
@@ -460,12 +454,6 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
 .grid-3 > .flexitem-double {
   width: 66.66666667%;
 }
-.grid-3 > .flexitem-first {
-  -webkit-box-ordinal-group: 0;
-  -webkit-order: -1;
-      -ms-flex-order: -1;
-          order: -1;
-}
 @media (min-width: 769px) and (max-width: 1024px) {
   .grid-3 > * {
     width: 33.3333%;
@@ -521,12 +509,6 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
 .grid-4 > .flexitem-double {
   width: 50%;
 }
-.grid-4 > .flexitem-first {
-  -webkit-box-ordinal-group: 0;
-  -webkit-order: -1;
-      -ms-flex-order: -1;
-          order: -1;
-}
 @media (min-width: 769px) and (max-width: 1024px) {
   .grid-4 > * {
     width: 33.3333%;
@@ -582,12 +564,6 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
 .grid-5 > .flexitem-double {
   width: 40%;
 }
-.grid-5 > .flexitem-first {
-  -webkit-box-ordinal-group: 0;
-  -webkit-order: -1;
-      -ms-flex-order: -1;
-          order: -1;
-}
 @media (min-width: 769px) and (max-width: 1024px) {
   .grid-5 > * {
     width: 33.3333%;
@@ -643,12 +619,6 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
 .grid-6 > .flexitem-double {
   width: 33.33333333%;
 }
-.grid-6 > .flexitem-first {
-  -webkit-box-ordinal-group: 0;
-  -webkit-order: -1;
-      -ms-flex-order: -1;
-          order: -1;
-}
 @media (min-width: 769px) and (max-width: 1024px) {
   .grid-6 > * {
     width: 33.3333%;
@@ -704,12 +674,6 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
 .grid-7 > .flexitem-double {
   width: 28.57142857%;
 }
-.grid-7 > .flexitem-first {
-  -webkit-box-ordinal-group: 0;
-  -webkit-order: -1;
-      -ms-flex-order: -1;
-          order: -1;
-}
 @media (min-width: 769px) and (max-width: 1024px) {
   .grid-7 > * {
     width: 33.3333%;
@@ -765,12 +729,6 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
 .grid-8 > .flexitem-double {
   width: 25%;
 }
-.grid-8 > .flexitem-first {
-  -webkit-box-ordinal-group: 0;
-  -webkit-order: -1;
-      -ms-flex-order: -1;
-          order: -1;
-}
 @media (min-width: 769px) and (max-width: 1024px) {
   .grid-8 > * {
     width: 33.3333%;
@@ -826,12 +784,6 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
 .grid-10 > .flexitem-double {
   width: 20%;
 }
-.grid-10 > .flexitem-first {
-  -webkit-box-ordinal-group: 0;
-  -webkit-order: -1;
-      -ms-flex-order: -1;
-          order: -1;
-}
 @media (min-width: 769px) and (max-width: 1024px) {
   .grid-10 > * {
     width: 33.3333%;
@@ -887,12 +839,6 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
 .grid-12 > .flexitem-double {
   width: 16.66666667%;
 }
-.grid-12 > .flexitem-first {
-  -webkit-box-ordinal-group: 0;
-  -webkit-order: -1;
-      -ms-flex-order: -1;
-          order: -1;
-}
 @media (min-width: 769px) and (max-width: 1024px) {
   .grid-12 > * {
     width: 33.3333%;
@@ -917,67 +863,6 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
     width: 100%;
   }
 }
-.grid-16 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-  -webkit-flex-direction: row;
-      -ms-flex-direction: row;
-          flex-direction: row;
-  -webkit-flex-wrap: wrap;
-      -ms-flex-wrap: wrap;
-          flex-wrap: wrap;
-  margin-left: -1em;
-}
-.grid-16 > * {
-  /* grid child can be any element */
-  -webkit-box-flex: 0;
-  -webkit-flex: 0 0 auto;
-      -ms-flex: 0 0 auto;
-          flex: 0 0 auto;
-  width: 6.25%;
-  display: block;
-  /* IE fix */
-  border-left: 1em solid transparent;
-  background-clip: padding-box !important;
-  /* no background on border */
-}
-.grid-16 > .flexitem-double {
-  width: 12.5%;
-}
-.grid-16 > .flexitem-first {
-  -webkit-box-ordinal-group: 0;
-  -webkit-order: -1;
-      -ms-flex-order: -1;
-          order: -1;
-}
-@media (min-width: 769px) and (max-width: 1024px) {
-  .grid-16 > * {
-    width: 33.3333%;
-  }
-  .grid-16 > .flexitem-double {
-    width: 66.6666%;
-  }
-}
-@media (min-width: 481px) and (max-width: 768px) {
-  .grid-16 > * {
-    width: 50%;
-  }
-  .grid-16 > .flexitem-double {
-    width: 100%;
-  }
-}
-@media (max-width: 480px) {
-  .grid-16 > * {
-    width: 100%;
-  }
-  .grid-16 > .flexitem-double {
-    width: 100%;
-  }
-}
 /* Examples : will be compiled in CSS */
 .grid-2-1 {
   display: -webkit-box;

doc/grilles.md

@@ -0,0 +1,43 @@
+# les grilles de mise en page
+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 et tous les autres, soit environ 95% du marché en France en 2015).
+
+## Précautions
+
+préfixes (autoprefixer, pleeease)
+
+## 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 :
+
+- `.grid-2`, `.grid-3`, `.grid-4`, ... `.grid-12` pour les grilles de largeur égales
+- `.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)
+
+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.
+
+## Offsets 
+
+margin-left ou margin-right
+
+## À la une
+
+".flexitem-double"
+
+## Pousser au début ou à la fin
+
+".flexitem-first" and ".flexitem-last"
+
+## Pour aller plus loin
+
+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).

less/_00-config.less

@@ -1,5 +1,5 @@
 /*!
-* www.KNACSS.com V4.0.0 BETA (2015-03-05) @author: Raphael Goetter, Alsacreations
+* www.KNACSS.com V4.0.2 BETA (2015-03-05) @author: Raphael Goetter, Alsacreations
 * Licence WTFPL http://www.wtfpl.net/
 */
 

less/_03-grids.less

@@ -36,9 +36,6 @@
 	& > .flexitem-double {
 		width: (2/@number * 100) + 0%;
 	}
-	& > .flexitem-first {
-		order: -1;
-	}
 	@media (min-width: (@small-screen + 1)) and (max-width: @medium-screen) {
 		& > * {
 			width: 33.3333%;
@@ -103,10 +100,6 @@
 	.grid(12);
 }
 
-.grid-16 {
-	.grid(16);
-}
-
 // LESS mixins for *unequal* columns grid container
 // example : .grid-container { .uneven-grid(2, 1, 10px); }
 

sass/_00-config.scss

@@ -1,5 +1,5 @@
 /*!
-* www.KNACSS.com V4.0.0 BETA (2015-03-05) @author: Raphael Goetter, Alsacreations
+* www.KNACSS.com V4.0.2 BETA (2015-03-05) @author: Raphael Goetter, Alsacreations
 * Licence WTFPL http://www.wtfpl.net/
 */
 

sass/_03-grids.scss

@@ -37,9 +37,6 @@
 	& > .flexitem-double {
 		width: (2/$number * 100) + 0%;
 	}
-	& > .flexitem-first {
-		order: -1;
-	}
 	@media (min-width: ($small-screen + 1)) and (max-width: $medium-screen) {
 		& > * {
 				width: 33.3333%;
@@ -104,10 +101,6 @@
 	@include grid(12);
 }
 
-.grid-16 {
-	@include grid(16);
-}
-
 // LESS mixins for *unequal* columns grid container
 // example : .grid-container { @include uneven-grid(2, 1, 10px); }