From cc248791b0f260aa6e0505a0aa7c3faeb1cbc797 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Tue, 23 Jul 2019 23:00:29 -0700
Subject: [PATCH] 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
---
scss/_card.scss | 12 ------------
scss/_grid.scss | 10 ++++++++++
scss/_variables.scss | 1 +
scss/mixins/_grid.scss | 11 +++++++++++
site/content/docs/4.3/layout/grid.md | 14 ++++++++++++++
5 files changed, 36 insertions(+), 12 deletions(-)
diff --git a/scss/_card.scss b/scss/_card.scss
index 9385859262..f68855c56c 100644
--- 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 d36ee75d88..5f25e38f18 100644
--- 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 850344aac0..e5b1a797df 100644
--- 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 b85e31bc08..f0b6c52700 100644
--- 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 372f68e738..2d839968ff 100644
--- 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)
--
GitLab