From 9402be4d44edafd7f558aa2b96f44172175fda34 Mon Sep 17 00:00:00 2001 From: Eric Nolte Date: Fri, 4 Nov 2016 09:16:27 -0600 Subject: [PATCH 1/2] 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) + } + } } } } From cec0c7c6d6c6926dd372a91172c0081bb09fcc09 Mon Sep 17 00:00:00 2001 From: Eric Nolte Date: Fri, 4 Nov 2016 10:54:34 -0600 Subject: [PATCH 2/2] Update docs to reflect new breakpoint naming convention --- docs/_layouts/docs.html | 4 +- docs/components/forms.md | 64 ++++++++++++++--------------- docs/components/modal.md | 8 ++-- docs/content/tables.md | 4 +- docs/examples/dashboard/index.html | 8 ++-- docs/examples/grid/index.html | 40 +++++++++--------- docs/examples/index.md | 34 +++++++-------- docs/examples/offcanvas/index.html | 16 ++++---- docs/index.html | 2 +- docs/layout/flexbox-grid.md | 34 +++++++-------- docs/layout/grid.md | 46 ++++++++++----------- docs/layout/responsive-utilities.md | 26 ++++++------ 12 files changed, 143 insertions(+), 143 deletions(-) diff --git a/docs/_layouts/docs.html b/docs/_layouts/docs.html index 6e8cddf212..4c719c5d8a 100644 --- a/docs/_layouts/docs.html +++ b/docs/_layouts/docs.html @@ -21,10 +21,10 @@
-
+
{% include nav-docs.html %}
-
+

{{ page.title }}

{{ content }}
diff --git a/docs/components/forms.md b/docs/components/forms.md index 2a2e9f9d23..00b7dc2507 100644 --- a/docs/components/forms.md +++ b/docs/components/forms.md @@ -172,80 +172,80 @@ Here are examples of `.form-control` applied to each textual HTML5 `` `ty {% example html %}
- -
+ +
- -
+ +
- -
+ +
- -
+ +
- -
+ +
- -
+ +
- -
+ +
- -
+ +
- -
+ +
- -
+ +
- -
+ +
- -
+ +
- -
+ +
@@ -630,14 +630,14 @@ Wrap inputs in grid columns, or any custom parent element, to easily enforce des {% example html %}
-
- +
+
-
- +
+
-
- +
+
{% endexample %} diff --git a/docs/components/modal.md b/docs/components/modal.md index 72cdbe5658..9c37461163 100644 --- a/docs/components/modal.md +++ b/docs/components/modal.md @@ -286,11 +286,11 @@ To take advantage of the Bootstrap grid system within a modal, just nest `.conta
Level 1: .col-sm-9
-
- Level 2: .col-xs-8 .col-sm-6 +
+ Level 2: .col-8 .col-sm-6
-
- Level 2: .col-xs-4 .col-sm-6 +
+ Level 2: .col-4 .col-sm-6
diff --git a/docs/content/tables.md b/docs/content/tables.md index 0e40c0ef7a..b927f35d57 100644 --- a/docs/content/tables.md +++ b/docs/content/tables.md @@ -445,8 +445,8 @@ Use contextual classes to color table rows or individual cells.
- - + + diff --git a/docs/examples/dashboard/index.html b/docs/examples/dashboard/index.html index 1670e8557c..b4bdcd3ac4 100644 --- a/docs/examples/dashboard/index.html +++ b/docs/examples/dashboard/index.html @@ -62,22 +62,22 @@

Dashboard

-
+
Generic placeholder thumbnail

Label

Something else
-
+
Generic placeholder thumbnail

Label

Something else
-
+
Generic placeholder thumbnail

Label

Something else
-
+
Generic placeholder thumbnail

Label

Something else diff --git a/docs/examples/grid/index.html b/docs/examples/grid/index.html index 9b8e23f072..1400bfd9a7 100644 --- a/docs/examples/grid/index.html +++ b/docs/examples/grid/index.html @@ -28,9 +28,9 @@

There are five tiers to the Bootstrap grid system, one for each range of devices we support. Each tier starts at a minimum viewport size and automatically applies to the larger devices unless overridden.

-
.col-xs-4
-
.col-xs-4
-
.col-xs-4
+
.col-4
+
.col-4
+
.col-4
@@ -105,17 +105,17 @@

The Bootstrap v4 grid system has five tiers of classes: xs (extra small), sm (small), md (medium), lg (large), and xl (extra large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.

Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.

-
.col-xs-12 .col-md-8
-
.col-xs-6 .col-md-4
+
.col-12 .col-md-8
+
.col-6 .col-md-4
-
.col-xs-6 .col-md-4
-
.col-xs-6 .col-md-4
-
.col-xs-6 .col-md-4
+
.col-6 .col-md-4
+
.col-6 .col-md-4
+
.col-6 .col-md-4
-
.col-xs-6
-
.col-xs-6
+
.col-6
+
.col-6
@@ -123,13 +123,13 @@

Mixed: mobile, tablet, and desktop

-
.col-xs-12 .col-sm-6 .col-lg-8
-
.col-xs-6 .col-lg-4
+
.col-12 .col-sm-6 .col-lg-8
+
.col-6 .col-lg-4
-
.col-xs-6 .col-sm-4
-
.col-xs-6 .col-sm-4
-
.col-xs-6 .col-sm-4
+
.col-6 .col-sm-4
+
.col-6 .col-sm-4
+
.col-6 .col-sm-4
@@ -137,18 +137,18 @@

Column clearing

Clear floats at specific breakpoints to prevent awkward wrapping with uneven content.

-
- .col-xs-6 .col-sm-3 +
+ .col-6 .col-sm-3
Resize your viewport or check it out on your phone for an example.
-
.col-xs-6 .col-sm-3
+
.col-6 .col-sm-3
-
.col-xs-6 .col-sm-3
-
.col-xs-6 .col-sm-3
+
.col-6 .col-sm-3
+
.col-6 .col-sm-3
diff --git a/docs/examples/index.md b/docs/examples/index.md index 49e43793a1..b9c6dd6f1b 100644 --- a/docs/examples/index.md +++ b/docs/examples/index.md @@ -10,14 +10,14 @@ title: Examples Examples that focus on implementing uses of built-in components provided by Bootstrap.
-
+

Starter template

Nothing but the basics: compiled CSS and JavaScript.

-
+
@@ -26,14 +26,14 @@ Examples that focus on implementing uses of built-in components provided by Boot
-
+

Jumbotron

Build around the jumbotron with a navbar and some basic grid columns.

-
+
@@ -47,14 +47,14 @@ Examples that focus on implementing uses of built-in components provided by Boot Taking the default navbar component and showing how it can be moved, placed, and extended.
-
+

Navbar

Super basic template that includes the navbar along with some additional content.

-
+
@@ -63,7 +63,7 @@ Taking the default navbar component and showing how it can be moved, placed, and
-
+
@@ -77,14 +77,14 @@ Taking the default navbar component and showing how it can be moved, placed, and Brand new components and templates to help folks quickly get started with Bootstrap and demonstrate best practices for adding onto the framework.
-
+

Album

Simple one-page template for photo galleries, portfolios, and more.

-
+
@@ -93,14 +93,14 @@ Brand new components and templates to help folks quickly get started with Bootst
-
+

Carousel

Customize the navbar and carousel, then add some new components.

-
+
@@ -109,14 +109,14 @@ Brand new components and templates to help folks quickly get started with Bootst
-
+

Dashboard

Basic admin dashboard shell with fixed sidebar and navbar.

-
+
@@ -125,14 +125,14 @@ Brand new components and templates to help folks quickly get started with Bootst
-
+

Justified nav

Create a custom navbar with justified links. Heads up! Not too Safari friendly.

-
+
@@ -141,7 +141,7 @@ Brand new components and templates to help folks quickly get started with Bootst
-
+
@@ -155,7 +155,7 @@ Brand new components and templates to help folks quickly get started with Bootst Examples that focus on future-friendly features or techniques.
-
+
diff --git a/docs/examples/offcanvas/index.html b/docs/examples/offcanvas/index.html index 669221fa5b..cf59f4722d 100644 --- a/docs/examples/offcanvas/index.html +++ b/docs/examples/offcanvas/index.html @@ -34,7 +34,7 @@
-
+

@@ -43,32 +43,32 @@

This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.

-
+

Heading

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

View details »

-
+

Heading

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

View details »

-
+

Heading

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

View details »

-
+

Heading

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

View details »

-
+

Heading

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

View details »

-
+

Heading

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

View details »

@@ -76,7 +76,7 @@
-