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.

diff --git a/docs/4.0/layout/grid.md b/docs/4.0/layout/grid.md
index a4fbf9ca5d17d709de7a9afa68d233aa21617186..5921b8c159c9429c746f97eee1d82182303834f4 100644 (file)
--- 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 %}
 </div>
 
+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/).
+
+<div class="bd-example-row">           
+{% example html %}             
+<div class="row">              
+  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>             
+  <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>           
+</div>         
+
+<div class="row">              
+  <div class="col-sm-6 col-md-5 col-lg-6">.col.col-sm-6.col-md-5.col-lg-6</div>                
+  <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 offset-lg-0</div>         
+</div>         
+{% endexample %}               
+</div>
+
 ## 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.
+
+<div class="bd-example-row">
+{% example html %}
+<div class="row">
+  <div class="col-md-4">.col-md-4</div>
+  <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
+</div>
+<div class="row">
+  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
+  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
+</div>
+<div class="row">
+  <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
+</div>
+{% endexample %}
+</div>
+
+#### 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.
 
 <div class="bd-example-row">
 {% 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 d8195ddfa19c35275f4d0bc867f7a4fef38b9ebc..a9e7c7590da5fbcdff6de86a9b2e43a0f5be73a0 100644 (file)
--- 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 b694b4d012bbb8e23ff95e9369ea2468893a7cad..584c78b9270451e3822184dffb98b787105abff6 100644 (file)
--- 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);
+}