remove grid gutter sass map as it's output css was all jacked up

diff --git a/docs/4.0/layout/grid.md b/docs/4.0/layout/grid.md
index 7e256f235ca0c22535791e1203036baf747c7709..64eec3689fb83a53578ce3fb379dd102c9370e0d 100644 (file)
--- a/docs/4.0/layout/grid.md
+++ b/docs/4.0/layout/grid.md
@@ -605,15 +605,7 @@ Variables and maps determine the number of columns, the gutter width, and the me
 
 {% highlight scss %}
 $grid-columns:      12;
-$grid-gutter-width-base: 30px;
-
-$grid-gutter-widths: (
-  xs: $grid-gutter-width-base, // 30px
-  sm: $grid-gutter-width-base, // 30px
-  md: $grid-gutter-width-base, // 30px
-  lg: $grid-gutter-width-base, // 30px
-  xl: $grid-gutter-width-base  // 30px
-)
+$grid-gutter-width: 30px;
 
 $grid-breakpoints: (
   // Extra small screen / phone
@@ -642,10 +634,10 @@ Mixins are used in conjunction with the grid variables to generate semantic CSS
 
 {% highlight scss %}
 // Creates a wrapper for a series of columns
-@include make-row($gutters: $grid-gutter-widths);
+@include make-row();
 
 // Make the element grid-ready (applying everything but the width)
-@include make-col-ready($gutters: $grid-gutter-widths);
+@include make-col-ready();
 @include make-col($size, $columns: $grid-columns);
 
 // Get fancy by offsetting, or changing the sort order
@@ -706,18 +698,11 @@ Using our built-in grid Sass variables and maps, it's possible to completely cus
 
 ### Columns and gutters
 
-The number of grid columns and their horizontal padding (aka, gutters) can be modified via Sass variables. `$grid-columns` is used to generate the widths (in percent) of each individual column while `$grid-gutter-widths` allows breakpoint-specific widths that are divided evenly across `padding-left` and `padding-right` for the column gutters.
+The number of grid columns can be modified via Sass variables. `$grid-columns` is used to generate the widths (in percent) of each individual column while `$grid-gutter-width` allows breakpoint-specific widths that are divided evenly across `padding-left` and `padding-right` for the column gutters.
 
 {% highlight scss %}
 $grid-columns:               12 !default;
-$grid-gutter-width-base:     30px !default;
-$grid-gutter-widths: (
-  xs: $grid-gutter-width-base,
-  sm: $grid-gutter-width-base,
-  md: $grid-gutter-width-base,
-  lg: $grid-gutter-width-base,
-  xl: $grid-gutter-width-base
-) !default;
+$grid-gutter-width:     30px !default;
 {% endhighlight %}
 
 ### Grid tiers

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 5e1ae0ff7840d1d766b85f2b70b216de24a57692..f788c7cb5931f353c532fdaa137c1e9d32f1def2 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -201,16 +201,8 @@ $container-max-widths: (
 //
 // Set the number of columns and specify the width of the gutters.
 
-$grid-columns:               12 !default;
-$grid-gutter-width-base:     30px !default;
-$grid-gutter-widths: (
-  xs: $grid-gutter-width-base,
-  sm: $grid-gutter-width-base,
-  md: $grid-gutter-width-base,
-  lg: $grid-gutter-width-base,
-  xl: $grid-gutter-width-base
-) !default;
-
+$grid-columns: 12 !default;
+$grid-gutter-width: 30px !default;
 
 // Components
 //
@@ -659,7 +651,7 @@ $card-dark-link-hover-color:    $white !default;
 
 $card-img-overlay-padding: 1.25rem !default;
 
-$card-deck-margin:          ($grid-gutter-width-base / 2) !default;
+$card-deck-margin:          ($grid-gutter-width / 2) !default;
 
 $card-columns-count:        3 !default;
 $card-columns-gap:          1.25rem !default;

diff --git a/scss/mixins/_grid-framework.scss b/scss/mixins/_grid-framework.scss
index dba045fa7877a71430abd75bc58320a5cbfffc4f..f5598b58985ee1d5c4aaf3dcdf37df2c5306edc9 100644 (file)
--- a/scss/mixins/_grid-framework.scss
+++ b/scss/mixins/_grid-framework.scss
@@ -9,8 +9,8 @@
     position: relative;
     width: 100%;
     min-height: 1px; // Prevent columns from collapsing when empty
-
-    @include make-gutters($gutters);
+    padding-right: ($grid-gutter-width / 2);
+    padding-left:  ($grid-gutter-width / 2);
   }
 
   @each $breakpoint in map-keys($breakpoints) {

diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss
index b6d9805777052fe95ee82effafaf572450b3b9e4..7ed93c7384b0c41938e2a971078fe5a4a48b8429 100644 (file)
--- a/scss/mixins/_grid.scss
+++ b/scss/mixins/_grid.scss
@@ -2,17 +2,11 @@
 //
 // Generate semantic grid columns with these mixins.
 
-@mixin make-container($gutters: $grid-gutter-widths) {
+@mixin make-container() {
   margin-right: auto;
   margin-left: auto;
-
-  @each $breakpoint in map-keys($gutters) {
-    @include media-breakpoint-up($breakpoint) {
-      $gutter: map-get($gutters, $breakpoint);
-      padding-right: ($gutter / 2);
-      padding-left:  ($gutter / 2);
-    }
-  }
+  padding-right: ($grid-gutter-width / 2);
+  padding-left:  ($grid-gutter-width / 2);
 }
 
 
@@ -26,44 +20,32 @@
   }
 }
 
-@mixin make-gutters($gutters: $grid-gutter-widths) {
-  @each $breakpoint in map-keys($gutters) {
-    @include media-breakpoint-up($breakpoint) {
-      $gutter: map-get($gutters, $breakpoint);
-      padding-right: ($gutter / 2);
-      padding-left:  ($gutter / 2);
-    }
-  }
-}
+// @mixin make-gutters($gutters: $grid-gutter-widths) {
+//   @each $breakpoint in map-keys($gutters) {
+//     @include media-breakpoint-up($breakpoint) {
+//       $gutter: map-get($gutters, $breakpoint);
+//       padding-right: ($gutter / 2);
+//       padding-left:  ($gutter / 2);
+//     }
+//   }
+// }
 
-@mixin make-row($gutters: $grid-gutter-widths) {
+@mixin make-row() {
   display: flex;
   flex-wrap: wrap;
-
-  @each $breakpoint in map-keys($gutters) {
-    @include media-breakpoint-up($breakpoint) {
-      $gutter: map-get($gutters, $breakpoint);
-      margin-right: ($gutter / -2);
-      margin-left:  ($gutter / -2);
-    }
-  }
+  margin-right: ($grid-gutter-width / -2);
+  margin-left:  ($grid-gutter-width / -2);
 }
 
-@mixin make-col-ready($gutters: $grid-gutter-widths) {
+@mixin make-col-ready() {
   position: relative;
   // Prevent columns from becoming too narrow when at smaller grid tiers by
   // always setting `width: 100%;`. This works because we use `flex` values
   // later on to override this initial width.
   width: 100%;
   min-height: 1px; // Prevent collapsing
-
-  @each $breakpoint in map-keys($gutters) {
-    @include media-breakpoint-up($breakpoint) {
-      $gutter: map-get($gutters, $breakpoint);
-      padding-right: ($gutter / 2);
-      padding-left:  ($gutter / 2);
-    }
-  }
+  padding-right: ($grid-gutter-width / 2);
+  padding-left:  ($grid-gutter-width / 2);
 }
 
 @mixin make-col($size, $columns: $grid-columns) {