Skip to content

Commit 2bf0408

Browse files
tdhoopertdhooper
committed
Address twbs#11564: Vary grid gutter widths by breakpoint
Add new @grid-gutter-width-xx variables that are used to adjust the default grid gutter at each breakpoint. The old mixins can still be used, and the original fixed gutter can be used by setting the @grid-gutter-width-xx variables to the same value. - Add @grid-gutter-width-xs, @grid-gutter-width-sm, @grid-gutter-width-md, and @grid-gutter-width-lg variables - Use the new gutter widths when calculating .container widths - Modify the .make-grid-columns mixin to apply these new gutter widths at each breakpoint - Create the .container-fixed--vary-gutter and .make-row--vary-gutter mixins, and use them to grenerate the default .container and .row - Create the .make-xx-column--vary-gutter mixins
1 parent d23d9ee commit 2bf0408

File tree

4 files changed

+137
-9
lines changed

4 files changed

+137
-9
lines changed

‎less/grid.less

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
// Set the container width, and override it for fixed navbars in media queries.
99

1010
.container {
11-
.container-fixed();
11+
.container-fixed--vary-gutter();
1212

1313
@media (min-width: @screen-sm-min) {
1414
width: @container-sm;
@@ -28,7 +28,7 @@
2828
// width for fluid, full width layouts.
2929

3030
.container-fluid {
31-
.container-fixed();
31+
.container-fixed--vary-gutter();
3232
}
3333

3434

@@ -37,7 +37,7 @@
3737
// Rows contain and clear the floats of your columns.
3838

3939
.row {
40-
.make-row();
40+
.make-row--vary-gutter();
4141
}
4242

4343

‎less/mixins/grid-framework.less

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,20 @@
1919
// Prevent columns from collapsing when empty
2020
min-height: 1px;
2121
// Inner gutter via padding
22-
padding-left: (@grid-gutter-width / 2);
23-
padding-right: (@grid-gutter-width / 2);
22+
padding-left: (@grid-gutter-width-xs / 2);
23+
padding-right: (@grid-gutter-width-xs / 2);
24+
@media (min-width: @screen-sm-min) {
25+
padding-left: (@grid-gutter-width-sm / 2);
26+
padding-right: (@grid-gutter-width-sm / 2);
27+
}
28+
@media (min-width: @screen-md-min) {
29+
padding-left: (@grid-gutter-width-md / 2);
30+
padding-right: (@grid-gutter-width-md / 2);
31+
}
32+
@media (min-width: @screen-lg-min) {
33+
padding-left: (@grid-gutter-width-lg / 2);
34+
padding-right: (@grid-gutter-width-lg / 2);
35+
}
2436
}
2537
}
2638
.col(1); // kickstart it

‎less/mixins/grid.less

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,52 @@
1111
&:extend(.clearfix all);
1212
}
1313

14+
// Centered container element with gutter widths that vary by breakpoint
15+
.container-fixed--vary-gutter(
16+
@gutter-xs: @grid-gutter-width-xs;
17+
@gutter-sm: @grid-gutter-width-sm;
18+
@gutter-md: @grid-gutter-width-md;
19+
@gutter-lg: @grid-gutter-width-lg
20+
) {
21+
.container-fixed(@gutter-xs);
22+
@media (min-width: @screen-sm-min) {
23+
.container-fixed(@gutter-sm);
24+
}
25+
@media (min-width: @screen-md-min) {
26+
.container-fixed(@gutter-md);
27+
}
28+
@media (min-width: @screen-lg-min) {
29+
.container-fixed(@gutter-lg);
30+
}
31+
}
32+
1433
// Creates a wrapper for a series of columns
1534
.make-row(@gutter: @grid-gutter-width) {
1635
margin-left: (@gutter / -2);
1736
margin-right: (@gutter / -2);
1837
&:extend(.clearfix all);
1938
}
2039

40+
// Creates a wrapper for a series of columns with gutter widths that vary
41+
// by breakpoint
42+
.make-row--vary-gutter(
43+
@gutter-xs: @grid-gutter-width-xs;
44+
@gutter-sm: @grid-gutter-width-sm;
45+
@gutter-md: @grid-gutter-width-md;
46+
@gutter-lg: @grid-gutter-width-lg
47+
) {
48+
.make-row(@gutter-xs);
49+
@media (min-width: @screen-sm-min) {
50+
.make-row(@gutter-sm);
51+
}
52+
@media (min-width: @screen-md-min) {
53+
.make-row(@gutter-md);
54+
}
55+
@media (min-width: @screen-lg-min) {
56+
.make-row(@gutter-lg);
57+
}
58+
}
59+
2160
// Generate the extra small columns
2261
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
2362
position: relative;
@@ -36,6 +75,24 @@
3675
.make-xs-column-pull(@columns) {
3776
right: percentage((@columns / @grid-columns));
3877
}
78+
.make-xs-column--vary-gutter(
79+
@columns;
80+
@gutter-xs: @grid-gutter-width-xs;
81+
@gutter-sm: @grid-gutter-width-sm;
82+
@gutter-md: @grid-gutter-width-md;
83+
@gutter-lg: @grid-gutter-width-lg
84+
) {
85+
.make-xs-column(@columns, @gutter-xs);
86+
@media (min-width: @screen-sm-min) {
87+
.make-xs-column(@columns, @gutter-sm);
88+
}
89+
@media (min-width: @screen-md-min) {
90+
.make-xs-column(@columns, @gutter-md);
91+
}
92+
@media (min-width: @screen-lg-min) {
93+
.make-xs-column(@columns, @gutter-lg);
94+
}
95+
}
3996

4097
// Generate the small columns
4198
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
@@ -64,6 +121,24 @@
64121
right: percentage((@columns / @grid-columns));
65122
}
66123
}
124+
.make-sm-column--vary-gutter(
125+
@columns;
126+
@gutter-xs: @grid-gutter-width-xs;
127+
@gutter-sm: @grid-gutter-width-sm;
128+
@gutter-md: @grid-gutter-width-md;
129+
@gutter-lg: @grid-gutter-width-lg
130+
) {
131+
.make-sm-column(@columns, @gutter-xs);
132+
@media (min-width: @screen-sm-min) {
133+
.make-sm-column(@columns, @gutter-sm);
134+
}
135+
@media (min-width: @screen-md-min) {
136+
.make-sm-column(@columns, @gutter-md);
137+
}
138+
@media (min-width: @screen-lg-min) {
139+
.make-sm-column(@columns, @gutter-lg);
140+
}
141+
}
67142

68143
// Generate the medium columns
69144
.make-md-column(@columns; @gutter: @grid-gutter-width) {
@@ -92,6 +167,24 @@
92167
right: percentage((@columns / @grid-columns));
93168
}
94169
}
170+
.make-md-column--vary-gutter(
171+
@columns;
172+
@gutter-xs: @grid-gutter-width-xs;
173+
@gutter-sm: @grid-gutter-width-sm;
174+
@gutter-md: @grid-gutter-width-md;
175+
@gutter-lg: @grid-gutter-width-lg
176+
) {
177+
.make-md-column(@columns, @gutter-xs);
178+
@media (min-width: @screen-sm-min) {
179+
.make-md-column(@columns, @gutter-sm);
180+
}
181+
@media (min-width: @screen-md-min) {
182+
.make-md-column(@columns, @gutter-md);
183+
}
184+
@media (min-width: @screen-lg-min) {
185+
.make-md-column(@columns, @gutter-lg);
186+
}
187+
}
95188

96189
// Generate the large columns
97190
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
@@ -120,3 +213,21 @@
120213
right: percentage((@columns / @grid-columns));
121214
}
122215
}
216+
.make-lg-column--vary-gutter(
217+
@columns;
218+
@gutter-xs: @grid-gutter-width-xs;
219+
@gutter-sm: @grid-gutter-width-sm;
220+
@gutter-md: @grid-gutter-width-md;
221+
@gutter-lg: @grid-gutter-width-lg
222+
) {
223+
.make-lg-column(@columns, @gutter-xs);
224+
@media (min-width: @screen-sm-min) {
225+
.make-lg-column(@columns, @gutter-sm);
226+
}
227+
@media (min-width: @screen-md-min) {
228+
.make-lg-column(@columns, @gutter-md);
229+
}
230+
@media (min-width: @screen-lg-min) {
231+
.make-lg-column(@columns, @gutter-lg);
232+
}
233+
}

‎less/variables.less

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -302,7 +302,12 @@
302302
//** Number of columns in the grid.
303303
@grid-columns: 12;
304304
//** Padding between columns. Gets divided in half for the left and right.
305-
@grid-gutter-width: 30px;
305+
@grid-gutter-width: @grid-gutter-width-md;
306+
//** Vary gutter by screen size
307+
@grid-gutter-width-xs: 10px;
308+
@grid-gutter-width-sm: 20px;
309+
@grid-gutter-width-md: 30px;
310+
@grid-gutter-width-lg: 40px;
306311
// Navbar collapse
307312
//** Point at which the navbar becomes uncollapsed.
308313
@grid-float-breakpoint: @screen-sm-min;
@@ -315,17 +320,17 @@
315320
//## Define the maximum width of `.container` for different screen sizes.
316321

317322
// Small screen / tablet
318-
@container-tablet: ((720px + @grid-gutter-width));
323+
@container-tablet: ((720px + @grid-gutter-width-sm));
319324
//** For `@screen-sm-min` and up.
320325
@container-sm: @container-tablet;
321326

322327
// Medium screen / desktop
323-
@container-desktop: ((940px + @grid-gutter-width));
328+
@container-desktop: ((940px + @grid-gutter-width-md));
324329
//** For `@screen-md-min` and up.
325330
@container-md: @container-desktop;
326331

327332
// Large screen / wide desktop
328-
@container-large-desktop: ((1140px + @grid-gutter-width));
333+
@container-large-desktop: ((1140px + @grid-gutter-width-lg));
329334
//** For `@screen-lg-min` and up.
330335
@container-lg: @container-large-desktop;
331336

0 commit comments

Comments
 (0)