modifs flexbox

css/knacss-unminified.css

@@ -320,60 +320,51 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
 */
 .flexbox,
 .flexbox-h {
-  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   -webkit-flex-wrap: wrap;
       -ms-flex-wrap: wrap;
           flex-wrap: wrap;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
   -webkit-flex-direction: row;
       -ms-flex-direction: row;
           flex-direction: row;
 }
 .flexbox-v {
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
   -webkit-flex-direction: column;
       -ms-flex-direction: column;
           flex-direction: column;
 }
 .flexitem-fluid {
-  -webkit-box-flex: 1;
   -webkit-flex: 1;
       -ms-flex: 1;
           flex: 1;
 }
 .flexitem-first {
-  -webkit-box-ordinal-group: 0;
   -webkit-order: -1;
       -ms-flex-order: -1;
           order: -1;
 }
 .flexitem-medium {
-  -webkit-box-ordinal-group: 1;
   -webkit-order: 0;
       -ms-flex-order: 0;
           order: 0;
 }
 .flexitem-last {
-  -webkit-box-ordinal-group: 2;
   -webkit-order: 1;
       -ms-flex-order: 1;
           order: 1;
 }
+.flexitem-center {
+  margin: auto;
+}
 /* ---------------------------------- */
 /* ==Grids                            */
 /* ---------------------------------- */
 [class*="grid-"] {
-  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;
@@ -383,14 +374,13 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
   margin-left: -1em;
 }
 [class*="grid-"] > * {
-  -webkit-box-flex: 0;
   -webkit-flex: 0 0 auto;
       -ms-flex: 0 0 auto;
           flex: 0 0 auto;
   display: block;
   /* IE fix */
   border-left: 1em solid transparent;
-  background-clip: padding-box !important;
+  background-clip: padding-box !important
   /* no background on border */
 }
 .grid-2 > * {
@@ -1819,9 +1809,3 @@ img.wp-smiley {
 .gallery-caption {
   display: block;
 }
-/* ----------------------------- */
-/* ==own stylesheet              */
-/* ----------------------------- */
-/* Here should go your own CSS styles */
-/* You can also link them with a LESS @import */
-/* @import "my-styles.less"; */

doc/02a-layout-alignements.md

@@ -1,154 +1,48 @@
-# Alignements et positionnements
+# Alignements
 
-## Différents choix
+Différentes classes utilitaires intégrées à KNACSS sont prévues pour gérer les alignements d'éléments.
 
-- positionnement flottant
+- les textes et contenus "inline" sont gérés via les classes `.txtleft`, `.txtright` et `.txtcenter` qui agiront sur la propriété CSS `text-align`
-- positionnement avec `display: inline-block`
+- les blocs sont alignés avec les classes `.left`, `.right` et `.center` qui affectent la valeur `auto` à la propriété `margin`
-- positionnement avec `display: table-cell`
+- les flottements sont gérés via les classes `.fl` (pour `float: left`) et `.fr` (pour `float: right`)
-- positionnement avec Flexbox
 
-Il n'y a pas de mystère : chaque type de positionnement est capable de répondre à différents types de contraintes. Il n'y a pas de meilleur choix qu'un autre.
+## Cas des flottants et les .mod
 
-Votre décision pourra être guidée par les indices suivants :
+Le positionnement flottant compte parmi les plus employés mais n'est pas exempt d'inconvénients. Le principal étant d'être un positionnement hors du flux qui nécessitera des ajustements (clearfix et autres anti-débordements).
-- il est généralement plus profitable de ne pas opter pour des positionnement hors-flux (`float`, `position: absolute`)
+
-- Flexbox est certainement le modèle le plus polyvalent et propre, mais n'est compatible qu'à partir de IE10+.
+KNACSS a prévu des classes spécifiques pour mieux vous en sortir avec les flottants :
+
+- **le super élément `.mod`**. Il a plein d'avantages: il contient les flottants (ils ne débordent pas) et il ne s'écoule pas autour d'un frère flottant (il s'affiche proprement à côté) et il crée un [contexte "BFC"](http://www.alsacreations.com/astuce/lire/1543-le-contexte-de-formatage-block-en-css.html)
+- `.clearfix`. Les éléments disposant de cette classe contiennent les flottants, tel les `.mod`
+- les éléments `.clear`, `.line` et `.row` bénéficient d'un autre pouvoir : celui de toujours se pousser sous un flottant précédent. Il sont dédiés aux empilements verticaux des contenus.
 
 ## Concrètement : je veux faire quoi ?
 
-### Deux blocs voisins de largeur fixe
-
-Les choix offerts avec KNACSS :
-
-#### flottant et flottant
-
-La classe `.fl` pour `float: left` permet à un élément d'être flottant à gauche.
-
-Il vous suffit de faire flotter vos deux éléments et de leur attribuer la largeur souhaitée pour qu'ils s'affichent l'un à côté de l'autre :
-
-HTML :
-```html
-<div class="fl w400px">premier</div>
-<div class="fl w400px">deuxième</div>
-```
-
-- **Avantage :** simple, rapide, intuitif, hyper compatible
-- **Inconvénient :** positionnement hors du flux, nécessitera des ajustements (clearfix et autres anti-débordements)
-
-#### inline-block et inline-block
-
-La propriété `display: inline-block` (sous forme de classe `.inbl` chez KNACSS) permet à un élément de s'afficher tel un "inline" tout en étant dimensionné.
-
-HTML :
-```html
-<div class="inbl w400px">premier</div>
-<div class="inbl w400px">deuxième</div>
-```
-
-- **Avantage :** positionnement dans le flux, compatible dès IE8
-- **Inconvénient :** un espace "whitespace" apparaîtra entre les deux div et nécessitera de coller les balises ou de bidouiller en CSS pour être supprimé
-
-#### table-cell et table-cell
-
-HTML :
-```html
-<div class="row">
-    <div class="col w400px">premier</div>
-    <div class="col w400px">deuxième</div>
-</div>
-```
-
-- **Avantage :** positionnement dans le flux, compatible dès IE8
-- **Inconvénient :**
-
-#### flexbox
-
-HTML :
-```html
-<div class="flexbox">
-    <div class="w400px">premier</div>
-    <div class="w400px">deuxième</div>
-</div>
-```
-
-- **Avantage :**
-- **Inconvénient :**
-
-### Deux blocs voisins dont un fixe et un fluide
-
-Les choix offerts avec KNACSS :
-
-#### flottant et flottant
-
-Pas possible [Résolu]
-
-#### inline-block et inline-block
-
-Pas possible [Résolu]
-
-#### table-cell et table-cell
-
-HTML :
-```html
-<div class="row">
-    <div class="col w400px">premier</div>
-    <div class="col">deuxième</div>
-</div>
-```
-
-#### flexbox
-
-HTML :
-```html
-<div class="flexbox">
-    <div class="w400px">premier</div>
-    <div class="flexitem-fluid">deuxième</div>
-</div>
-```
-
-### Deux blocs voisins de même hauteur
-
-Les choix offerts avec KNACSS :
-
-#### flottant et flottant
-
-Pas possible [Résolu]
-
-#### inline-block et inline-block
-
-Pas possible [Résolu]
-
-#### table-cell et table-cell
-
-Par défaut, les éléments constituant des "cellules de tableau", donc `table-cell` ont automatiquement la même hauteur entre frères. Il n'y a donc rien à faire si l'on opte pour ce positionnement : ça marche tout seul.
-
-HTML :
-```html
-<div class="row">
-    <div class="col">premier</div>
-    <div class="col">deuxième</div>
-</div>
-```
-
-#### flexbox
-
-Là aussi c'est automatique : les enfants d'un conteneur `flexbox` ont tous par défaut la même hauteur.
-
-HTML :
-```html
-<div class="flexbox">
-    <div>premier</div>
-    <div>deuxième</div>
-</div>
-```
-
-### Plusieurs blocs voisins de même taille
-
-Si vous souhaitez réaliser des constructions de plusieurs éléments de même taille (fixe ou fluide) avec ou sans espace entre les éléments (gouttière), je vous invite à prendre connaissance des possibilités de **grilles** offertes par KNACSS.
-
 ### Centrer horizontalement
 
 #### Du texte ou une image
 
+HTML :
+```html
+<div class="txtcenter">
+    <img src="licorne.png">
+</div>
+```
+
 #### Un bloc
 
+HTML :
+```html
+<section>
+    <div class="center w50">centré horizontalement</div>
+</section>
+```
+
 ### Centrer verticalement
+
+HTML :
+```html
+<section class="flexbox-v">
+    <div class="center w50">centré horizontalement et verticalement</div>
+</section>
+```

doc/02b-layout-positionnement.md

@@ -159,12 +159,8 @@ HTML :
 
 ### Plusieurs blocs voisins de même taille
 
+![grilles](https://raw.githubusercontent.com/raphaelgoetter/KNACSS/master/doc/illust/03-layout4.png)
+
 Si vous souhaitez réaliser des constructions de plusieurs éléments de même taille (fixe ou fluide) avec ou sans espace entre les éléments (gouttière), je vous invite à prendre connaissance des possibilités de **grilles** offertes par KNACSS.
 
-### Centrer horizontalement
+Voir **[la Doc au point 03-grilles](https://github.com/raphaelgoetter/KNACSS/blob/master/doc/03-grilles.md)**.
-
-#### Du texte ou une image
-
-#### Un bloc
-
-### Centrer verticalement

less/_02-layout.less

@@ -128,3 +128,7 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
 .flexitem-last {
 	order : 1;
 }
+
+.flexitem-center {
+	margin: auto;
+}

sass/_02-layout.scss

@@ -128,3 +128,7 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
 .flexitem-last {
 	order : 1;
 }
+
+.flexitem-center {
+	margin: auto;
+}