From 9402be4d44edafd7f558aa2b96f44172175fda34 Mon Sep 17 00:00:00 2001 From: Eric Nolte Date: Fri, 4 Nov 2016 09:16:27 -0600 Subject: [PATCH] Update grid mixins to omit lowest breakpoint 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. --- scss/mixins/_grid-framework.scss | 56 +++++++++++++++++++++++++------- 1 file changed, 44 insertions(+), 12 deletions(-) diff --git a/scss/mixins/_grid-framework.scss b/scss/mixins/_grid-framework.scss index 5d79174893..4216ee30c3 100644 --- a/scss/mixins/_grid-framework.scss +++ b/scss/mixins/_grid-framework.scss @@ -19,17 +19,28 @@ $breakpoint-counter: 0; @each $breakpoint in map-keys($breakpoints) { + $breakpoint-counter: ($breakpoint-counter + 1); - // Allow columns to stretch full width below their breakpoints - .col-#{$breakpoint} { - @extend %grid-column; + @if $breakpoint-counter == 1 { + @for $i from 1 through $columns { + .col-#{$i} { + @extend %grid-column; + } + } } - @for $i from 1 through $columns { - .col-#{$breakpoint}-#{$i} { + @if $breakpoint-counter != 1 { + // Allow columns to stretch full width below their breakpoints + .col-#{$breakpoint} { @extend %grid-column; } + + @for $i from 1 through $columns { + .col-#{$breakpoint}-#{$i} { + @extend %grid-column; + } + } } @include media-breakpoint-up($breakpoint, $breakpoints) { @@ -47,15 +58,29 @@ } @for $i from 1 through $columns { - .col-#{$breakpoint}-#{$i} { - @include make-col($i, $columns); + @if $breakpoint-counter == 1 { + .col-#{$i} { + @include make-col($i, $columns); + } + } + @if $breakpoint-counter != 1 { + .col-#{$breakpoint}-#{$i} { + @include make-col($i, $columns); + } } } @each $modifier in (pull, push) { @for $i from 0 through $columns { - .#{$modifier}-#{$breakpoint}-#{$i} { - @include make-col-modifier($modifier, $i, $columns) + @if $breakpoint-counter == 1 { + .#{$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 @for $i from 0 through ($columns - 1) { @if $breakpoint-counter != 1 or $i != 0 { // Avoid emitting useless .offset-xs-0 - .offset-#{$breakpoint}-#{$i} { - @include make-col-modifier(offset, $i, $columns) - } + @if $breakpoint-counter == 1 { + .offset-#{$i} { + @include make-col-modifier(offset, $i, $columns) + } + } + @if $breakpoint-counter != 1 { + .offset-#{$breakpoint}-#{$i} { + @include make-col-modifier(offset, $i, $columns) + } + } } } }