feat(grid): Added classes, variables and mixins for responsive grid o…

…ptions
ionic-team · Feb 11, 2014 · 1cdb999 · 1cdb999
1 parent 0d92658
commit 1cdb999
Show file tree

Hide file tree

Showing 4 changed files with 97 additions and 22 deletions.
diff --git a/scss/_grid.scss b/scss/_grid.scss
@@ -123,27 +123,12 @@
 }
 
 
-/* Responsive Grid Attribute */
-/* Adding a class of responsive to a row */
+/* Responsive Grid Classes */
+/* Adding a class of responsive-X to a row */
 /* will trigger the flex-direction to */
 /* change to column and add some margin */
 /* to any columns in the row for clearity */
 
-/* Adjust the max-width value to fit your own needs */
-/* Defaults to 767px (iPad portrait width)*/
-
- @media (max-width: $grid-responsive-break) {
-.responsive .col {
-  width: 100%;
-  margin-bottom:15px;
-    }
-.responsive {
-  -webkit-box-direction: normal;
-  -moz-box-direction: normal;
-  -webkit-box-orient: vertical;
-  -moz-box-orient: vertical;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-    }
-}
+@include responsive-grid-break('.responsive-sm', $grid-responsive-sm-break);
+@include responsive-grid-break('.responsive-md', $grid-responsive-md-break);
+@include responsive-grid-break('.responsive-lg', $grid-responsive-lg-break);
diff --git a/scss/_mixins.scss b/scss/_mixins.scss
@@ -589,3 +589,22 @@
   -moz-justify-content: $value;
   justify-content: $value;
 }
+
+@mixin responsive-grid-break($selector, $max-width) {
+  @media (max-width: $max-width) {
+    #{$selector} {
+      -webkit-box-direction: normal;
+      -moz-box-direction: normal;
+      -webkit-box-orient: vertical;
+      -moz-box-orient: vertical;
+      -webkit-flex-direction: column;
+      -ms-flex-direction: column;
+      flex-direction: column;
+
+      .col {
+        width: 100%;
+        margin-bottom: ($grid-padding-width * 3) / 2;
+      }
+    }
+  }
+}
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -495,7 +495,9 @@ $modal-bg-color:              #fff !default;
 // -------------------------------
 
 $grid-padding-width:           10px !default;
-$grid-responsive-break:        767px !default;
+$grid-responsive-sm-break:     567px !default;  // smaller than landscape phone
+$grid-responsive-md-break:     767px !default;  // smaller than portrait tablet
+$grid-responsive-lg-break:     1023px !default; // smaller than landscape tablet
 
 
 // Action Sheets

diff --git a/test/grid.html b/test/grid.html
@@ -215,10 +215,79 @@ <h3>.row</h3>
         </div>
       </div>
 
+      <div class="row responsive-sm">
+        <div class="col">
+          <div>
+            .responsive-sm .col
+          </div>
+        </div>
+        <div class="col">
+          <div>
+            .responsive-sm .col
+          </div>
+        </div>
+        <div class="col">
+          <div>
+            .responsive-sm .col
+          </div>
+        </div>
+        <div class="col">
+          <div>
+            .responsive-sm .col
+          </div>
+        </div>
+      </div>
+
+      <div class="row responsive-md">
+        <div class="col">
+          <div>
+            .responsive-md .col
+          </div>
+        </div>
+        <div class="col">
+          <div>
+            .responsive-md .col
+          </div>
+        </div>
+        <div class="col">
+          <div>
+            .responsive-md .col
+          </div>
+        </div>
+        <div class="col">
+          <div>
+            .responsive-md .col
+          </div>
+        </div>
+      </div>
+
+      <div class="row responsive-lg">
+        <div class="col">
+          <div>
+            .responsive-lg .col
+          </div>
+        </div>
+        <div class="col">
+          <div>
+            .responsive-lg .col
+          </div>
+        </div>
+        <div class="col">
+          <div>
+            .responsive-lg .col
+          </div>
+        </div>
+        <div class="col">
+          <div>
+            .responsive-lg .col
+          </div>
+        </div>
+      </div>
+
       <hr>
 
       <div class="padding">
-        <p><a class="button button-secondary" href="index.html">Homepage</a></p>
+        <p><a class="button button-secondary" href="./">All CSS Tests</a></p>
       </div>
 
     </div>