New formula for generating the grid. Added gutter-map to variables, needed for generating the grid

Author: Darius Rosendahl

sass/layout/grid.scss

@@ -150,7 +150,9 @@
 
 }
 
-/* Grid widths */
+/* 	Grid widths 
+	12 column grid for $b0
+*/
 
 @for $i from 1 through 12 {
 	$width: ($i/12) * 100%;
@@ -173,204 +175,83 @@
 
 .b0_push_none { margin-left: 0; }
 
-// $b1
-@media only screen and (min-width: $b1) {
-
-	@for $i from 1 through 12 {
-		$width: ($i/12) * 100%;
-
-		@if $i < 10 {
-			.b1_0#{ $i } { width: $width; }
-
-			.b1_push_0#{ $i } { margin-left: $width; }
-		} @else {
-
-			.b1_#{ $i } { width: $width; }
-
-			.b1_push_#{ $i } { margin-left: $width; }
-		}
-	}
-	@for $i from 13 through 24 {
-		$width: ($i/12) * 100%;
-	}
-
-	.g {
-		margin-left: -$grid-gutter-b1;
-
-		> * {
-			padding-left: $grid-gutter-b1;
-		}
-	}
-	
-	.b1_push_none { margin-left: 0; }
-
-}
-
-
-// $b2
-@media only screen and (min-width: $b2) {
+/* 12 column grid for $b1 and $b2 */
+@for $b from 1 through 2 {
+	$breakpoint : map-get($breakpoint-map, $b);
+	$gutter		: map-get($gutter-map, $b);
 
 	@for $i from 1 through 12 {
 		$width: ($i/12) * 100%;
 
 		@if $i < 10 {
-			.b2_0#{ $i } { width: $width; }
+			.b#{$b}_0#{ $i } { width: $width; }
 
-			.b2_push_0#{ $i } { margin-left: $width; }
+			.b#{$b}_push_0#{ $i } { margin-left: $width; }
 		} @else {
 
-			.b2_#{ $i } { width: $width; }
+			.b#{$b}_#{ $i } { width: $width; }
 
-			.b2_push_#{ $i } { margin-left: $width; }
+			.b#{$b}_push_#{ $i } { margin-left: $width; }
 		}
 		@for $i from 13 through 24 {
 			$width: ($i/12) * 100%;
 		}
 	}
 
 	.g {
-		margin-left: -$grid-gutter-b2;
+		margin-left: -#{$gutter};
 
 		> * {
-			padding-left: $grid-gutter-b2;
+			padding-left: $gutter;
 		}
 	}
 
 	.b2_push_none { margin-left: 0; }
 
 }
 
-// $b3
-@media only screen and (min-width: $b3) {
-
-	@for $i from 1 through 24 {
-		$width: ($i/24) * 100%;
-
-		@if $i < 10 {
-			.b3_0#{ $i } { width: $width; }
-
-			.b3_push_0#{ $i } { margin-left: $width; }
-		} @else {
-			.b3_#{ $i } { width: $width; }
-
-			.b3_push_#{ $i } { margin-left: $width; }
-		}
-		@for $i from 13 through 48 {
-			$width: ($i/24) * 100%;
-		}
-	}
-
-	.g {
-		margin-left: -$grid-gutter-b3;
-		
-		> * {
-			padding-left: $grid-gutter-b3;
-
-		}
-	}
-
-	.b3_x5 { width: 20%; }
-	.b3_x7 { width: 14.28571428571429%; }
-
-	.b3_push_none { margin-left: 0; }
+/* 24 column grid for $b3 and higher */
+@for $b from 3 through $amount-breakpoints {
+	$breakpoint : map-get($breakpoint-map, $b);
+	$gutter		: map-get($gutter-map, $b);
 
-}
-
-// $b4
-@media only screen and (min-width: $b4) {
+	@media only screen and (min-width: $breakpoint) {
 
 	@for $i from 1 through 24 {
 		$width: ($i/24) * 100%;
 
 		@if $i < 10 {
-			.b4_0#{ $i } { width: $width; }
-
-			.b4_push_0#{ $i } { margin-left: $width; }
-		} @else {
-
-			.b4_#{ $i } { width: $width; }
-
-			.b4_push_#{ $i } { margin-left: $width; }
-		}
-	}
-
-	.g {
-		margin-left: -$grid-gutter-b4;
-		
-		> * {
-			padding-left: $grid-gutter-b4;
-		}
-	}
-
-	.b4_x5 { width: 20%; }
-	.b4_x7 { width: 14.28571428571429%; }
-
-	.b4_push_none { margin-left: 0; }
-
-
-}
 
-// $b5
-@media only screen and (min-width: $b5) {
+			.b#{$b}_0#{ $i } { width: $width; }
 
-	@for $i from 1 through 24 {
-		$width: ($i/24) * 100%;
-
-		@if $i < 10 {
-			.b5_0#{ $i } { width: $width; }
-
-			.b5_push_0#{ $i } { margin-left: $width; }
+			.b#{$b}_push_0#{ $i } { margin-left: $width; }
+			
 		} @else {
 
-			.b5_#{ $i } { width: $width; }
+			.b#{$b}_#{ $i } { width: $width; }
 
-			.b5_push_#{ $i } { margin-left: $width; }
+			.b#{$b}_push_#{ $i } { margin-left: $width; }
 		}
-	}
 
-	.g {
-		margin-left: -$grid-gutter-b5;
-		
-		> * {
-			padding-left: $grid-gutter-b5;
-		}
-	}
-
-	.b5_x5 { width: 20%; }
-	.b5_x7 { width: 14.28571428571429%; }
-
-	.b5_push_none { margin-left: 0; }
-
-}
-// $b6
-@media only screen and (min-width: $b6) {
-
-	@for $i from 1 through 24 {
-		$width: ($i/24) * 100%;
-
-		@if $i < 10 {
-			.b6_0#{ $i } { width: $width; }
-
-			.b6_push_0#{ $i } { margin-left: $width; }
-		} @else {
-
-			.b6_#{ $i } { width: $width; }
-
-			.b6_push_#{ $i } { margin-left: $width; }
+		@for $i from 13 through 48 {
+			$width: ($i/24) * 100%;
 		}
 	}
 
 	.g {
-		margin-left: -$grid-gutter-b6;
+		margin-left: -#{$gutter};
 
 		> * {
-			padding-left: $grid-gutter-b6;			
+			padding-left: $gutter;
+
 		}
 	}
 
-	.b6_x5 { width: 20%; }
-	.b6_x7 { width: 14.28571428571429%; }
+	.b#{$b}_x5 { width: 20%; }
+	.b#{$b}_x7 { width: 14.28571428571429%; }
 
-	.b6_push_none { margin-left: 0; }
+	.b#{$b}_push_none { margin-left: 0; }
 
+	}
+	
 }

sass/variables.scss

@@ -100,6 +100,19 @@ $grid-gutter-b4: 16px;
 $grid-gutter-b5: 16px;
 $grid-gutter-b6: 16px;
 
+/*
+	Gutter map
+	Must be the same amount of gutters and $gutter-map as above
+*/
+$gutter-map: (
+	1: $grid-gutter-b1,
+	2: $grid-gutter-b2,
+	3: $grid-gutter-b3,
+	4: $grid-gutter-b4,
+	5: $grid-gutter-b5,
+	6: $grid-gutter-b6,
+);
+
 /*
 	Default margin and padding
 */