Improved small and medium grids

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "hoisin.scss",
-  "version": "0.9.10",
+  "version": "0.9.11",
   "description": "A simple responsive mini framework to kick start your project.",
   "main": ["scss/styles.scss", "scss/responsive.scss"],
   "keywords": [

index.html

@@ -126,7 +126,7 @@ <h3>Nested grids</h3>
 									.col2 nested <br>.m-half
 								</div>
 							</div>
-							<div class="col2 half">
+							<div class="col2 half m-half">
 								<div class="box code">
 									.col2 nested <br>.m-half
 								</div>
@@ -256,7 +256,7 @@ <h3>Inverted order columns</h3>
 					<p>.col4 <br>.colr</p>
 				</div>
 			</div>
-			<div class="col8 m-2_3">
+			<div class="col8 colr m-2_3">
 				<div class="box code">
 					<p>.col8</p>
 				</div>

package.json

@@ -2,7 +2,7 @@
   "name": "hoisin.scss",
   "title": "Hoisin.scss",
   "description": "A simple responsive mini framework to kick start your project.",
-  "version": "0.9.10",
+  "version": "0.9.11",
   "homepage": "https://github.com/Cyber-Duck/hoisin.scss",
   "license": "ISC",
   "author": {

scss/_version.scss

@@ -2,7 +2,7 @@
 // * Hoisin.scss
 // * CSS responsive framework boilerplate
 // * Create your own grids, plugin anything
-// * Version: 0.9.10
+// * Version: 0.9.11
 // * Created by: Cyber-Duck Ltd <info@cyber-duck.co.uk>,
 // *             Ramon Lapenta <me@ramonlapenta.com>
 // *

scss/components/_sample.scss

@@ -60,11 +60,17 @@
 	}
 
 }
-// @media (min-width: $bp-m) and (max-width: ($bp-l - 1)) {
+@media (min-width: $bp-m) and (max-width: ($bp-l - 1)) {
 
+	.box {
+		margin-bottom: 10px;
+	}
 
-// }
-// @media (min-width: $bp-s) and (max-width: ($bp-m - 1)) {
-
+}
+@media (min-width: $bp-s) and (max-width: ($bp-m - 1)) {
+
+	.box {
+		margin-bottom: 10px;
+	}
 
-// }
+}

scss/m/_base.scss

@@ -9,6 +9,8 @@
 
 .container {
     width: 100%;
+    padding: 0 ($gutter/4);
+    @include box-sizing;
     &::after {
         clear: both;
         content: '';
@@ -18,7 +20,7 @@
     .container {
         width: 102%;
         width: calc(100% + 20px);
-        margin-left: -10px;
+        margin-left: -($gutter/4);
     }
 }
 
@@ -29,9 +31,9 @@
 .col8, 
 .col7 {
     margin: 0;
-    padding: 0 10px;
+    padding: 0 ($gutter/4);
     width: 100%;
-    @include box-sizing(border-box);
+    @include box-sizing;
 }
 
 .col6, 
@@ -40,17 +42,17 @@
 .col3 {
     float: left;
     margin: 0;
-    padding: 0 10px;
+    padding: 0 ($gutter/4);
     width: 50%;
-    @include box-sizing(border-box);
+    @include box-sizing;
 }
 
 .col2 {
     float: left;
     margin: 0;
-    padding: 0 10px;
+    padding: 0 ($gutter/4);
     width: 33.33%;
-    @include box-sizing(border-box);
+    @include box-sizing;
 }
 
 .m-full {

scss/s/_base.scss

@@ -9,7 +9,8 @@
 
 .container {
     width: 100%;
-
+    padding: 0 ($gutter/4);
+    @include box-sizing;
     &:after {
         clear: both;
         content: '';
@@ -19,7 +20,7 @@
     .container {
         width: 102%;
         width: calc(100% + 20px);
-        margin-left: -10px;
+        margin-left: -($gutter/4);
     }
 }
 
@@ -34,33 +35,33 @@
 .col4, 
 .col3 {
     margin: 0;
-    padding: 0 10px;
+    padding: 0 ($gutter/4);
     width: 100%;
-    @include box-sizing(border-box);
+    @include box-sizing;
 }
 
 .col2 {
     float: left;
     margin: 0;
-    padding: 0 10px;
+    padding: 0 ($gutter/4);
     width: 50%;
-    @include box-sizing(border-box);
+    @include box-sizing;
 }
 
 .s-full {
     float: none;
     margin: 0;
-    padding: 0 10px;
+    padding: 0 ($gutter/4);
     width: 100%;
-    @include box-sizing(border-box);
+    @include box-sizing;
 }
 
 .s-half {
     float: left;
     margin: 0;
-    padding: 0 10px;
+    padding: 0 ($gutter/4);
     width: 50%;
-    @include box-sizing(border-box);
+    @include box-sizing;
 }
 
 .clear {