From 7e733445926ec360ff648fe7ef6044d4954156d2 Mon Sep 17 00:00:00 2001
From: raphaelgoettter <raphael@goetter.fr>
Date: Mon, 13 Apr 2015 16:10:55 +0200
Subject: [PATCH] flexbox renommage des classes

---
 doc/02b-layout-positionnement.md |  2 +-
 doc/03-grilles.md                | 10 +++++-----
 less/_02-layout.less             | 19 ++++++++++---------
 less/_03-grids.less              |  6 +++---
 less/_07-responsive.less         |  2 +-
 sass/_02-layout.scss             | 19 ++++++++++---------
 sass/_03-grids.scss              |  6 +++---
 sass/_07-responsive.scss         |  2 +-
 8 files changed, 34 insertions(+), 32 deletions(-)

diff --git a/doc/02b-layout-positionnement.md b/doc/02b-layout-positionnement.md
index b99330a..e32185b 100644
--- a/doc/02b-layout-positionnement.md
+++ b/doc/02b-layout-positionnement.md
@@ -115,7 +115,7 @@ HTML :
 ```html
 <div class="flexbox">
     <div class="w400p">premier</div>
-    <div class="flexitem-fluid">deuxième</div>
+    <div class="flex-item-fluid">deuxième</div>
 </div>
 ```
 
diff --git a/doc/03-grilles.md b/doc/03-grilles.md
index ec306e1..a9d92b6 100644
--- a/doc/03-grilles.md
+++ b/doc/03-grilles.md
@@ -93,13 +93,13 @@ Résultat :
 
 Il est possible de mettre un élément particulier en exergue, en **doublant sa taille** par rapport aux autres, tout en conservant un agencement parfait de la grille.
 
-Pour ce faire, appliquez la classe `.flexitem-double` à cet élément.
+Pour ce faire, appliquez la classe `.flex-item-double` à cet élément.
 
 HTML :
 ```html
 <div class="grid-4">
     <div>un div ou n'importe quoi d'autre</div>
-    <div class="flexitem-double">je suis deux fois plus large que mes frères</div>
+    <div class="flex-item-double">je suis deux fois plus large que mes frères</div>
     <div>un 3è div ou n'importe quoi d'autre</div>
     <div>etc.</div>
 </div>
@@ -112,14 +112,14 @@ Résultat :
 
 Vous pouvez modifier l'ordre d'affichage des éléments au sein d'une grille à l'aide des classes :
 
-- `.flexitem-first` (l'élément apparaîtra avant tous les autres) 
-- `.flexitem-last` (l'élément apparaîtra tout à la fin de la grille)
+- `.flex-item-first` (l'élément apparaîtra avant tous les autres) 
+- `.flex-item-last` (l'élément apparaîtra tout à la fin de la grille)
 
 HTML :
 ```html
 <div class="grid-4">
     <div>un div ou n'importe quoi d'autre</div>
-    <div class="flexitem-first">je m'affiche avant tous mes frères</div>
+    <div class="flex-item-first">je m'affiche avant tous mes frères</div>
     <div>un 3è div ou n'importe quoi d'autre</div>
     <div>etc.</div>
 </div>
diff --git a/less/_02-layout.less b/less/_02-layout.less
index 5907a00..273ab5a 100644
--- a/less/_02-layout.less
+++ b/less/_02-layout.less
@@ -102,34 +102,35 @@ body > script {
 http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
 */
 
-.flexbox,
-.flexbox-h,
-.flexbox-v {
+.flex-container {
 	display : flex;
 	flex-wrap: wrap;
+}
+
+.flex-container-h {
 	flex-direction: row;
 }
 
-.flexbox-v {
+.flex-container-v {
 	flex-direction: column;
 }
 
-.flexitem-fluid {
+.flex-item-fluid {
 	flex: 1;
 }
 
-.flexitem-first {
+.flex-item-first {
 	order : -1;
 }
 
-.flexitem-medium {
+.flex-item-medium {
 	order : 0;
 }
 
-.flexitem-last {
+.flex-item-last {
 	order : 1;
 }
 
-.flexitem-center {
+.flex-item-center {
 	margin: auto;
 }
diff --git a/less/_03-grids.less b/less/_03-grids.less
index b78d5ff..cb6ebc6 100644
--- a/less/_03-grids.less
+++ b/less/_03-grids.less
@@ -38,14 +38,14 @@
  & > * {
 	  width: ~'calc(100% * 1 / @{number} - @{gutter})';
 	}
-	& > .flexitem-double {
+	& > .flex-item-double {
 		width: ~'calc(100% * 2 / @{number} - @{gutter})';
 	}
 	@media (min-width: (@tiny-screen + 1)) and (max-width: @small-screen) {
 		& > * {
 			width: ~'calc(100% * 1 / 2 - @{gutter})';
 		}
-		& > .flexitem-double {
+		& > .flex-item-double {
 			width: ~'calc(100% - @{gutter})';
 		}
 	}
@@ -53,7 +53,7 @@
 		& > * {
 			width: ~'calc(100% - @{gutter})';
 		}
-		& > .flexitem-double {
+		& > .flex-item-double {
 			width: ~'calc(100% - @{gutter})';
 		}
 	}
diff --git a/less/_07-responsive.less b/less/_07-responsive.less
index 4647444..a9c0db3 100644
--- a/less/_07-responsive.less
+++ b/less/_07-responsive.less
@@ -269,7 +269,7 @@
 		border: 0;
 	}
 	
-	.flexbox {
+	.flex-container {
 		flex-direction: column;
 	}
 
diff --git a/sass/_02-layout.scss b/sass/_02-layout.scss
index 7183af8..0889bf1 100644
--- a/sass/_02-layout.scss
+++ b/sass/_02-layout.scss
@@ -102,34 +102,35 @@ body > script {
 http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
 */
 
-.flexbox,
-.flexbox-h,
-.flexbox-v {
+.flex-container {
 	display : flex;
 	flex-wrap: wrap;
+}
+
+.flex-container-h {
 	flex-direction: row;
 }
 
-.flexbox-v {
+.flex-container-v {
 	flex-direction: column;
 }
 
-.flexitem-fluid {
+.flex-item-fluid {
 	flex: 1;
 }
 
-.flexitem-first {
+.flex-item-first {
 	order : -1;
 }
 
-.flexitem-medium {
+.flex-item-medium {
 	order : 0;
 }
 
-.flexitem-last {
+.flex-item-last {
 	order : 1;
 }
 
-.flexitem-center {
+.flex-item-center {
 	margin: auto;
 }
diff --git a/sass/_03-grids.scss b/sass/_03-grids.scss
index b19a1f6..7ac73f2 100644
--- a/sass/_03-grids.scss
+++ b/sass/_03-grids.scss
@@ -38,14 +38,14 @@
 & > * {
 	width: calc(100% * 1 / #{$number} - #{$gutter});
 }
-& > .flexitem-double {
+& > .flex-item-double {
 	width: calc(100% * 2 / #{$number} - #{$gutter});
 }
 	@media (min-width: ($tiny-screen + 1)) and (max-width: $small-screen) {
 		& > * {
 			width: calc(100% * 1 / 2 - #{$gutter});
 		}
-		& > .flexitem-double {
+		& > .flex-item-double {
 			width: calc(100% - #{$gutter});
 		}
 	}
@@ -53,7 +53,7 @@
 		& > * {
 			width: calc(100% - #{$gutter});
 		}
-		& > .flexitem-double {
+		& > .flex-item-double {
 			width: calc(100% - #{$gutter});
 		}
 	}
diff --git a/sass/_07-responsive.scss b/sass/_07-responsive.scss
index 207ce0f..0c401e5 100644
--- a/sass/_07-responsive.scss
+++ b/sass/_07-responsive.scss
@@ -268,7 +268,7 @@
 		border: 0;
 	}
 	
-	.flexbox {
+	.flex-container {
 		flex-direction: column;
 	}