init grid system

dist/css/ionic.css

@@ -2019,7 +2019,7 @@ sub {
 fieldset {
   margin: 0 2px;
   padding: 0.35em 0.625em 0.75em;
-  border: 1px solid silver; }
+  border: 1px solid #c0c0c0; }
 
 /**
  * 1. Correct `color` not being inherited in IE 8/9.
@@ -3891,7 +3891,7 @@ input[type="file"] {
   line-height: 34px; }
 
 select {
-  border: 1px solid #cccccc;
+  border: 1px solid #ccc;
   background-color: white; }
 
 select[multiple],
@@ -3950,7 +3950,7 @@ input[type="checkbox"][readonly] {
     border-radius: 50%;
     background: white;
     content: ' ';
-    transition: background-color 0.1s ease-in-out; }
+    transition: background-color .1s ease-in-out; }
 
 /* the checkmark within the box */
 .checkbox input:after {
@@ -3965,7 +3965,7 @@ input[type="checkbox"][readonly] {
   border-right: 0;
   content: ' ';
   opacity: 0;
-  transition: opacity 0.05s ease-in-out;
+  transition: opacity .05s ease-in-out;
   -webkit-transform: rotate(-45deg);
   transform: rotate(-45deg); }
 
@@ -4394,7 +4394,7 @@ input[type="range"] {
   .button-icon:active, .button-icon.active {
     background: none;
     box-shadow: none;
-    text-shadow: 0px 0px 10px white; }
+    text-shadow: 0px 0px 10px #fff; }
 
 .padding > .button.block:first-child {
   margin-top: 0; }
@@ -4639,6 +4639,246 @@ a.button {
     -webkit-transform: rotate(360deg);
     transform: rotate(360deg); } }
 
+/**
+ * Grid
+ * --------------------------------------------------
+ * Using flexbox for the grid, inspired by Philip Walton:
+ * http://philipwalton.github.io/solved-by-flexbox/demos/grids/
+ */
+.grid {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -moz-flex;
+  display: -ms-flexbox;
+  display: flex; }
+
+.grid-cell {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+  -moz-box-flex: 1;
+  -moz-flex: 1;
+  -ms-flex: 1;
+  flex: 1; }
+
+/* With gutters */
+.grid-gutters {
+  margin-left: -1em; }
+
+.grid-gutters > .grid-cell {
+  padding-left: 1em; }
+
+/* Alignment per row */
+.grid-top {
+  -webkit-box-align: start;
+  -ms-flex-align: start;
+  -webkit-align-items: flex-start;
+  -moz-align-items: flex-start;
+  align-items: flex-start; }
+
+.grid-bottom {
+  -webkit-box-align: end;
+  -ms-flex-align: end;
+  -webkit-align-items: flex-end;
+  -moz-align-items: flex-end;
+  align-items: flex-end; }
+
+.grid-center {
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  -moz-align-items: center;
+  align-items: center; }
+
+/* Alignment per cell */
+.grid-cell-top {
+  -webkit-align-self: flex-start;
+  -moz-align-self: flex-start;
+  -ms-flex-item-align: start;
+  align-self: flex-start; }
+
+.grid-cell-bottom {
+  -webkit-align-self: flex-end;
+  -moz-align-self: flex-end;
+  -ms-flex-item-align: end;
+  align-self: flex-end; }
+
+.grid-cell-center {
+  -webkit-align-self: center;
+  -moz-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center; }
+
+/* Base classes for all media */
+.grid-fit > .grid-cell {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+  -moz-box-flex: 1;
+  -moz-flex: 1;
+  -ms-flex: 1;
+  flex: 1; }
+
+.grid-full > .grid-cell {
+  -webkit-box-flex: 0;
+  -webkit-flex: 0 0 100%;
+  -moz-box-flex: 0;
+  -moz-flex: 0 0 100%;
+  -ms-flex: 0 0 100%;
+  flex: 0 0 100%; }
+
+.grid-1of2 > .grid-cell {
+  -webkit-box-flex: 0;
+  -webkit-flex: 0 0 50%;
+  -moz-box-flex: 0;
+  -moz-flex: 0 0 50%;
+  -ms-flex: 0 0 50%;
+  flex: 0 0 50%; }
+
+.grid-1of3 > .grid-cell {
+  -webkit-box-flex: 0;
+  -webkit-flex: 0 0 33.3333%;
+  -moz-box-flex: 0;
+  -moz-flex: 0 0 33.3333%;
+  -ms-flex: 0 0 33.3333%;
+  flex: 0 0 33.3333%; }
+
+.grid-1of4 > .grid-cell {
+  -webkit-box-flex: 0;
+  -webkit-flex: 0 0 25%;
+  -moz-box-flex: 0;
+  -moz-flex: 0 0 25%;
+  -ms-flex: 0 0 25%;
+  flex: 0 0 25%; }
+
+.grid-1of5 > .grid-cell {
+  -webkit-box-flex: 0;
+  -webkit-flex: 0 0 20%;
+  -moz-box-flex: 0;
+  -moz-flex: 0 0 20%;
+  -ms-flex: 0 0 20%;
+  flex: 0 0 20%; }
+
+.grid-1of6 > .grid-cell {
+  -webkit-box-flex: 0;
+  -webkit-flex: 0 0 16.6666%;
+  -moz-box-flex: 0;
+  -moz-flex: 0 0 16.6666%;
+  -ms-flex: 0 0 16.6666%;
+  flex: 0 0 16.6666%; }
+
+/* Small to medium screens */
+@media (min-width: 24em) {
+  .grid-small-fit > .grid-cell {
+    -webkit-box-flex: 1;
+    -webkit-flex: 1;
+    -moz-box-flex: 1;
+    -moz-flex: 1;
+    -ms-flex: 1;
+    flex: 1; }
+
+  .grid-small-full > .grid-cell {
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 100%;
+    -moz-box-flex: 0;
+    -moz-flex: 0 0 100%;
+    -ms-flex: 0 0 100%;
+    flex: 0 0 100%; }
+
+  .grid-small-1of2 > .grid-cell {
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 50%;
+    -moz-box-flex: 0;
+    -moz-flex: 0 0 50%;
+    -ms-flex: 0 0 50%;
+    flex: 0 0 50%; }
+
+  .grid-small-1of3 > .grid-cell {
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 33.3333%;
+    -moz-box-flex: 0;
+    -moz-flex: 0 0 33.3333%;
+    -ms-flex: 0 0 33.3333%;
+    flex: 0 0 33.3333%; }
+
+  .grid-small-1of4 > .grid-cell {
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 25%;
+    -moz-box-flex: 0;
+    -moz-flex: 0 0 25%;
+    -ms-flex: 0 0 25%;
+    flex: 0 0 25%; }
+
+  .grid-small-1of5 > .grid-cell {
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 20%;
+    -moz-box-flex: 0;
+    -moz-flex: 0 0 20%;
+    -ms-flex: 0 0 20%;
+    flex: 0 0 20%; }
+
+  .grid-small-1of6 > .grid-cell {
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 16.6666%;
+    -moz-box-flex: 0;
+    -moz-flex: 0 0 16.6666%;
+    -ms-flex: 0 0 16.6666%;
+    flex: 0 0 16.6666%; } }
+/* Large screens */
+@media (min-width: 48em) {
+  .grid-large-fit > .grid-cell {
+    -webkit-box-flex: 1;
+    -webkit-flex: 1;
+    -moz-box-flex: 1;
+    -moz-flex: 1;
+    -ms-flex: 1;
+    flex: 1; }
+
+  .grid-large-full > .grid-cell {
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 100%;
+    -moz-box-flex: 0;
+    -moz-flex: 0 0 100%;
+    -ms-flex: 0 0 100%;
+    flex: 0 0 100%; }
+
+  .grid-large-1of2 > .grid-cell {
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 50%;
+    -moz-box-flex: 0;
+    -moz-flex: 0 0 50%;
+    -ms-flex: 0 0 50%;
+    flex: 0 0 50%; }
+
+  .grid-large-1of3 > .grid-cell {
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 33.3333%;
+    -moz-box-flex: 0;
+    -moz-flex: 0 0 33.3333%;
+    -ms-flex: 0 0 33.3333%;
+    flex: 0 0 33.3333%; }
+
+  .grid-large-1of4 > .grid-cell {
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 25%;
+    -moz-box-flex: 0;
+    -moz-flex: 0 0 25%;
+    -ms-flex: 0 0 25%;
+    flex: 0 0 25%; }
+
+  .grid-large-1of5 > .grid-cell {
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 20%;
+    -moz-box-flex: 0;
+    -moz-flex: 0 0 20%;
+    -ms-flex: 0 0 20%;
+    flex: 0 0 20%; }
+
+  .grid-large-1of6 > .grid-cell {
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 16.6666%;
+    -moz-box-flex: 0;
+    -moz-flex: 0 0 16.6666%;
+    -ms-flex: 0 0 16.6666%;
+    flex: 0 0 16.6666%; } }
 /**
  * Icons
  * --------------------------------------------------
@@ -4725,9 +4965,9 @@ a.button {
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  -webkit-animation: spin 0.75s linear infinite;
+  -webkit-animation: spin .75s linear infinite;
-  -moz-animation: spin 0.75s linear infinite;
+  -moz-animation: spin .75s linear infinite;
-  animation: spin 0.75s linear infinite; }
+  animation: spin .75s linear infinite; }
   .ion-loading:before {
     content: "\e144"; }
 
@@ -4740,9 +4980,9 @@ a.button {
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  -webkit-animation: spin 0.75s linear infinite;
+  -webkit-animation: spin .75s linear infinite;
-  -moz-animation: spin 0.75s linear infinite;
+  -moz-animation: spin .75s linear infinite;
-  animation: spin 0.75s linear infinite; }
+  animation: spin .75s linear infinite; }
   .ion-refreshing:before {
     content: "\e144"; }
 

dist/css/themes/ionic-ios7.css

@@ -1,4 +1,8 @@
-@charset "UTF-8";
+/**
+ * Mixins
+ * --------------------------------------------------
+ * Useful utilities and mixins for SCSS files.
+ */
 /** 
  * Nav controllers and header bar animations
  */
@@ -119,7 +123,7 @@
   right: 20px;
   transition: 0.2s ease;
   transition-property: left, right;
-  transition-delay: 0s, 0.05s; }
+  transition-delay: 0s, .05s; }
 
 .toggle :checked + .track {
   /* When the toggle is "on" */
@@ -134,4 +138,4 @@
     right: 0;
     left: 20px;
     -webkit-transform: none;
-    transition-delay: 0.05s, 0s; }
+    transition-delay: .05s, 0s; }

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;
@@ -440,3 +446,29 @@
   -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";