Add getting started page and add example image to introduction

src/core/stylesheets/core.theme

@@ -1,6 +1,6 @@
 .THEME_NAME {
   color: #{'BACKGROUND-CONTRAST-0.87'};
-  background-color: #{'BACKGROUND-COLOR-A100'};
+  background-color: #{'BACKGROUND-COLOR-50'};
 
   :not(input):not(textarea)::selection {
     background: #{'ACCENT-COLOR'};
@@ -27,4 +27,9 @@
   .md-display-4 {
     color: #{'BACKGROUND-CONTRAST-0.57'};
   }
+
+  code:not(.hljs) {
+    background-color: #{'ACCENT-COLOR-A100-0.2'};
+    color: #{'ACCENT-COLOR-800'};
+  }
 }

src/core/stylesheets/variables.scss

@@ -1,7 +1,7 @@
 /*  Common
    ========================================================================== */
 
-$font-roboto: Roboto, "Helvetica Neue", sans-serif;
+$font-roboto: Roboto, Lato, sans-serif;
 
 
 

src/docs/App.vue

@@ -307,6 +307,21 @@
       transform: translate3D(0, -36px, 0);
     }
   }
+
+  code {
+    &:not(.hljs) {
+      margin-left: 1px;
+      margin-right: 1px;
+      padding: 0 4px;
+      display: inline-block;
+      border-radius: 2px;
+      font-family: "Operator Mono", "Fira Code", Menlo, Hack, "Roboto Mono", "Liberation Mono", Monaco, monospace;
+
+      pre {
+        margin: 8px 0;
+      }
+    }
+  }
 </style>
 
 <script>

src/docs/components/code-block.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="code-block">
+    <pre><code :class="lang" ref="block"><slot></slot></code></pre>
+  </div>
+</template>
+
+<style lang="scss">
+  @import '../../core/stylesheets/variables.scss';
+
+  .code-block {
+    width: auto;
+    max-width: 600px;
+    padding: 8px 32px;
+    margin: 0;
+    position: relative;
+    overflow: auto;
+    border-radius: 2px;
+    background-color: #ededed;
+    color: #455A64;
+    font-family: "Operator Mono", "Fira Code", Menlo, Hack, "Roboto Mono", "Liberation Mono", Monaco, monospace;
+    font-size: 14px;
+    line-height: 24px;
+    white-space: pre-wrap;
+
+    pre {
+      margin: 0
+    }
+
+    code {
+      padding: 0;
+      background: none;
+    }
+
+    .hljs:after {
+      position: absolute;
+      top: 8px;
+      right: 8px;
+      color: rgba(#000, .26);
+      font-family: $font-roboto;
+      font-size: 11px;
+      line-height: 1em;
+    }
+
+    .hljs.html:after {
+      content: 'HTML';
+    }
+
+    .hljs.javascript:after {
+      content: 'Javascript';
+    }
+
+    .hljs.xml:after {
+      content: 'HTML';
+    }
+
+    .hljs.scss:after {
+      content: 'SCSS';
+    }
+
+    .hljs-keyword,
+    .hljs-selector-tag,
+    .hljs-selector-class,
+    .hljs-subst {
+      font-weight: 500;
+    }
+
+    .hljs-keyword {
+      color: #D81B60;
+    }
+
+    .hljs-string {
+      color: #00796B;
+    }
+
+    .hljs-comment {
+      color: #00796B;
+      font-style: italic;
+    }
+
+    .hljs-built_in,
+    .hljs-attr,
+    .hljs-attribute {
+      color: #1976D2;
+    }
+
+    .hljs-selector-tag,
+    .hljs-selector-class,
+    .hljs-tag,
+    .hljs-name,
+    .hljs-number {
+      color: #D81B60;
+    }
+  }
+</style>
+
+<script>
+  import highlight from 'highlight.js/lib/highlight.js';
+
+  export default {
+    props: ['lang'],
+    mounted() {
+      highlight.highlightBlock(this.$refs.block);
+    }
+  };
+</script>

src/docs/components/demo-page.vue

@@ -70,18 +70,6 @@
       font-size: 16px;
       line-height: 1.6em;
     }
-
-    code:not(.highlight) {
-      margin-left: 1px;
-      margin-right: 1px;
-      padding: 1px 5px;
-      background-color: rgba(#3f51b5, .12);
-      border-radius: 2px;
-      color: #3f51b5;
-      font-family: Hack, Menlo, "Liberation Mono", "Operator Mono", Monaco, Consolas, monospace;
-      letter-spacing: .010em;
-      line-height: 1.5em;
-    }
   }
 </style>
 

src/docs/components/single-page-section.vue

@@ -0,0 +1,30 @@
+<template>
+  <section class="single-page-section">
+    <h2 class="md-headline"><md-icon>keyboard_arrow_right</md-icon> {{ label }}</h2>
+
+    <slot></slot>
+  </section>
+</template>
+
+<style lang="scss">
+  @import '../../core/stylesheets/variables.scss';
+
+  .single-page-section {
+    + .single-page-section {
+      margin-top: 48px;
+    }
+
+    .md-headline {
+      .md-icon {
+        height: 32px;
+        margin: 0;
+      }
+    }
+  }
+</style>
+
+<script>
+  export default {
+    props: ['label']
+  };
+</script>

src/docs/components/single-page.vue

@@ -22,9 +22,10 @@
   @import '../../core/stylesheets/variables.scss';
 
   .single-page-content {
+    width: 100%;
     max-width: 1024px;
-    padding: 16px;
     margin: 0 auto;
+    padding: 16px;
   }
 
   .single-page {

src/docs/index.js

@@ -1,6 +1,14 @@
 /* Third Party */
 import Vue from 'vue';
 import VueRouter from 'vue-router';
+import highlight from 'highlight.js/lib/highlight.js';
+import highlightSCSS from 'highlight.js/lib/languages/scss';
+import highlightXML from 'highlight.js/lib/languages/xml';
+import highlightJS from 'highlight.js/lib/languages/javascript';
+
+highlight.registerLanguage('scss', highlightSCSS);
+highlight.registerLanguage('xml', highlightXML);
+highlight.registerLanguage('javascript', highlightJS);
 
 /* Configs */
 import './config.js';
@@ -8,10 +16,19 @@ import routes from './routes.js';
 import App from './App';
 import SinglePage from './components/single-page';
 import SinglePageBanner from './components/single-page-banner';
+import SinglePageSection from './components/single-page-section';
 import DemoPage from './components/demo-page';
 import DemoExample from './components/demo-example';
+import CodeBlock from './components/code-block';
 
 
+Vue.component('single-page', SinglePage);
+Vue.component('single-page-banner', SinglePageBanner);
+Vue.component('single-page-section', SinglePageSection);
+Vue.component('demo-page', DemoPage);
+Vue.component('demo-example', DemoExample);
+Vue.component('code-block', CodeBlock);
+
 Vue.use(VueRouter);
 
 let router = new VueRouter({
@@ -38,11 +55,6 @@ let handleSectionTheme = (route) => {
   }
 };
 
-Vue.component('single-page', SinglePage);
-Vue.component('single-page-banner', SinglePageBanner);
-Vue.component('demo-page', DemoPage);
-Vue.component('demo-example', DemoExample);
-
 Docs = new Docs({
   el: '#app',
   router

src/docs/pages/GettingStarted.vue

@@ -1,5 +1,55 @@
 <template>
   <single-page class="single-page-home" label="Getting Started">
     <single-page-banner label="Getting Started"></single-page-banner>
+
+    <single-page-section label="Installation">
+      <p>
+        - Install Vue Material through npm or bower: <br>
+        <code>npm install vue-material</code> <br>
+        <code>bower install vue-material</code>
+      </p>
+      <p>- Import or require Vue and Vue Material in your code:</p>
+      <code-block lang="javascript">
+import Vue from &#039;vue&#039;;
+import VueMaterial from &#039;../vue-material&#039;;
+
+// OR
+
+var Vue = require(&#039;vue&#039;);
+var VueMaterial = require(&#039;../vue-material&#039;);
+      </code-block>
+      <small>* Others package managers like JSPM are not supported yet.</small>
+
+      <p>Or <a href="https://github.com/marcosmoura/vue-material/archive/master.zip" target="_blank" rel="noopener">download</a> from Github and reference the script and the stylesheet in yout HTML:</p>
+      <code-block lang="xml">
+&lt;link rel=&quot;stylesheet&quot; href=&quot;path/to/vue-material.css&quot;&gt;
+&lt;script src=&quot;path/to/vue-material.js&quot;&gt;&lt;/script&gt;
+      </code-block>
+    </single-page-section>
+
+    <single-page-section label="Usage">
+      <p>Enable Vue Material in your application using enableAll method. If you want to enable only some components you can enable them using <code>Vue.use()</code>:</p>
+      <code-block lang="javascript">
+VueMaterial.enableAll(Vue);
+
+// OR
+
+Vue.use(VueMaterial.MdTheme, {
+  default: {
+    primary: 'cyan',
+    accent: 'pink'
+  }
+});
+Vue.use(VueMaterial.MdInkRipple);
+Vue.use(VueMaterial.MdButton);
+Vue.use(VueMaterial.MdIcon);
+Vue.use(VueMaterial.MdSidenav);
+Vue.use(VueMaterial.MdToolbar);
+      </code-block>
+
+      <h3 class="md-subheading">Caveats</h3>
+
+      <p>Right now, to get Vue Material working properly, you'll need to use MdTheme and MdInkRipple. The MdTheme will apply the default colors (or the specified ones) and the MdInkRipple will enable ripple effect to Buttons and some other elements.</p>
+    </single-page-section>
   </single-page>
 </template>

src/docs/pages/Introduction.vue

@@ -1,8 +1,10 @@
 <template>
-  <single-page class="single-page-home" label="Introduction">
-    <single-page-banner label="Vue Material"></single-page-banner>
-
+  <single-page label="Introduction">
     <div class="button-actions">
+      <div class="example">
+        <img src="https://lh6.googleusercontent.com/QTsTXFhpLc6qOCJEI9AFwW78-d2l456z5i-dLkhaMhhoY0EtABhsoMvSiCi0r2cIsmGIj7OWEKlTTPACO5x4FazNPPONVP8ye0EMu0OieX0U9_n18xg_wFiUuFHH0h6Zzg" alt="Material Design">
+      </div>
+
       <div class="introduction">Build well-crafted apps with Material Design and Vue 2.0</div>
 
       <md-button class="md-primary md-raised" href="#/getting-started">Getting Started</md-button>
@@ -29,6 +31,16 @@
 </template>
 
 <style lang="scss" scoped>
+  .example {
+    margin-bottom: 24px;
+    overflow: hidden;
+
+    img {
+      margin: -45px 0;
+      display: block;
+    }
+  }
+
   .button-actions {
     margin-bottom: 24px;
     text-align: center;
@@ -54,5 +66,9 @@
   .column {
     margin: 0 10px;
     flex: 1 1 30%;
+
+    @media (max-width: 640px) {
+      flex: 1 1 100%;
+    }
   }
 </style>