init grid system

scss/_grid.scss

@@ -0,0 +1,118 @@
+
+/**
+ * Grid
+ * --------------------------------------------------
+ * Using flexbox for the grid, inspired by Philip Walton:
+ * http://philipwalton.github.io/solved-by-flexbox/demos/grids/
+ */
+
+.grid {
+  @include display-flex();
+}
+
+.grid-cell {
+  @include flex(1);
+}
+
+/* With gutters */
+.grid-gutters {
+  margin-left: $grid-gutter-width * -1;
+}
+.grid-gutters > .grid-cell {
+  padding-left: $grid-gutter-width;
+}
+
+/* Alignment per row */
+.grid-top {
+  @include align-items(flex-start);
+}
+.grid-bottom {
+  @include align-items(flex-end);
+}
+.grid-center {
+  @include align-items(center);
+}
+
+/* Alignment per cell */
+.grid-cell-top {
+  @include align-self(flex-start);
+}
+.grid-cell-bottom {
+  @include align-self(flex-end);
+}
+.grid-cell-center {
+  @include align-self(center);
+}
+
+/* Base classes for all media */
+.grid-fit > .grid-cell {
+  @include flex(1);
+}
+.grid-full > .grid-cell {
+  @include flex(0, 0, 100%);
+}
+.grid-1of2 > .grid-cell {
+  @include flex(0, 0, 50%);
+}
+.grid-1of3 > .grid-cell {
+  @include flex(0, 0, 33.3333%);
+}
+.grid-1of4 > .grid-cell {
+  @include flex(0, 0, 25%);
+}
+.grid-1of5 > .grid-cell {
+  @include flex(0, 0, 20%);
+}
+.grid-1of6 > .grid-cell {
+  @include flex(0, 0, 16.6666%);
+}
+
+/* Small to medium screens */
+@media (min-width: 24em) {
+  .grid-small-fit > .grid-cell {
+    @include flex(1);
+  }
+  .grid-small-full > .grid-cell {
+    @include flex(0, 0, 100%);
+  }
+  .grid-small-1of2 > .grid-cell {
+    @include flex(0, 0, 50%);
+  }
+  .grid-small-1of3 > .grid-cell {
+    @include flex(0, 0, 33.3333%);
+  }
+  .grid-small-1of4 > .grid-cell {
+    @include flex(0, 0, 25%);
+  }
+  .grid-small-1of5 > .grid-cell {
+    @include flex(0, 0, 20%);
+  }
+  .grid-small-1of6 > .grid-cell {
+    @include flex(0, 0, 16.6666%);
+  }
+}
+
+/* Large screens */
+@media (min-width: 48em) {
+  .grid-large-fit > .grid-cell {
+    @include flex(1);
+  }
+  .grid-large-full > .grid-cell {
+    @include flex(0, 0, 100%);
+  }
+  .grid-large-1of2 > .grid-cell {
+    @include flex(0, 0, 50%);
+  }
+  .grid-large-1of3 > .grid-cell {
+    @include flex(0, 0, 33.3333%);
+  }
+  .grid-large-1of4 > .grid-cell {
+    @include flex(0, 0, 25%);
+  }
+  .grid-large-1of5 > .grid-cell {
+    @include flex(0, 0, 20%);
+  }
+  .grid-large-1of6 > .grid-cell {
+    @include flex(0, 0, 16.6666%);
+  }
+}

scss/_mixins.scss

@@ -360,6 +360,12 @@
           hyphens: $mode;
 }
 
+
+// Flexbox Mixins
+// --------------------------------------------------
+// http://philipwalton.github.io/solved-by-flexbox/
+// https://github.com/philipwalton/solved-by-flexbox
+
 @mixin display-flex {
   display: -webkit-box;
   display: -webkit-flex;
@@ -427,16 +433,42 @@
 
 @mixin align-items($value: stretch) {
   @if $value == flex-start {
-          -webkit-box-align: start;
-          -ms-flex-align: start;
+    -webkit-box-align: start;
+    -ms-flex-align: start;
   } @else if $value == flex-end {
-          -webkit-box-align: end;
-          -ms-flex-align: end;
+    -webkit-box-align: end;
+    -ms-flex-align: end;
   } @else {
-          -webkit-box-align: $value;
-          -ms-flex-align: $value;
+    -webkit-box-align: $value;
+    -ms-flex-align: $value;
   }
   -webkit-align-items: $value;
   -moz-align-items: $value;
   align-items: $value;
-}
+}
+
+@mixin align-self($value: auto) {
+  -webkit-align-self: $value;
+  -moz-align-self: $value;
+  @if $value == flex-start {
+    -ms-flex-item-align: start;
+  } @else if $value == flex-end {
+    -ms-flex-item-align: end;
+  } @else {
+    -ms-flex-item-align: $value;
+  }
+  align-self: $value;
+}
+
+@mixin align-content($value: stretch) {
+  -webkit-align-content: $value;
+  -moz-align-content: $value;
+  @if $value == flex-start {
+    -ms-flex-line-pack: start;
+  } @else if $value == flex-end {
+    -ms-flex-line-pack: end;
+  } @else {
+    -ms-flex-line-pack: $value;
+  }
+  align-content: $value;
+}

scss/_variables.scss

@@ -415,12 +415,19 @@ $menu-side-shadow: -1px 0px 3px rgba(0, 0, 0, 0.2), 1px 0px 3px rgba(0,0,0,0.2);
 $split-pane-menu-width:   320px;
 $split-pane-menu-border-color:  #eee;
 
+
 // Modals
 // -------------------------------
 
 $modal-bg-color:              #fff !default;
 
 
+// Grids
+// -------------------------------
+
+$grid-gutter-width:           1em !default;
+
+
 // Action Sheets
 // -------------------------------
 

scss/ionic.scss

@@ -43,6 +43,7 @@
 
   // Util
   "animations",
+  "grid",
   "icons",
   "util",
   "platform";