Skip to content

Commit

Permalink
Address twbs#11564: Vary grid gutter widths by breakpoint
Browse files Browse the repository at this point in the history 
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
  • Loading branch information
@tdhooper
tdhooper committed Jul 1, 2014
1 parent d23d9ee commit 2bf0408
Show file tree
Hide file tree
Showing 4 changed files with 137 additions and 9 deletions.
6 changes: 3 additions & 3 deletions less/grid.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
// Set the container width, and override it for fixed navbars in media queries.

.container {
.container-fixed();
.container-fixed--vary-gutter();

@media (min-width: @screen-sm-min) {
width: @container-sm;
Expand All @@ -28,7 +28,7 @@
// width for fluid, full width layouts.

.container-fluid {
.container-fixed();
.container-fixed--vary-gutter();
}


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

.row {
.make-row();
.make-row--vary-gutter();
}


Expand Down
16 changes: 14 additions & 2 deletions less/mixins/grid-framework.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,20 @@
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@grid-gutter-width / 2);
padding-right: (@grid-gutter-width / 2);
padding-left: (@grid-gutter-width-xs / 2);
padding-right: (@grid-gutter-width-xs / 2);
@media (min-width: @screen-sm-min) {
padding-left: (@grid-gutter-width-sm / 2);
padding-right: (@grid-gutter-width-sm / 2);
}
@media (min-width: @screen-md-min) {
padding-left: (@grid-gutter-width-md / 2);
padding-right: (@grid-gutter-width-md / 2);
}
@media (min-width: @screen-lg-min) {
padding-left: (@grid-gutter-width-lg / 2);
padding-right: (@grid-gutter-width-lg / 2);
}
}
}
.col(1); // kickstart it
Expand Down
111 changes: 111 additions & 0 deletions less/mixins/grid.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,52 @@
&:extend(.clearfix all);
}

// Centered container element with gutter widths that vary by breakpoint
.container-fixed--vary-gutter(
@gutter-xs: @grid-gutter-width-xs;
@gutter-sm: @grid-gutter-width-sm;
@gutter-md: @grid-gutter-width-md;
@gutter-lg: @grid-gutter-width-lg
) {
.container-fixed(@gutter-xs);
@media (min-width: @screen-sm-min) {
.container-fixed(@gutter-sm);
}
@media (min-width: @screen-md-min) {
.container-fixed(@gutter-md);
}
@media (min-width: @screen-lg-min) {
.container-fixed(@gutter-lg);
}
}

// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
&:extend(.clearfix all);
}

// Creates a wrapper for a series of columns with gutter widths that vary
// by breakpoint
.make-row--vary-gutter(
@gutter-xs: @grid-gutter-width-xs;
@gutter-sm: @grid-gutter-width-sm;
@gutter-md: @grid-gutter-width-md;
@gutter-lg: @grid-gutter-width-lg
) {
.make-row(@gutter-xs);
@media (min-width: @screen-sm-min) {
.make-row(@gutter-sm);
}
@media (min-width: @screen-md-min) {
.make-row(@gutter-md);
}
@media (min-width: @screen-lg-min) {
.make-row(@gutter-lg);
}
}

// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
Expand All @@ -36,6 +75,24 @@
.make-xs-column-pull(@columns) {
right: percentage((@columns / @grid-columns));
}
.make-xs-column--vary-gutter(
@columns;
@gutter-xs: @grid-gutter-width-xs;
@gutter-sm: @grid-gutter-width-sm;
@gutter-md: @grid-gutter-width-md;
@gutter-lg: @grid-gutter-width-lg
) {
.make-xs-column(@columns, @gutter-xs);
@media (min-width: @screen-sm-min) {
.make-xs-column(@columns, @gutter-sm);
}
@media (min-width: @screen-md-min) {
.make-xs-column(@columns, @gutter-md);
}
@media (min-width: @screen-lg-min) {
.make-xs-column(@columns, @gutter-lg);
}
}

// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
Expand Down Expand Up @@ -64,6 +121,24 @@
right: percentage((@columns / @grid-columns));
}
}
.make-sm-column--vary-gutter(
@columns;
@gutter-xs: @grid-gutter-width-xs;
@gutter-sm: @grid-gutter-width-sm;
@gutter-md: @grid-gutter-width-md;
@gutter-lg: @grid-gutter-width-lg
) {
.make-sm-column(@columns, @gutter-xs);
@media (min-width: @screen-sm-min) {
.make-sm-column(@columns, @gutter-sm);
}
@media (min-width: @screen-md-min) {
.make-sm-column(@columns, @gutter-md);
}
@media (min-width: @screen-lg-min) {
.make-sm-column(@columns, @gutter-lg);
}
}

// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
Expand Down Expand Up @@ -92,6 +167,24 @@
right: percentage((@columns / @grid-columns));
}
}
.make-md-column--vary-gutter(
@columns;
@gutter-xs: @grid-gutter-width-xs;
@gutter-sm: @grid-gutter-width-sm;
@gutter-md: @grid-gutter-width-md;
@gutter-lg: @grid-gutter-width-lg
) {
.make-md-column(@columns, @gutter-xs);
@media (min-width: @screen-sm-min) {
.make-md-column(@columns, @gutter-sm);
}
@media (min-width: @screen-md-min) {
.make-md-column(@columns, @gutter-md);
}
@media (min-width: @screen-lg-min) {
.make-md-column(@columns, @gutter-lg);
}
}

// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
Expand Down Expand Up @@ -120,3 +213,21 @@
right: percentage((@columns / @grid-columns));
}
}
.make-lg-column--vary-gutter(
@columns;
@gutter-xs: @grid-gutter-width-xs;
@gutter-sm: @grid-gutter-width-sm;
@gutter-md: @grid-gutter-width-md;
@gutter-lg: @grid-gutter-width-lg
) {
.make-lg-column(@columns, @gutter-xs);
@media (min-width: @screen-sm-min) {
.make-lg-column(@columns, @gutter-sm);
}
@media (min-width: @screen-md-min) {
.make-lg-column(@columns, @gutter-md);
}
@media (min-width: @screen-lg-min) {
.make-lg-column(@columns, @gutter-lg);
}
}
13 changes: 9 additions & 4 deletions less/variables.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -302,7 +302,12 @@
//** Number of columns in the grid.
@grid-columns: 12;
//** Padding between columns. Gets divided in half for the left and right.
@grid-gutter-width: 30px;
@grid-gutter-width: @grid-gutter-width-md;
//** Vary gutter by screen size
@grid-gutter-width-xs: 10px;
@grid-gutter-width-sm: 20px;
@grid-gutter-width-md: 30px;
@grid-gutter-width-lg: 40px;
// Navbar collapse
//** Point at which the navbar becomes uncollapsed.
@grid-float-breakpoint: @screen-sm-min;
Expand All @@ -315,17 +320,17 @@
//## Define the maximum width of `.container` for different screen sizes.

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

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

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

Expand Down

0 comments on commit 2bf0408

Please sign in to comment.