From d694527cb0e357af0da4dab10c25c626b4ef5ab6 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 29 Jun 2017 22:33:33 -0700 Subject: [PATCH 1/7] Drop offsets and push/pull for new order variants --- docs/4.0/layout/grid.md | 32 ++++++++++---------------------- scss/mixins/_grid-framework.scss | 17 +++-------------- scss/utilities/_flex.scss | 4 ---- 3 files changed, 13 insertions(+), 40 deletions(-) diff --git a/docs/4.0/layout/grid.md b/docs/4.0/layout/grid.md index 7e256f235ca0..6cf741dd56db 100644 --- a/docs/4.0/layout/grid.md +++ b/docs/4.0/layout/grid.md @@ -520,19 +520,19 @@ In addition to column clearing at responsive breakpoints, you may need to **rese ### Flex order -Use flexbox utilities for controlling the **visual order** of your content. +Use `.order-` classes for controlling the **visual order** of your content. These classes are responsive, so you can set the `order` by breakpoint (e.g., `.order-1.order-md-2`). Includes support for `1` through `12` across all five grid tiers.
{% example html %}
-
+
First, but unordered
-
+
Second, but last
-
+
Third, but first
@@ -542,33 +542,21 @@ Use flexbox utilities for controlling the **visual order** of your content. ### Offsetting columns -Move columns to the right using `.offset-md-*` classes. These classes increase the left margin of a column by `*` columns. For example, `.offset-md-4` moves `.col-md-4` over four columns. +With the move to flexbox in v4, we no longer have v3's style of offset classes. Instead, use margin utilities like `.mr-auto` to force sibling columns away from one another.
{% example html %}
.col-md-4
-
.col-md-4 .offset-md-4
-
-
-
.col-md-3 .offset-md-3
-
.col-md-3 .offset-md-3
+
.col-md-4 .ml-auto
-
.col-md-6 .offset-md-3
-
-{% endexample %} +
.col-md-3 .ml-md-auto
+
.col-md-3 .ml-md-auto
- -### Push and pull - -Easily change the order of our built-in grid columns with `.push-md-*` and `.pull-md-*` modifier classes. - -
-{% example html %}
-
.col-md-9 .push-md-3
-
.col-md-3 .pull-md-9
+
.col-auto .mr-auto
+
.col-auto
{% endexample %}
diff --git a/scss/mixins/_grid-framework.scss b/scss/mixins/_grid-framework.scss index dba045fa7877..b64e7b917506 100644 --- a/scss/mixins/_grid-framework.scss +++ b/scss/mixins/_grid-framework.scss @@ -46,20 +46,9 @@ } } - @each $modifier in (pull, push) { - @for $i from 0 through $columns { - .#{$modifier}#{$infix}-#{$i} { - @include make-col-modifier($modifier, $i, $columns) - } - } - } - - // `$columns - 1` because offsetting by the width of an entire row isn't possible - @for $i from 0 through ($columns - 1) { - @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0 - .offset#{$infix}-#{$i} { - @include make-col-modifier(offset, $i, $columns) - } + @for $i from 1 through $columns { + .order#{$infix}-#{$i} { + order: $i } } } diff --git a/scss/utilities/_flex.scss b/scss/utilities/_flex.scss index cc696785dcbf..b28c0b97de98 100644 --- a/scss/utilities/_flex.scss +++ b/scss/utilities/_flex.scss @@ -6,10 +6,6 @@ @include media-breakpoint-up($breakpoint) { $infix: breakpoint-infix($breakpoint, $grid-breakpoints); - .order#{$infix}-first { order: -1; } - .order#{$infix}-last { order: 1; } - .order#{$infix}-0 { order: 0; } - .flex#{$infix}-row { flex-direction: row !important; } .flex#{$infix}-column { flex-direction: column !important; } .flex#{$infix}-row-reverse { flex-direction: row-reverse !important; } From 2b8ddfe3056898372f349c1648ead16a2e4b5a5c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 29 Jun 2017 22:40:08 -0700 Subject: [PATCH 2/7] Update _grid-framework.scss --- scss/mixins/_grid-framework.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scss/mixins/_grid-framework.scss b/scss/mixins/_grid-framework.scss index b64e7b917506..af0094a2c028 100644 --- a/scss/mixins/_grid-framework.scss +++ b/scss/mixins/_grid-framework.scss @@ -48,7 +48,7 @@ @for $i from 1 through $columns { .order#{$infix}-#{$i} { - order: $i + order: $i; } } } From d615bd9b85971b5e33e79f4e1dd3b3cd7c2e9d3a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 30 Jun 2017 09:07:10 -0700 Subject: [PATCH 3/7] drop the mixins --- scss/mixins/_grid.scss | 23 ----------------------- 1 file changed, 23 deletions(-) diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss index 25bdc74d426b..5c00f57d76a0 100644 --- a/scss/mixins/_grid.scss +++ b/scss/mixins/_grid.scss @@ -45,26 +45,3 @@ // do not appear to require this. max-width: percentage($size / $columns); } - -@mixin make-col-offset($size, $columns: $grid-columns) { - margin-left: percentage($size / $columns); -} - -@mixin make-col-push($size, $columns: $grid-columns) { - left: if($size > 0, percentage($size / $columns), auto); -} - -@mixin make-col-pull($size, $columns: $grid-columns) { - right: if($size > 0, percentage($size / $columns), auto); -} - -@mixin make-col-modifier($type, $size, $columns) { - // Work around the lack of dynamic mixin @include support (https://github.com/sass/sass/issues/626) - @if $type == push { - @include make-col-push($size, $columns); - } @else if $type == pull { - @include make-col-pull($size, $columns); - } @else if $type == offset { - @include make-col-offset($size, $columns); - } -} From 09d33bb5f8c932bd4d6353442a1e04128a2c3e8b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 30 Jun 2017 09:07:41 -0700 Subject: [PATCH 4/7] drop that part of the docs, not applicable --- docs/4.0/layout/grid.md | 16 ---------------- 1 file changed, 16 deletions(-) diff --git a/docs/4.0/layout/grid.md b/docs/4.0/layout/grid.md index 032d116529f9..324903756991 100644 --- a/docs/4.0/layout/grid.md +++ b/docs/4.0/layout/grid.md @@ -500,22 +500,6 @@ With the handful of grid tiers available, you're bound to run into issues where, {% endexample %}
-In addition to column clearing at responsive breakpoints, you may need to **reset offsets, pushes, or pulls**. See this in action in [the grid example]({{ site.baseurl }}/docs/{{ site.docs_version }}/examples/grid/). - -
-{% example html %} -
-
.col-sm-5 .col-md-6
-
.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0
-
- -
-
.col.col-sm-6.col-md-5.col-lg-6
-
.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0
-
-{% endexample %} -
- ## Reordering ### Flex order From b59d1b41bf02adeea6d8865edacd7bf3fe840c62 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 30 Jun 2017 09:07:46 -0700 Subject: [PATCH 5/7] this were removed --- docs/4.0/layout/grid.md | 5 ----- 1 file changed, 5 deletions(-) diff --git a/docs/4.0/layout/grid.md b/docs/4.0/layout/grid.md index 324903756991..1aac431418ff 100644 --- a/docs/4.0/layout/grid.md +++ b/docs/4.0/layout/grid.md @@ -611,11 +611,6 @@ Mixins are used in conjunction with the grid variables to generate semantic CSS // Make the element grid-ready (applying everything but the width) @include make-col-ready(); @include make-col($size, $columns: $grid-columns); - -// Get fancy by offsetting, or changing the sort order -@include make-col-offset($size, $columns: $grid-columns); -@include make-col-push($size, $columns: $grid-columns); -@include make-col-pull($size, $columns: $grid-columns); {% endhighlight %} ### Example usage From 6d0f8631dc4b4817fab9a9fdd95ba381be0b9c2b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 30 Jun 2017 09:07:49 -0700 Subject: [PATCH 6/7] formatting --- docs/4.0/layout/grid.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/4.0/layout/grid.md b/docs/4.0/layout/grid.md index 1aac431418ff..1adc438f1413 100644 --- a/docs/4.0/layout/grid.md +++ b/docs/4.0/layout/grid.md @@ -668,8 +668,8 @@ Using our built-in grid Sass variables and maps, it's possible to completely cus The number of grid columns can be modified via Sass variables. `$grid-columns` is used to generate the widths (in percent) of each individual column while `$grid-gutter-width` allows breakpoint-specific widths that are divided evenly across `padding-left` and `padding-right` for the column gutters. {% highlight scss %} -$grid-columns: 12 !default; -$grid-gutter-width: 30px !default; +$grid-columns: 12 !default; +$grid-gutter-width: 30px !default; {% endhighlight %} ### Grid tiers From f64b43ab3cce4bdab2db7e2dffb9e6ec5dd83c83 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 30 Jun 2017 09:08:45 -0700 Subject: [PATCH 7/7] update that docs bit too --- docs/4.0/layout/grid.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/4.0/layout/grid.md b/docs/4.0/layout/grid.md index 1adc438f1413..0cd8f62d5859 100644 --- a/docs/4.0/layout/grid.md +++ b/docs/4.0/layout/grid.md @@ -691,4 +691,4 @@ $container-max-widths: ( ); {% endhighlight %} -When making any changes to the Sass variables or maps, you'll need to save your changes and recompile. Doing so will out a brand new set of predefined grid classes for column widths, offsets, pushes, and pulls. Responsive visibility utilities will also be updated to use the custom breakpoints. +When making any changes to the Sass variables or maps, you'll need to save your changes and recompile. Doing so will out a brand new set of predefined grid classes for column widths and ordering. Responsive visibility utilities will also be updated to use the custom breakpoints.