root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 11 Packages Projects Releases Wiki Activity

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

This commit is contained in:
Mark Otto 2017-06-29 21:27:27 -07:00 committed by Mark Otto
parent e51749e4a7
commit b013b987b0
4 changed files with 28 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
docs/4.0/layout/grid.md
View File

@ -605,15 +605,7 @@ Variables and maps determine the number of columns, the gutter width, and the me
{% highlight scss %} {% highlight scss %}
$grid-columns: 12; $grid-columns: 12;
$grid-gutter-width-base: 30px; $grid-gutter-width: 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-breakpoints: ( $grid-breakpoints: (
// Extra small screen / phone // Extra small screen / phone
@ -642,10 +634,10 @@ Mixins are used in conjunction with the grid variables to generate semantic CSS
{% highlight scss %} {% highlight scss %}
// Creates a wrapper for a series of columns // 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) // 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); @include make-col($size, $columns: $grid-columns);
// Get fancy by offsetting, or changing the sort order // 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 ### 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 %} {% highlight scss %}
$grid-columns: 12 !default; $grid-columns: 12 !default;
$grid-gutter-width-base: 30px !default; $grid-gutter-width: 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;
{% endhighlight %} {% endhighlight %}
### Grid tiers ### Grid tiers

14
scss/_variables.scss
View File

@ -201,16 +201,8 @@ $container-max-widths: (
// //
// Set the number of columns and specify the width of the gutters. // Set the number of columns and specify the width of the gutters.
$grid-columns: 12 !default; $grid-columns: 12 !default;
$grid-gutter-width-base: 30px !default; $grid-gutter-width: 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;
// Components // Components
// //
@ -659,7 +651,7 @@ $card-dark-link-hover-color: $white !default;
$card-img-overlay-padding: 1.25rem !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-count: 3 !default;
$card-columns-gap: 1.25rem !default; $card-columns-gap: 1.25rem !default;

4
scss/mixins/_grid-framework.scss
View File

@ -9,8 +9,8 @@
position: relative; position: relative;
width: 100%; width: 100%;
min-height: 1px; // Prevent columns from collapsing when empty min-height: 1px; // Prevent columns from collapsing when empty
padding-right: ($grid-gutter-width / 2);
@include make-gutters($gutters); padding-left: ($grid-gutter-width / 2);
} }
@each $breakpoint in map-keys($breakpoints) { @each $breakpoint in map-keys($breakpoints) {

54
scss/mixins/_grid.scss
View File

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