feat(grid): Add utility classes to hide/show at different breakpoint …

…sizes

Close #287

docs/demo/materials/02-structure-and-grid/02-grid/10-hide-or-show-elements.html

@@ -0,0 +1,57 @@
+---
+notes: |
+    Hide/show elements according to breakpoint size. Combine hide and show classes to make elements only appear in a specific range of screen sizes.
+---
+<div class="dc-row">
+    <div class="dc-column dc-hide-from-small">
+        <div class="dc-column__contents ">This element will <strong class="dc-strong">hide</strong> from small breakpoint size on.
+        </div>
+    </div>
+    <div class="dc-column dc-hide-from-medium">
+        <div class="dc-column__contents ">This element will <strong class="dc-strong">hide</strong> from medium breakpoint size on.
+        </div>
+    </div>
+    <div class="dc-column dc-hide-from-large">
+        <div class="dc-column__contents ">This element will <strong class="dc-strong">hide</strong> from large breakpoint size on.
+        </div>
+    </div>
+    <div class="dc-column">
+        <div class="dc-column__contents dc-hide-from-huge">This element will <strong class="dc-strong">hide</strong> from huge breakpoint size on.
+        </div>
+    </div>
+</div>
+
+<div class="dc-row">
+    <div class="dc-column dc-show-from-small">
+        <div class="dc-column__contents">This element will <strong class="dc-strong">show</strong> from small breakpoint size on.
+        </div>
+    </div>
+    <div class="dc-column dc-show-from-medium">
+        <div class="dc-column__contents">This element will <strong class="dc-strong">show</strong> from medium breakpoint size on.
+        </div>
+    </div>
+    <div class="dc-column dc-show-from-large">
+        <div class="dc-column__contents">This element will <strong class="dc-strong">show</strong> from large breakpoint size on.
+        </div>
+    </div>
+    <div class="dc-column  dc-show-from-huge">
+        <div class="dc-column__contents">This element will <strong class="dc-strong">show</strong> from large breakpoint size on.
+        </div>
+    </div>
+</div>
+
+<div class="dc-row">
+    <div class="dc-column dc-show-from-small dc-hide-from-large">
+        <div class="dc-column__contents">This element will <strong class="dc-strong">show</strong> in small and medium breakpoint sizes.
+        </div>
+    </div>
+    <div class="dc-column dc-show-from-medium dc-hide-from-huge">
+        <div class="dc-column__contents">This element will <strong class="dc-strong">show</strong> in medium and large breakpoint sizes.
+        </div>
+    </div>
+    <div class="dc-column dc-show-from-small dc-hide-from-large dc-show-from-huge">
+        <div class="dc-column__contents">This element will <strong class="dc-strong">show</strong> in small, medium and huge breakpoint sizes.
+        </div>
+    </div>
+
+</div>

src/styles/structure/_grid-classes.scss

@@ -122,6 +122,17 @@
     // For each breakpoint make the required column and offset classes.
     @each $br, $value in $dc-grid-breakpoints {
         @include breakpoint(map-get($dc-grid-breakpoints, $br)) {
+
+            // Utility classes to hide / show according to breakpoint
+            // Hide from this breakpoint up
+            .dc-hide-from-#{$br} {
+                display: none;
+            }
+
+            .dc-show-from-#{$br} {
+                display: block;
+            }
+
             @for $i from 1 through $dc-grid-column-count {
                 .dc-column--#{$br}-#{$i} {
                     flex: grid-column-flex($i);
@@ -140,6 +151,7 @@
                 .dc-column-offset--#{$br}-#{$o} {
                     margin-left: grid-column-size($o);
                 }
+
             }
         }
     }