Début de doc + modif grilles

2015-03-05 16:43:40 +01:00 · 2015-03-05 16:43:40 +01:00 · ec671ed5e6
parent 7f67b71c9c
commit ec671ed5e6
8 changed files with 49 additions and 135 deletions
--- a/bower.json
+++ b/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"
--- a/css/knacss-unminified.css
+++ b/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;
--- a/css/knacss.css
+++ b/css/knacss.css
--- a/doc/grilles.md
+++ b/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).
--- a/less/_00-config.less
+++ b/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/
 */

--- a/less/_03-grids.less
+++ b/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); }

--- a/sass/_00-config.scss
+++ b/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/
 */

--- a/sass/_03-grids.scss
+++ b/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); }