From fa06b6359b9164bc1f56caacf8610a86db466ac8 Mon Sep 17 00:00:00 2001
From: Darius Rosendahl <darius@denieuwezaak.nl>
Date: Wed, 19 Jul 2017 11:02:20 +0200
Subject: [PATCH 1/4] New formula for generating the grid. Added gutter-map to
 variables, needed for generating the grid

---
 sass/layout/grid.scss | 185 ++++++++----------------------------------
 sass/variables.scss   |  13 +++
 2 files changed, 46 insertions(+), 152 deletions(-)

diff --git a/sass/layout/grid.scss b/sass/layout/grid.scss
index b6a6376..43a2406 100644
--- a/sass/layout/grid.scss
+++ b/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,55 +175,23 @@
 
 .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%;
@@ -229,10 +199,10 @@
 	}
 
 	.g {
-		margin-left: -$grid-gutter-b2;
+		margin-left: -#{$gutter};
 		
 		> * {
-			padding-left: $grid-gutter-b2;
+			padding-left: $gutter;
 		}
 	}
 
@@ -240,137 +210,48 @@
 
 }
 
-// $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; }
 
+	}
+	
 }
\ No newline at end of file
diff --git a/sass/variables.scss b/sass/variables.scss
index 885c274..2e7449b 100644
--- a/sass/variables.scss
+++ b/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
 */

From 3edc575703291a7061825054c424df4eb27973a2 Mon Sep 17 00:00:00 2001
From: Darius Rosendahl <darius@denieuwezaak.nl>
Date: Wed, 19 Jul 2017 11:02:46 +0200
Subject: [PATCH 2/4] 2.5.0

---
 package-lock.json | 2 +-
 package.json      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 80f3c1f..253703d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,5 +1,5 @@
 {
   "name": "castlecss-core",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "lockfileVersion": 1
 }
diff --git a/package.json b/package.json
index c63ffa9..c2d0e54 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "castlecss-core",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "description": "CastleCSS a SCSS framework with modular building blocks for the web",
   "main": "index.js",
   "scripts": {

From 6a68d3c5e916de0019240c3b5ad3cf4c38941397 Mon Sep 17 00:00:00 2001
From: Darius Rosendahl <darius@denieuwezaak.nl>
Date: Wed, 19 Jul 2017 11:31:06 +0200
Subject: [PATCH 3/4] Fix for B1 and B2

---
 sass/layout/grid.scss | 44 ++++++++++++++++++++++---------------------
 1 file changed, 23 insertions(+), 21 deletions(-)

diff --git a/sass/layout/grid.scss b/sass/layout/grid.scss
index 43a2406..1865263 100644
--- a/sass/layout/grid.scss
+++ b/sass/layout/grid.scss
@@ -179,35 +179,37 @@
 @for $b from 1 through 2 {
 	$breakpoint : map-get($breakpoint-map, $b);
 	$gutter		: map-get($gutter-map, $b);
+	
+	@media only screen and (min-width: $breakpoint) {
+	
+		@for $i from 1 through 12 {
+			$width: ($i/12) * 100%;
 
-	@for $i from 1 through 12 {
-		$width: ($i/12) * 100%;
-
-		@if $i < 10 {
-			.b#{$b}_0#{ $i } { width: $width; }
+			@if $i < 10 {
+				.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; }
-		}
-		@for $i from 13 through 24 {
-			$width: ($i/12) * 100%;
+				.b#{$b}_push_#{ $i } { margin-left: $width; }
+			}
+			@for $i from 13 through 24 {
+				$width: ($i/12) * 100%;
+			}
 		}
-	}
 
-	.g {
-		margin-left: -#{$gutter};
-		
-		> * {
-			padding-left: $gutter;
+		.g {
+			margin-left: -#{$gutter};
+			
+			> * {
+				padding-left: $gutter;
+			}
 		}
-	}
-
-	.b2_push_none { margin-left: 0; }
 
+		.b#{$b}_push_none { margin-left: 0; }
+	}
 }
 
 /* 24 column grid for $b3 and higher */

From d17538170b9780a948b1dbde8abba6bcdfcafbd1 Mon Sep 17 00:00:00 2001
From: Darius Rosendahl <darius@denieuwezaak.nl>
Date: Thu, 20 Jul 2017 13:11:35 +0200
Subject: [PATCH 4/4] Added gutter none / small / large per breakpoint

---
 sass/layout/grid.scss | 114 ++++++++++++++++++++++++++++++++++--------
 1 file changed, 93 insertions(+), 21 deletions(-)

diff --git a/sass/layout/grid.scss b/sass/layout/grid.scss
index 1865263..07cf860 100644
--- a/sass/layout/grid.scss
+++ b/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;
+			}
+		}
 
 	}