Move Docs to Pug templates

15 files changed, 819 insertions, 27 deletions

diff --git a/docs/src/_ads.pug b/docs/src/_ads.pug
new file mode 100644
index 0000000..c7e1c91
--- /dev/null
+++ b/docs/src/_ads.pug
@@ -0,0 +1,17 @@
+block ad-adsense
+  .docs-ad
+    .hide-md
+      script(async='', src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js')
+      // GitHub-lg
+      ins.adsbygoogle(style='display:inline-block;width:728px;height:90px', data-ad-client='ca-pub-2225124559530218', data-ad-slot='9894180784')
+      script.
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    .show-md
+      // GitHub-sm
+      ins.adsbygoogle(style='display:inline-block;width:300px;height:250px', data-ad-client='ca-pub-2225124559530218', data-ad-slot='9278881734')
+      script.
+        (adsbygoogle = window.adsbygoogle || []).push({});
+
+block ad-carbons
+  .docs-ad.docs-ad-sidebar
+    script#_carbonads_js(async='', type='text/javascript', src='//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=picturepan2githubio')
\ No newline at end of file
diff --git a/docs/src/_docs-layout.pug b/docs/src/_docs-layout.pug
new file mode 100644
index 0000000..7ae771c
--- /dev/null
+++ b/docs/src/_docs-layout.pug
@@ -0,0 +1,99 @@
+extends _layout.pug
+include _mixins.pug
+
+block content
+  .docs-container.off-canvas.off-canvas-sidebar-show
+    .docs-navbar
+      a.off-canvas-toggle.btn.btn-link.btn-action(href='#sidebar')
+        i.icon.icon-menu
+      a.btn.btn-primary(href='https://github.com/picturepan2/spectre' target='_blank') GitHub
+    #sidebar.docs-sidebar.off-canvas-sidebar
+      .docs-brand
+        a.docs-logo(href='/')
+          img(src='img/spectre-logo.svg' alt='Spectre.css CSS Framework')
+          h2 SPECTRE
+      .docs-nav
+        .accordion-container
+          +docs-accordion(
+            'getting-started',
+            'Getting started',
+            {url: '#introduction', name: 'Introduction'},
+            {url: '#installation', name: 'Installation'},
+            {url: '#custom', name: 'Custom version'},
+            {url: '#browsers', name: 'Browser support'},
+            {url: '#whatsnew', name: 'What\'s new'}
+          )
+          +docs-accordion(
+            'elements',
+            'Elements',
+            {url: '#typography', name: 'Typography'},
+            {url: '#tables', name: 'Tables'},
+            {url: '#buttons', name: 'Buttons'},
+            {url: '#forms', name: 'Forms'},
+            {url: '#icons', name: 'Icons'},
+            {url: '#labels', name: 'Labels'},
+            {url: '#codes', name: 'Codes'},
+            {url: '#media', name: 'Media'}
+          )
+          +docs-accordion(
+            'layout',
+            'Layout',
+            {url: '#flexbox', name: 'Flexbox grid'},
+            {url: '#responsive', name: 'Responsive'},
+            {url: '#navbar', name: 'Navbar'}
+          )
+          +docs-accordion(
+            'components',
+            'Components',
+            {url: '#accordions', name: 'Accordions'},
+            {url: '#avatars', name: 'Avatars'},
+            {url: '#badges', name: 'Badges'},
+            {url: '#bars', name: 'Bars'},
+            {url: '#breadcrumbs', name: 'Breadcrumbs'},
+            {url: '#cards', name: 'Cards'},
+            {url: '#chips', name: 'Chips'},
+            {url: '#empty', name: 'Empty states'},
+            {url: '#menus', name: 'Menus'},
+            {url: '#modals', name: 'Modals'},
+            {url: '#navs', name: 'Navs'},
+            {url: '#pagination', name: 'Pagination'},
+            {url: '#panels', name: 'Panels'},
+            {url: '#popovers', name: 'Popovers'},
+            {url: '#steps', name: 'Steps'},
+            {url: '#tabs', name: 'Tabs'},
+            {url: '#tiles', name: 'Tiles'},
+            {url: '#toasts', name: 'Toasts'},
+            {url: '#tooltips', name: 'Tooltips'}
+          )
+          +docs-accordion(
+            'utilities',
+            'Utilities',
+            {url: '#colors', name: 'Colors'},
+            {url: '#cursors', name: 'Cursors'},
+            {url: '#display', name: 'Display'},
+            {url: '#divider', name: 'Divider'},
+            {url: '#loading', name: 'Loading'},
+            {url: '#position', name: 'Position'},
+            {url: '#shapes', name: 'Shapes'},
+            {url: '#text', name: 'Text'}
+          )
+          +docs-accordion(
+            'experimentals',
+            'Experimentals',
+            {url: '#autocomplete', name: 'Autocomplete'},
+            {url: '#calendars', name: 'Calendars'},
+            {url: '#carousels', name: 'Carousels'},
+            {url: '#comparison', name: 'Comparison sliders'},
+            {url: '#filters', name: 'Filters'},
+            {url: '#meters', name: 'Meters'},
+            {url: '#off-canvas', name: 'Off-canvas'},
+            {url: '#parallax', name: 'Parallax'},
+            {url: '#progress', name: 'Progress'},
+            {url: '#sliders', name: 'Sliders'},
+            {url: '#timelines', name: 'Timelines'}
+          )
+  
+    a.off-canvas-overlay(href='#close')
+    .off-canvas-content
+      #content.docs-content
+        block docs-content
\ No newline at end of file
diff --git a/docs/src/_footer.pug b/docs/src/_footer.pug
new file mode 100644
index 0000000..018a01a
--- /dev/null
+++ b/docs/src/_footer.pug
@@ -0,0 +1,20 @@
+footer.section.section-footer
+  #copyright.grid-footer.container.grid-lg
+    p
+      a(href='getting-started.html' target='_blank') Documents
+      |  · 
+      a(href='https://github.com/picturepan2/spectre' target='_blank') GitHub
+      |  · 
+      a(href='https://twitter.com/spectrecss' target='_blank') Twitter
+      |  · 
+      a(href='https://www.paypal.me/picturepan2' target='_blank') PayPal Donate
+      |  · Version 
+      span.version
+    p
+      | Designed and built with 
+      span.text-error ♥
+      |  by 
+      a(href='https://twitter.com/picturepan2' target='_blank') Yan Zhu
+      | . Licensed under the 
+      a(href='https://github.com/picturepan2/spectre/blob/master/LICENSE' target='_blank') MIT License
+      | .
\ No newline at end of file
diff --git a/docs/src/_layout.pug b/docs/src/_layout.pug
new file mode 100644
index 0000000..ad32f32
--- /dev/null
+++ b/docs/src/_layout.pug
@@ -0,0 +1,33 @@
+block variables
+  - var title = 'Spectre.css - A Lightweight, Responsive and Modern CSS Framework'
+  - var description = ''
+
+doctype html
+html(lang='en')
+  head
+    title= title
+    meta(charset='utf-8')
+    meta(name='robots' content='index, follow')
+    meta(name='viewport' content='width=device-width, initial-scale=1.0, shrink-to-fit=no')
+    meta(http-equiv='x-ua-compatible' content='ie=edge')
+    meta(name='author' content='Yan Zhu')
+    link(rel='shortcut icon' href='img/favicons/favicon.ico')
+    link(rel='icon' href='img/favicons/favicon.png')
+    link(rel='stylesheet' href='dist/spectre.min.css')
+    link(rel='stylesheet' href='dist/spectre-icons.min.css')
+    link(rel='stylesheet' href='dist/spectre-exp.min.css')
+    link(rel='stylesheet' href='dist/docs.min.css')
+
+  body
+    block content
+
+    script.
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+      ga('create', 'UA-2702768-8', 'auto');
+      ga('send', 'pageview');
+
+  
\ No newline at end of file
diff --git a/docs/src/_mixins.pug b/docs/src/_mixins.pug
new file mode 100644
index 0000000..54e76d7
--- /dev/null
+++ b/docs/src/_mixins.pug
@@ -0,0 +1,22 @@
+mixin docs-accordion(id, name, ...pages)
+  .accordion
+    input(id='accordion-' + id type='checkbox' name='docs-accordion-checkbox' hidden='' checked=(current === id ? true : false))
+    label.accordion-header.c-hand(for='accordion-' + id)= name
+    .accordion-body
+      ul.menu.menu-nav
+        each page in pages
+          li.menu-item
+            a(href=id + '.html' + page.url)= page.name
+
+mixin docs-heading(id, name)
+  .container
+    h3.s-title(id=id)
+      a.anchor(href='#'+id aria-hidden='true') #
+      | #{name}
+    if block
+      block
+
+mixin docs-subheading(id, name)
+  h4.s-subtitle(id=id)
+    a.anchor(href='#'+id aria-hidden='true') #
+    | #{name}
\ No newline at end of file
diff --git a/docs/src/contents/browers.pug b/docs/src/contents/browers.pug
new file mode 100644
index 0000000..dfa95cd
--- /dev/null
+++ b/docs/src/contents/browers.pug
@@ -0,0 +1,25 @@
+p
+  | Spectre uses 
+  a(href='https://github.com/postcss/autoprefixer', target='_blank') Autoprefixer
+  |  to make most styles compatible with earlier browsers and 
+  a(href='https://necolas.github.io/normalize.css/', target='_blank') Normalize.css
+  |  for CSS resets. Spectre is designed for modern browsers. For best compatibility, these browsers are recommended:
+ul
+  li
+    | Chrome 
+    small.label.label-success LAST 4
+  li
+    | Microsoft Edge 
+    small.label.label-success LAST 4
+  li
+    | Firefox 
+    small.label.label-success.text-uppercase Extended Support Release
+  li
+    | Safari 
+    small.label.label-success LAST 4
+  li
+    | Opera 
+    small.label.label-success LAST 4
+  li Internet Explorer 10+
+p
+  | Spectre supports Internet Explorer 10+, but some HTML5 and CSS3 features are not perfectly supported by Internet Explorer.
\ No newline at end of file
diff --git a/docs/src/contents/custom.pug b/docs/src/contents/custom.pug
new file mode 100644
index 0000000..ce787f7
--- /dev/null
+++ b/docs/src/contents/custom.pug
@@ -0,0 +1,287 @@
+p
+  | You can customize your version of Spectre.css by editing Sass files in 
+  code /src
+  |  directory or removing unneeded components from 
+  code .scss
+  |  source files.
+p
+  a.btn.btn-primary(href='https://github.com/picturepan2/spectre/', target='_blank') Sass Source Code
+p
+  | If you are looking for Less version of Spectre.css, please switch to 
+  code Less
+  |  branch.
+p
+  a.btn(href='https://github.com/picturepan2/spectre/tree/less', target='_blank') Less Branch
+
++docs-subheading('compiling', 'Compiling CSS')
+
+p
+  | Spectre uses 
+  a(href='http://gulpjs.com/', target='_blank') Gulp
+  |  for compiling CSS. Firstly you need to 
+  a(href='https://www.npmjs.com/get-npm', target='_blank') install NPM
+  | , which is used to manage Gulp and other dependencies.
+p Then, you can build the CSS file from the command line:
+ol
+  li Navigate to the root directory of Spectre.
+  li
+    | Run 
+    code npm install
+    | . NPM will install all dev dependencies as listed in package.json.
+  li
+    | When completed, run 
+    code gulp build
+    |  task to compile Sass to CSS and minify files.
+  li
+    | You can find compiled CSS files in 
+    code /dist
+    |  directory.
+p All available Gulp tasks:
+ul
+  li
+    code gulp build
+    |  - compile Sass to CSS and minify files (default)
+  li
+    code gulp docs
+    |  - compile Docs related files
+  li
+    code gulp watch
+    |  - watch file changes and re-compile CSS files
+
++docs-subheading('importing', 'Importing Sass')
+p
+  | It is recommended to customize Spectre by importing Sass source files to your projects. In this way, you can keep Spectre up to date without conflicts, since Spectre code and your custom code are separate.
+ul
+  li
+    | First, create your own project and install Spectre via 
+    a(href='#installation') NPM or other package managers
+    | .
+  li
+    | Then create your 
+    code project-name.scss
+    |  file in the root folder. You can use 
+    code project-name.scss
+    |  to define your variables.
+  li Compile the Sass file to CSS to get the custom version of Spectre.
+
+// importing
+pre.code(data-lang='Sass')
+  code
+    :highlight(lang="scss")
+      // Example of project-name.scss
+      // Define variables to override default ones
+      $primary-color: #2e5bec;
+      $dark-color: #3e396b;
+
+      // Import full Spectre source code
+      @import "node_modules/spectre.css/src/spectre";
+
+p
+  | Alternatively, you can create custom 
+  code _variables.scss
+  |  and import it to 
+  code project-name.scss
+  | .
+
+// custom variables
+pre.code(data-lang='Sass')
+  code
+    :highlight(lang="scss")
+      // Example of project-name.scss
+      @import "variables";
+
+      // Import only the needed components
+      @import "node_modules/spectre.css/src/buttons";
+      @import "node_modules/spectre.css/src/forms";
+
++docs-subheading('folders', 'Folder structure')
+
+// folder structure
+pre.code
+  code
+    :highlight
+      spectre/
+      ├── dist/                           // Build folder
+      │   ├── spectre-exp.css
+      │   ├── spectre-exp.min.css
+      │   ├── spectre-icons.css
+      │   ├── spectre-icons.min.css
+      │   ├── spectre.css
+      │   └── spectre.min.css
+      │
+      ├── docs/
+      │   ├── dist/                       // Pre-built CSS folder
+      │   │   ├── spectre-exp.css
+      │   │   ├── spectre-exp.min.css
+      │   │   ├── spectre-icons.css
+      │   │   ├── spectre-icons.min.css
+      │   │   ├── spectre.css
+      │   │   └── spectre.min.css
+      |   ├── css/                        // Docs CSS files
+      │   │   └── docs.css
+      |   ├── src/
+      │   │   ├── scss                    // Docs Sass files
+      │   │   │   └── docs.scss
+      │   │   ├── index.pug               // Docs Pug files
+      │   │   └── ...
+      │   ├── examples/                   // Example tempalte
+      │   │   └── starter.html
+      │   ├── ../
+      │   ├── index.html
+      │   └── ...
+      │
+      ├── src/                            // Source Sass files
+      │   ├── spectre.scss
+      │   ├── spectre-icons.scss
+      │   ├── spectre-exp.scss
+      │   ├── _mixins.scss
+      │   ├── _variables.scss
+      │   └── ...
+      │
+      ├── gulpfile.js
+      ├── package.json
+      └── ...
+
++docs-subheading('variables', 'Variables')
+
+p
+  | Spectre.css is designed with consistent design language. You can use your own variables to create your new or match existing design. All variables in 
+  code _variables.scss
+  |  include 
+  code !default
+  |  flag. You can redefine the variables to override the values.
+
++docs-subheading('variables-colors', 'Variables - Colors')
+
+.columns
+  .column.col-3.col-md-6
+    .docs-color(style='background:#5755d9;color:#fff;')
+      .color-title #5755d9
+      .color-subtitle Primary
+  .column.col-3.col-md-6
+    .docs-color(style='background:#f1f1fc;color:#5755d9;')
+      .color-title #f1f1fc
+      .color-subtitle Secondary
+.columns
+  .column.col-3.col-md-6
+    .docs-color(style='background:#32b643;color:#fff;')
+      .color-title #32b643
+      .color-subtitle Success
+  .column.col-3.col-md-6
+    .docs-color(style='background:#ffb700;color:#fff;')
+      .color-title #ffb700
+      .color-subtitle Warning
+  .column.col-3.col-md-6
+    .docs-color(style='background:#e85600;color:#fff;')
+      .color-title #e85600
+      .color-subtitle Error
+.columns
+  .column.col-3.col-md-6
+    .docs-color(style='background:#454d5d;color:#fff;')
+      .color-title #454d5d
+      .color-subtitle Dark
+  .column.col-3.col-md-6
+    .docs-color(style='background:#727e96;color:#fff;')
+      .color-title #727e96
+      .color-subtitle Gray dark
+  .column.col-3.col-md-6
+    .docs-color(style='background:#acb3c2;color:#fff;')
+      .color-title #acb3c2
+      .color-subtitle Gray
+  .column.col-3.col-md-6
+    .docs-color(style='background:#e7e9ed;color:#727e96;')
+      .color-title #e7e9ed
+      .color-subtitle Gray light
+  .column.col-3.col-md-6
+    .docs-color(style='background:#f0f1f4;color:#727e96;')
+      .color-title #f0f1f4
+      .color-subtitle Border
+  .column.col-3.col-md-6
+    .docs-color(style='background:#f8f9fa;color:#727e96;')
+      .color-title #f8f9fa
+      .color-subtitle Background
+  .column.col-3.col-md-6
+    .docs-color(style='background:#fff;color:#727e96;')
+      .color-title #fff
+      .color-subtitle Light
+
++docs-subheading('variables-buttons', 'Variables - Button mixins')
+
+p
+  | There are 2 button variant mixins in 
+  code _mixins.scss
+  |  to generate different color variants.
+ul
+  li
+    | @mixin button-variant(
+    code $color
+    | : $primary-color);
+  li
+    | @mixin button-outline-variant(
+    code $color
+    | : $primary-color);
+
+// button mixins
+pre.code(data-lang='Sass')
+  code
+    :highlight(lang="scss")
+      <!-- filled button with the success color -->
+      .btn-success {
+        @include button-variant($success-color);
+      }
+
+      <!-- outlined button with the success color -->
+      .btn-outline-success {
+        @include button-outline-variant($success-color);
+      }
+
++docs-subheading('variables-sizes', 'Variables - Sizes')
+
+p
+  | The default REM (root em) size in Spectre.css is 
+  code 20px
+  | .
+p
+  | Please note in the Chinese/Japanese/Korean version, Chrome uses 12px as default minimum font size. That is why Spectre sets rem default html font size to 
+  code 20px
+  | , which is relatively easy to calculate.
+p
+  | Spectre uses 
+  code 4px
+  |  as the unit size. Sizes of components are based on the unit size.
+
++docs-subheading('variables-custom-prefix', 'Variables - Custom prefix')
+p
+  | There is also a way to add custom prefix to all CSS classes. You can use 
+  a(href='https://www.npmjs.com/package/gulp-css-prefix', target='_blank') gulp-css-prefix
+  |  plugin and add a new Gulp task to enable it.
+
+// custom prefix
+pre.code(data-lang='Bash')
+  code
+    :highlight(lang="Bash")
+      npm install gulp-css-prefix
+
+p
+  | To add 
+  code spectre-
+  |  to all classes, you can add the Gulp task to 
+  code gulpfile.js
+  |  file.
+
+// custom prefix
+pre.code
+  code
+    :highlight(lang="JavaScript")
+      var cssPrefix = require('gulp-css-prefix');
+  
+      gulp.task('prefix', function() {
+        gulp.src('./dist/*.css')
+            .pipe(cssPrefix('spectre-'))
+            .pipe(gulp.dest('./dist'))
+      });
+
+p
+  | After you compile your version of Spectre in the /dist, run 
+  code gulp prefix
+  |  in the directory of Spectre.
\ No newline at end of file
diff --git a/docs/src/contents/installation.pug b/docs/src/contents/installation.pug
new file mode 100644
index 0000000..cada6ce
--- /dev/null
+++ b/docs/src/contents/installation.pug
@@ -0,0 +1,68 @@
+p
+  | There are 5 ways to get started with Spectre CSS framework in your projects. You can either install manually, from CDN or use package managers.
+
++docs-subheading('install-manually', 'Install manually')
+p
+  | Download the compiled and minified 
+  a(href='https://github.com/picturepan2/spectre/releases', target='_blank') Spectre CSS file
+  |  (core ~10KB min+gzip):
+p
+  a.btn.btn-primary(href='https://github.com/picturepan2/spectre/releases', target='_blank') Download Spectre.css
+p
+  | Include 
+  code spectre.css
+  |  located in 
+  strong /dist
+  |  in your website or Web app <head>. Also, you can add 
+  code spectre-icons.css
+  |  and 
+  code spectre-exp.css
+  |  accordingly.
+
+//- install manually
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      <link rel="stylesheet" href="spectre.min.css">
+      <link rel="stylesheet" href="spectre-exp.min.css">
+      <link rel="stylesheet" href="spectre-icons.min.css">
+  
++docs-subheading('install-cdn', 'Install from CDN')
+p
+  | Alternatively, you can use the 
+  a(href='https://unpkg.com/', target='_blank') unpkg
+  |  or 
+  a(href='https://cdnjs.com/libraries/spectre.css', target='_blank') cdnjs
+  |  CDN to load compiled Spectre.css.
+
+//- install from CDN
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      <link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css">
+      <link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
+      <link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
+
++docs-subheading('install-npm', 'Install with NPM')
+
+//- install with npm
+pre.code(data-lang='Bash')
+  code
+    :highlight(lang="Bash")
+      npm install spectre.css --save
+
++docs-subheading('install-yarn', 'Install with Yarn')
+
+//- install with yarn
+pre.code(data-lang='Bash')
+  code
+    :highlight(lang="bash")
+      yarn add spectre.css
+
++docs-subheading('install-bower', 'Install from Bower')
+
+//- install with bower
+pre.code(data-lang='Bash')
+  code
+    :highlight(lang="bash")
+      bower install spectre.css --save
\ No newline at end of file
diff --git a/docs/src/contents/introduction.pug b/docs/src/contents/introduction.pug
new file mode 100644
index 0000000..8e544de
--- /dev/null
+++ b/docs/src/contents/introduction.pug
@@ -0,0 +1,5 @@
+p 
+  strong Spectre.css 
+  | is a lightweight, responsive and modern CSS framework for faster and extensible development.
+p 
+  | Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.
\ No newline at end of file
diff --git a/docs/src/contents/whatsnew.pug b/docs/src/contents/whatsnew.pug
new file mode 100644
index 0000000..0c38102
--- /dev/null
+++ b/docs/src/contents/whatsnew.pug
@@ -0,0 +1,79 @@
+p
+  strong September 2017
+ul
+  li
+    a(href='experimentals.html#off-canvas') Off-canvas
+    | : navigation layout that the sidebar can slide in and out of the viewport 
+    small.label.label-primary NEW
+p
+  strong August 2017
+ul
+  li
+    a(href='getting-started.html') Switch to Sass 
+    small.label.label-primary NEW
+  li
+    a(href='getting-started.html') New Docs Experience 
+    small.label.label-primary NEW
+p
+  strong April 2017
+ul
+  li
+    a(href='components.html#accordions') Accordions
+    | : used to toggle sections of content
+  li
+    a(href='experimentals.html#filters') Filters
+    | : CSS only content filters
+  li
+    a(href='experimentals.html#comparison') Comparison Sliders
+    | : sliders for comparing two images
+  li
+    a(href='experimentals.html#timelines') Timelines
+    | : ordered sequences of activities
+p
+  strong March 2017
+ul
+  li
+    a(href='elements.html#icons') Icons
+    | : single-element, responsive and pure CSS icons
+  li
+    a(href='components.html#popovers') Popovers
+    | : small overlay content containers
+  li
+    a(href='layout.html#panels') Panels
+    | : flexible view container layout with auto-expand content section
+  li
+    a(href='experimentals.html#carousels') Carousels
+    | : slideshows for cycling images
+  li
+    a(href='experimentals.html#calendars') Calendars
+    | : date or date range picker and events display
+p
+  strong February 2017
+ul
+  li New Documents experience
+  li
+    a(href='components.html#bars') Bars
+    | : represent the progress of a task or the value within the known range
+  li
+    a(href='components.html#steps') Steps
+    | : progress indicators of a sequence of task steps
+  li
+    a(href='components.html#tiles') Tiles
+    | : repeatable or embeddable information blocks
+  li
+    a(href='experimentals.html') Experimentals
+    | : experimental elements and features
+  li
+    a(href='experimentals.html#meters') Meters
+    | , 
+    a(href='experimentals.html#parallax') Parallax
+    | , 
+    a(href='experimentals.html#progress') Progress
+    |  and 
+    a(href='experimentals.html#sliders') Sliders
+p
+  strong March 2016
+ul
+  li Initial commit
+p
+  a.btn.btn-primary(href='https://github.com/picturepan2/spectre/releases', target='_blank') Releases
\ No newline at end of file
diff --git a/docs/src/getting-started.pug b/docs/src/getting-started.pug
new file mode 100644
index 0000000..19e1db0
--- /dev/null
+++ b/docs/src/getting-started.pug
@@ -0,0 +1,32 @@
+extends _docs-layout.pug
+
+block variables
+  - var title = 'Getting started - Spectre.css CSS Framework'
+  - var description = ''
+  - var current = 'getting-started'
+
+block docs-content
+  //- introduction
+  +docs-heading('introduction', 'Introduction')
+    include contents/introduction.pug
+    
+  //- installation
+  +docs-heading('installation', 'Installation')
+    include contents/installation.pug
+
+  //- Custom
+  +docs-heading('custom', 'Custom version')
+    include contents/custom.pug
+
+  //- Accessibility
+  +docs-heading('accessibility', 'Accessibility')
+  
+  //- Browser support
+  +docs-heading('browers', 'Browser support')
+    include contents/browers.pug
+
+  //- What's new
+  +docs-heading('whatsnew', 'What\'s new')
+    include contents/whatsnew.pug
+
+    
\ No newline at end of file
diff --git a/docs/src/index.pug b/docs/src/index.pug
new file mode 100644
index 0000000..6cc08bc
--- /dev/null
+++ b/docs/src/index.pug
@@ -0,0 +1,102 @@
+extends _layout.pug
+
+block content
+  .section.section-hero.bg-gray
+    #overview.grid-hero.container.grid-lg.text-center
+      .docs-brand
+        a.docs-logo(href='index.html')
+          img(src='img/spectre-logo.svg' alt='Spectre.css CSS Framework')
+          h2 SPECTRE
+      h1 Spectre.css
+      h2
+        | A 
+        u Lightweight
+        | , 
+        u Responsive
+        |  and 
+        u Modern
+        |  CSS Framework 
+      p
+        a.btn.btn-primary.btn-lg.mr-2(href='getting-started.html') Docs
+        a.btn.btn-primary.btn-lg(href='https://github.com/picturepan2/spectre' target='_blank') GitHub
+      p.text-gray
+        | Latest version: 
+        span.version
+      .columns
+        .column.col-4.col-xs-12
+          .card.text-center
+            .card-header
+              span.card-title Lightweight
+            .card-body
+              | Lightweight  (~10KB gzipped) starting point for your projects
+        .column.col-4.col-xs-12
+          .card.text-center
+            .card-header
+              span.card-title Responsive
+            .card-body
+              | Flexbox-based, responsive and mobile-friendly layout
+        .column.col-4.col-xs-12
+          .card.text-center
+            .card-header
+              span.card-title Modern
+            .card-body
+              | Elegantly designed and developed elements and components
+  .section.section-features.bg-primary.text-light.text-center
+    .container.grid-lg
+      h2 Introduction
+      .columns
+        .column.col-10.col-sm-12.col-mx-auto.text-left
+          p.text-secondary
+            | Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.
+        .column.col-10.col-sm-12.col-mx-auto
+          a.btn.btn-lg(href='getting-started.html#installation') Install Spectre.css
+
+  .section.section-updates.bg-gray
+    .container.grid-lg
+      .columns
+        .column.col-4.col-xs-12
+          .card
+            .card-header
+              .card-title.h6 Spectre Twitter
+            .card-body
+              | For the latest announcements and updates, follow on Twitter: 
+              a(href='https://twitter.com/spectrecss' target='_blank') @spectrecss
+              | .
+            .card-footer
+              a.btn.btn-primary(href='https://twitter.com/spectrecss' target='_blank') Follow
+        .column.col-4.col-xs-12
+          .card
+            .card-header
+              .card-title.h6 PayPal Donate
+            .card-body
+              | Spectre.css is completely free to use. If you enjoy it, please consider donating for the further development. &hearts;
+            .card-footer
+              a.btn.btn-primary(href='https://www.paypal.me/picturepan2' target='_blank') Donate
+        .column.col-4.col-xs-12
+          .card
+            .card-header
+              .card-title.h6 Spectre Docs
+            .card-body
+              | Spectre Docs experience has been completely rewritten and improved.
+            .card-footer
+              a.btn.btn-primary(href='getting-started.html') Explore
+  footer.section.section-footer
+    #copyright.grid-footer.container.grid-lg
+      p
+        a(href='getting-started.html' target='_blank') Documents
+        |  · 
+        a(href='https://github.com/picturepan2/spectre' target='_blank') GitHub
+        |  · 
+        a(href='https://twitter.com/spectrecss' target='_blank') Twitter
+        |  · 
+        a(href='https://www.paypal.me/picturepan2' target='_blank') PayPal Donate
+        |  · Version 
+        span.version
+      p
+        | Designed and built with 
+        span.text-error &hearts;
+        |  by 
+        a(href='https://twitter.com/picturepan2' target='_blank') Yan Zhu
+        | . Licensed under the 
+        a(href='https://github.com/picturepan2/spectre/blob/master/LICENSE' target='_blank') MIT License
+        | .  
\ No newline at end of file
diff --git a/docs/src/docs.scss b/docs/src/scss/docs.scss
index 70f4eb8..342ca8c 100644
--- a/docs/src/docs.scss
+++ b/docs/src/scss/docs.scss
@@ -1,7 +1,7 @@
 /*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */
 // Core variables and mixins
-@import "../../src/variables";
-@import "../../src/mixins";
+@import "../../../src/variables";
+@import "../../../src/mixins";
 
 .version::after {
   content: "#{$version}";
@@ -18,6 +18,10 @@
   .off-canvas-sidebar {
     width: 12rem;
   }
+
+  .off-canvas-content {
+    padding: 0;
+  }
 }
 
 .docs-navbar {
@@ -80,12 +84,9 @@
 
 .docs-content {
   flex: 1 1 auto;
+  padding: 0 4rem;
   width: calc(100vw - 12rem);
 
-  &.off-canvas-content {
-    padding: 0 4rem;
-  }
-
   & > .container {
     margin-left: 0;
     max-width: 800px;
@@ -241,26 +242,28 @@
   }
 
   .code {
-    color: lighten($body-font-color, 10%);
+    .hljs-tag {
+      color: lighten($body-font-color, 10%);
+    }
 
-    .com {
+    .hljs-comment {
       color: $gray-color;
     }
-    .tag {
+    .hljs-title,
+    .hljs-class,
+    .hljs-string {
       color: $primary-color;
     }
-    .atn {
-      color: lighten($body-font-color, 10%);
-    }
-    .atv {
-      color: #e06870;
+    .hljs-attribute,
+    .hljs-variable,
+    .hljs-keyword,
+    .hljs-built_in {
+      color: $code-color;
+      
     }
-
-    &[data-lang="Bash"] {
-      .tag {
-        margin-right: 1em;
-        user-select: none;
-      }
+    .hljs-value,
+    .hljs-hexcolor {
+      color: lighten($body-font-color, 10%);
     }
   }
 
diff --git a/docs/src/scss/spectre-rtl.scss b/docs/src/scss/spectre-rtl.scss
new file mode 100644
index 0000000..51bc122
--- /dev/null
+++ b/docs/src/scss/spectre-rtl.scss
@@ -0,0 +1,7 @@
+/*! Spectre.css RTL | MIT License | github.com/picturepan2/spectre */
+$rtl: true;
+
+// Import Spectre
+@import "../../../src/spectre";
+@import "../../../src/spectre-icons";
+@import "../../../src/spectre-exp";
diff --git a/docs/src/spectre-rtl.scss b/docs/src/spectre-rtl.scss
deleted file mode 100644
index fe18944..0000000
--- a/docs/src/spectre-rtl.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-/*! Spectre.css RTL | MIT License | github.com/picturepan2/spectre */
-$rtl: true;
-
-// Import Spectre
-@import "../../src/spectre";
-@import "../../src/spectre-icons";
-@import "../../src/spectre-exp";