Merge pull request #261 from ember-learn/hide-on-mobile

Hide on mobile css helper
ember-learn · Jan 9, 2020 · 135eded · 135eded
2 parents 39bfd44 + ecd257f
commit 135eded
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 14 deletions.
diff --git a/addon/styles/helpers.css b/addon/styles/helpers.css
diff --git a/addon/styles/helpers/index.css b/addon/styles/helpers/index.css
@@ -12,3 +12,9 @@
 .max-width {
   max-width: 100%;
 }
+
+@media (max-width: 1007px) {
+  .hide-on-mobile {
+    display: none;
+  }
+}
diff --git a/docs/css/helpers.md b/docs/css/helpers.md
@@ -78,15 +78,15 @@ In order to apply the spacing scale on pages, a set of predefined helper classes
     </tr>
   </thead>
   <tbody>
-    {{#each 
+    {{#each
       (array
-        (hash value='' name='all') 
-        (hash value='x' name="horizontal") 
-        (hash value='y' name="vertical") 
-        (hash value='t' name="top") 
+        (hash value='' name='all')
+        (hash value='x' name="horizontal")
+        (hash value='y' name="vertical")
+        (hash value='t' name="top")
         (hash value='r' name="right")
-        (hash value='b' name="bottom") 
-        (hash value='l' name="left") 
+        (hash value='b' name="bottom")
+        (hash value='l' name="left")
       ) as |direction|
     }}
       {{#each (array '0' '1' '2' '3' '4' '5') as |size|}}
@@ -117,15 +117,15 @@ In order to apply the spacing scale on pages, a set of predefined helper classes
     </tr>
   </thead>
   <tbody>
-    {{#each 
+    {{#each
       (array
-        (hash value='' name='all') 
-        (hash value='x' name="horizontal") 
-        (hash value='y' name="vertical") 
-        (hash value='t' name="top") 
+        (hash value='' name='all')
+        (hash value='x' name="horizontal")
+        (hash value='y' name="vertical")
+        (hash value='t' name="top")
         (hash value='r' name="right")
-        (hash value='b' name="bottom") 
-        (hash value='l' name="left") 
+        (hash value='b' name="bottom")
+        (hash value='l' name="left")
       ) as |direction|
     }}
       {{#each (array '0' '1' '2' '3' '4' '5') as |size|}}
@@ -160,3 +160,13 @@ In order to apply the spacing scale on pages, a set of predefined helper classes
   <!-- /code from YouTube -->
 </div>
 ```
+
+### Hide elements on mobile
+
+If you would like to hide any element only on mobile screens you can use the `.hide-on-mobile` class helper.
+
+```html
+<h1 class="hide-on-mobile">A secret message for desktop users: ♥️</h1>
+
+<p>If you can see the secret message above try resizing the window!</p>
+```