create empty layout module

docs/src/App.vue

@@ -137,19 +137,18 @@
           </md-list-item>
 
           <md-list-item>
-            <router-link exact to="/ui-elements/typography">Typography</router-link>
-
-            <!-- <span>UI Elements</span>
+            <span>UI Elements</span>
             <md-list-expand>
               <md-list>
                 <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="/ui-elements/grid-system">Grid System</router-link>
+                  <router-link exact to="/ui-elements/layout">Layout</router-link>
                 </md-list-item>
               </md-list>
-            </md-list-expand> -->
+            </md-list-expand>
           </md-list-item>
 
           <md-list-item>

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

@@ -1,9 +0,0 @@
-<template>
-  <page-content page-title="UI Elements - Grid System">
-
-  </page-content>
-</template>
-
-<style lang="scss" scoped>
-
-</style>

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

@@ -0,0 +1,29 @@
+<template>
+  <page-content page-title="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>
+      </div>
+
+      <div slot="example">
+        <example-box card-title="Default">
+          <div class="demo" slot="demo">
+            <md-layout>
+
+            </md-layout>
+          </div>
+
+          <div slot="code">
+            <code-block lang="xml">
+
+            </code-block>
+          </div>
+        </example-box>
+      </div>
+    </docs-component>
+  </page-content>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

docs/src/routes.js

@@ -32,7 +32,7 @@ import Whiteframe from './pages/components/Whiteframe';
 
 /* UI Elements */
 import Typography from './pages/ui-elements/Typography';
-import GridSystem from './pages/ui-elements/GridSystem';
+import Layout from './pages/ui-elements/Layout';
 
 /* Themes */
 import Configuration from './pages/themes/Configuration';
@@ -214,9 +214,9 @@ const uiElements = [
     component: Typography
   },
   {
-    path: '/ui-elements/grid-system',
-    name: 'ui-elements:grid-system',
-    component: GridSystem
+    path: '/ui-elements/layout',
+    name: 'ui-elements:layout',
+    component: Layout
   }
 ];
 

src/components/mdLayout/index.js

@@ -0,0 +1,5 @@
+import mdLayout from './mdLayout.vue';
+
+export default function install(Vue) {
+  Vue.component('md-layout', Vue.extend(mdLayout));
+}

src/components/mdLayout/mdLayout.scss

@@ -0,0 +1,6 @@
+@import '../../core/stylesheets/variables.scss';
+
+.md-layout {
+  display: flex;
+  flex: 1;
+}

src/components/mdLayout/mdLayout.vue

@@ -0,0 +1,15 @@
+<style lang="scss" src="./mdLayout.scss"></style>
+
+<script>
+  import tag from './tag';
+
+  export default {
+    mixins: [tag],
+    render(createElement) {
+      return createElement(this.mdTag, {
+        staticClass: 'md-layout',
+        class: this.classes
+      }, this.$slots.default);
+    }
+  };
+</script>

src/components/mdLayout/tag.js

@@ -0,0 +1,8 @@
+export default {
+  props: {
+    mdTag: {
+      type: String,
+      default: 'div'
+    }
+  }
+};

src/index.js

@@ -10,6 +10,7 @@ import MdDialog from './components/mdDialog';
 import MdDivider from './components/mdDivider';
 import MdIcon from './components/mdIcon';
 import MdInputContainer from './components/mdInputContainer';
+import MdLayout from './components/mdLayout';
 import MdList from './components/mdList';
 import MdMenu from './components/mdMenu';
 import MdRadio from './components/mdRadio';
@@ -37,6 +38,7 @@ const options = {
   MdDivider,
   MdIcon,
   MdInputContainer,
+  MdLayout,
   MdList,
   MdMenu,
   MdRadio,