Skip to content

Unship grid gutters #22940

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Jun 30, 2017
Merged

Unship grid gutters #22940

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
74ee671
remove grid gutter sass map as it's output css was all jacked up
mdo Jun 30, 2017
5169f6e
update usage elsewhere
mdo Jun 30, 2017
903e472
Merge branch 'v4-dev' into unship-grid-gutters
mdo Jun 30, 2017
d3429ab
remove unused mixin, fix variable
mdo Jun 30, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions assets/scss/_component-examples.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@
.bd-example {
position: relative;
padding: 1rem;
margin: 1rem (-$grid-gutter-width-base / 2);
margin: 1rem (-$grid-gutter-width / 2);
border: solid #f7f7f9;
border-width: .2rem 0 0;
@include clearfix();
Expand Down Expand Up @@ -409,7 +409,7 @@

.highlight {
padding: 1rem;
margin: 1rem (-$grid-gutter-width-base / 2);
margin: 1rem (-$grid-gutter-width / 2);
background-color: #f7f7f9;
-ms-overflow-style: -ms-autohiding-scrollbar;

Expand Down
2 changes: 1 addition & 1 deletion assets/scss/_masthead.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

.bd-masthead {
position: relative;
padding: 3rem ($grid-gutter-width-base / 2) 2rem;
padding: 3rem ($grid-gutter-width / 2) 2rem;
color: $bd-purple-light;
text-align: center;
background-image: linear-gradient(135deg, darken($bd-purple, 20%), $bd-purple, lighten(saturate($bd-purple, 5%), 15%));
Expand Down
2 changes: 1 addition & 1 deletion assets/scss/_page-header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// scss-lint:disable ImportantRule

.bd-pageheader {
padding: 2rem ($grid-gutter-width-base / 2);
padding: 2rem ($grid-gutter-width / 2);
margin-bottom: 1.5rem;
color: $bd-purple-light;
text-align: center;
Expand Down
25 changes: 5 additions & 20 deletions docs/4.0/layout/grid.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

-$gutters;-width- xs// 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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down
14 changes: 3 additions & 11 deletions scss/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -163,16 +163,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
//
Expand Down Expand Up @@ -641,7 +633,7 @@ $card-inverse-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;
Expand Down
6 changes: 3 additions & 3 deletions scss/mixins/_grid-framework.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,14 @@
// Used only by Bootstrap to generate the correct number of grid classes given
// any value of `$grid-columns`.

@mixin make-grid-columns($columns: $grid-columns, $gutters: $grid-gutter-widths, $breakpoints: $grid-breakpoints) {
@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
// Common properties for all breakpoints
%grid-column {
position: relative;
width: 100%;
min-height: 1px; // Prevent columns from collapsing when empty

@include make-gutters($gutters);
padding-right: ($gutter / 2);
padding-left: ($gutter / 2);
}

@each $breakpoint in map-keys($breakpoints) {
Expand Down
46 changes: 9 additions & 37 deletions scss/mixins/_grid.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}


Expand All @@ -26,44 +20,22 @@
}
}

@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) {
Expand Down