Skip to content

Commit 0ef64d8

Browse files
Kovahpixelbandito
Kovah
authored and
pixelbandito
committed
Add breakpoint-specific gutters.
1 parent 3f01134 commit 0ef64d8

File tree

8 files changed

+87
-36
lines changed

8 files changed

+87
-36
lines changed

‎docs/assets/scss/_component-examples.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -324,7 +324,7 @@
324324

325325
.highlight {
326326
padding: 1rem;
327-
margin: 1rem (-$grid-gutter-width / 2);
327+
margin: 1rem (-$grid-gutter-width-base / 2);
328328
background-color: #f7f7f9;
329329

330330
@include media-breakpoint-up(sm) {

‎docs/assets/scss/_featurettes.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,10 @@
2626

2727
@include media-breakpoint-up(md) {
2828
.col-sm-6:first-child {
29-
padding-right: ($grid-gutter-width * 1.5);
29+
padding-right: ($grid-gutter-width-base * 1.5);
3030
};
3131
.col-sm-6:last-child {
32-
padding-left: ($grid-gutter-width * 1.5);
32+
padding-left: ($grid-gutter-width-base * 1.5);
3333
}
3434
}
3535
}

‎docs/assets/scss/_masthead.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
.bd-masthead {
44
position: relative;
5-
padding: 3rem ($grid-gutter-width / 2) 2rem;
5+
padding: 3rem ($grid-gutter-width-base / 2) 2rem;
66
color: $bd-purple-light;
77
text-align: center;
88
background-image: linear-gradient(135deg, darken($bd-purple, 20%), $bd-purple, lighten(saturate($bd-purple, 5%), 15%));

‎docs/assets/scss/_page-header.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// scss-lint:disable ImportantRule
22

33
.bd-pageheader {
4-
padding: 2rem ($grid-gutter-width / 2);
4+
padding: 2rem ($grid-gutter-width-base / 2);
55
margin-bottom: 1.5rem;
66
color: $bd-purple-light;
77
text-align: center;

‎docs/layout/grid.md

+41-14
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
---
1+
atom---
22
layout: docs
33
title: Grid system
44
group: layout
@@ -33,14 +33,14 @@ Sounds good? Great, let's move on to seeing all that in an example.
3333
If you're using Bootstrap's compiled CSS, this the example you'll want to start with.
3434

3535
{% example html %}
36-
<div class="container">
36+
<div class="container">a
3737
<div class="row">
3838
<div class="col-sm-4">
39-
One of three columns
39+
One of three columnsa
4040
</div>
4141
<div class="col-sm-4">
4242
One of three columns
43-
</div>
43+
</div>atom
4444
<div class="col-sm-4">
4545
One of three columns
4646
</div>
@@ -139,7 +139,15 @@ Variables and maps determine the number of columns, the gutter width, and the me
139139

140140
{% highlight scss %}
141141
$grid-columns: 12;
142-
$grid-gutter-width: 30px;
142+
$grid-gutter-width-base: 30px;
143+
144+
$grid-gutter-widths: (
145+
xs: $grid-gutter-width-base, // 30px
146+
sm: $grid-gutter-width-base, // 30px
147+
md: $grid-gutter-width-base, // 30px
148+
lg: $grid-gutter-width-base, // 30px
149+
xl: $grid-gutter-width-base // 30px
150+
)
143151

144152
$grid-breakpoints: (
145153
// Extra small screen / phone
@@ -168,30 +176,42 @@ Mixins are used in conjunction with the grid variables to generate semantic CSS
168176

169177
{% highlight scss %}
170178
// Creates a wrapper for a series of columns
171-
@mixin make-row($gutter: $grid-gutter-width) {
179+
@mixin make-row($gutters: $grid-gutter-widths) {
172180
@if $enable-flex {
173181
display: flex;
174182
flex-wrap: wrap;
175183
} @else {
176184
@include clearfix();
177185
}
178-
margin-left: ($gutter / -2);
179-
margin-right: ($gutter / -2);
186+
187+
@each $breakpoint in map-keys($gutters) {
188+
@include media-breakpoint-up($breakpoint) {
189+
$gutter: map-get($gutters, $breakpoint);
190+
margin-right: ($gutter / -2);
191+
margin-left: ($gutter / -2);
192+
}
193+
}
180194
}
181195

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

189201
// Prevent columns from becoming too narrow when at smaller grid tiers by
190202
// always setting `width: 100%;`. This works because we use `flex` values
191203
// later on to override this initial width.
192204
@if $enable-flex {
193205
width: 100%;
194206
}
207+
208+
@each $breakpoint in map-keys($gutters) {
209+
@include media-breakpoint-up($breakpoint) {
210+
$gutter: map-get($gutters, $breakpoint);
211+
padding-right: ($gutter / 2);
212+
padding-left: ($gutter / 2);
213+
}
214+
}
195215
}
196216

197217
@mixin make-col($size, $columns: $grid-columns) {
@@ -463,11 +483,18 @@ Using our built-in grid Sass variables and maps, it's possible to completely cus
463483

464484
### Columns and gutters
465485

466-
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.
486+
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.
467487

468488
{% highlight scss %}
469-
$grid-columns: 12;
470-
$grid-gutter-width: 30px;
489+
$grid-columns: 12 !default;
490+
$grid-gutter-width-base: 30px !default;
491+
$grid-gutter-widths: (
492+
xs: $grid-gutter-width-base,
493+
sm: $grid-gutter-width-base,
494+
md: $grid-gutter-width-base,
495+
lg: $grid-gutter-width-base,
496+
xl: $grid-gutter-width-base
497+
) !default;
471498
{% endhighlight %}
472499

473500
### Grid tiers

‎scss/_variables.scss

+9-3
Original file line numberDiff line numberDiff line change
@@ -150,9 +150,15 @@ $container-max-widths: (
150150
//
151151
// Set the number of columns and specify the width of the gutters.
152152

153-
$grid-columns: 12 !default;
154-
$grid-gutter-width: 30px !default;
155-
153+
$grid-columns: 12 !default;
154+
$grid-gutter-width-base: 30px !default;
155+
$grid-gutter-widths: (
156+
xs: $grid-gutter-width-base,
157+
sm: $grid-gutter-width-base,
158+
md: $grid-gutter-width-base,
159+
lg: $grid-gutter-width-base,
160+
xl: $grid-gutter-width-base
161+
) !default;
156162

157163
// Typography
158164
//

‎scss/mixins/_grid-framework.scss

+3-7
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,18 @@
33
// Used only by Bootstrap to generate the correct number of grid classes given
44
// any value of `$grid-columns`.
55

6-
@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
7-
6+
@mixin make-grid-columns($columns: $grid-columns, $gutters: $grid-gutter-widths, $breakpoints: $grid-breakpoints) {
87
// Common properties for all breakpoints
98
%grid-column {
109
position: relative;
1110
// Prevent columns from collapsing when empty
1211
min-height: 1px;
13-
// Inner gutter via padding
14-
padding-right: ($gutter / 2);
15-
padding-left: ($gutter / 2);
1612

1713
@if $enable-flex {
1814
width: 100%;
1915
}
16+
17+
@include make-gutters($gutters);
2018
}
2119

2220
$breakpoint-counter: 0;
@@ -38,8 +36,6 @@
3836
flex-grow: 1;
3937
max-width: 100%;
4038
min-height: 1px;
41-
padding-right: ($grid-gutter-width / 2);
42-
padding-left: ($grid-gutter-width / 2);
4339
}
4440
}
4541

‎scss/mixins/_grid.scss

+29-7
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
//
33
// Generate semantic grid columns with these mixins.
44

5-
@mixin make-container($gutter: $grid-gutter-width) {
5+
@mixin make-container($gutter: $grid-gutter-width-base) {
66
margin-left: auto;
77
margin-right: auto;
88
padding-left: ($gutter / 2);
@@ -22,29 +22,51 @@
2222
}
2323
}
2424

25-
@mixin make-row($gutter: $grid-gutter-width) {
25+
@mixin make-gutters($gutters: $grid-gutter-widths) {
26+
@each $breakpoint in map-keys($gutters) {
27+
@include media-breakpoint-up($breakpoint) {
28+
$gutter: map-get($gutters, $breakpoint);
29+
padding-right: ($gutter / 2);
30+
padding-left: ($gutter / 2);
31+
}
32+
}
33+
}
34+
35+
@mixin make-row($gutters: $grid-gutter-widths) {
2636
@if $enable-flex {
2737
display: flex;
2838
flex-wrap: wrap;
2939
} @else {
3040
@include clearfix();
3141
}
32-
margin-left: ($gutter / -2);
33-
margin-right: ($gutter / -2);
42+
43+
@each $breakpoint in map-keys($gutters) {
44+
@include media-breakpoint-up($breakpoint) {
45+
$gutter: map-get($gutters, $breakpoint);
46+
margin-right: ($gutter / -2);
47+
margin-left: ($gutter / -2);
48+
}
49+
}
3450
}
3551

36-
@mixin make-col-ready($gutter: $grid-gutter-width) {
52+
@mixin make-col-ready($gutters: $grid-gutter-widths) {
3753
position: relative;
3854
min-height: 1px; // Prevent collapsing
39-
padding-right: ($gutter / 2);
40-
padding-left: ($gutter / 2);
4155

4256
// Prevent columns from becoming too narrow when at smaller grid tiers by
4357
// always setting `width: 100%;`. This works because we use `flex` values
4458
// later on to override this initial width.
4559
@if $enable-flex {
4660
width: 100%;
4761
}
62+
63+
@each $breakpoint in map-keys($gutters) {
64+
@include media-breakpoint-up($breakpoint) {
65+
$gutter: map-get($gutters, $breakpoint);
66+
padding-right: ($gutter / 2);
67+
padding-left: ($gutter / 2);
68+
}
69+
}
4870
}
4971

5072
@mixin make-col($size, $columns: $grid-columns) {

0 commit comments

Comments
 (0)