aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorMark Otto <[email protected]>2017-06-29 21:27:27 -0700
committerMark Otto <[email protected]>2017-06-30 09:01:39 -0700
commitb013b987b0b770434b3bc1ec61a7b9971a73aedb (patch)
treebc5735c487244dc2f980be38837bd18919cf5ab4
parente51749e4a76148cac3c204fc24d14994c45a284e (diff)
downloadbootstrap-b013b987b0b770434b3bc1ec61a7b9971a73aedb.tar.xz
bootstrap-b013b987b0b770434b3bc1ec61a7b9971a73aedb.zip
remove grid gutter sass map as it's output css was all jacked up
-rw-r--r--docs/4.0/layout/grid.md25
-rw-r--r--scss/_variables.scss14
-rw-r--r--scss/mixins/_grid-framework.scss4
-rw-r--r--scss/mixins/_grid.scss54
4 files changed, 28 insertions, 69 deletions
diff --git a/docs/4.0/layout/grid.md b/docs/4.0/layout/grid.md
index 7e256f235..64eec3689 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 5e1ae0ff7..f788c7cb5 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 dba045fa7..f5598b589 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 b6d980577..7ed93c738 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) {