rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-19 16:54:24 +01:00
Code Issues Actions Packages Releases Activity

Update grid mixins to omit lowest breakpoint

Browse Source 
The new breakpiont-limited class pattern is to omit the breakpoint size when using the lowest size eg. col-xs-12 to col-12. This commit implements this pattern to the grid system.
This commit is contained in:
Eric Nolte 2016-11-04 09:16:27 -06:00
parent cd5c7a2263
commit 9402be4d44
1 changed files with 44 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
scss/mixins/_grid-framework.scss
View File

@ -19,17 +19,28 @@
$breakpoint-counter: 0; $breakpoint-counter: 0;
@each $breakpoint in map-keys($breakpoints) { @each $breakpoint in map-keys($breakpoints) {
$breakpoint-counter: ($breakpoint-counter + 1); $breakpoint-counter: ($breakpoint-counter + 1);
// Allow columns to stretch full width below their breakpoints @if $breakpoint-counter == 1 {
.col-#{$breakpoint} { @for $i from 1 through $columns {
@extend %grid-column; .col-#{$i} {
@extend %grid-column;
}
}
} }
@for $i from 1 through $columns { @if $breakpoint-counter != 1 {
.col-#{$breakpoint}-#{$i} { // Allow columns to stretch full width below their breakpoints
.col-#{$breakpoint} {
@extend %grid-column; @extend %grid-column;
} }
@for $i from 1 through $columns {
.col-#{$breakpoint}-#{$i} {
@extend %grid-column;
}
}
} }
@include media-breakpoint-up($breakpoint, $breakpoints) { @include media-breakpoint-up($breakpoint, $breakpoints) {
@ -47,15 +58,29 @@
} }
@for $i from 1 through $columns { @for $i from 1 through $columns {
.col-#{$breakpoint}-#{$i} { @if $breakpoint-counter == 1 {
@include make-col($i, $columns); .col-#{$i} {
@include make-col($i, $columns);
}
}
@if $breakpoint-counter != 1 {
.col-#{$breakpoint}-#{$i} {
@include make-col($i, $columns);
}
} }
} }
@each $modifier in (pull, push) { @each $modifier in (pull, push) {
@for $i from 0 through $columns { @for $i from 0 through $columns {
.#{$modifier}-#{$breakpoint}-#{$i} { @if $breakpoint-counter == 1 {
@include make-col-modifier($modifier, $i, $columns) .#{$modifier}-#{$i} {
@include make-col-modifier($modifier, $i, $columns)
}
}
@if $breakpoint-counter != 1 {
.#{$modifier}-#{$breakpoint}-#{$i} {
@include make-col-modifier($modifier, $i, $columns)
}
} }
} }
} }
@ -63,9 +88,16 @@
// `$columns - 1` because offsetting by the width of an entire row isn't possible // `$columns - 1` because offsetting by the width of an entire row isn't possible
@for $i from 0 through ($columns - 1) { @for $i from 0 through ($columns - 1) {
@if $breakpoint-counter != 1 or $i != 0 { // Avoid emitting useless .offset-xs-0 @if $breakpoint-counter != 1 or $i != 0 { // Avoid emitting useless .offset-xs-0
.offset-#{$breakpoint}-#{$i} { @if $breakpoint-counter == 1 {
@include make-col-modifier(offset, $i, $columns) .offset-#{$i} {
} @include make-col-modifier(offset, $i, $columns)
}
}
@if $breakpoint-counter != 1 {
.offset-#{$breakpoint}-#{$i} {
@include make-col-modifier(offset, $i, $columns)
}
}
} }
} }
} }