From bd8976ba5c1aae38cf062b2932e9bc3712595e3d Mon Sep 17 00:00:00 2001
From: Marcos Moura <marcosvmmoura@gmail.com>
Date: Wed, 8 Feb 2017 04:03:14 -0200
Subject: [PATCH] start app template

---
 docs/src/App.vue                              |   15 +
 docs/src/pages/templates/AppTemplate.vue      |   88 ++
 docs/src/pages/ui-elements/Layout.vue         | 1074 +++++++++--------
 docs/src/routes.js                            |   60 +-
 src/index.js                                  |    6 +-
 src/templates/mdAppTemplate/index.js          |    5 +
 .../mdAppTemplate/mdAppTemplate.scss          |   30 +
 src/templates/mdAppTemplate/mdAppTemplate.vue |   89 ++
 8 files changed, 808 insertions(+), 559 deletions(-)
 create mode 100644 docs/src/pages/templates/AppTemplate.vue
 create mode 100644 src/templates/mdAppTemplate/index.js
 create mode 100644 src/templates/mdAppTemplate/mdAppTemplate.scss
 create mode 100644 src/templates/mdAppTemplate/mdAppTemplate.vue

diff --git a/docs/src/App.vue b/docs/src/App.vue
index 4e3a9c8..2e84db4 100644
--- a/docs/src/App.vue
+++ b/docs/src/App.vue
@@ -169,10 +169,25 @@
                 <md-list-item class="md-inset">
                   <router-link exact to="/ui-elements/typography">Typography</router-link>
                 </md-list-item>
+
+                <md-list-item class="md-inset">
+                  <router-link exact to="/templates/app-template">App Template</router-link>
+                </md-list-item>
               </md-list>
             </md-list-expand>
           </md-list-item>
 
+          <!-- <md-list-item>
+            <span>Templates</span>
+            <md-list-expand>
+              <md-list>
+                <md-list-item class="md-inset">
+                  <router-link exact to="/templates/app-template">App Template</router-link>
+                </md-list-item>
+              </md-list>
+            </md-list-expand>
+          </md-list-item> -->
+
           <md-list-item>
             <router-link exact to="/changelog">Changelog</router-link>
           </md-list-item>
diff --git a/docs/src/pages/templates/AppTemplate.vue b/docs/src/pages/templates/AppTemplate.vue
new file mode 100644
index 0000000..c7c0013
--- /dev/null
+++ b/docs/src/pages/templates/AppTemplate.vue
@@ -0,0 +1,88 @@
+<template>
+  <page-content page-title="Templates - App">
+    <docs-component>
+      <div slot="description">
+        <p>The following classes can be applied to change the color palette:</p>
+        <ul class="md-body-2">
+          <li><code>md-accent</code></li>
+          <li><code>md-warn</code></li>
+          <li><code>md-transparent</code></li>
+        </ul>
+      </div>
+
+      <div slot="api">
+        <api-table name="md-app-template">
+          <md-table slot="properties">
+            <md-table-header>
+              <md-table-row>
+                <md-table-head>Name</md-table-head>
+                <md-table-head>Type</md-table-head>
+                <md-table-head>Description</md-table-head>
+              </md-table-row>
+            </md-table-header>
+
+            <md-table-body>
+              <md-table-row>
+                <md-table-cell>empty</md-table-cell>
+                <md-table-cell><code>Type</code></md-table-cell>
+                <md-table-cell>Description</md-table-cell>
+              </md-table-row>
+            </md-table-body>
+          </md-table>
+        </api-table>
+      </div>
+
+      <div slot="example">
+        <example-box card-title="Default">
+          <div slot="demo">
+            <md-app-template :md-elevation="3" md-waterfall style="height: 300px">
+              <div slot="md-app-toolbar">
+                <span class="md-title">Page Title</span>
+              </div>
+
+              <div slot="md-app-content">
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, pariatur.</p>
+                <p>Voluptatibus blanditiis accusamus, officiis ipsum. Placeat consequuntur sit et perspiciatis iste, architecto sint autem eius officia est!</p>
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, pariatur.</p>
+                <p>Voluptatibus blanditiis accusamus, officiis ipsum. Placeat consequuntur sit et perspiciatis iste, architecto sint autem eius officia est!</p>
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, pariatur.</p>
+                <p>Voluptatibus blanditiis accusamus, officiis ipsum. Placeat consequuntur sit et perspiciatis iste, architecto sint autem eius officia est!</p>
+              </div>
+            </md-app-template>
+
+            <md-app-template md-scroll-reveal style="height: 300px">
+              <div slot="md-app-toolbar">
+                <span class="md-title">Page Title</span>
+              </div>
+
+              <div slot="md-app-content">
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, pariatur.</p>
+                <p>Voluptatibus blanditiis accusamus, officiis ipsum. Placeat consequuntur sit et perspiciatis iste, architecto sint autem eius officia est!</p>
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, pariatur.</p>
+                <p>Voluptatibus blanditiis accusamus, officiis ipsum. Placeat consequuntur sit et perspiciatis iste, architecto sint autem eius officia est!</p>
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, pariatur.</p>
+                <p>Voluptatibus blanditiis accusamus, officiis ipsum. Placeat consequuntur sit et perspiciatis iste, architecto sint autem eius officia est!</p>
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, pariatur.</p>
+                <p>Voluptatibus blanditiis accusamus, officiis ipsum. Placeat consequuntur sit et perspiciatis iste, architecto sint autem eius officia est!</p>
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, pariatur.</p>
+                <p>Voluptatibus blanditiis accusamus, officiis ipsum. Placeat consequuntur sit et perspiciatis iste, architecto sint autem eius officia est!</p>
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, pariatur.</p>
+                <p>Voluptatibus blanditiis accusamus, officiis ipsum. Placeat consequuntur sit et perspiciatis iste, architecto sint autem eius officia est!</p>
+              </div>
+            </md-app-template>
+          </div>
+
+          <div slot="code">
+            <code-block lang="xml">
+
+            </code-block>
+          </div>
+        </example-box>
+      </div>
+    </docs-component>
+  </page-content>
+</template>
+
+<style lang="sass" scoped>
+
+</style>
diff --git a/docs/src/pages/ui-elements/Layout.vue b/docs/src/pages/ui-elements/Layout.vue
index 06ac0a6..765ccfd 100644
--- a/docs/src/pages/ui-elements/Layout.vue
+++ b/docs/src/pages/ui-elements/Layout.vue
@@ -1,627 +1,629 @@
 <template>
-  <page-content page-title="UI Elements - Layout">
-    <docs-component>
-      <div slot="description">
-        <p>Responsive layouts in material design adapt to any possible screen size. This UI guidance includes a flexible grid that ensures consistency across layouts, breakpoint details about how content reflows on different screens, and a description of how an app can scale from small to extra-large screens.</p>
-        <p>By default you can create gutter-free layouts, make the grid system calculate the best margin size for each screen or set it by yourself with the <code>md-gutter</code> property. If you want the automatic calculation the engine will set <code>16px</code> for small screens and then apply <code>24px</code> for medium to large.</p>
-        <p>You can create columns size by size or rows to make your layout fluid. You can combine columns with rows or even use nested columns.</p>
-        <p>The grid system makes use of flexbox to be flexible enough and give the best experience with a great and easy API. You can create responsive layouts with few lines of code with a declarative engine. The system work with some breakpoints:</p>
-        <md-table slot="properties" class="properties">
-          <md-table-header>
-            <md-table-row>
-              <md-table-head>Name</md-table-head>
-              <md-table-head>Size</md-table-head>
-              <md-table-head>Description</md-table-head>
-            </md-table-row>
-          </md-table-header>
-
-          <md-table-body>
-            <md-table-row>
-              <md-table-cell><code>xsmall</code></md-table-cell>
-              <md-table-cell>600px</md-table-cell>
-              <md-table-cell>For screens who have the maximum of 600px wide. For small, medium and large handsets in portrait. Also applies to small handsets in portrait.</md-table-cell>
-            </md-table-row>
-
-            <md-table-row>
-              <md-table-cell><code>small</code></md-table-cell>
-              <md-table-cell>960px</md-table-cell>
-              <md-table-cell>For screens who have between of 600px and 960px wide. For medium and large handsets in landscape, small and large tablets in portrait mode and some desktop monitors.</md-table-cell>
-            </md-table-row>
-
-            <md-table-row>
-              <md-table-cell><code>medium</code></md-table-cell>
-              <md-table-cell>1280px</md-table-cell>
-              <md-table-cell>For screens who have between of 960px and 1280px wide. For small and large tablets in landscape and desktop monitors.</md-table-cell>
-            </md-table-row>
-
-            <md-table-row>
-              <md-table-cell><code>large</code></md-table-cell>
-              <md-table-cell>1920px</md-table-cell>
-              <md-table-cell>For screens who have between of 1280px and 1920px wide. For large desktop monitors.</md-table-cell>
-            </md-table-row>
-
-            <md-table-row>
-              <md-table-cell><code>xlarge</code></md-table-cell>
-              <md-table-cell>>1920px</md-table-cell>
-              <md-table-cell>For screens bigger than 1920px wide. For huge desktop monitors or side-by-side screens.</md-table-cell>
-            </md-table-row>
-          </md-table-body>
-        </md-table>
-      </div>
-
-      <div slot="api">
-        <api-table name="md-layout">
+  <keep-alive>
+    <page-content page-title="UI Elements - Layout">
+      <docs-component>
+        <div slot="description">
+          <p>Responsive layouts in material design adapt to any possible screen size. This UI guidance includes a flexible grid that ensures consistency across layouts, breakpoint details about how content reflows on different screens, and a description of how an app can scale from small to extra-large screens.</p>
+          <p>By default you can create gutter-free layouts, make the grid system calculate the best margin size for each screen or set it by yourself with the <code>md-gutter</code> property. If you want the automatic calculation the engine will set <code>16px</code> for small screens and then apply <code>24px</code> for medium to large.</p>
+          <p>You can create columns size by size or rows to make your layout fluid. You can combine columns with rows or even use nested columns.</p>
+          <p>The grid system makes use of flexbox to be flexible enough and give the best experience with a great and easy API. You can create responsive layouts with few lines of code with a declarative engine. The system work with some breakpoints:</p>
           <md-table slot="properties" class="properties">
             <md-table-header>
               <md-table-row>
                 <md-table-head>Name</md-table-head>
-                <md-table-head>Type</md-table-head>
+                <md-table-head>Size</md-table-head>
                 <md-table-head>Description</md-table-head>
               </md-table-row>
             </md-table-header>
 
             <md-table-body>
               <md-table-row>
-                <md-table-cell>md-tag</md-table-cell>
-                <md-table-cell><code>String</code></md-table-cell>
-                <md-table-cell>The output tag. Default <code>div</code></md-table-cell>
+                <md-table-cell><code>xsmall</code></md-table-cell>
+                <md-table-cell>600px</md-table-cell>
+                <md-table-cell>For screens who have the maximum of 600px wide. For small, medium and large handsets in portrait. Also applies to small handsets in portrait.</md-table-cell>
               </md-table-row>
 
               <md-table-row>
-                <md-table-cell>md-gutter</md-table-cell>
-                <md-table-cell><code>Boolean|Number</code></md-table-cell>
-                <md-table-cell>Apply a gutter space to direct childs of the element that have this property. If <code>true</code> the gutter will be calculated automatically by the current screen size. If number the size will be fixed. Accepts <code>8</code>|<code>16</code>|<code>24</code>|<code>40</code>. Default <code>false</code></md-table-cell>
+                <md-table-cell><code>small</code></md-table-cell>
+                <md-table-cell>960px</md-table-cell>
+                <md-table-cell>For screens who have between of 600px and 960px wide. For medium and large handsets in landscape, small and large tablets in portrait mode and some desktop monitors.</md-table-cell>
               </md-table-row>
 
               <md-table-row>
-                <md-table-cell>md-row</md-table-cell>
-                <md-table-cell><code>Boolean</code></md-table-cell>
-                <md-table-cell>Create a row container. All child will be side by side.</md-table-cell>
+                <md-table-cell><code>medium</code></md-table-cell>
+                <md-table-cell>1280px</md-table-cell>
+                <md-table-cell>For screens who have between of 960px and 1280px wide. For small and large tablets in landscape and desktop monitors.</md-table-cell>
               </md-table-row>
 
               <md-table-row>
-                <md-table-cell>md-row-{type}</md-table-cell>
-                <md-table-cell><code>Boolean</code></md-table-cell>
-                <md-table-cell>Create a row container on screen sizes less than or equal to given breakpoint. Example: <code>md-row-large</code></md-table-cell>
+                <md-table-cell><code>large</code></md-table-cell>
+                <md-table-cell>1920px</md-table-cell>
+                <md-table-cell>For screens who have between of 1280px and 1920px wide. For large desktop monitors.</md-table-cell>
               </md-table-row>
 
               <md-table-row>
-                <md-table-cell>md-column</md-table-cell>
-                <md-table-cell><code>Boolean</code></md-table-cell>
-                <md-table-cell>Create a column container. All child will be one underneath the other.</md-table-cell>
-              </md-table-row>
-
-              <md-table-row>
-                <md-table-cell>md-column-{type}</md-table-cell>
-                <md-table-cell><code>Boolean</code></md-table-cell>
-                <md-table-cell>Create a column container on screen sizes less than or equal to given breakpoint. Example: <code>md-column-small</code></md-table-cell>
-              </md-table-row>
-
-              <md-table-row>
-                <md-table-cell>md-hide-{type}</md-table-cell>
-                <md-table-cell><code>Boolean</code></md-table-cell>
-                <md-table-cell>Hide a layout container/child on screen sizes less than or equal to given breakpoint. Example: <code>md-hide-medium</code></md-table-cell>
-              </md-table-row>
-
-              <md-table-row>
-                <md-table-cell>md-hide-{type}-and-up</md-table-cell>
-                <md-table-cell><code>Boolean</code></md-table-cell>
-                <md-table-cell>Hide a layout container/child on screen sizes greater than or equal to given breakpoint. Example: <code>md-hide-medium-and-up</code></md-table-cell>
-              </md-table-row>
-
-              <md-table-row>
-                <md-table-cell>md-flex</md-table-cell>
-                <md-table-cell><code>Boolean|Number</code></md-table-cell>
-                <md-table-cell>Create a flexible child. If <code>true</code> the child element will grow to fill the empty space available on the parent element. If <code>Number</code> the size of the child will be sized according to the giver size. Accepts values multiple of 5. Also accepts the values 33 and 66. Default: <code>true</code></md-table-cell>
-              </md-table-row>
-
-              <md-table-row>
-                <md-table-cell>md-flex-{type}</md-table-cell>
-                <md-table-cell><code>Boolean|Number</code></md-table-cell>
-                <md-table-cell>Create a flexible child on screen sizes less than or equal to given breakpoint. Example: <code>md-flex-small="33"</code></md-table-cell>
-              </md-table-row>
-
-              <md-table-row>
-                <md-table-cell>md-flex-offset</md-table-cell>
-                <md-table-cell><code>Number</code></md-table-cell>
-                <md-table-cell>Create a empty space before the actual child. Accepts the same value of <code>md-flex</code> Example: <code>md-flex-offset="50"</code></md-table-cell>
-              </md-table-row>
-
-              <md-table-row>
-                <md-table-cell>md-flex-offset-{type}</md-table-cell>
-                <md-table-cell><code>Number</code></md-table-cell>
-                <md-table-cell>Create a empty space before the actual child  on screen sizes less than or equal to given breakpoint. Example: <code>md-flex-offset-small="20"</code></md-table-cell>
-              </md-table-row>
-
-              <md-table-row>
-                <md-table-cell>md-align</md-table-cell>
-                <md-table-cell><code>String</code></md-table-cell>
-                <md-table-cell>Apply an alignment to the container. Accepts <code>start</code>|<code>center</code>|<code>end</code> Example: <code>md-align="end"</code></md-table-cell>
-              </md-table-row>
-
-              <md-table-row>
-                <md-table-cell>md-align-{type}</md-table-cell>
-                <md-table-cell><code>Number</code></md-table-cell>
-                <md-table-cell>Apply an alignment to the container on screen sizes less than or equal to given breakpoint. Example: <code>md-align-xlarge="center"</code></md-table-cell>
+                <md-table-cell><code>xlarge</code></md-table-cell>
+                <md-table-cell>>1920px</md-table-cell>
+                <md-table-cell>For screens bigger than 1920px wide. For huge desktop monitors or side-by-side screens.</md-table-cell>
               </md-table-row>
             </md-table-body>
           </md-table>
-        </api-table>
-      </div>
+        </div>
 
-      <div slot="example">
-        <example-box card-title="Responsive">
-          <div class="layout-demo grid" slot="demo">
-            <md-layout class="color" md-gutter>
-              <md-layout class="color-red" md-flex-xsmall="100" md-flex-small="50" md-flex-medium="33">
-                <div class="grid-content">
-                  md-flex-xsmall <br>
-                  md-flex-small="50" <br>
-                  md-flex-medium="33"
-                </div>
+        <div slot="api">
+          <api-table name="md-layout">
+            <md-table slot="properties" class="properties">
+              <md-table-header>
+                <md-table-row>
+                  <md-table-head>Name</md-table-head>
+                  <md-table-head>Type</md-table-head>
+                  <md-table-head>Description</md-table-head>
+                </md-table-row>
+              </md-table-header>
+
+              <md-table-body>
+                <md-table-row>
+                  <md-table-cell>md-tag</md-table-cell>
+                  <md-table-cell><code>String</code></md-table-cell>
+                  <md-table-cell>The output tag. Default <code>div</code></md-table-cell>
+                </md-table-row>
+
+                <md-table-row>
+                  <md-table-cell>md-gutter</md-table-cell>
+                  <md-table-cell><code>Boolean|Number</code></md-table-cell>
+                  <md-table-cell>Apply a gutter space to direct childs of the element that have this property. If <code>true</code> the gutter will be calculated automatically by the current screen size. If number the size will be fixed. Accepts <code>8</code>|<code>16</code>|<code>24</code>|<code>40</code>. Default <code>false</code></md-table-cell>
+                </md-table-row>
+
+                <md-table-row>
+                  <md-table-cell>md-row</md-table-cell>
+                  <md-table-cell><code>Boolean</code></md-table-cell>
+                  <md-table-cell>Create a row container. All child will be side by side.</md-table-cell>
+                </md-table-row>
+
+                <md-table-row>
+                  <md-table-cell>md-row-{type}</md-table-cell>
+                  <md-table-cell><code>Boolean</code></md-table-cell>
+                  <md-table-cell>Create a row container on screen sizes less than or equal to given breakpoint. Example: <code>md-row-large</code></md-table-cell>
+                </md-table-row>
+
+                <md-table-row>
+                  <md-table-cell>md-column</md-table-cell>
+                  <md-table-cell><code>Boolean</code></md-table-cell>
+                  <md-table-cell>Create a column container. All child will be one underneath the other.</md-table-cell>
+                </md-table-row>
+
+                <md-table-row>
+                  <md-table-cell>md-column-{type}</md-table-cell>
+                  <md-table-cell><code>Boolean</code></md-table-cell>
+                  <md-table-cell>Create a column container on screen sizes less than or equal to given breakpoint. Example: <code>md-column-small</code></md-table-cell>
+                </md-table-row>
+
+                <md-table-row>
+                  <md-table-cell>md-hide-{type}</md-table-cell>
+                  <md-table-cell><code>Boolean</code></md-table-cell>
+                  <md-table-cell>Hide a layout container/child on screen sizes less than or equal to given breakpoint. Example: <code>md-hide-medium</code></md-table-cell>
+                </md-table-row>
+
+                <md-table-row>
+                  <md-table-cell>md-hide-{type}-and-up</md-table-cell>
+                  <md-table-cell><code>Boolean</code></md-table-cell>
+                  <md-table-cell>Hide a layout container/child on screen sizes greater than or equal to given breakpoint. Example: <code>md-hide-medium-and-up</code></md-table-cell>
+                </md-table-row>
+
+                <md-table-row>
+                  <md-table-cell>md-flex</md-table-cell>
+                  <md-table-cell><code>Boolean|Number</code></md-table-cell>
+                  <md-table-cell>Create a flexible child. If <code>true</code> the child element will grow to fill the empty space available on the parent element. If <code>Number</code> the size of the child will be sized according to the giver size. Accepts values multiple of 5. Also accepts the values 33 and 66. Default: <code>true</code></md-table-cell>
+                </md-table-row>
+
+                <md-table-row>
+                  <md-table-cell>md-flex-{type}</md-table-cell>
+                  <md-table-cell><code>Boolean|Number</code></md-table-cell>
+                  <md-table-cell>Create a flexible child on screen sizes less than or equal to given breakpoint. Example: <code>md-flex-small="33"</code></md-table-cell>
+                </md-table-row>
+
+                <md-table-row>
+                  <md-table-cell>md-flex-offset</md-table-cell>
+                  <md-table-cell><code>Number</code></md-table-cell>
+                  <md-table-cell>Create a empty space before the actual child. Accepts the same value of <code>md-flex</code> Example: <code>md-flex-offset="50"</code></md-table-cell>
+                </md-table-row>
+
+                <md-table-row>
+                  <md-table-cell>md-flex-offset-{type}</md-table-cell>
+                  <md-table-cell><code>Number</code></md-table-cell>
+                  <md-table-cell>Create a empty space before the actual child  on screen sizes less than or equal to given breakpoint. Example: <code>md-flex-offset-small="20"</code></md-table-cell>
+                </md-table-row>
+
+                <md-table-row>
+                  <md-table-cell>md-align</md-table-cell>
+                  <md-table-cell><code>String</code></md-table-cell>
+                  <md-table-cell>Apply an alignment to the container. Accepts <code>start</code>|<code>center</code>|<code>end</code> Example: <code>md-align="end"</code></md-table-cell>
+                </md-table-row>
+
+                <md-table-row>
+                  <md-table-cell>md-align-{type}</md-table-cell>
+                  <md-table-cell><code>Number</code></md-table-cell>
+                  <md-table-cell>Apply an alignment to the container on screen sizes less than or equal to given breakpoint. Example: <code>md-align-xlarge="center"</code></md-table-cell>
+                </md-table-row>
+              </md-table-body>
+            </md-table>
+          </api-table>
+        </div>
+
+        <div slot="example">
+          <example-box card-title="Responsive">
+            <div class="layout-demo grid" slot="demo">
+              <md-layout class="color" md-gutter>
+                <md-layout class="color-red" md-flex-xsmall="100" md-flex-small="50" md-flex-medium="33">
+                  <div class="grid-content">
+                    md-flex-xsmall <br>
+                    md-flex-small="50" <br>
+                    md-flex-medium="33"
+                  </div>
+                </md-layout>
+
+                <md-layout class="color-blue" md-flex-xsmall="100" md-flex-small="50" md-flex-medium="33">
+                  <div class="grid-content">
+                    md-flex-xsmall <br>
+                    md-flex-small="50" <br>
+                    md-flex-medium="33"
+                  </div>
+                </md-layout>
+
+                <md-layout class="color-pink" md-flex-xsmall="100" md-flex-small="50" md-flex-medium="33">
+                  <div class="grid-content">
+                    md-flex-xsmall <br>
+                    md-flex-small="50" <br>
+                    md-flex-medium="33"
+                  </div>
+                </md-layout>
+
+                <md-layout class="color-teal" md-flex-xsmall="100" md-flex-small="50" md-flex-medium="33">
+                  <div class="grid-content">
+                    md-flex-xsmall <br>
+                    md-flex-small="50" <br>
+                    md-flex-medium="33"
+                  </div>
+                </md-layout>
+
+                <md-layout class="color-green" md-flex-small="100" md-flex-medium="33" md-hide-xsmall>
+                  <div class="grid-content">
+                    md-flex-medium="33" <br>
+                    md-hide-xsmall
+                  </div>
+                </md-layout>
+
+                <md-layout class="color-yellow" md-flex md-flex-medium="33" md-hide-small>
+                  <div class="grid-content">
+                    md-flex-medium="33" <br>
+                    md-hide-small
+                  </div>
+                </md-layout>
               </md-layout>
+            </div>
 
-              <md-layout class="color-blue" md-flex-xsmall="100" md-flex-small="50" md-flex-medium="33">
-                <div class="grid-content">
-                  md-flex-xsmall <br>
-                  md-flex-small="50" <br>
-                  md-flex-medium="33"
-                </div>
-              </md-layout>
+            <div slot="code">
+              <code-block lang="xml">
+                &lt;md-layout md-gutter&gt;
+                  &lt;md-layout md-flex-xsmall=&quot;100&quot; md-flex-small=&quot;50&quot; md-flex-medium=&quot;33&quot;&gt;
+                    md-flex-xsmall &lt;br&gt;
+                    md-flex-small=&quot;50&quot; &lt;br&gt;
+                    md-flex-medium=&quot;33&quot;
+                  &lt;/md-layout&gt;
 
-              <md-layout class="color-pink" md-flex-xsmall="100" md-flex-small="50" md-flex-medium="33">
-                <div class="grid-content">
-                  md-flex-xsmall <br>
-                  md-flex-small="50" <br>
-                  md-flex-medium="33"
-                </div>
-              </md-layout>
+                  &lt;md-layout md-flex-xsmall=&quot;100&quot; md-flex-small=&quot;50&quot; md-flex-medium=&quot;33&quot;&gt;
+                    md-flex-xsmall &lt;br&gt;
+                    md-flex-small=&quot;50&quot; &lt;br&gt;
+                    md-flex-medium=&quot;33&quot;
+                  &lt;/md-layout&gt;
 
-              <md-layout class="color-teal" md-flex-xsmall="100" md-flex-small="50" md-flex-medium="33">
-                <div class="grid-content">
-                  md-flex-xsmall <br>
-                  md-flex-small="50" <br>
-                  md-flex-medium="33"
-                </div>
-              </md-layout>
+                  &lt;md-layout md-flex-xsmall=&quot;100&quot; md-flex-small=&quot;50&quot; md-flex-medium=&quot;33&quot;&gt;
+                    md-flex-xsmall &lt;br&gt;
+                    md-flex-small=&quot;50&quot; &lt;br&gt;
+                    md-flex-medium=&quot;33&quot;
+                  &lt;/md-layout&gt;
 
-              <md-layout class="color-green" md-flex-small="100" md-flex-medium="33" md-hide-xsmall>
-                <div class="grid-content">
-                  md-flex-medium="33" <br>
-                  md-hide-xsmall
-                </div>
-              </md-layout>
+                  &lt;md-layout md-flex-xsmall=&quot;100&quot; md-flex-small=&quot;50&quot; md-flex-medium=&quot;33&quot;&gt;
+                    md-flex-xsmall &lt;br&gt;
+                    md-flex-small=&quot;50&quot; &lt;br&gt;
+                    md-flex-medium=&quot;33&quot;
+                  &lt;/md-layout&gt;
 
-              <md-layout class="color-yellow" md-flex md-flex-medium="33" md-hide-small>
-                <div class="grid-content">
-                  md-flex-medium="33" <br>
-                  md-hide-small
-                </div>
-              </md-layout>
-            </md-layout>
-          </div>
+                  &lt;md-layout md-flex-small=&quot;100&quot; md-flex-medium=&quot;33&quot; md-hide-xsmall&gt;
+                    md-flex-medium=&quot;33&quot; &lt;br&gt;
+                    md-hide-xsmall
+                  &lt;/md-layout&gt;
 
-          <div slot="code">
-            <code-block lang="xml">
-              &lt;md-layout md-gutter&gt;
-                &lt;md-layout md-flex-xsmall=&quot;100&quot; md-flex-small=&quot;50&quot; md-flex-medium=&quot;33&quot;&gt;
-                  md-flex-xsmall &lt;br&gt;
-                  md-flex-small=&quot;50&quot; &lt;br&gt;
-                  md-flex-medium=&quot;33&quot;
+                  &lt;md-layout md-flex md-flex-medium=&quot;33&quot; md-hide-small&gt;
+                    md-flex-medium=&quot;33&quot; &lt;br&gt;
+                    md-hide-small
+                  &lt;/md-layout&gt;
                 &lt;/md-layout&gt;
+              </code-block>
+            </div>
+          </example-box>
 
-                &lt;md-layout md-flex-xsmall=&quot;100&quot; md-flex-small=&quot;50&quot; md-flex-medium=&quot;33&quot;&gt;
-                  md-flex-xsmall &lt;br&gt;
-                  md-flex-small=&quot;50&quot; &lt;br&gt;
-                  md-flex-medium=&quot;33&quot;
-                &lt;/md-layout&gt;
-
-                &lt;md-layout md-flex-xsmall=&quot;100&quot; md-flex-small=&quot;50&quot; md-flex-medium=&quot;33&quot;&gt;
-                  md-flex-xsmall &lt;br&gt;
-                  md-flex-small=&quot;50&quot; &lt;br&gt;
-                  md-flex-medium=&quot;33&quot;
-                &lt;/md-layout&gt;
-
-                &lt;md-layout md-flex-xsmall=&quot;100&quot; md-flex-small=&quot;50&quot; md-flex-medium=&quot;33&quot;&gt;
-                  md-flex-xsmall &lt;br&gt;
-                  md-flex-small=&quot;50&quot; &lt;br&gt;
-                  md-flex-medium=&quot;33&quot;
-                &lt;/md-layout&gt;
-
-                &lt;md-layout md-flex-small=&quot;100&quot; md-flex-medium=&quot;33&quot; md-hide-xsmall&gt;
-                  md-flex-medium=&quot;33&quot; &lt;br&gt;
-                  md-hide-xsmall
-                &lt;/md-layout&gt;
-
-                &lt;md-layout md-flex md-flex-medium=&quot;33&quot; md-hide-small&gt;
-                  md-flex-medium=&quot;33&quot; &lt;br&gt;
-                  md-hide-small
-                &lt;/md-layout&gt;
-              &lt;/md-layout&gt;
-            </code-block>
-          </div>
-        </example-box>
-
-        <example-box card-title="Sizes and Offset">
-          <div class="layout-demo grid" slot="demo">
-            <md-layout md-gutter class="color">
-              <md-layout md-flex="50"></md-layout>
-              <md-layout></md-layout>
-              <md-layout></md-layout>
-              <md-layout></md-layout>
-            </md-layout>
-
-            <md-layout md-gutter class="color">
-              <md-layout md-flex="33"></md-layout>
-              <md-layout></md-layout>
-            </md-layout>
-
-            <md-layout md-gutter class="color">
-              <md-layout></md-layout>
-              <md-layout md-flex="33" md-flex-offset="33"></md-layout>
-            </md-layout>
-
-            <md-layout md-gutter class="color">
-              <md-layout md-flex="75"></md-layout>
-              <md-layout></md-layout>
-            </md-layout>
-
-            <md-layout md-gutter class="color">
-              <md-layout md-flex="50"></md-layout>
-              <md-layout></md-layout>
-              <md-layout></md-layout>
-            </md-layout>
-
-            <md-layout md-gutter class="color">
-              <md-layout md-flex="25" md-flex-offset="25"></md-layout>
-              <md-layout md-flex="25"></md-layout>
-            </md-layout>
-          </div>
-
-          <div slot="code">
-            <code-block lang="xml">
-              &lt;md-layout md-gutter&gt;
-                &lt;md-layout md-flex=&quot;50&quot;&gt;&lt;/md-layout&gt;
-                &lt;md-layout&gt;&lt;/md-layout&gt;
-                &lt;md-layout&gt;&lt;/md-layout&gt;
-                &lt;md-layout&gt;&lt;/md-layout&gt;
-              &lt;/md-layout&gt;
-
-              &lt;md-layout md-gutter&gt;
-                &lt;md-layout md-flex=&quot;33&quot;&gt;&lt;/md-layout&gt;
-                &lt;md-layout&gt;&lt;/md-layout&gt;
-              &lt;/md-layout&gt;
-
-              &lt;md-layout md-gutter&gt;
-                &lt;md-layout&gt;&lt;/md-layout&gt;
-                &lt;md-layout md-flex=&quot;33&quot; md-flex-offset=&quot;33&quot;&gt;&lt;/md-layout&gt;
-              &lt;/md-layout&gt;
-
-              &lt;md-layout md-gutter&gt;
-                &lt;md-layout md-flex=&quot;75&quot;&gt;&lt;/md-layout&gt;
-                &lt;md-layout&gt;&lt;/md-layout&gt;
-              &lt;/md-layout&gt;
-
-              &lt;md-layout md-gutter&gt;
-                &lt;md-layout md-flex=&quot;50&quot;&gt;&lt;/md-layout&gt;
-                &lt;md-layout&gt;&lt;/md-layout&gt;
-                &lt;md-layout&gt;&lt;/md-layout&gt;
-              &lt;/md-layout&gt;
-
-              &lt;md-layout md-gutter&gt;
-                &lt;md-layout md-flex=&quot;25&quot; md-flex-offset=&quot;25&quot;&gt;&lt;/md-layout&gt;
-                &lt;md-layout md-flex=&quot;25&quot;&gt;&lt;/md-layout&gt;
-              &lt;/md-layout&gt;
-            </code-block>
-          </div>
-        </example-box>
-
-        <example-box card-title="Direction">
-          <div class="layout-demo grid" slot="demo">
-            <md-layout class="column-size" md-gutter="16">
-              <md-layout md-column md-gutter="16" class="color">
-                <md-layout md-flex="20"></md-layout>
+          <example-box card-title="Sizes and Offset">
+            <div class="layout-demo grid" slot="demo">
+              <md-layout md-gutter class="color">
+                <md-layout md-flex="50"></md-layout>
+                <md-layout></md-layout>
+                <md-layout></md-layout>
                 <md-layout></md-layout>
               </md-layout>
 
-              <md-layout md-column md-gutter="16" class="color">
+              <md-layout md-gutter class="color">
+                <md-layout md-flex="33"></md-layout>
+                <md-layout></md-layout>
+              </md-layout>
+
+              <md-layout md-gutter class="color">
+                <md-layout></md-layout>
+                <md-layout md-flex="33" md-flex-offset="33"></md-layout>
+              </md-layout>
+
+              <md-layout md-gutter class="color">
+                <md-layout md-flex="75"></md-layout>
+                <md-layout></md-layout>
+              </md-layout>
+
+              <md-layout md-gutter class="color">
                 <md-layout md-flex="50"></md-layout>
                 <md-layout></md-layout>
                 <md-layout></md-layout>
               </md-layout>
-            </md-layout>
-          </div>
 
-          <div slot="code">
-            <code-block lang="xml">
-              &lt;md-layout md-gutter&gt;
-                &lt;md-layout md-column md-gutter&gt;
-                  &lt;md-layout md-flex=&quot;20&quot;&gt;&lt;/md-layout&gt;
+              <md-layout md-gutter class="color">
+                <md-layout md-flex="25" md-flex-offset="25"></md-layout>
+                <md-layout md-flex="25"></md-layout>
+              </md-layout>
+            </div>
+
+            <div slot="code">
+              <code-block lang="xml">
+                &lt;md-layout md-gutter&gt;
+                  &lt;md-layout md-flex=&quot;50&quot;&gt;&lt;/md-layout&gt;
+                  &lt;md-layout&gt;&lt;/md-layout&gt;
+                  &lt;md-layout&gt;&lt;/md-layout&gt;
                   &lt;md-layout&gt;&lt;/md-layout&gt;
                 &lt;/md-layout&gt;
 
-                &lt;md-layout md-column md-gutter&gt;
+                &lt;md-layout md-gutter&gt;
+                  &lt;md-layout md-flex=&quot;33&quot;&gt;&lt;/md-layout&gt;
+                  &lt;md-layout&gt;&lt;/md-layout&gt;
+                &lt;/md-layout&gt;
+
+                &lt;md-layout md-gutter&gt;
+                  &lt;md-layout&gt;&lt;/md-layout&gt;
+                  &lt;md-layout md-flex=&quot;33&quot; md-flex-offset=&quot;33&quot;&gt;&lt;/md-layout&gt;
+                &lt;/md-layout&gt;
+
+                &lt;md-layout md-gutter&gt;
+                  &lt;md-layout md-flex=&quot;75&quot;&gt;&lt;/md-layout&gt;
+                  &lt;md-layout&gt;&lt;/md-layout&gt;
+                &lt;/md-layout&gt;
+
+                &lt;md-layout md-gutter&gt;
                   &lt;md-layout md-flex=&quot;50&quot;&gt;&lt;/md-layout&gt;
                   &lt;md-layout&gt;&lt;/md-layout&gt;
                   &lt;md-layout&gt;&lt;/md-layout&gt;
                 &lt;/md-layout&gt;
-              &lt;/md-layout&gt;
-            </code-block>
-          </div>
-        </example-box>
 
-        <example-box card-title="Alignment">
-          <div class="layout-demo grid gutter" slot="demo">
-            <md-layout md-gutter="16" class="color">
-              <md-layout md-flex="50">
-                <span>start</span>
-              </md-layout>
-            </md-layout>
-
-            <md-layout md-align="end" md-gutter="16" class="color">
-              <md-layout md-flex="33">
-                <span>end</span>
-              </md-layout>
-            </md-layout>
-
-            <md-layout md-align="end" md-gutter="16" class="color">
-              <md-layout md-flex="20">
-                <span>end</span>
-              </md-layout>
-
-              <md-layout md-flex="20">
-                <span>end</span>
-              </md-layout>
-            </md-layout>
-
-            <md-layout md-align="center" md-gutter="16" class="color">
-              <md-layout md-flex="35">
-                <span>center</span>
-              </md-layout>
-
-              <md-layout md-flex="35">
-                <span>center</span>
-              </md-layout>
-            </md-layout>
-          </div>
-
-          <div slot="code">
-            <code-block lang="xml">
-              &lt;md-layout md-gutter=&quot;16&quot;&gt;
-                &lt;md-layout md-flex=&quot;50&quot;&gt;
-                  &lt;span&gt;start&lt;/span&gt;
+                &lt;md-layout md-gutter&gt;
+                  &lt;md-layout md-flex=&quot;25&quot; md-flex-offset=&quot;25&quot;&gt;&lt;/md-layout&gt;
+                  &lt;md-layout md-flex=&quot;25&quot;&gt;&lt;/md-layout&gt;
                 &lt;/md-layout&gt;
-              &lt;/md-layout&gt;
+              </code-block>
+            </div>
+          </example-box>
 
-              &lt;md-layout md-align=&quot;end&quot; md-gutter=&quot;16&quot;&gt;
-                &lt;md-layout md-flex=&quot;33&quot;&gt;
-                  &lt;span&gt;end&lt;/span&gt;
+          <example-box card-title="Direction">
+            <div class="layout-demo grid" slot="demo">
+              <md-layout class="column-size" md-gutter="16">
+                <md-layout md-column md-gutter="16" class="color">
+                  <md-layout md-flex="20"></md-layout>
+                  <md-layout></md-layout>
+                </md-layout>
+
+                <md-layout md-column md-gutter="16" class="color">
+                  <md-layout md-flex="50"></md-layout>
+                  <md-layout></md-layout>
+                  <md-layout></md-layout>
+                </md-layout>
+              </md-layout>
+            </div>
+
+            <div slot="code">
+              <code-block lang="xml">
+                &lt;md-layout md-gutter&gt;
+                  &lt;md-layout md-column md-gutter&gt;
+                    &lt;md-layout md-flex=&quot;20&quot;&gt;&lt;/md-layout&gt;
+                    &lt;md-layout&gt;&lt;/md-layout&gt;
+                  &lt;/md-layout&gt;
+
+                  &lt;md-layout md-column md-gutter&gt;
+                    &lt;md-layout md-flex=&quot;50&quot;&gt;&lt;/md-layout&gt;
+                    &lt;md-layout&gt;&lt;/md-layout&gt;
+                    &lt;md-layout&gt;&lt;/md-layout&gt;
+                  &lt;/md-layout&gt;
                 &lt;/md-layout&gt;
-              &lt;/md-layout&gt;
+              </code-block>
+            </div>
+          </example-box>
 
-              &lt;md-layout md-align=&quot;end&quot; md-gutter=&quot;16&quot;&gt;
-                &lt;md-layout md-flex=&quot;20&quot;&gt;
-                  &lt;span&gt;end&lt;/span&gt;
+          <example-box card-title="Alignment">
+            <div class="layout-demo grid gutter" slot="demo">
+              <md-layout md-gutter="16" class="color">
+                <md-layout md-flex="50">
+                  <span>start</span>
+                </md-layout>
+              </md-layout>
+
+              <md-layout md-align="end" md-gutter="16" class="color">
+                <md-layout md-flex="33">
+                  <span>end</span>
+                </md-layout>
+              </md-layout>
+
+              <md-layout md-align="end" md-gutter="16" class="color">
+                <md-layout md-flex="20">
+                  <span>end</span>
+                </md-layout>
+
+                <md-layout md-flex="20">
+                  <span>end</span>
+                </md-layout>
+              </md-layout>
+
+              <md-layout md-align="center" md-gutter="16" class="color">
+                <md-layout md-flex="35">
+                  <span>center</span>
+                </md-layout>
+
+                <md-layout md-flex="35">
+                  <span>center</span>
+                </md-layout>
+              </md-layout>
+            </div>
+
+            <div slot="code">
+              <code-block lang="xml">
+                &lt;md-layout md-gutter=&quot;16&quot;&gt;
+                  &lt;md-layout md-flex=&quot;50&quot;&gt;
+                    &lt;span&gt;start&lt;/span&gt;
+                  &lt;/md-layout&gt;
                 &lt;/md-layout&gt;
 
-                &lt;md-layout md-flex=&quot;20&quot;&gt;
-                  &lt;span&gt;end&lt;/span&gt;
-                &lt;/md-layout&gt;
-              &lt;/md-layout&gt;
-
-              &lt;md-layout md-align=&quot;center&quot; md-gutter=&quot;16&quot;&gt;
-                &lt;md-layout md-flex=&quot;35&quot;&gt;
-                  &lt;span&gt;center&lt;/span&gt;
+                &lt;md-layout md-align=&quot;end&quot; md-gutter=&quot;16&quot;&gt;
+                  &lt;md-layout md-flex=&quot;33&quot;&gt;
+                    &lt;span&gt;end&lt;/span&gt;
+                  &lt;/md-layout&gt;
                 &lt;/md-layout&gt;
 
-                &lt;md-layout md-flex=&quot;35&quot;&gt;
-                  &lt;span&gt;center&lt;/span&gt;
+                &lt;md-layout md-align=&quot;end&quot; md-gutter=&quot;16&quot;&gt;
+                  &lt;md-layout md-flex=&quot;20&quot;&gt;
+                    &lt;span&gt;end&lt;/span&gt;
+                  &lt;/md-layout&gt;
+
+                  &lt;md-layout md-flex=&quot;20&quot;&gt;
+                    &lt;span&gt;end&lt;/span&gt;
+                  &lt;/md-layout&gt;
                 &lt;/md-layout&gt;
-              &lt;/md-layout&gt;
-            </code-block>
-          </div>
-        </example-box>
 
-        <example-box card-title="Gutters">
-          <div class="layout-demo grid gutter" slot="demo">
-            <md-layout class="no-gutter color">
-              <md-layout></md-layout>
-              <md-layout></md-layout>
-            </md-layout>
+                &lt;md-layout md-align=&quot;center&quot; md-gutter=&quot;16&quot;&gt;
+                  &lt;md-layout md-flex=&quot;35&quot;&gt;
+                    &lt;span&gt;center&lt;/span&gt;
+                  &lt;/md-layout&gt;
 
-            <md-layout :md-gutter="8" class="color">
-              <md-layout>
-                <span>8px</span>
+                  &lt;md-layout md-flex=&quot;35&quot;&gt;
+                    &lt;span&gt;center&lt;/span&gt;
+                  &lt;/md-layout&gt;
+                &lt;/md-layout&gt;
+              </code-block>
+            </div>
+          </example-box>
+
+          <example-box card-title="Gutters">
+            <div class="layout-demo grid gutter" slot="demo">
+              <md-layout class="no-gutter color">
+                <md-layout></md-layout>
+                <md-layout></md-layout>
               </md-layout>
 
-              <md-layout>
-                <span>8px</span>
+              <md-layout :md-gutter="8" class="color">
+                <md-layout>
+                  <span>8px</span>
+                </md-layout>
+
+                <md-layout>
+                  <span>8px</span>
+                </md-layout>
+
+                <md-layout>
+                  <span>8px</span>
+                </md-layout>
+
+                <md-layout>
+                  <span>8px</span>
+                </md-layout>
+
+                <md-layout>
+                  <span>8px</span>
+                </md-layout>
+
+                <md-layout>
+                  <span>8px</span>
+                </md-layout>
               </md-layout>
 
-              <md-layout>
-                <span>8px</span>
+              <md-layout md-gutter="16" class="color">
+                <md-layout>
+                  <span>16px</span>
+                </md-layout>
+
+                <md-layout>
+                  <span>16px</span>
+                </md-layout>
+
+                <md-layout>
+                  <span>16px</span>
+                </md-layout>
+
+                <md-layout>
+                  <span>16px</span>
+                </md-layout>
+
+                <md-layout>
+                  <span>16px</span>
+                </md-layout>
               </md-layout>
 
-              <md-layout>
-                <span>8px</span>
+              <md-layout :md-gutter="24" class="color">
+                <md-layout>
+                  <span>24px</span>
+                </md-layout>
+
+                <md-layout>
+                  <span>24px</span>
+                </md-layout>
+
+                <md-layout>
+                  <span>24px</span>
+                </md-layout>
+
+                <md-layout>
+                  <span>24px</span>
+                </md-layout>
               </md-layout>
 
-              <md-layout>
-                <span>8px</span>
+              <md-layout :md-gutter="40" class="color">
+                <md-layout>
+                  <span>40px</span>
+                </md-layout>
+
+                <md-layout>
+                  <span>40px</span>
+                </md-layout>
+
+                <md-layout>
+                  <span>40px</span>
+                </md-layout>
               </md-layout>
 
-              <md-layout>
-                <span>8px</span>
+              <md-layout :md-gutter="true" class="color">
+                <md-layout>
+                  <span>Automatic</span>
+                </md-layout>
+
+                <md-layout>
+                  <span>Automatic</span>
+                </md-layout>
               </md-layout>
-            </md-layout>
+            </div>
 
-            <md-layout md-gutter="16" class="color">
-              <md-layout>
-                <span>16px</span>
-              </md-layout>
-
-              <md-layout>
-                <span>16px</span>
-              </md-layout>
-
-              <md-layout>
-                <span>16px</span>
-              </md-layout>
-
-              <md-layout>
-                <span>16px</span>
-              </md-layout>
-
-              <md-layout>
-                <span>16px</span>
-              </md-layout>
-            </md-layout>
-
-            <md-layout :md-gutter="24" class="color">
-              <md-layout>
-                <span>24px</span>
-              </md-layout>
-
-              <md-layout>
-                <span>24px</span>
-              </md-layout>
-
-              <md-layout>
-                <span>24px</span>
-              </md-layout>
-
-              <md-layout>
-                <span>24px</span>
-              </md-layout>
-            </md-layout>
-
-            <md-layout :md-gutter="40" class="color">
-              <md-layout>
-                <span>40px</span>
-              </md-layout>
-
-              <md-layout>
-                <span>40px</span>
-              </md-layout>
-
-              <md-layout>
-                <span>40px</span>
-              </md-layout>
-            </md-layout>
-
-            <md-layout :md-gutter="true" class="color">
-              <md-layout>
-                <span>Automatic</span>
-              </md-layout>
-
-              <md-layout>
-                <span>Automatic</span>
-              </md-layout>
-            </md-layout>
-          </div>
-
-          <div slot="code">
-            <code-block lang="xml">
-              &lt;md-layout&gt;
-                &lt;md-layout&gt;&lt;/md-layout&gt;
-                &lt;md-layout&gt;&lt;/md-layout&gt;
-              &lt;/md-layout&gt;
-
-              &lt;md-layout :md-gutter=&quot;8&quot;&gt;
+            <div slot="code">
+              <code-block lang="xml">
                 &lt;md-layout&gt;
-                  &lt;span&gt;8px&lt;/span&gt;
+                  &lt;md-layout&gt;&lt;/md-layout&gt;
+                  &lt;md-layout&gt;&lt;/md-layout&gt;
                 &lt;/md-layout&gt;
 
-                &lt;md-layout&gt;
-                  &lt;span&gt;8px&lt;/span&gt;
+                &lt;md-layout :md-gutter=&quot;8&quot;&gt;
+                  &lt;md-layout&gt;
+                    &lt;span&gt;8px&lt;/span&gt;
+                  &lt;/md-layout&gt;
+
+                  &lt;md-layout&gt;
+                    &lt;span&gt;8px&lt;/span&gt;
+                  &lt;/md-layout&gt;
+
+                  &lt;md-layout&gt;
+                    &lt;span&gt;8px&lt;/span&gt;
+                  &lt;/md-layout&gt;
+
+                  &lt;md-layout&gt;
+                    &lt;span&gt;8px&lt;/span&gt;
+                  &lt;/md-layout&gt;
+
+                  &lt;md-layout&gt;
+                    &lt;span&gt;8px&lt;/span&gt;
+                  &lt;/md-layout&gt;
+
+                  &lt;md-layout&gt;
+                    &lt;span&gt;8px&lt;/span&gt;
+                  &lt;/md-layout&gt;
                 &lt;/md-layout&gt;
 
-                &lt;md-layout&gt;
-                  &lt;span&gt;8px&lt;/span&gt;
+                &lt;md-layout md-gutter=&quot;16&quot;&gt;
+                  &lt;md-layout&gt;
+                    &lt;span&gt;16px&lt;/span&gt;
+                  &lt;/md-layout&gt;
+
+                  &lt;md-layout&gt;
+                    &lt;span&gt;16px&lt;/span&gt;
+                  &lt;/md-layout&gt;
+
+                  &lt;md-layout&gt;
+                    &lt;span&gt;16px&lt;/span&gt;
+                  &lt;/md-layout&gt;
+
+                  &lt;md-layout&gt;
+                    &lt;span&gt;16px&lt;/span&gt;
+                  &lt;/md-layout&gt;
+
+                  &lt;md-layout&gt;
+                    &lt;span&gt;16px&lt;/span&gt;
+                  &lt;/md-layout&gt;
                 &lt;/md-layout&gt;
 
-                &lt;md-layout&gt;
-                  &lt;span&gt;8px&lt;/span&gt;
+                &lt;md-layout :md-gutter=&quot;24&quot;&gt;
+                  &lt;md-layout&gt;
+                    &lt;span&gt;24px&lt;/span&gt;
+                  &lt;/md-layout&gt;
+
+                  &lt;md-layout&gt;
+                    &lt;span&gt;24px&lt;/span&gt;
+                  &lt;/md-layout&gt;
+
+                  &lt;md-layout&gt;
+                    &lt;span&gt;24px&lt;/span&gt;
+                  &lt;/md-layout&gt;
+
+                  &lt;md-layout&gt;
+                    &lt;span&gt;24px&lt;/span&gt;
+                  &lt;/md-layout&gt;
                 &lt;/md-layout&gt;
 
-                &lt;md-layout&gt;
-                  &lt;span&gt;8px&lt;/span&gt;
+                &lt;md-layout :md-gutter=&quot;40&quot;&gt;
+                  &lt;md-layout&gt;
+                    &lt;span&gt;40px&lt;/span&gt;
+                  &lt;/md-layout&gt;
+
+                  &lt;md-layout&gt;
+                    &lt;span&gt;40px&lt;/span&gt;
+                  &lt;/md-layout&gt;
+
+                  &lt;md-layout&gt;
+                    &lt;span&gt;40px&lt;/span&gt;
+                  &lt;/md-layout&gt;
                 &lt;/md-layout&gt;
 
-                &lt;md-layout&gt;
-                  &lt;span&gt;8px&lt;/span&gt;
-                &lt;/md-layout&gt;
-              &lt;/md-layout&gt;
+                &lt;md-layout md-gutter&gt;
+                  &lt;md-layout&gt;
+                    &lt;span&gt;Automatic&lt;/span&gt;
+                  &lt;/md-layout&gt;
 
-              &lt;md-layout md-gutter=&quot;16&quot;&gt;
-                &lt;md-layout&gt;
-                  &lt;span&gt;16px&lt;/span&gt;
+                  &lt;md-layout&gt;
+                    &lt;span&gt;Automatic&lt;/span&gt;
+                  &lt;/md-layout&gt;
                 &lt;/md-layout&gt;
-
-                &lt;md-layout&gt;
-                  &lt;span&gt;16px&lt;/span&gt;
-                &lt;/md-layout&gt;
-
-                &lt;md-layout&gt;
-                  &lt;span&gt;16px&lt;/span&gt;
-                &lt;/md-layout&gt;
-
-                &lt;md-layout&gt;
-                  &lt;span&gt;16px&lt;/span&gt;
-                &lt;/md-layout&gt;
-
-                &lt;md-layout&gt;
-                  &lt;span&gt;16px&lt;/span&gt;
-                &lt;/md-layout&gt;
-              &lt;/md-layout&gt;
-
-              &lt;md-layout :md-gutter=&quot;24&quot;&gt;
-                &lt;md-layout&gt;
-                  &lt;span&gt;24px&lt;/span&gt;
-                &lt;/md-layout&gt;
-
-                &lt;md-layout&gt;
-                  &lt;span&gt;24px&lt;/span&gt;
-                &lt;/md-layout&gt;
-
-                &lt;md-layout&gt;
-                  &lt;span&gt;24px&lt;/span&gt;
-                &lt;/md-layout&gt;
-
-                &lt;md-layout&gt;
-                  &lt;span&gt;24px&lt;/span&gt;
-                &lt;/md-layout&gt;
-              &lt;/md-layout&gt;
-
-              &lt;md-layout :md-gutter=&quot;40&quot;&gt;
-                &lt;md-layout&gt;
-                  &lt;span&gt;40px&lt;/span&gt;
-                &lt;/md-layout&gt;
-
-                &lt;md-layout&gt;
-                  &lt;span&gt;40px&lt;/span&gt;
-                &lt;/md-layout&gt;
-
-                &lt;md-layout&gt;
-                  &lt;span&gt;40px&lt;/span&gt;
-                &lt;/md-layout&gt;
-              &lt;/md-layout&gt;
-
-              &lt;md-layout md-gutter&gt;
-                &lt;md-layout&gt;
-                  &lt;span&gt;Automatic&lt;/span&gt;
-                &lt;/md-layout&gt;
-
-                &lt;md-layout&gt;
-                  &lt;span&gt;Automatic&lt;/span&gt;
-                &lt;/md-layout&gt;
-              &lt;/md-layout&gt;
-            </code-block>
-          </div>
-        </example-box>
-      </div>
-    </docs-component>
-  </page-content>
+              </code-block>
+            </div>
+          </example-box>
+        </div>
+      </docs-component>
+    </page-content>
+  </keep-alive>
 </template>
 
 <style lang="sass" scoped>
diff --git a/docs/src/routes.js b/docs/src/routes.js
index 4f220ea..d916b48 100644
--- a/docs/src/routes.js
+++ b/docs/src/routes.js
@@ -5,6 +5,10 @@ const About = (r) => require.ensure([], () => r(require('./pages/About')), 'base
 const Changelog = (r) => require.ensure([], () => r(require('./pages/Changelog')), 'base');
 const Error404 = (r) => require.ensure([], () => r(require('./pages/Error')), 'base');
 
+/* Themes */
+const Configuration = (r) => require.ensure([], () => r(require('./pages/themes/Configuration')), 'themes');
+const DynamicThemes = (r) => require.ensure([], () => r(require('./pages/themes/DynamicThemes')), 'themes');
+
 /* Components */
 const Avatar = (r) => require.ensure([], () => r(require('./pages/components/Avatar')), 'avatar');
 const BottomBar = (r) => require.ensure([], () => r(require('./pages/components/BottomBar')), 'bottom-bar');
@@ -40,9 +44,8 @@ const Whiteframe = (r) => require.ensure([], () => r(require('./pages/components
 const Typography = (r) => require.ensure([], () => r(require('./pages/ui-elements/Typography')), 'ui-elements');
 const Layout = (r) => require.ensure([], () => r(require('./pages/ui-elements/Layout')), 'ui-elements');
 
-/* Themes */
-const Configuration = (r) => require.ensure([], () => r(require('./pages/themes/Configuration')), 'themes');
-const DynamicThemes = (r) => require.ensure([], () => r(require('./pages/themes/DynamicThemes')), 'themes');
+/* Templates */
+const AppTemplate = (r) => require.ensure([], () => r(require('./pages/templates/AppTemplate')), 'templates');
 
 const main = [
   {
@@ -67,6 +70,24 @@ const main = [
   }
 ];
 
+const theme = [
+  {
+    path: '/themes',
+    name: 'themes',
+    redirect: '/themes/configuration'
+  },
+  {
+    path: '/themes/configuration',
+    name: 'themes:configuration',
+    component: Configuration
+  },
+  {
+    path: '/themes/dynamic-themes',
+    name: 'themes:dynamic-themes',
+    component: DynamicThemes
+  }
+];
+
 const components = [
   {
     path: '/components',
@@ -220,24 +241,6 @@ const components = [
   }
 ];
 
-const theme = [
-  {
-    path: '/themes',
-    name: 'themes',
-    redirect: '/themes/configuration'
-  },
-  {
-    path: '/themes/configuration',
-    name: 'themes:configuration',
-    component: Configuration
-  },
-  {
-    path: '/themes/dynamic-themes',
-    name: 'themes:dynamic-themes',
-    component: DynamicThemes
-  }
-];
-
 const uiElements = [
   {
     path: '/ui-elements',
@@ -256,6 +259,19 @@ const uiElements = [
   }
 ];
 
+const templates = [
+  {
+    path: '/templates',
+    name: 'templates',
+    redirect: '/templates/app-template'
+  },
+  {
+    path: '/templates/app-template',
+    name: 'templates:app-template',
+    component: AppTemplate
+  }
+];
+
 const error = [
   {
     path: '*',
@@ -264,4 +280,4 @@ const error = [
   }
 ];
 
-export default [].concat(main, components, theme, uiElements, error);
+export default [].concat(main, components, theme, uiElements, templates, error);
diff --git a/src/index.js b/src/index.js
index 9a0f757..34ea1ad 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,4 +1,5 @@
 import MdCore from './core';
+
 import MdAvatar from './components/mdAvatar';
 import MdBackdrop from './components/mdBackdrop';
 import MdBottomBar from './components/mdBottomBar';
@@ -31,6 +32,8 @@ import MdToolbar from './components/mdToolbar';
 import MdTooltip from './components/mdTooltip';
 import MdWhiteframe from './components/mdWhiteframe';
 
+import MdAppTemplate from './templates/mdAppTemplate';
+
 const options = {
   MdCore,
   MdAvatar,
@@ -63,7 +66,8 @@ const options = {
   MdTabs,
   MdToolbar,
   MdTooltip,
-  MdWhiteframe
+  MdWhiteframe,
+  MdAppTemplate
 };
 
 options.install = (Vue) => {
diff --git a/src/templates/mdAppTemplate/index.js b/src/templates/mdAppTemplate/index.js
new file mode 100644
index 0000000..3ee75d0
--- /dev/null
+++ b/src/templates/mdAppTemplate/index.js
@@ -0,0 +1,5 @@
+import mdAppTemplate from './mdAppTemplate.vue';
+
+export default function install(Vue) {
+  Vue.component('md-app-template', mdAppTemplate);
+}
diff --git a/src/templates/mdAppTemplate/mdAppTemplate.scss b/src/templates/mdAppTemplate/mdAppTemplate.scss
new file mode 100644
index 0000000..3a41256
--- /dev/null
+++ b/src/templates/mdAppTemplate/mdAppTemplate.scss
@@ -0,0 +1,30 @@
+@import '../../core/stylesheets/variables.scss';
+
+.md-app-template {
+  display: flex;
+  flex-flow: column;
+  overflow: auto;
+
+  &.md-fixed {
+    overflow: auto;
+
+    .md-content {
+      overflow: auto;
+    }
+  }
+
+  &.md-scroll-reveal {
+    transform: translateZ(0);
+  }
+
+  .md-toolbar {
+    position: relative;
+    z-index: 2;
+  }
+
+  .md-content {
+    padding: 16px;
+    position: relative;
+    z-index: 1;
+  }
+}
diff --git a/src/templates/mdAppTemplate/mdAppTemplate.vue b/src/templates/mdAppTemplate/mdAppTemplate.vue
new file mode 100644
index 0000000..afc2eaf
--- /dev/null
+++ b/src/templates/mdAppTemplate/mdAppTemplate.vue
@@ -0,0 +1,89 @@
+<template>
+  <div class="md-app-template" :class="classes" @scroll="onAppScroll">
+    <md-whiteframe md-tag="md-toolbar" :md-elevation="appliedElevation" slot="md-app-toolbar" ref="toolbar">
+      <slot name="md-app-toolbar" v-if="$slots['md-app-toolbar']"></slot>
+    </md-whiteframe>
+
+    <md-sidenav class="md-left" v-if="$slots['md-app-sidenav']">
+      <slot name="md-app-sidenav"></slot>
+    </md-sidenav>
+
+    <div class="md-content" @scroll="onContentScroll">
+      <slot name="md-app-content"></slot>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" src="./mdAppTemplate.scss"></style>
+
+<script>
+  export default {
+    props: {
+      mdElevation: {
+        type: Number,
+        default: 2
+      },
+      mdFixed: {
+        type: Boolean,
+        default: true
+      },
+      mdWaterfall: Boolean,
+      mdScrollReveal: Boolean
+    },
+    data() {
+      return {
+        calculatedElevation: 0,
+        scrollFactor: 16
+      };
+    },
+    computed: {
+      appliedElevation() {
+        return this.mdWaterfall ? this.calculatedElevation : this.mdElevation;
+      },
+      isFixed() {
+        return !this.mdScrollReveal && this.mdFixed;
+      },
+      classes() {
+        return {
+          'md-fixed': this.isFixed,
+          'md-scroll-reveal': this.mdScrollReveal
+        };
+      }
+    },
+    watch: {
+
+    },
+    methods: {
+      calculateWaterfall($event) {
+        const elevation = Math.ceil($event.target.scrollTop * this.mdElevation / this.scrollFactor);
+
+        if (elevation <= this.mdElevation) {
+          this.calculatedElevation = elevation;
+        }
+      },
+      calculateScrollReveal($event) {
+        console.log($event.target.scrollTop, this.$refs.toolbar.$el.offsetHeight);
+      },
+      onContentScroll($event) {
+        if (this.mdWaterfall) {
+          window.requestAnimationFrame(() => {
+            this.calculateWaterfall($event);
+          });
+        }
+      },
+      onAppScroll($event) {
+        if (this.mdScrollReveal) {
+          window.requestAnimationFrame(() => {
+            this.calculateScrollReveal($event);
+          });
+        }
+      }
+    },
+    mounted() {
+
+    },
+    beforeDestroy() {
+
+    }
+  };
+</script>