Skip to content
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

Customizable grid gutters per breakpoint #17481

Merged
merged 1 commit into from
Oct 3, 2016
+87 −36
Merged

Customizable grid gutters per breakpoint #17481

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 1 addition & 1 deletion docs/assets/scss/_component-examples.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -324,7 +324,7 @@

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

@include media-breakpoint-up(sm) {
Expand Down
4 changes: 2 additions & 2 deletions docs/assets/scss/_featurettes.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,10 @@

@include media-breakpoint-up(md) {
.col-sm-6:first-child {
padding-right: ($grid-gutter-width * 1.5);
padding-right: ($grid-gutter-width-base * 1.5);
};
.col-sm-6:last-child {
padding-left: ($grid-gutter-width * 1.5);
padding-left: ($grid-gutter-width-base * 1.5);
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion docs/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 / 2) 2rem;
padding: 3rem ($grid-gutter-width-base / 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 docs/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 / 2);
padding: 2rem ($grid-gutter-width-base / 2);
margin-bottom: 1.5rem;
color: $bd-purple-light;
text-align: center;
Expand Down
55 changes: 41 additions & 14 deletions docs/layout/grid.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
---
atom---
layout: docs
title: Grid system
group: layout
Expand Down Expand Up @@ -33,14 +33,14 @@ Sounds good? Great, let's move on to seeing all that in an example.
If you're using Bootstrap's compiled CSS, this the example you'll want to start with.

{% example html %}
<div class="container">
<div class="container">a
<div class="row">
<div class="col-sm-4">
One of three columns
One of three columnsa
</div>
<div class="col-sm-4">
One of three columns
</div>
</div>atom
<div class="col-sm-4">
One of three columns
</div>
Expand Down Expand Up @@ -139,7 +139,15 @@ Variables and maps determine the number of columns, the gutter width, and the me

{% highlight scss %}
$grid-columns: 12;
$grid-gutter-width: 30px;
$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-breakpoints: (
// Extra small screen / phone
Expand Down Expand Up @@ -168,30 +176,42 @@ Mixins are used in conjunction with the grid variables to generate semantic CSS

{% highlight scss %}
// Creates a wrapper for a series of columns
@mixin make-row($gutter: $grid-gutter-width) {
@mixin make-row($gutters: $grid-gutter-widths) {
@if $enable-flex {
display: flex;
flex-wrap: wrap;
} @else {
@include clearfix();
}
margin-left: ($gutter / -2);
margin-right: ($gutter / -2);

@each $breakpoint in map-keys($gutters) {
@include media-breakpoint-up($breakpoint) {
$gutter: map-get($gutters, $breakpoint);
margin-right: ($gutter / -2);
margin-left: ($gutter / -2);
}
}
}

// Make the element grid-ready (applying everything but the width)
@mixin make-col-ready($gutter: $grid-gutter-width) {
@mixin make-col-ready($gutters: $grid-gutter-widths) {
position: relative;
min-height: 1px; // Prevent collapsing
padding-right: ($gutter / 2);
padding-left: ($gutter / 2);

// 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.
@if $enable-flex {
width: 100%;
}

@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-col($size, $columns: $grid-columns) {
Expand Down Expand Up @@ -463,11 +483,18 @@ 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-width` is divided evenly across `padding-left` and `padding-right` for the column 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.

{% highlight scss %}
$grid-columns: 12;
$grid-gutter-width: 30px;
$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;
{% endhighlight %}

### Grid tiers
Expand Down
12 changes: 9 additions & 3 deletions scss/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,9 +150,15 @@ $container-max-widths: (
//
// Set the number of columns and specify the width of the gutters.

$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;

$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;

// Typography
//
Expand Down
10 changes: 3 additions & 7 deletions scss/mixins/_grid-framework.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,18 @@
// 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, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {

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

@if $enable-flex {
width: 100%;
}

@include make-gutters($gutters);
}

$breakpoint-counter: 0;
Expand All @@ -38,8 +36,6 @@
flex-grow: 1;
max-width: 100%;
min-height: 1px;
padding-right: ($grid-gutter-width / 2);
padding-left: ($grid-gutter-width / 2);
}
}

Expand Down
36 changes: 29 additions & 7 deletions scss/mixins/_grid.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
//
// Generate semantic grid columns with these mixins.

@mixin make-container($gutter: $grid-gutter-width) {
@mixin make-container($gutter: $grid-gutter-width-base) {
margin-left: auto;
margin-right: auto;
padding-left: ($gutter / 2);
Expand All @@ -22,29 +22,51 @@
}
}

@mixin make-row($gutter: $grid-gutter-width) {
@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) {
@if $enable-flex {
display: flex;
flex-wrap: wrap;
} @else {
@include clearfix();
}
margin-left: ($gutter / -2);
margin-right: ($gutter / -2);

@each $breakpoint in map-keys($gutters) {
@include media-breakpoint-up($breakpoint) {
$gutter: map-get($gutters, $breakpoint);
margin-right: ($gutter / -2);
margin-left: ($gutter / -2);
}
}
}

@mixin make-col-ready($gutter: $grid-gutter-width) {
@mixin make-col-ready($gutters: $grid-gutter-widths) {
position: relative;
min-height: 1px; // Prevent collapsing
padding-right: ($gutter / 2);
padding-left: ($gutter / 2);

// 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.
@if $enable-flex {
width: 100%;
}

@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-col($size, $columns: $grid-columns) {
Expand Down