From 2c5cba9de5e8693724c9bf126663781dcb28708d Mon Sep 17 00:00:00 2001
From: Antoine Boulanger <antoineboulangerz@gmail.com>
Date: Mon, 23 Mar 2015 12:42:54 -0400
Subject: [PATCH] Update grid in mixins

---
 .../boilerplate/assets/styles/dist/main.css   |  11 +-
 .../assets/styles/src/objects/_grid.scss      | 123 +++++++++---------
 2 files changed, 62 insertions(+), 72 deletions(-)

diff --git a/www/modules/boilerplate/assets/styles/dist/main.css b/www/modules/boilerplate/assets/styles/dist/main.css
index 52b156e..446a579 100644
--- a/www/modules/boilerplate/assets/styles/dist/main.css
+++ b/www/modules/boilerplate/assets/styles/dist/main.css
@@ -516,16 +516,9 @@ h6, .h6, .zeta {
    Grid
    ========================================================================== */
 .grid {
-  font-size: 0;
   margin-left: -20px;
-  letter-spacing: normal; }
-  .grid.-full {
-    margin-left: 0; }
-  .grid.-list {
-    margin-top: 0;
-    margin-bottom: 0;
-    padding-left: 0;
-    list-style: none; }
+  letter-spacing: normal;
+  font-size: 0; }
 
 /* ==========================================================================
    Helpers
diff --git a/www/modules/boilerplate/assets/styles/src/objects/_grid.scss b/www/modules/boilerplate/assets/styles/src/objects/_grid.scss
index 4897bef..04dd576 100644
--- a/www/modules/boilerplate/assets/styles/src/objects/_grid.scss
+++ b/www/modules/boilerplate/assets/styles/src/objects/_grid.scss
@@ -1,149 +1,146 @@
 /* ==========================================================================
    Grid
    ========================================================================== */
-.grid, %grid {
-	font-size: 0;
-
+@mixin grid {
 	margin-left: -$gutter;
-
 	letter-spacing: normal;
-
-	&.-full, &%-full {
-		margin-left: 0;
-
-		> %grid__item {
-			margin-bottom: 0;
-			padding-left: 0;
-		}
-	}
-
-	&.-list, &%-list {
-		margin-top: 0;
-		margin-bottom: 0;
-		padding-left: 0;
-
-		list-style: none;
-	}
+	font-size: 0;
+}
+.grid {
+	@include grid;	
 }
 
-%grid__item {
-	font-size: $font-size;
-
+@mixin grid__item {
 	display: inline-block;
-
-	width: 100%;
+	box-sizing: border-box;
 	margin-bottom: $gutter;
 	padding-left: $gutter;
-
-	vertical-align: top;
-}
-
-%whole {
 	width: 100%;
-
-	@extend %grid__item;
+	vertical-align: top;
+	font-size: 16px;
 }
 
-%half {
-	@extend %grid__item;
+@mixin whole {
+	@include grid__item;
+
+	width: 100%;
+}
+
+@mixin half {
+	@include grid__item;
+
 	@media (min-width: $from-small) {
 		width: span(1/2);
 	}
 }
 
-%third {
-	@extend %grid__item;
+@mixin third {
+	@include grid__item;
+
 	@media (min-width: $from-medium) {
 		width: span(1/3);
 	}
 }
 
-%two-thirds {
-	@extend %grid__item;
+@mixin two-thirds {
+	@include grid__item;
+
 	@media (min-width: $from-medium) {
 		width: span(2/3);
 	}
 }
 
-%quarter {
-	@extend %grid__item;
+@mixin quarter {
+	@include grid__item;
+
 	@media (min-width: $from-medium) {
 		width: span(1/4);
 	}
 }
 
-%two-quarters {
-	@extend %grid__item;
+@mixin two-quarters {
+	@include grid__item;
+
 	@media (min-width: $from-medium) {
 		width: span(2/4);
 	}
 }
 
-%three-quarters {
-	@extend %grid__item;
+@mixin three-quarters {
+	@include grid__item;
+
 	@media (min-width: $from-medium) {
 		width: span(3/4);
 	}
 }
 
-%fifth {
-	@extend %grid__item;
+@mixin fifth {
+	@include grid__item;
+
 	@media (min-width: $from-large) {
 		width: span(1/5);
 	}
 }
 
-%two-fifths {
-	@extend %grid__item;
+@mixin two-fifths {
+	@include grid__item;
+
 	@media (min-width: $from-large) {
 		width: span(2/5);
 	}
 }
 
-%three-fifths {
-	@extend %grid__item;
+@mixin three-fifths {
+	@include grid__item;
+
 	@media (min-width: $from-large) {
 		width: span(3/5);
 	}
 }
 
-%four-fifths {
-	@extend %grid__item;
+@mixin four-fifths {
+	@include grid__item;
+
 	@media (min-width: $from-large) {
 		width: span(4/5);
 	}
 }
 
-%sixth {
-	@extend %grid__item;
+@mixin sixth {
+	@include grid__item;
+
 	@media (min-width: $from-huge) {
 		width: span(1/6);
 	}
 }
 
-%two-sixths {
-	@extend %grid__item;
+@mixin two-sixths {
+	@include grid__item;
+
 	@media (min-width: $from-huge) {
 		width: span(2/6);
 	}
 }
 
-%three-sixths {
-	@extend %grid__item;
+@mixin three-sixths {
+	@include grid__item;
+
 	@media (min-width: $from-huge) {
 		width: span(3/6);
 	}
 }
 
-%four-sixths {
-	@extend %grid__item;
+@mixin four-sixths {
+	@include grid__item;
+
 	@media (min-width: $from-huge) {
 		width: span(4/6);
 	}
 }
 
-%five-sixths {
-	@extend %grid__item;
+@mixin five-sixths {
+	@include grid__item;
+
 	@media (min-width: $from-huge) {
 		width: span(5/6);
 	}