adds card-columns feature

diff --git a/docs/pages/card.md b/docs/pages/card.md
index a99c751b7df8e48e1155c9d06a2774e738709ef3..b881db60f0a4532c10d0559b8e538936e08fa9c7 100644 (file)
--- a/docs/pages/card.md
+++ b/docs/pages/card.md
@@ -178,3 +178,78 @@ You can either set the width of cards with custom css or add them into the Found
   </div>
 </div>
 ```
+
+## Card columns
+
+Cards can be organized into <a href="http://masonry.desandro.com/" target="_blank">Masonry-like</a> columns with just CSS by wrapping them in .card-columns. Cards are built with <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts" target="_blank">CSS column</a> properties instead of flexbox for easier alignment. Cards are ordered from top to bottom and left to right.
+
+Heads up! Your mileage with card columns may vary. To prevent cards breaking across columns, we must set them to `display: inline-block` as `column-break-inside: avoid` isn’t a bulletproof solution yet.
+
+```html_example
+<div class="card-columns">
+  <div class="card">
+    <img src="http://placehold.it/350x250">
+    <div class="card-section">
+      <h4>Card title that wraps to a new line</h4>
+      <p>This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+    </div>
+  </div>
+  <div class="card">
+    <div class="card-section">
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+      <p><small>Updated: 10 min ago</small></p>
+    </div>
+  </div>
+  <div class="card">
+    <img src="http://placehold.it/350x250">
+    <div class="card-section">
+      <h4>Card title</h4>
+      <p>This card has supporting text below as a natural lead-in to additional content.</p>
+      <p><small>Updated: 10 min ago</small></p>
+    </div>
+  </div>
+  <div class="card text-center" style="color: #fff; background: dodgerblue;">
+    <div class="card-section">
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
+      <p><small>Updated: 10 min ago</small></p>
+    </div>
+  </div>
+  <div class="card text-center">
+    <div class="card-section">
+      <h4>Card title.</h4>
+      <p>This card has supporting text below as a natural lead-in to additional content.</p>
+      <p><small>Updated: 10 min ago</small></p>
+    </div>
+  </div>
+  <div class="card">
+    <img src="http://placehold.it/300x350">
+  </div>
+  <div class="card">
+    <div class="card-section">
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+      <p><small>Updated: 10 min ago</small></p>
+    </div>
+  </div>
+  <div class="card">
+    <img src="http://placehold.it/350x250">
+    <div class="card-section">
+      <h4>Card title</h4>
+      <p>This card has supporting text below as a natural lead-in to additional content.</p>
+      <p><small>Updated: 10 min ago</small></p>
+    </div>
+  </div>
+</div>
+```
+
+Card columns can also be extended and customized with some additional code. Shown below is an extension of the `.card-columns` class using the same CSS we use—CSS columns— to generate a set of responsive tiers for changing the number of columns.
+
+```scss
+.card-columns {
+  @include breakpoint(large) {
+    column-count: 4;
+  }
+  @include breakpoint(xlarge) {
+    column-count: 5;
+  }
+}
+```

diff --git a/scss/components/_card.scss b/scss/components/_card.scss
index e6305730bf47eaf5ef9224795d096feedc1181c0..4fc645cded5f2308c06fb7a29a23c93051ad0861 100644 (file)
--- a/scss/components/_card.scss
+++ b/scss/components/_card.scss
@@ -38,13 +38,21 @@ $card-padding: $global-padding !default;
 /// @type number
 $card-margin: $global-margin !default;
 
+/// Default columns in a `.card-columns` wrapper.
+/// @type number
+$card-columns-count: 3 !default;
+
+/// Default gutter between cards in a `.card-columns` wrapper.
+/// @type number
+$card-columns-gap: $card-margin !default;
+
 /// Adds styles for a card container.
-/// @param {Color} $background - Background color of the card.
-/// @param {Color} $color - font color of the card.
-/// @param {Number} $margin - Bottom margin of the card.
-/// @param {List} $border - Border around the card.
-/// @param {List} $radius - border radius of the card.
-/// @param {List} $shadow - box shadow of the card.
+/// @param {Color} $background [$white] - Background color of the card.
+/// @param {Color} $color [$body-font-color] - font color of the card.
+/// @param {Number} $margin [$global-margin] - Bottom margin of the card.
+/// @param {List} $border [1px solid $light-gray] - Border around the card.
+/// @param {List} $radius [$global-radius] - border radius of the card.
+/// @param {List} $shadow [none] - box shadow of the card.
 @mixin card-container(
   $background: $card-background,
   $color: $card-font-color,
@@ -106,6 +114,28 @@ $card-margin: $global-margin !default;
   }
 }
 
+/// Adds styles for card columns.
+/// @param {Number} $columns [3] - Number of columns.
+/// @param {Number} $gap [$card-margin] - Horizontal spacing between columns.
+@mixin card-columns-section(
+  $columns: $card-columns-count,
+  $gap: $card-columns-gap
+) {
+  @include breakpoint(medium) {
+    column-count: $columns;
+    column-gap: $gap;
+  }
+}
+
+.card-columns {
+  @include card-columns-section;
+
+  .card {
+    display: inline-block; // Don't let them vertically span multiple columns
+    width: 100%; // Don't let their width change
+  }
+}
+
 @mixin foundation-card {
   .card {
     @include card-container;