.row-center, .col-10, .col-90

dist/css/ionic.css

@@ -49,7 +49,7 @@
 .white {
   color: white; }
 
-/*
+/*!
   Ionicons, v1.3.3
   Created by Ben Sperry for the Ionic Framework, http://ionicons.com/
   https://twitter.com/helloimben  https://twitter.com/ionicframework
@@ -4773,7 +4773,7 @@ a.button {
   -moz-align-items: flex-end;
   align-items: flex-end; }
 
-.row-middle {
+.row-center {
   -webkit-box-align: center;
   -ms-flex-align: center;
   -webkit-align-items: center;
@@ -4793,18 +4793,16 @@ a.button {
   -ms-flex-item-align: end;
   align-self: flex-end; }
 
-.col-middle {
+.col-center {
   -webkit-align-self: center;
   -moz-align-self: center;
   -ms-flex-item-align: center;
   align-self: center; }
 
-/* Horizontally Align Columns */
-.col-center {
-  margin-left: auto;
-  margin-right: auto; }
-
 /* Column Offsets */
+.col-offset-10 {
+  margin-left: 10%; }
+
 .col-offset-20 {
   margin-left: 20%; }
 
@@ -4826,10 +4824,22 @@ a.button {
 .col-offset-80 {
   margin-left: 80%; }
 
+.col-offset-90 {
+  margin-left: 90%; }
+
 /* Explicit Column Percent Sizes */
 /* By default each grid column will evenly distribute */
 /* across the grid. However, you can specify individual */
 /* columns to take up a certain size of the available area */
+.col-10 {
+  -webkit-box-flex: 0;
+  -webkit-flex: 0 0 10%;
+  -moz-box-flex: 0;
+  -moz-flex: 0 0 10%;
+  -ms-flex: 0 0 10%;
+  flex: 0 0 10%;
+  max-width: 10%; }
+
 .col-20 {
   -webkit-box-flex: 0;
   -webkit-flex: 0 0 20%;
@@ -4893,6 +4903,15 @@ a.button {
   flex: 0 0 80%;
   max-width: 80%; }
 
+.col-90 {
+  -webkit-box-flex: 0;
+  -webkit-flex: 0 0 90%;
+  -moz-box-flex: 0;
+  -moz-flex: 0 0 90%;
+  -ms-flex: 0 0 90%;
+  flex: 0 0 90%;
+  max-width: 90%; }
+
 /**
  * Icons
  * --------------------------------------------------

scss/_grid.scss

@@ -34,7 +34,7 @@
 .row-bottom {
   @include align-items(flex-end);
 }
-.row-middle {
+.row-center {
   @include align-items(center);
 }
 
@@ -45,18 +45,14 @@
 .col-bottom {
   @include align-self(flex-end);
 }
-.col-middle {
+.col-center {
   @include align-self(center);
 }
 
-
-/* Horizontally Align Columns */
-.col-center {
-  margin-left: auto;
-  margin-right: auto;
-}
-
 /* Column Offsets */
+.col-offset-10 {
+  margin-left: 10%;
+}
 .col-offset-20 {
   margin-left: 20%;
 }
@@ -78,12 +74,19 @@
 .col-offset-80 {
   margin-left: 80%;
 }
+.col-offset-90 {
+  margin-left: 90%;
+}
 
 
 /* Explicit Column Percent Sizes */
 /* By default each grid column will evenly distribute */
 /* across the grid. However, you can specify individual */
 /* columns to take up a certain size of the available area */
+.col-10 {
+  @include flex(0, 0, 10%);
+  max-width: 10%
+}
 .col-20 {
   @include flex(0, 0, 20%);
   max-width: 20%
@@ -112,3 +115,7 @@
   @include flex(0, 0, 80%);
   max-width: 80%
 }
+.col-90 {
+  @include flex(0, 0, 90%);
+  max-width: 90%
+}

test/grid.html

@@ -100,14 +100,6 @@
         </div>
       </div>
 
-      <div class="row">
-        <div class="col col-50 col-center">
-          <div>
-            .col.col-50.col-center
-          </div>
-        </div>
-      </div>
-
       <div class="row">
         <div class="col">
           <div>
@@ -137,9 +129,9 @@
             .col.col-top
           </div>
         </div>
-        <div class="col col-middle">
+        <div class="col col-center">
           <div>
-            .col.col-middle
+            .col.col-center
           </div>
         </div>
         <div class="col col-bottom">
@@ -177,20 +169,20 @@
         </div>
       </div>
 
-      <div class="row row-middle">
+      <div class="row row-center">
         <div class="col">
           <div>
-            .row-middle .col
+            .row-center .col
           </div>
         </div>
         <div class="col">
           <div>
-            .row-middle .col
+            .row-center .col
           </div>
         </div>
         <div class="col">
           <div>
-            .row-middle .col
+            .row-center .col
           </div>
         </div>
         <div class="col">