improve layout documentation

docs/src/App.vue

@@ -139,11 +139,11 @@
             <md-list-expand>
               <md-list>
                 <md-list-item class="md-inset">
-                  <router-link exact to="/ui-elements/typography">Typography</router-link>
+                  <router-link exact to="/ui-elements/layout">Layout</router-link>
                 </md-list-item>
 
                 <md-list-item class="md-inset">
-                  <router-link exact to="/ui-elements/layout">Layout</router-link>
+                  <router-link exact to="/ui-elements/typography">Typography</router-link>
                 </md-list-item>
               </md-list>
             </md-list-expand>
@@ -171,6 +171,10 @@
 
   $sizebar-size: 280px;
 
+  [v-cloak] {
+    display: none;
+  }
+
   html,
   body {
     height: 100%;
@@ -293,6 +297,8 @@
 </style>
 
 <script>
+  import Vue from 'vue';
+
   export default {
     data() {
       return {
@@ -303,7 +309,7 @@
     },
     computed: {
       logo() {
-        return 'assets/logo-vue-material-' + this.theme + '.png';
+        return 'assets/logo-vue-material-' + Vue.material.currentTheme + '.png';
       }
     },
     methods: {

docs/src/index.js

@@ -34,7 +34,7 @@ let handleSectionTheme = (currentRoute) => {
   } else if (currentRoute.name.indexOf('themes') >= 0) {
     theme = 'cyan';
   } else if (currentRoute.name.indexOf('ui-elements') >= 0) {
-    theme = 'blue-grey';
+    theme = 'purple';
   } else if (currentRoute.name === 'changelog') {
     theme = 'orange';
   } else if (currentRoute.name === 'about') {

docs/src/pages/ui-elements/Layout.vue

@@ -1,5 +1,5 @@
 <template>
-  <page-content page-title="Layout">
+  <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>
@@ -99,19 +99,6 @@
                 <md-layout></md-layout>
               </md-layout>
             </md-layout>
-
-            <md-layout class="column-size" :md-gutter="24">
-              <md-layout md-column :md-gutter="24" class="color">
-                <md-layout :md-flex="25"></md-layout>
-                <md-layout></md-layout>
-              </md-layout>
-
-              <md-layout md-column :md-gutter="24" class="color">
-                <md-layout :md-flex="25"></md-layout>
-                <md-layout :md-flex="50"></md-layout>
-                <md-layout></md-layout>
-              </md-layout>
-            </md-layout>
           </div>
 
           <div slot="code">

docs/src/pages/ui-elements/Typography.vue

@@ -1,5 +1,5 @@
 <template>
-  <page-content page-title="Typography">
+  <page-content page-title="UI Elements - Typography">
     <docs-component>
       <div slot="description">
         <h2 class="md-title">Styles</h2>