feat(grid): Added dc-block-grid with examples

docs/demo/materials/02-grid/01-Grid/08-block-grid.html

@@ -0,0 +1,27 @@
+---
+notes: |
+    Block grids are great for making responsive pages.
+
+    Use `.dc-block-grid--[small|medium|large|huge]-[1-12]` on the `.dc-row` to create a block grid. The columns inside only need `.dc-column` class applied to them.
+
+    Block grids allow you to define how many columns per row you need based on the screen size. Block grids also facilitate you to add non-standard number of columns in a row like 5 columns.
+
+    Example below shows that the columns below will be placed as "1 per row" on small screens, "3 per row" on meduim screens, and "5 per row" on large screens.
+---
+<div class="dc-row dc-block-grid--small-1 dc-block-grid--medium-3 dc-block-grid--large-5">
+  <div class="dc-column">
+    <div class="dc-column__contents">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit quisquam, sit a.</div>
+  </div>
+  <div class="dc-column">
+    <div class="dc-column__contents">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt maxime aut recusandae.</div>
+  </div>
+  <div class="dc-column">
+    <div class="dc-column__contents">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam ratione hic, obcaecati!</div>
+  </div>
+  <div class="dc-column">
+    <div class="dc-column__contents">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur eum, error soluta.</div>
+  </div>
+  <div class="dc-column">
+    <div class="dc-column__contents">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, ab. Libero, deserunt.</div>
+  </div>
+</div>

docs/demo/materials/02-grid/04-scss-reference/01-mixins.html

@@ -66,6 +66,40 @@ <h3 class="dc-h3">
   </tbody>
 </table>
 
+<h3 class="dc-h3">
+  dc-block-grid
+</h3>
+
+<p class="dc-p">
+  Mixin for creating a block grid. <br>
+  Sets the flex value for the child columns <br>
+</p>
+
+<table class="dc-table">
+  <thead class="dc-table__thead">
+    <tr class="dc-table__tr">
+      <th class="dc-table__th">Parameter</th>
+      <th class="dc-table__th">Type</th>
+      <th class="dc-table__th">Default</th>
+      <th class="dc-table__th">Description</th>
+    </tr>
+  </thead>
+  <tbody class="dc-table__tbody">
+    <tr class="dc-table__tr">
+      <td class="dc-table__td">$columns</td>
+      <td class="dc-table__td">Number</td>
+      <td class="dc-table__td"></td>
+      <td class="dc-table__td">Number of columns in a row.</td>
+    </tr>
+    <tr class="dc-table__tr">
+      <td class="dc-table__td">$column-selector</td>
+      <td class="dc-table__td">String</td>
+      <td class="dc-table__td">".dc-column"</td>
+      <td class="dc-table__td">The selector class for columns within the row</td>
+    </tr>
+  </tbody>
+</table>
+
 <h3 class="dc-h3">
   grid-column-flex
 </h3>

src/styles/grid/_grid-classes.scss

@@ -128,6 +128,11 @@
                     max-width: grid-column-size($i);
                 }
 
+                //Block grid
+                .dc-block-grid--#{$br}-#{$i} {
+                    @include dc-block-grid($i);
+                }
+
                 //We need offsets for all sizes (from 0) except last.
                 $o: $i - 1;
 

src/styles/grid/_grid-mixins.scss

@@ -38,6 +38,23 @@
     }
 }
 
+// Block grid mixin for Dress Code
+//
+// @param {Number} $columns - Number of columns in each row
+// @param {String} $column-selector - Selector for column within the row.
+@mixin dc-block-grid (
+    $columns,
+    $column-selector: '.dc-column'
+) {
+    flex-wrap: wrap;
+    > #{$column-selector} {
+        $flex-percent: percentage(1/$columns);
+
+        flex: 0 0 $flex-percent;
+        max-width: $flex-percent;
+    }
+}
+
 // Calculates the flex value for a column
 //
 // @param {Mixed} $columns [null | number]