diff --git a/dist/css/ionic.css b/dist/css/ionic.css
index cc5eb2b588..19febfbd96 100644
--- a/dist/css/ionic.css
+++ b/dist/css/ionic.css
@@ -2091,7 +2091,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.
@@ -3974,7 +3974,7 @@ input[type="file"] {
   line-height: 34px; }
 
 select {
-  border: 1px solid #cccccc;
+  border: 1px solid #ccc;
   background-color: white; }
 
 select[multiple],
@@ -4033,7 +4033,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 {
@@ -4048,7 +4048,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); }
 
@@ -4477,7 +4477,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; }
@@ -4727,178 +4727,171 @@ a.button {
  * --------------------------------------------------
  * Using flexbox for the grid, inspired by Philip Walton:
  * http://philipwalton.github.io/solved-by-flexbox/demos/grids/
+ * By default each .col within a .row will evenly take up
+ * available width, and the height of each .col with take
+ * up the height of the tallest .col in the same .row.
  */
-.grid {
+.row {
   display: -webkit-box;
   display: -webkit-flex;
   display: -moz-flex;
   display: -ms-flexbox;
-  display: flex; }
+  display: flex;
+  padding: 5px; }
 
-.grid-cell {
+.row + .row {
+  margin-top: -5px;
+  padding-top: 0; }
+
+.col {
   -webkit-box-flex: 1;
   -webkit-flex: 1;
   -moz-box-flex: 1;
   -moz-flex: 1;
   -ms-flex: 1;
-  flex: 1; }
+  flex: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -moz-flex;
+  display: -ms-flexbox;
+  display: flex;
+  padding: 5px; }
 
-/* With gutters */
-.grid-gutters {
-  margin-left: -1em; }
-
-.grid-gutters > .grid-cell {
-  padding-left: 1em; }
-
-/* Alignment per row */
-.grid-top {
+/* Vertically Align Columns */
+/* .row-* vertically aligns every .col in the .row */
+.row-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 {
+.row-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 {
+.row-middle {
   -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 {
+/* .col-* vertically aligns an individual .col */
+.col-top {
   -webkit-align-self: flex-start;
   -moz-align-self: flex-start;
   -ms-flex-item-align: start;
   align-self: flex-start; }
 
-.grid-cell-bottom {
+.col-bottom {
   -webkit-align-self: flex-end;
   -moz-align-self: flex-end;
   -ms-flex-item-align: end;
   align-self: flex-end; }
 
-.grid-cell-center {
+.col-middle {
   -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; }
+/* Horizontally Align Columns */
+.col-center {
+  margin-left: auto;
+  margin-right: auto; }
 
-.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%; }
+/* Column Offsets */
+.col-offset-20 {
+  margin-left: 20%; }
 
-.grid-1of2 > .grid-cell,
-.grid-2of4 > .grid-cell,
-.grid-3of6 > .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%; }
+.col-offset-25 {
+  margin-left: 25%; }
 
-.grid-1of3 > .grid-cell,
-.grid-2of6 > .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%; }
+.col-offset-33, .col-offset-34 {
+  margin-left: 33.3333%; }
 
-.grid-2of3 > .grid-cell,
-.grid-4of6 > .grid-cell {
-  -webkit-box-flex: 0;
-  -webkit-flex: 0 0 66.6666%;
-  -moz-box-flex: 0;
-  -moz-flex: 0 0 66.6666%;
-  -ms-flex: 0 0 66.6666%;
-  flex: 0 0 66.6666%; }
+.col-offset-50 {
+  margin-left: 50%; }
 
-.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%; }
+.col-offset-66, .col-offset-67 {
+  margin-left: 66.6666%; }
 
-.grid-3of4 > .grid-cell {
-  -webkit-box-flex: 0;
-  -webkit-flex: 0 0 75%;
-  -moz-box-flex: 0;
-  -moz-flex: 0 0 75%;
-  -ms-flex: 0 0 75%;
-  flex: 0 0 75%; }
+.col-offset-75 {
+  margin-left: 75%; }
 
-.grid-1of5 > .grid-cell {
+.col-offset-80 {
+  margin-left: 80%; }
+
+/* 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-20 {
   -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%; }
+  flex: 0 0 20%;
+  max-width: 20%; }
 
-.grid-2of5 > .grid-cell {
+.col-25 {
   -webkit-box-flex: 0;
-  -webkit-flex: 0 0 40%;
+  -webkit-flex: 0 0 25%;
   -moz-box-flex: 0;
-  -moz-flex: 0 0 40%;
-  -ms-flex: 0 0 40%;
-  flex: 0 0 40%; }
+  -moz-flex: 0 0 25%;
+  -ms-flex: 0 0 25%;
+  flex: 0 0 25%;
+  max-width: 25%; }
 
-.grid-3of5 > .grid-cell {
+.col-33, .col-34 {
   -webkit-box-flex: 0;
-  -webkit-flex: 0 0 60%;
+  -webkit-flex: 0 0 33.3333%;
   -moz-box-flex: 0;
-  -moz-flex: 0 0 60%;
-  -ms-flex: 0 0 60%;
-  flex: 0 0 60%; }
+  -moz-flex: 0 0 33.3333%;
+  -ms-flex: 0 0 33.3333%;
+  flex: 0 0 33.3333%;
+  max-width: 33.3333%; }
 
-.grid-4of5 > .grid-cell {
+.col-50 {
+  -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%;
+  max-width: 50%; }
+
+.col-66, .col-67 {
+  -webkit-box-flex: 0;
+  -webkit-flex: 0 0 66.6666%;
+  -moz-box-flex: 0;
+  -moz-flex: 0 0 66.6666%;
+  -ms-flex: 0 0 66.6666%;
+  flex: 0 0 66.6666%;
+  max-width: 66.6666%; }
+
+.col-75 {
+  -webkit-box-flex: 0;
+  -webkit-flex: 0 0 75%;
+  -moz-box-flex: 0;
+  -moz-flex: 0 0 75%;
+  -ms-flex: 0 0 75%;
+  flex: 0 0 75%;
+  max-width: 75%; }
+
+.col-80 {
   -webkit-box-flex: 0;
   -webkit-flex: 0 0 80%;
   -moz-box-flex: 0;
   -moz-flex: 0 0 80%;
   -ms-flex: 0 0 80%;
-  flex: 0 0 80%; }
-
-.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%; }
-
-.grid-5of6 > .grid-cell {
-  -webkit-box-flex: 0;
-  -webkit-flex: 0 0 83.3333%;
-  -moz-box-flex: 0;
-  -moz-flex: 0 0 83.3333%;
-  -ms-flex: 0 0 83.3333%;
-  flex: 0 0 83.3333%; }
+  flex: 0 0 80%;
+  max-width: 80%; }
 
 /**
  * Icons
diff --git a/dist/css/themes/ionic-ios7.css b/dist/css/themes/ionic-ios7.css
index e027d9919a..e119d59757 100644
--- a/dist/css/themes/ionic-ios7.css
+++ b/dist/css/themes/ionic-ios7.css
@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /**
  * Mixins
  * --------------------------------------------------
@@ -124,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" */
@@ -139,4 +138,4 @@
     right: 0;
     left: 20px;
     -webkit-transform: none;
-    transition-delay: 0.05s, 0s; }
+    transition-delay: .05s, 0s; }
diff --git a/scss/_grid.scss b/scss/_grid.scss
index fc5e6215ba..e3ededca24 100644
--- a/scss/_grid.scss
+++ b/scss/_grid.scss
@@ -4,88 +4,111 @@
  * --------------------------------------------------
  * Using flexbox for the grid, inspired by Philip Walton:
  * http://philipwalton.github.io/solved-by-flexbox/demos/grids/
+ * By default each .col within a .row will evenly take up
+ * available width, and the height of each .col with take
+ * up the height of the tallest .col in the same .row.
  */
 
-.grid {
+.row {
   @include display-flex();
+  padding: ($grid-padding-width / 2);
 }
 
-.grid-cell {
+.row + .row {
+  margin-top: ($grid-padding-width / 2) * -1;
+  padding-top: 0;
+}
+
+.col {
   @include flex(1);
+  @include display-flex();
+  padding: ($grid-padding-width / 2);
 }
 
-/* With gutters */
-.grid-gutters {
-  margin-left: $grid-gutter-width * -1;
-}
-.grid-gutters > .grid-cell {
-  padding-left: $grid-gutter-width;
-}
 
-/* Alignment per row */
-.grid-top {
+/* Vertically Align Columns */
+/* .row-* vertically aligns every .col in the .row */
+.row-top {
   @include align-items(flex-start);
 }
-.grid-bottom {
+.row-bottom {
   @include align-items(flex-end);
 }
-.grid-center {
+.row-middle {
   @include align-items(center);
 }
 
-/* Alignment per cell */
-.grid-cell-top {
+/* .col-* vertically aligns an individual .col */
+.col-top {
   @include align-self(flex-start);
 }
-.grid-cell-bottom {
+.col-bottom {
   @include align-self(flex-end);
 }
-.grid-cell-center {
+.col-middle {
   @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, 
-.grid-2of4 > .grid-cell,
-.grid-3of6 > .grid-cell {
-  @include flex(0, 0, 50%);
-}
-.grid-1of3 > .grid-cell, 
-.grid-2of6 > .grid-cell {
-  @include flex(0, 0, 33.3333%);
-}
-.grid-2of3 > .grid-cell,
-.grid-4of6 > .grid-cell {
-  @include flex(0, 0, 66.6666%);
-}
-.grid-1of4 > .grid-cell {
-  @include flex(0, 0, 25%);
-}
-.grid-3of4 > .grid-cell {
-  @include flex(0, 0, 75%);
-}
-.grid-1of5 > .grid-cell {
-  @include flex(0, 0, 20%);
-}
-.grid-2of5 > .grid-cell {
-  @include flex(0, 0, 40%);
-}
-.grid-3of5 > .grid-cell {
-  @include flex(0, 0, 60%);
-}
-.grid-4of5 > .grid-cell {
-  @include flex(0, 0, 80%);
-}
-.grid-1of6 > .grid-cell {
-  @include flex(0, 0, 16.6666%);
-}
-.grid-5of6 > .grid-cell {
-  @include flex(0, 0, 83.3333%);
+
+/* Horizontally Align Columns */
+.col-center {
+  margin-left: auto;
+  margin-right: auto;
 }
 
+/* Column Offsets */
+.col-offset-20 {
+  margin-left: 20%;
+}
+.col-offset-25 {
+  margin-left: 25%;
+}
+.col-offset-33, .col-offset-34 {
+  margin-left: 33.3333%;
+}
+.col-offset-50 {
+  margin-left: 50%;
+}
+.col-offset-66, .col-offset-67 {
+  margin-left: 66.6666%;
+}
+.col-offset-75 {
+  margin-left: 75%;
+}
+.col-offset-80 {
+  margin-left: 80%;
+}
+
+
+/* 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-20 {
+  @include flex(0, 0, 20%);
+  max-width: 20%
+}
+.col-25 {
+  @include flex(0, 0, 25%);
+  max-width: 25%
+}
+.col-33, .col-34 {
+  @include flex(0, 0, 33.3333%);
+  max-width: 33.3333%
+}
+.col-50 {
+  @include flex(0, 0, 50%);
+  max-width: 50%
+}
+.col-66, .col-67 {
+  @include flex(0, 0, 66.6666%);
+  max-width: 66.6666%
+}
+.col-75 {
+  @include flex(0, 0, 75%);
+  max-width: 75%
+}
+.col-80 {
+  @include flex(0, 0, 80%);
+  max-width: 80%
+}
diff --git a/scss/_variables.scss b/scss/_variables.scss
index aa26224dd6..19d23fcf3a 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -425,7 +425,7 @@ $modal-bg-color:              #fff !default;
 // Grids
 // -------------------------------
 
-$grid-gutter-width:           1em !default;
+$grid-padding-width:           10px !default;
 
 
 // Action Sheets
diff --git a/test/grid.html b/test/grid.html
new file mode 100644
index 0000000000..8bafd355b7
--- /dev/null
+++ b/test/grid.html
@@ -0,0 +1,235 @@
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Grid</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <link href="../dist/css/ionic.css" rel="stylesheet">
+    <style>
+      h4 {
+        padding-top: 20px;
+      }
+      .col > * {
+        border: 1px solid #ccc;
+        background: #eee;
+        text-align: center;
+        color: #444;
+        width: 100%;
+      }
+    </style>
+  </head>
+  <body>
+
+    <header class="bar bar-header bar-dark">
+      <h1 class="title">Grid</h1>
+    </header>
+
+    <div class="content has-header">
+
+      <h3>.row</h3>
+
+      <div class="row">
+        <div class="col">
+          <div>
+            .col
+          </div>
+        </div>
+        <div class="col">
+          <div>
+            .col
+          </div>
+        </div>
+        <div class="col">
+          <div>
+            .col
+          </div>
+        </div>
+        <div class="col">
+          <div>
+            .col
+          </div>
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="col col-50">
+          <div>
+            .col.col-50
+          </div>
+        </div>
+        <div class="col">
+          <div>
+            .col
+          </div>
+        </div>
+        <div class="col">
+          <div>
+            .col
+          </div>
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="col col-25">
+          <div>
+            .col.col-25
+          </div>
+        </div>
+        <div class="col">
+          <div>
+            .col
+          </div>
+        </div>
+        <div class="col col-25">
+          <div>
+            .col.col-25
+          </div>
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="col col-25">
+          <div>
+            .col.col-25 
+          </div>
+        </div>
+        <div class="col col-25 col-offset-25">
+          <div>
+            .col.col-25.col-offset-25
+          </div>
+        </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>
+            .col
+          </div>
+        </div>
+        <div class="col">
+          <div>
+            .col<br>#
+          </div>
+        </div>
+        <div class="col">
+          <div>
+            .col<br>#<br>#
+          </div>
+        </div>
+        <div class="col">
+          <div>
+            .col<br>#<br>#<br>#
+          </div>
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="col col-top">
+          <div>
+            .col.col-top
+          </div>
+        </div>
+        <div class="col col-middle">
+          <div>
+            .col.col-middle
+          </div>
+        </div>
+        <div class="col col-bottom">
+          <div>
+            .col.col-bottom
+          </div>
+        </div>
+        <div class="col">
+          <div>
+            .col<br>#<br>#
+          </div>
+        </div>
+      </div>
+
+      <div class="row row-top">
+        <div class="col">
+          <div>
+            .row-top .col
+          </div>
+        </div>
+        <div class="col">
+          <div>
+            .row-top .col
+          </div>
+        </div>
+        <div class="col col-bottom">
+          <div>
+            .row-top .col.col-bottom
+          </div>
+        </div>
+        <div class="col">
+          <div>
+            .col<br>#<br>#
+          </div>
+        </div>
+      </div>
+
+      <div class="row row-middle">
+        <div class="col">
+          <div>
+            .row-middle .col
+          </div>
+        </div>
+        <div class="col">
+          <div>
+            .row-middle .col
+          </div>
+        </div>
+        <div class="col">
+          <div>
+            .row-middle .col
+          </div>
+        </div>
+        <div class="col">
+          <div>
+            .col<br>#<br>#
+          </div>
+        </div>
+      </div>
+
+      <div class="row row-bottom">
+        <div class="col">
+          <div>
+            .row-bottom .col
+          </div>
+        </div>
+        <div class="col col-top">
+          <div>
+            .row-bottom .col.col-top
+          </div>
+        </div>
+        <div class="col">
+          <div>
+            .row-bottom .col
+          </div>
+        </div>
+        <div class="col">
+          <div>
+            .col<br>#<br>#
+          </div>
+        </div>
+      </div>
+
+      <hr>
+
+      <div class="padding">
+        <p><a class="button button-secondary" href="index.html">Homepage</a></p>
+      </div>
+
+    </div>
+
+  </body>
+</html>
\ No newline at end of file
diff --git a/test/index.html b/test/index.html
index 59b5cd489b..2ba8db7f59 100644
--- a/test/index.html
+++ b/test/index.html
@@ -12,28 +12,31 @@
       <h1 class="title">Ionic Tests</h1>
     </header>
 
-    <div class="content padding has-header">
+    <div class="content has-header">
     
-      <p><a class="button button-block button-default" href="buttons.html"><i class="icon ion-star"></i> Buttons</a></p>
-      <p><a class="button button-block button-default" href="button-bar.html"><i class="icon ion-star"></i> Button Bar</a></p>
-      <p><a class="button button-block button-default" href="cards.html"><i class="icon ion-star"></i> Cards</a></p>
-      <p><a class="button button-block button-default" href="footers.html"><i class="icon ion-star"></i> Footers</a></p>
-      <p><a class="button button-block button-default" href="headers.html"><i class="icon ion-star"></i> Headers</a></p>
-      <p><a class="button button-block button-default" href="input-text.html"><i class="icon ion-star"></i> Input: Text (single-line)</a></p>
-      <p><a class="button button-block button-default" href="input-textarea.html"><i class="icon ion-star"></i> Input: Text (multi-line)</a></p>
-      <p><a class="button button-block button-default" href="input-radio.html"><i class="icon ion-star"></i> Input: Radio Buttons</a></p>
-      <p><a class="button button-block button-default" href="input-range.html"><i class="icon ion-star"></i> Input: Range</a></p>
-      <p><a class="button button-block button-default" href="input-select.html"><i class="icon ion-star"></i> Input: Select</a></p>
-      <p><a class="button button-block button-default" href="input-checkbox.html"><i class="icon ion-star"></i> Input: Checkbox</a></p>
-      <p><a class="button button-block button-default" href="input-toggle.html"><i class="icon ion-star"></i> Input: Toggle</a></p>
-      <p><a class="button button-block button-default" href="lists.html"><i class="icon ion-star"></i> Lists</a></p>
-      <p><a class="button button-block button-default" href="modals.html"><i class="icon ion-star-empty"></i> Modals</a></p>
-      <p><a class="button button-block button-default" href="popovers.html"><i class="icon ion-star-empty"></i> Popovers</a></p>
-      <p><a class="button button-block button-default" href="pull-to-refresh.html"><i class="icon ion-star-empty"></i> Pull To Refresh</a></p>
-      <p><a class="button button-block button-default" href="side-menus.html"><i class="icon ion-star-empty"></i> Side Menus</a></p>
-      <p><a class="button button-block button-default" href="swipe.html"><i class="icon ion-star-empty"></i> Swipe</a></p>
-      <p><a class="button button-block button-default" href="tab-bars.html"><i class="icon ion-star-half-empty"></i> Tab Bars</a></p>
-      <p><a class="button button-block button-default" href="type.html"><i class="icon ion-star"></i> Type</a></p>
+      <div class="list">
+        <a class="item" href="buttons.html">Buttons</a>
+        <a class="item" href="button-bar.html">Button Bar</a>
+        <a class="item" href="cards.html">Cards</a>
+        <a class="item" href="footers.html">Footers</a>
+        <a class="item" href="grid.html">Grid</a>
+        <a class="item" href="headers.html">Headers</a>
+        <a class="item" href="input-text.html">Input: Text (single-line)</a>
+        <a class="item" href="input-textarea.html">Input: Text (multi-line)</a>
+        <a class="item" href="input-radio.html">Input: Radio Buttons</a>
+        <a class="item" href="input-range.html">Input: Range</a>
+        <a class="item" href="input-select.html">Input: Select</a>
+        <a class="item" href="input-checkbox.html">Input: Checkbox</a>
+        <a class="item" href="input-toggle.html">Input: Toggle</a>
+        <a class="item" href="lists.html">Lists</a>
+        <a class="item" href="modals.html">Modals</a>
+        <a class="item" href="popovers.html">Popovers</a>
+        <a class="item" href="pull-to-refresh.html">Pull To Refresh</a>
+        <a class="item" href="side-menus.html">Side Menus</a>
+        <a class="item" href="swipe.html">Swipe</a>
+        <a class="item" href="tab-bars.html">Tab Bars</a>
+        <a class="item" href="type.html">Type</a>
+      </div>
 
     </div>