feat(grid): Improve functionality and demo

zalando · Feb 22, 2017 · 787c292 · 787c292
1 parent a5a875b
commit 787c292
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 46 deletions.
diff --git a/docs/demo/materials/02-structure-and-grid/02-grid/10-hide-or-show-elements.html b/docs/demo/materials/02-structure-and-grid/02-grid/10-hide-or-show-elements.html
@@ -1,56 +1,23 @@
 ---
 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>
+    Hide classes: `dc-hide-from-[small|medium|large|huge]` will hide starting from the specified breakpoint
 
+    Show classes: `dc-show-from-[small|medium|large|huge]` will show starting from the specified breakpoint
+---
 <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 class="dc-column dc-column--small-12 dc-show-from-medium" >
+        <div class="dc-column__contents">This element will <strong class="dc-strong">show</strong> for medium breakpoint size on.
         </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 class="dc-column dc-column--small-12 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-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 class="dc-column dc-column--small-12 dc-show-from-small dc-hide-from-medium dc-show-from-large" >
+        <div class="dc-column__contents">This element will <strong class="dc-strong">hide</strong> at medium breakpoint and show for all others.
         </div>
     </div>
 

diff --git a/src/styles/structure/_grid-classes.scss b/src/styles/structure/_grid-classes.scss
@@ -119,20 +119,28 @@
         @include dc-column--align-self--bottom;
     }
 
-    // For each breakpoint make the required column and offset classes.
+    // Run through breakpoints.
     @each $br, $value in $dc-grid-breakpoints {
+
+        .dc-show-from-#{$br} {
+            display:none;
+        }
+
         @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;
+                display: none !important;
             }
 
+            // Show from this breakpoint up
             .dc-show-from-#{$br} {
-                display: block;
+                display: block !important;
             }
 
+            // For each breakpoint make the required column and offset classes.
             @for $i from 1 through $dc-grid-column-count {
                 .dc-column--#{$br}-#{$i} {
                     flex: grid-column-flex($i);