diff --git a/docs/4.0/layout/grid.md b/docs/4.0/layout/grid.md index 7e256f235c..64eec3689f 100644 --- 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 5e1ae0ff78..f788c7cb59 100644 --- 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 dba045fa78..f5598b5898 100644 --- 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 b6d9805777..7ed93c7384 100644 --- 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) {