Cleanup

- Rename and move the variable to variables file
- Move code to the grid file
- Use the mixin to generate our own classes
- Wrap in a grid classes enabled conditional
- Document the mixin

diff --git a/scss/_card.scss b/scss/_card.scss
index 93858592624b690341ca522ebdf9640a9f644615..f68855c56ccdaa76be37958455993edf1fbb9c38 100644 (file)
--- a/scss/_card.scss
+++ b/scss/_card.scss
@@ -175,18 +175,6 @@
   }
 }
 
-$row-columns: 6 !default;
-
-@each $breakpoint in map-keys($grid-breakpoints) {
-  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-
-  @for $i from 1 through $row-columns {
-    .row-cols#{$infix}-#{$i} > [class^="col"] {
-      flex: 0 0 calc(100% / #{$i});
-    }
-  }
-}
-
 
 //
 // Card groups

diff --git a/scss/_grid.scss b/scss/_grid.scss
index d36ee75d8874456f09700922ab5b6b2ceecdf44c..5f25e38f184be53c438d48289c399e93ff20d1ab 100644 (file)
--- a/scss/_grid.scss
+++ b/scss/_grid.scss
@@ -46,6 +46,16 @@
     @include make-row();
   }
 
+  @each $breakpoint in map-keys($grid-breakpoints) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+    @for $i from 1 through $grid-row-columns {
+      .row-cols#{$infix}-#{$i} {
+        @include row-cols($i);
+      }
+    }
+  }
+
   // Remove the negative margin from default .row, then the horizontal padding
   // from all immediate children columns (to prevent runaway style inheritance).
   .no-gutters {

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 850344aac0943cf7bf872f840fd7f6672a140162..e5b1a797dff2fa28c83254a038b95dd9ff5547fd 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -215,6 +215,7 @@ $container-max-widths: (
 
 $grid-columns:                12 !default;
 $grid-gutter-width:           30px !default;
+$grid-row-columns:            6 !default;
 
 
 // Container padding

diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss
index b85e31bc081e3254334f2a6113bc0847d5319202..f0b6c5270031a63d50b055769c939fd7d3f84a00 100644 (file)
--- a/scss/mixins/_grid.scss
+++ b/scss/mixins/_grid.scss
@@ -49,3 +49,14 @@
   $num: $size / $columns;
   margin-left: if($num == 0, 0, percentage($num));
 }
+
+// Row columns
+//
+// Specify on a parent element(e.g., .row) to force immediate children into NN
+// numberof columns. Supports wrapping to new lines, but does not do a Masonry
+// style grid.
+@mixin row-cols($count) {
+  & > [class^="col"] {
+    flex: 0 0 calc(100% / #{$count});
+  }
+}

diff --git a/site/content/docs/4.3/layout/grid.md b/site/content/docs/4.3/layout/grid.md
index 372f68e738f5869b888877d967b8b43f9ea90ba0..2d839968ffeaf7e3c9a3ce0051a62a838029b67f 100644 (file)
--- a/site/content/docs/4.3/layout/grid.md
+++ b/site/content/docs/4.3/layout/grid.md
@@ -369,6 +369,20 @@ Use these row columns classes to quickly create basic grid layouts or to control
 {{< /example >}}
 </div>
 
+You can also use the accompanying Sass mixin, `row-cols()`:
+
+{{< highlight scss >}}
+.element {
+  // Three columns to start
+  @include row-cols(3);
+
+  // Five columns from medium breakpoint up
+  @include media-breakpoint-up(md) {
+    @include row-cols(5);
+  }
+}
+{{< /highlight >}}
+
 ## Alignment
 
 Use flexbox alignment utilities to vertically and horizontally align columns. **Internet Explorer 10-11 do not support vertical alignment of flex items when the flex container has a `min-height` as shown below.** [See Flexbugs #3 for more details.](https://github.com/philipwalton/flexbugs#flexbug-3)