From 7ff1a159ce922771cc2293b7aef5eb00fb917c02 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 14 Aug 2017 22:30:44 -0700 Subject: [PATCH] Restore grid offset classes Fixes #23360 by restoring just the offset class generation to our grid framework mixins. Also restores the `make-col-offset` mixin. Docs have been restored to illustrate this behavior and merged with the newer margin utilities examples. --- docs/4.0/layout/grid.md | 47 ++++++++++++++++++++++++++++++-- scss/mixins/_grid-framework.scss | 9 ++++++ scss/mixins/_grid.scss | 4 +++ 3 files changed, 58 insertions(+), 2 deletions(-) diff --git a/docs/4.0/layout/grid.md b/docs/4.0/layout/grid.md index a4fbf9ca5d17..5921b8c159c9 100644 --- a/docs/4.0/layout/grid.md +++ b/docs/4.0/layout/grid.md @@ -493,6 +493,22 @@ 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. 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 @@ -519,7 +535,31 @@ Use `.order-` classes for controlling the **visual order** of your content. Thes ### Offsetting 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. +You can offset grid columns in two ways: our responsive `.offset-` grid classes and our [margin utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/). Grid classes are sized to match columns while margins are more useful for quick layouts where the width of the offset is variable. + +#### Offset classes + +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. + +
+{% 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-6 .offset-md-3
+
+{% endexample %} +
+ +#### Margin utilities + +With the move to flexbox in v4, you can use margin utilities like `.mr-auto` to force sibling columns away from one another.
{% example html %} @@ -604,6 +644,9 @@ 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); {% endhighlight %} ### Example usage @@ -684,4 +727,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 and ordering. 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, offsets, and ordering. Responsive visibility utilities will also be updated to use the custom breakpoints. diff --git a/scss/mixins/_grid-framework.scss b/scss/mixins/_grid-framework.scss index d8195ddfa19c..a9e7c7590da5 100644 --- a/scss/mixins/_grid-framework.scss +++ b/scss/mixins/_grid-framework.scss @@ -51,6 +51,15 @@ order: $i; } } + + // `$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-offset($i, $columns) + } + } + } } } } diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss index b694b4d012bb..584c78b92704 100644 --- a/scss/mixins/_grid.scss +++ b/scss/mixins/_grid.scss @@ -45,3 +45,7 @@ // do not appear to require this. max-width: percentage($size / $columns); } + +@mixin make-col-offset($size, $columns: $grid-columns) { + margin-left: percentage($size / $columns); +}