diff options
| author | Mark Otto <[email protected]> | 2014-12-04 21:02:04 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2014-12-04 21:02:04 -0800 |
| commit | a1a3a007b6c83b6142c47379d7c3e754deaf8193 (patch) | |
| tree | 04f73b40d3a2f9de5bb998a44546ce4df2d38602 /scss | |
| parent | 156750941b013f700c7338a81184c58b6fd7e9f0 (diff) | |
| download | bootstrap-a1a3a007b6c83b6142c47379d7c3e754deaf8193.tar.xz bootstrap-a1a3a007b6c83b6142c47379d7c3e754deaf8193.zip | |
tweak grid docs, add new tier
Diffstat (limited to 'scss')
| -rw-r--r-- | scss/_grid.scss | 9 | ||||
| -rw-r--r-- | scss/_variables.scss | 25 | ||||
| -rw-r--r-- | scss/mixins/_grid-framework.scss | 4 |
3 files changed, 27 insertions, 11 deletions
diff --git a/scss/_grid.scss b/scss/_grid.scss index 57a2dd006..6374d77de 100644 --- a/scss/_grid.scss +++ b/scss/_grid.scss @@ -82,3 +82,12 @@ @include media-lg { @include make-grid(lg); } + + +// Large grid +// +// Columns, offsets, pushes, and pulls for the large desktop device range. + +@include media-lg { + @include make-grid(xl); +} diff --git a/scss/_variables.scss b/scss/_variables.scss index 99903284a..703e582ef 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -272,16 +272,20 @@ $zindex-modal: 1040; // //## Define the minimum and maximum dimensions at which your layout will change, adapting to different screen sizes. -// Large screen / wide desktop -$screen-lg-min: 75em; +// Extra large screen / wide desktop +$screen-xl-min: 75em; -// Medium screen / desktop -$screen-md-min: 62em; +// Large screen / desktop +$screen-lg-min: 62em; +$screen-lg-max: ($screen-xl-min - .1); + +// Medium screen / tablet +$screen-md-min: 48em; $screen-md-max: ($screen-lg-min - .1); -// Small screen / tablet -$screen-sm-min: 48em; +// Small screen / phone $screen-sm-max: ($screen-md-min - .1); +$screen-sm-min: 34em; // Extra small screen / phone $screen-xs-max: ($screen-sm-min - .1); @@ -306,14 +310,17 @@ $grid-float-breakpoint-max: ($grid-float-breakpoint - 1); // //## Define the maximum width of `.container` for different screen sizes. +//** For `$screen-xs-min` and up. +$container-sm: 34em; // 480 + //** For `$screen-sm-min` and up. -$container-sm: 45rem; // 720 +$container-md: 45rem; // 720 //** For `$screen-md-min` and up. -$container-md: 60rem; // 960 +$container-lg: 60rem; // 960 //** For `$screen-lg-min` and up. -$container-lg: 72.25rem; // 1140 +$container-xl: 72.25rem; // 1140 //== Navbar diff --git a/scss/mixins/_grid-framework.scss b/scss/mixins/_grid-framework.scss index 13c27c374..6c0fd530b 100644 --- a/scss/mixins/_grid-framework.scss +++ b/scss/mixins/_grid-framework.scss @@ -4,9 +4,9 @@ // any value of `$grid-columns`. // [converter] This is defined recursively in LESS, but Sass supports real loops -@mixin make-grid-columns($i: 1, $list: ".col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}") { +@mixin make-grid-columns($i: 1, $list: ".col-#{$i}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}, .col-xl-#{$i}") { @for $i from (1 + 1) through $grid-columns { - $list: "#{$list}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}"; + $list: "#{$list}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}, .col-xl-#{$i}"; } #{$list} { position: relative; |