Tweaked spacing logic for grid system. Added new grid-system settings file

Author: Luke Harrison

01 - settings/_settings.grid-system.scss

@@ -0,0 +1,19 @@
+//--------------------------------------------------------------------------------------------------------------------------------------
+// GRID SYSTEM
+//--------------------------------------------------------------------------------------------------------------------------------------
+
+/*
+Here we can define settings which alter the default state of the grid system - represented by the o-container
+and o-layout objects.
+*/
+
+
+// DEFAULT GUTTER SIZE
+//--------------------------------------------------------------------------------------------------------------------------------------
+
+/*
+This defines default gutter size for o-container and o-layout. Additional sizings can be added via their
+spacing modifiers
+*/
+
+$gutter: 20px;

05 - objects/_objects.container.scss

@@ -22,38 +22,37 @@ form a grid system.
 
 .o-container {
 	@include clearfix();
-	box-sizing:content-box;
 	margin-right: auto;
 	margin-left: auto;
 	max-width: rem(1170px);
-	padding-left: rem(15px);
-	padding-right: rem(15px);
+	padding-left: rem($gutter);
+	padding-right: rem($gutter);
 }
 
 
 // OUTER PADDING MODIFIERS
 //--------------------------------------------------------------------------------------------------------------------------------------
 
 /*
-Modifiers to tweak the containers outer padding.
+Modifiers to tweak the containers outer spacing.
 */
 
 // Generate using settings.spacing
-// Example: o-container-padding-small
+// Example: o-container-spacing-small
 @each $sp-name, $sp-value in $spacing {
-	.o-container--padding-#{$sp-name} { 
+	.o-container--spacing-#{$sp-name} { 
 		padding-left:rem($sp-value); 
 		padding-right:rem($sp-value);
 	}
 }
 
 // Create responsive variants using settings.breakpoints
-// Changes outer padding when breakpoint is hit
-// Example: o-container-padding-small@md
+// Changes outer spacing when breakpoint is hit
+// Example: o-container-spacing-small@md
 @each $bp-name, $bp-value in $breakpoints {
 	@include bp(#{$bp-name}) {
 		@each $sp-name, $sp-value in $spacing {
-			.o-container--padding-#{$sp-name}\@#{$bp-name} {
+			.o-container--spacing-#{$sp-name}\@#{$bp-name} {
 				padding-left:rem($sp-value);
 				padding-right:rem($sp-value);
 			}
@@ -62,12 +61,12 @@ Modifiers to tweak the containers outer padding.
 }
 
 // Create responsive variants using settings.breakpoints
-// Changes outer padding until breakpoint is hit
-// Example: o-container-padding-small@max-md
+// Changes outer spacing until breakpoint is hit
+// Example: o-container-spacing-small@max-md
 @each $bp-name, $bp-value in $breakpoints {
 	@include bpMax(#{$bp-name}) {
 		@each $sp-name, $sp-value in $spacing {
-			.o-container--padding-#{$sp-name}\@max-#{$bp-name} {
+			.o-container--spacing-#{$sp-name}\@max-#{$bp-name} {
 				padding-left:rem($sp-value);
 				padding-right:rem($sp-value);
 			}

05 - objects/_objects.layout.scss

@@ -7,12 +7,6 @@ The layout object is used to construct a grid-like layout system, with each layo
 individual column. Typically used with container object and width utilities to form a grid system.
 */
 
-// OPTIONS
-//--------------------------------------------------------------------------------------------------------------------------------------
-
-// Define default gutter width
-$gutter: 30px;
-
 
 // BASE & ELEMENTS
 //--------------------------------------------------------------------------------------------------------------------------------------

sample.main-orion-framework.scss

@@ -41,6 +41,7 @@ OrionCSS in this way, you should use the 'sample.main.scss' file instead.
 @import "../../node_modules/orioncss/01 - settings/settings.spacing";
 @import "../../node_modules/orioncss/01 - settings/settings.typography";
 @import "../../node_modules/orioncss/01 - settings/settings.widths";
+@import "../../node_modules/orioncss/01 - settings/settings.grid-system";
 @import "01 - settings/*";
 
 // Tools

sample.main.scss

@@ -41,6 +41,7 @@ This is the main file where all the different components of OrionCSS are brought
 @import "../../node_modules/orioncss/01 - settings/settings.spacing";
 @import "../../node_modules/orioncss/01 - settings/settings.typography";
 @import "../../node_modules/orioncss/01 - settings/settings.widths";
+@import "../../node_modules/orioncss/01 - settings/settings.grid-system";
 // @import "/01 - settings/settings.mysettings";
 
 // Tools

test/index.html

@@ -21,6 +21,5 @@
 </head>
 <body>
 
-
 </body>
 </html>