Fluid centered container. (#286)

* Fluid centered container.

* Changed modular spacing to new values and applied to centered-column mixin.

* Fix grid example background striping.

* Revised margin variables.

core/scss/utilities/mixins/grid/_centered-column.scss

@@ -1,20 +1,26 @@
 @charset "UTF-8";
 
 //
-// @centered-column($grid: $grid-media, $screens: $grid-screens)
+// @centered-column($grid: $grid-media, $margin: $screen-margins)
 //
 // Centers a single cellin a container based on max width in breakpoints.
 //
 // Style guide: Mixins.Grid.centered-column
 //
-@mixin centered-column($grid: $grid-media, $screens: $grid-screens, $gutters: $grid-gutters) {
+@mixin centered-column($grid: $grid-media, $screens: $grid-screens, $margin: $screen-margins) {
   @include margin(0 auto);
   @each $code, $breakpoint in $grid {
-    $max-width: map-get($screens, $code);
-    $gutter: map-get($gutters, $code);
+    $spacing: map-get($margin, $code);
 
     @media #{$breakpoint} {
-      max-width: $max-width - $gutter;
+      @if breakpoint-max($code, $grid) == null {
+        $max-width: map-get($screens, $code);
+        max-width: $max-width;
+        width: calc(100% - #{$spacing * 2});
+      } @else {
+        max-width: calc(100% - #{$spacing * 2});
+        width: calc(100% - #{$spacing * 2});
+      }
     }
   }
 }

core/scss/utilities/variables/core/_breakpoints.scss

@@ -58,7 +58,7 @@ $screen-xl: 1200px !default;
 //
 // Styleguide: Variables.Core.Breakpoints.screen-2xl
 //
-$screen-2xl: 1500px !default;
+$screen-2xl: $site-max-width !default;
 
 //
 // $breakpoint-xs

core/scss/utilities/variables/core/_magic-numbers.scss

@@ -41,28 +41,6 @@ $lead-max-width: 85rem !default;
 //
 $site-max-width: 1500px !default;
 
-//
-// $site-margins
-//
-// For setting the margins of the project's grid system.
-//
-// Markup: $site-margins: 3rem !default;
-//
-// Styleguide: Variables.Core.Magic.site-margins
-//
-$site-margins: 3rem !default;
-
-//
-// $site-margins-mobile
-//
-// For setting the margins of the project's grid system in mobile.
-//
-// Markup: $site-margins-mobile: 1.5rem !default;
-//
-// Styleguide: Variables.Core.Magic.site-margins-mobile
-//
-$site-margins-mobile: 1.5rem !default;
-
 //
 // $input-max-width
 //
@@ -95,14 +73,3 @@ $border-radius: 3px !default;
 // Styleguide: Variables.Core.Magic.focus-shadow
 //
 $focus-shadow: 0 0 3px $color-cool-grey, 0 0 7px $color-cool-grey !default;
-
-//
-// $hit-area
-//
-// 44 x 44 pixels hit target following Apple iOS Human Interface Guidelines.
-//
-// Markup: $hit-area: 4.4rem !default;
-//
-// Styleguide: Variables.Core.Magic.hit-area
-//
-$hit-area: 4.4rem !default;

core/scss/utilities/variables/core/_modular-spacing.scss

@@ -11,7 +11,7 @@
 //   'md': 36px,
 //   'lg': 36px,
 //   'xl': 36px,
-//   '2xl': 38px,
+//   '2xl': 38px
 // ) !default;
 //
 // Styleguide: Variables.Core.modular-spacing

core/scss/utilities/variables/core/_screen-margins.scss

@@ -0,0 +1,27 @@
+@charset "UTF-8";
+
+// $screen-margins
+//
+// A sass map of screen margins for edge containment
+//
+//```
+// $screen-margins: (
+//   'xs': 20px,
+//   'sm': 30px,
+//   'md': 50px,
+//   'lg': 80px,
+//   'xl': 100px,
+//   '2xl':  100px
+// ) !default;
+// ```
+//
+// Style guide: Variables.Core.screen-margins
+//
+$screen-margins: (
+  'xs': 20px,
+  'sm': 30px,
+  'md': 50px,
+  'lg': 80px,
+  'xl': 100px,
+  '2xl':  100px
+) !default;

core/scss/utilities/variables/core/index.scss

@@ -9,13 +9,14 @@
 //
 
 @import
+  'colors',
+  'magic-numbers', // Needs to be up at the top.
   'box-shadow',
   'breakpoints',
-  'colors',
   'file-paths',
   'grid',
   'gutter',
-  'magic-numbers',
   'modular-spacing',
   'modular-typography',
+  'screen-margins',
   'typography';