From 2b3e0f0f9c39374b4e48dc3d89c1acb950f71379 Mon Sep 17 00:00:00 2001
From: raphaelgoettter <raphael@goetter.fr>
Date: Mon, 30 Mar 2015 12:24:54 +0200
Subject: [PATCH] refonte du systeme de grilles Flexbox

---
 less/_03-grids.less | 44 +++++++++++++++----------------------
 sass/_03-grids.scss | 53 +++++++++++++++++----------------------------
 2 files changed, 37 insertions(+), 60 deletions(-)

diff --git a/less/_03-grids.less b/less/_03-grids.less
index 0dd827d..b78d5ff 100644
--- a/less/_03-grids.less
+++ b/less/_03-grids.less
@@ -21,48 +21,40 @@
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
+	justify-content: space-between;
 	margin-left: -@gutter;
 }
 
 [class*="grid-"] > * {
 	flex: 0 0 auto;
 	display: block; /* IE fix */
-	border-left: @gutter solid transparent;
-	background-clip: padding-box !important; /* no background on border */
+	width: ~'calc(100% * 1 / @{number} - @{gutter})';
+	margin-left: @gutter;
 }
 
 // LESS mixins for *equal* columns grid container
 // example : .grid-perso { .grid(12); }
-.grid(@number:@number) {
-	& > * {
-		width: (1/@number * 100) + 0%;
+.grid(@number:@number, @gutter:@gutter) { 
+ & > * {
+	  width: ~'calc(100% * 1 / @{number} - @{gutter})';
 	}
 	& > .flexitem-double {
-		width: (2/@number * 100) + 0%;
-	}
-
-	@media (min-width: (@small-screen + 1)) and (max-width: @medium-screen) {
-		& > * {
-			width: 33.3333%;
-		}
-		& > .flexitem-double {
-			width: 66.6666%;
-		}
+		width: ~'calc(100% * 2 / @{number} - @{gutter})';
 	}
 	@media (min-width: (@tiny-screen + 1)) and (max-width: @small-screen) {
 		& > * {
-			width: 50%;
+			width: ~'calc(100% * 1 / 2 - @{gutter})';
 		}
 		& > .flexitem-double {
-			width: 100%;
+			width: ~'calc(100% - @{gutter})';
 		}
 	}
 	@media (max-width: @tiny-screen) {
 		& > * {
-			width: 100%;
+			width: ~'calc(100% - @{gutter})';
 		}
 		& > .flexitem-double {
-			width: 100%;
+			width: ~'calc(100% - @{gutter})';
 		}
 	}
 }
@@ -107,20 +99,18 @@
 
 // LESS mixins for *unequal* columns grid container
 // example : .grid-perso { .uneven-grid(2, 1); }
-
-.uneven-grid(@left:@left, @right:@right) {
-
+ .uneven-grid(@left:@left, @right:@right, @gutter:@gutter) { 
 	& > *:nth-child(odd) {
-		width: (@left / (@left + @right)) * 100%;
+		@size: (@left / (@left + @right)) * 100%;
+		width: ~'calc(@{size} - @{gutter})';
 	}
-
 	& > *:nth-child(even) {
-		width: (@right / (@left + @right)) * 100%;
+		@size: (@right / (@left + @right)) * 100%;
+		width: ~'calc(@{size} - @{gutter})';
 	}
-
 	@media (max-width: @tiny-screen) {
 		& > *:nth-child(n) {
-			width: 100%;
+			width: ~'calc(100% - @{gutter})';
 		}
 	}
 }
diff --git a/sass/_03-grids.scss b/sass/_03-grids.scss
index f3fef33..b19a1f6 100644
--- a/sass/_03-grids.scss
+++ b/sass/_03-grids.scss
@@ -21,51 +21,40 @@
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
+	justify-content: space-between;
 	margin-left: -$gutter;
 }
 
 [class*="grid-"] > * {
 	flex: 0 0 auto;
 	display: block; /* IE fix */
-	border-left: $gutter solid transparent;
-	background-clip: padding-box !important; /* no background on border */
+	width: calc(100% * 1 / #{$number} - #{$gutter});
+	margin-left: $gutter;
 }
 
 // Sass mixins for *equal* columns grid container
 // example : .grid-perso { @include grid(12); }
-@mixin grid($number:$number) {
-
-	& > * {
-		width: (1/$number * 100) + 0%;
-	}
-	& > .flexitem-double {
-		width: (2/$number * 100) + 0%;
-	}
-
-	@media (min-width: ($small-screen + 1)) and (max-width: $medium-screen) {
-		& > * {
-			width: 33.3333%;
-		}
-		& > .flexitem-double {
-			width: 66.6666%;
-		}
-	}
-
+@mixin grid($number:$number,$gutter:$gutter) {
+& > * {
+	width: calc(100% * 1 / #{$number} - #{$gutter});
+}
+& > .flexitem-double {
+	width: calc(100% * 2 / #{$number} - #{$gutter});
+}
 	@media (min-width: ($tiny-screen + 1)) and (max-width: $small-screen) {
 		& > * {
-			width: 50%;
+			width: calc(100% * 1 / 2 - #{$gutter});
 		}
 		& > .flexitem-double {
-			width: 100%;
+			width: calc(100% - #{$gutter});
 		}
 	}
-
 	@media (max-width: $tiny-screen) {
 		& > * {
-			width: 100%;
+			width: calc(100% - #{$gutter});
 		}
 		& > .flexitem-double {
-			width: 100%;
+			width: calc(100% - #{$gutter});
 		}
 	}
 }
@@ -110,20 +99,18 @@
 
 // LESS mixins for *unequal* columns grid container
 // example : .grid-perso { @include uneven-grid(2, 1); }
-
-@mixin uneven-grid($left:$left, $right:$right) {
-
+@mixin uneven-grid($left:$left, $right:$right, $gutter:$gutter) {
 	& > *:nth-child(odd) {
-		width: ($left / ($left + $right)) * 100%;
+		$size: ($left / ($left + $right)) * 100%;
+		width: calc(#{$size} - #{$gutter});
 	}
-
 	& > *:nth-child(even) {
-		width: ($right / ($left + $right)) * 100%;
+		$size: ($right / ($left + $right)) * 100%;
+		width: calc(#{$size} - #{$gutter});
 	}
-
 	@media (max-width: $tiny-screen) {
 		& > *:nth-child(n) {
-			width: 100%;
+			width: calc(100% - #{$gutter});
 		}
 	}
 }