Merge pull request #33 from CastleCSS/feature/no-small-large-gutter-per-breakpoint

Added gutter none / small / large per breakpoint

Author: dariusrosendahl

sass/layout/grid.scss

@@ -209,6 +209,42 @@
 		}
 
 		.b#{$b}_push_none { margin-left: 0; }
+
+		/* No Gutter */
+		&.gutter-b#{$b}-none { 
+			margin-left: 0;
+
+			> * {
+				padding-left: 0;
+			}
+		}
+
+		/* Smaller gutter */
+		&.gutter-b#{$b}-small {
+			margin-left: -$grid-gutter / 2;
+
+			> * {
+				padding-left: $grid-gutter / 2;
+			}
+		}
+
+		/* Larger gutter */
+		&.gutter-b#{$b}-large {
+			margin-left: -$grid-gutter * 2;
+
+			> * {
+				padding-left: $grid-gutter * 2;
+			}
+		}
+
+		/* Normal gutter */
+		&.gutter-b#{$b}-normal {
+			margin-left: -$grid-gutter;
+
+			> * {
+				padding-left: $grid-gutter;
+			}
+		}
 	}
 }
 
@@ -219,40 +255,76 @@
 
 	@media only screen and (min-width: $breakpoint) {
 
-	@for $i from 1 through 24 {
-		$width: ($i/24) * 100%;
+		@for $i from 1 through 24 {
+			$width: ($i/24) * 100%;
 
-		@if $i < 10 {
+			@if $i < 10 {
 
-			.b#{$b}_0#{ $i } { width: $width; }
+				.b#{$b}_0#{ $i } { width: $width; }
 
-			.b#{$b}_push_0#{ $i } { margin-left: $width; }
-			
-		} @else {
+				.b#{$b}_push_0#{ $i } { margin-left: $width; }
+				
+			} @else {
 
-			.b#{$b}_#{ $i } { width: $width; }
+				.b#{$b}_#{ $i } { width: $width; }
 
-			.b#{$b}_push_#{ $i } { margin-left: $width; }
+				.b#{$b}_push_#{ $i } { margin-left: $width; }
+			}
+
+			@for $i from 13 through 48 {
+				$width: ($i/24) * 100%;
+			}
 		}
 
-		@for $i from 13 through 48 {
-			$width: ($i/24) * 100%;
+		.g {
+			margin-left: -#{$gutter};
+			
+			> * {
+				padding-left: $gutter;
+
+			}
 		}
-	}
 
-	.g {
-		margin-left: -#{$gutter};
-		
-		> * {
-			padding-left: $gutter;
+		.b#{$b}_x5 { width: 20%; }
+		.b#{$b}_x7 { width: 14.28571428571429%; }
+
+		.b#{$b}_push_none { margin-left: 0; }
+
+		/* No gutter */
+		&.gutter-b#{$b}-none { 
+			margin-left: 0;
+
+			> * {
+				padding-left: 0;
+			}
+		}
+
+		/* Smaller gutter */
+		&.gutter-b#{$b}-small {
+			margin-left: -$grid-gutter / 2;
 
+			> * {
+				padding-left: $grid-gutter / 2;
+			}
 		}
-	}
 
-	.b#{$b}_x5 { width: 20%; }
-	.b#{$b}_x7 { width: 14.28571428571429%; }
+		/* Larger gutter */
+		&.gutter-b#{$b}-large {
+			margin-left: -$grid-gutter * 2;
 
-	.b#{$b}_push_none { margin-left: 0; }
+			> * {
+				padding-left: $grid-gutter * 2;
+			}
+		}
+		
+		/* Normal gutter */
+		&.gutter-b#{$b}-normal {
+			margin-left: -$grid-gutter;
+
+			> * {
+				padding-left: $grid-gutter;
+			}
+		}
 
 	}