From c5d3a98c639caed1f0454ce64dbc838f6d773fb7 Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Sat, 12 May 2018 18:08:15 +0800 Subject: Move Docs to Pug templates --- docs/src/_ads.pug | 17 ++ docs/src/_docs-layout.pug | 99 +++++++ docs/src/_footer.pug | 20 ++ docs/src/_layout.pug | 33 +++ docs/src/_mixins.pug | 22 ++ docs/src/contents/browers.pug | 25 ++ docs/src/contents/custom.pug | 287 ++++++++++++++++++ docs/src/contents/installation.pug | 68 +++++ docs/src/contents/introduction.pug | 5 + docs/src/contents/whatsnew.pug | 79 +++++ docs/src/docs.scss | 591 ------------------------------------ docs/src/getting-started.pug | 32 ++ docs/src/index.pug | 102 +++++++ docs/src/scss/docs.scss | 594 +++++++++++++++++++++++++++++++++++++ docs/src/scss/spectre-rtl.scss | 7 + docs/src/spectre-rtl.scss | 7 - 16 files changed, 1390 insertions(+), 598 deletions(-) create mode 100644 docs/src/_ads.pug create mode 100644 docs/src/_docs-layout.pug create mode 100644 docs/src/_footer.pug create mode 100644 docs/src/_layout.pug create mode 100644 docs/src/_mixins.pug create mode 100644 docs/src/contents/browers.pug create mode 100644 docs/src/contents/custom.pug create mode 100644 docs/src/contents/installation.pug create mode 100644 docs/src/contents/introduction.pug create mode 100644 docs/src/contents/whatsnew.pug delete mode 100644 docs/src/docs.scss create mode 100644 docs/src/getting-started.pug create mode 100644 docs/src/index.pug create mode 100644 docs/src/scss/docs.scss create mode 100644 docs/src/scss/spectre-rtl.scss delete mode 100644 docs/src/spectre-rtl.scss (limited to 'docs/src') 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") + + .btn-success { + @include button-variant($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 . 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") + + + + ++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") + + + + ++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/docs.scss b/docs/src/docs.scss deleted file mode 100644 index 70f4eb8..0000000 --- a/docs/src/docs.scss +++ /dev/null @@ -1,591 +0,0 @@ -/*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */ -// Core variables and mixins -@import "../../src/variables"; -@import "../../src/mixins"; - -.version::after { - content: "#{$version}"; -} - -.off-canvas { - .off-canvas-toggle { - font-size: 1rem; - left: 1.5rem; - position: fixed; - top: 1rem; - } - - .off-canvas-sidebar { - width: 12rem; - } -} - -.docs-navbar { - height: 3.8rem; - position: fixed; - right: 0; - top: 0; - z-index: $zindex-1; - - .btn { - position: absolute; - right: 1.5rem; - top: 1rem; - } -} - -.docs-sidebar { - .docs-nav { - bottom: 1.5rem; - overflow-y: auto; - padding: .5rem 1.5rem; - position: fixed; - top: 3.5rem; - width: 12rem; - -webkit-overflow-scrolling: touch; - } - - .accordion { - margin-bottom: .75rem; - - input { - & ~ .accordion-header { - color: lighten($dark-color, 10%); - font-size: .65rem; - font-weight: 600; - text-transform: uppercase; - } - - &:checked { - & ~ .accordion-header { - color: lighten($dark-color, 15%); - } - } - } - - .menu { - .menu-item { - font-size: .7rem; - padding-left: 1rem; - - & > a { - background: transparent; - color: $gray-color-dark; - display: inline-block; - } - } - } - } -} - -.docs-content { - flex: 1 1 auto; - width: calc(100vw - 12rem); - - &.off-canvas-content { - padding: 0 4rem; - } - - & > .container { - margin-left: 0; - max-width: 800px; - padding-bottom: 1.5rem; - } - - .anchor { - color: $primary-color-light; - height: 0; - margin-left: -2em; - overflow: hidden; - padding: 0 1em; - position: absolute; - text-align: center; - width: 0; - z-index: $zindex-1; - &:focus, - &:hover { - box-shadow: none; - height: auto; - text-decoration: none; - width: 2em; - } - } - - .s-title, - .s-subtitle { - color: darken($dark-color, 2%); - line-height: 1.8rem; - margin-bottom: 0; - padding-bottom: 1rem; - padding-top: 1rem; - position: static; - - @supports (position: sticky) { - position: sticky; - top: 0; - z-index: $zindex-1; - - &::before { - background: $light-color; - bottom: 0; - content: ""; - display: block; - left: -10px; - position: absolute; - right: -10px; - top: -5px; - z-index: -$zindex-0; - } - } - - &:hover { - .anchor { - height: auto; - width: 1em; - } - } - - & + .docs-note { - margin-top: .4rem; - } - } - - .docs-note { - margin: 1.5rem 0; - } - - .docs-ad { - background: $bg-color; - border-radius: $border-radius; - display: inline-block; - padding: $layout-spacing; - position: relative; - - &::before { - color: $gray-color; - content: "AD"; - font-size: $font-size-sm; - position: absolute; - right: $layout-spacing; - top: $unit-h; - } - - &.docs-ad-sidebar { - &::before { - content: none; - } - } - } - - .carbon-wrap { - .carbon-img { - display: block; - } - - .carbon-text { - color: $gray-color-dark; - display: block; - font-size: $font-size-sm; - } - } - - .carbon-poweredby { - color: $gray-color; - font-size: $font-size-sm; - } - - .column { - padding: $layout-spacing; - } - - .docs-block { - border-radius: $border-radius; - padding: $unit-2; - - &.bg-gray { - background: $bg-color-dark; - } - } - - .docs-shape { - height: 4.8rem; - line-height: 1.2rem; - padding: 1.8rem 0; - width: 4.8rem; - } - - .docs-dot { - border-radius: 50%; - display: inline-block; - height: .5rem; - padding: 0; - width: .5rem; - } - - .docs-table { - th, - td { - padding: .75rem .25rem; - } - } - - .docs-color { - border-radius: $border-radius; - margin: .25rem 0; - padding: .5rem; - - .color-subtitle { - font-size: $font-size-sm; - opacity: .75; - } - } - - .code { - color: lighten($body-font-color, 10%); - - .com { - color: $gray-color; - } - .tag { - color: $primary-color; - } - .atn { - color: lighten($body-font-color, 10%); - } - .atv { - color: #e06870; - } - - &[data-lang="Bash"] { - .tag { - margin-right: 1em; - user-select: none; - } - } - } - - .panel { - height: 75vh; - - .tile { - margin: .75rem 0; - } - } - - .parallax { - margin: 2rem auto; - } - - .form-autocomplete .menu { - position: static; - } - - .example-tile-icon { - align-content: space-around; - align-items: center; - background: $primary-color; - border-radius: $border-radius; - color: $light-color; - display: flex; - font-size: 1.2rem; - height: 2rem; - width: 2rem; - - .icon { - margin: auto; - } - } - - .comparison-slider { - height: auto; - padding-bottom: 56.2222%; - - .filter-grayscale { - filter: grayscale(75%); - } - } - - .off-canvas { - position: relative; - - .off-canvas-toggle { - left: $layout-spacing; - position: absolute; - top: $layout-spacing; - z-index: $zindex-0; - } - } -} - -.docs-brand { - color: $primary-color; - left: 1.5rem; - position: fixed; - top: .85rem; - - .docs-logo { - align-items: center; - border-radius: $border-radius; - display: inline-flex; - height: 2rem; - padding: .2rem; - width: auto; - - &:focus, - &:hover { - text-decoration: none; - } - - img { - display: inline; - height: auto; - width: 1.6rem; - } - - h2 { - display: inline; - font-size: .8rem; - font-weight: 700; - line-height: 1.5rem; - margin-bottom: 0; - margin-left: .5rem; - margin-right: .5rem; - } - } -} - -.docs-footer { - color: $gray-color; - padding: .5rem .5rem 1.5rem .5rem; - - a { - color: $gray-color-dark; - } -} - -.btn { - .feather { - height: 1rem; - vertical-align: middle; - } -} - -/* Spectre Homepage style */ -.section-hero { - padding: 1rem .5rem; - - .docs-brand { - position: absolute; - top: .85rem; - - h2 { - color: $primary-color; - } - } - - .column { - padding: $layout-spacing; - } -} - -.section-updates { - padding: 4.5rem .5rem 3.5rem .5rem; - - .card { - border: 0; - color: lighten($body-font-color, 15%); - margin-bottom: 1rem; - } -} - -.section-features { - padding: 4.5rem .5rem; - - .column { - padding: $layout-spacing; - } -} - -.section-footer { - color: $gray-color; - padding: 1.8rem .75rem 1rem .75rem; - position: relative; - z-index: 200; - - a { - color: $gray-color-dark; - } -} - -.grid-hero { - padding-bottom: 2rem; - padding-top: 6rem; - - h1 { - color: $body-font-color; - font-size: 1.6rem; - margin-bottom: 1.5rem; - } - - h2 { - color: lighten($body-font-color, 5%); - font-size: .9rem; - font-weight: 400; - line-height: 1.5rem; - margin-bottom: 1.5rem; - - u { - border-bottom: $border-width-lg solid currentColor; - padding-bottom: $unit-o; - text-decoration: none; - } - } - - .card { - background: none; - border: 0; - color: lighten($body-font-color, 15%); - padding: .5rem; - - .card-title { - color: $primary-color; - font-size: .9rem; - margin-bottom: 0; - } - } -} - -@media (max-width: 960px) { - .off-canvas { - .off-canvas-toggle { - z-index: $zindex-3; - } - } - - .docs-sidebar { - .docs-brand { - margin: .85rem 1.5rem; - padding: 0; - position: static; - } - - .docs-nav { - margin-top: 1rem; - position: static; - } - - .menu .menu-item > a { - padding: .3rem .4rem; - } - } - - .docs-navbar { - backdrop-filter: blur(5px); - background: rgba($bg-color, .65); - left: 0; - } - - .docs-content { - &.off-canvas-content { - min-width: auto; - padding: 0 1.5rem; - width: 100%; - } - - .s-title, - .s-subtitle { - padding-top: 5rem; - position: static; - - &::before { - content: none; - } - } - } - - .section-hero { - .s-brand { - height: 5rem; - padding: 1.5rem .5rem; - text-align: center; - width: 100%; - - .s-logo { - height: auto; - } - - img { - height: 3.2rem; - width: 3.2rem; - } - - h2 { - display: none; - } - } - } -} - -@media (max-width: 600px) { - .grid-hero { - h2 { - font-size: .9rem; - } - .card { - padding: 0; - } - } - - .off-canvas { - .off-canvas-toggle { - left: .5rem; - } - } - - .docs-navbar { - .btn { - right: 1rem; - } - } - - .grid-hero { - .docs-brand { - left: 1rem; - } - } - - .docs-sidebar { - .docs-brand { - margin: .85rem 1rem; - } - - .docs-nav { - padding: .5rem 1rem; - } - } - - .docs-content { - &.off-canvas-content { - padding: 0 .5rem; - } - - .docs-block { - padding: $unit-2 $unit-h; - } - - .anchor { - display: none; - } - } -} - -@media (min-width: 1366px) { - .docs-ad { - &.docs-ad-sidebar { - bottom: 1rem; - position: fixed; - right: 1rem; - width: 7.3rem; - } - } -} \ 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. ♥ + .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 ♥ + | 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/scss/docs.scss b/docs/src/scss/docs.scss new file mode 100644 index 0000000..342ca8c --- /dev/null +++ b/docs/src/scss/docs.scss @@ -0,0 +1,594 @@ +/*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */ +// Core variables and mixins +@import "../../../src/variables"; +@import "../../../src/mixins"; + +.version::after { + content: "#{$version}"; +} + +.off-canvas { + .off-canvas-toggle { + font-size: 1rem; + left: 1.5rem; + position: fixed; + top: 1rem; + } + + .off-canvas-sidebar { + width: 12rem; + } + + .off-canvas-content { + padding: 0; + } +} + +.docs-navbar { + height: 3.8rem; + position: fixed; + right: 0; + top: 0; + z-index: $zindex-1; + + .btn { + position: absolute; + right: 1.5rem; + top: 1rem; + } +} + +.docs-sidebar { + .docs-nav { + bottom: 1.5rem; + overflow-y: auto; + padding: .5rem 1.5rem; + position: fixed; + top: 3.5rem; + width: 12rem; + -webkit-overflow-scrolling: touch; + } + + .accordion { + margin-bottom: .75rem; + + input { + & ~ .accordion-header { + color: lighten($dark-color, 10%); + font-size: .65rem; + font-weight: 600; + text-transform: uppercase; + } + + &:checked { + & ~ .accordion-header { + color: lighten($dark-color, 15%); + } + } + } + + .menu { + .menu-item { + font-size: .7rem; + padding-left: 1rem; + + & > a { + background: transparent; + color: $gray-color-dark; + display: inline-block; + } + } + } + } +} + +.docs-content { + flex: 1 1 auto; + padding: 0 4rem; + width: calc(100vw - 12rem); + + & > .container { + margin-left: 0; + max-width: 800px; + padding-bottom: 1.5rem; + } + + .anchor { + color: $primary-color-light; + height: 0; + margin-left: -2em; + overflow: hidden; + padding: 0 1em; + position: absolute; + text-align: center; + width: 0; + z-index: $zindex-1; + &:focus, + &:hover { + box-shadow: none; + height: auto; + text-decoration: none; + width: 2em; + } + } + + .s-title, + .s-subtitle { + color: darken($dark-color, 2%); + line-height: 1.8rem; + margin-bottom: 0; + padding-bottom: 1rem; + padding-top: 1rem; + position: static; + + @supports (position: sticky) { + position: sticky; + top: 0; + z-index: $zindex-1; + + &::before { + background: $light-color; + bottom: 0; + content: ""; + display: block; + left: -10px; + position: absolute; + right: -10px; + top: -5px; + z-index: -$zindex-0; + } + } + + &:hover { + .anchor { + height: auto; + width: 1em; + } + } + + & + .docs-note { + margin-top: .4rem; + } + } + + .docs-note { + margin: 1.5rem 0; + } + + .docs-ad { + background: $bg-color; + border-radius: $border-radius; + display: inline-block; + padding: $layout-spacing; + position: relative; + + &::before { + color: $gray-color; + content: "AD"; + font-size: $font-size-sm; + position: absolute; + right: $layout-spacing; + top: $unit-h; + } + + &.docs-ad-sidebar { + &::before { + content: none; + } + } + } + + .carbon-wrap { + .carbon-img { + display: block; + } + + .carbon-text { + color: $gray-color-dark; + display: block; + font-size: $font-size-sm; + } + } + + .carbon-poweredby { + color: $gray-color; + font-size: $font-size-sm; + } + + .column { + padding: $layout-spacing; + } + + .docs-block { + border-radius: $border-radius; + padding: $unit-2; + + &.bg-gray { + background: $bg-color-dark; + } + } + + .docs-shape { + height: 4.8rem; + line-height: 1.2rem; + padding: 1.8rem 0; + width: 4.8rem; + } + + .docs-dot { + border-radius: 50%; + display: inline-block; + height: .5rem; + padding: 0; + width: .5rem; + } + + .docs-table { + th, + td { + padding: .75rem .25rem; + } + } + + .docs-color { + border-radius: $border-radius; + margin: .25rem 0; + padding: .5rem; + + .color-subtitle { + font-size: $font-size-sm; + opacity: .75; + } + } + + .code { + .hljs-tag { + color: lighten($body-font-color, 10%); + } + + .hljs-comment { + color: $gray-color; + } + .hljs-title, + .hljs-class, + .hljs-string { + color: $primary-color; + } + .hljs-attribute, + .hljs-variable, + .hljs-keyword, + .hljs-built_in { + color: $code-color; + + } + .hljs-value, + .hljs-hexcolor { + color: lighten($body-font-color, 10%); + } + } + + .panel { + height: 75vh; + + .tile { + margin: .75rem 0; + } + } + + .parallax { + margin: 2rem auto; + } + + .form-autocomplete .menu { + position: static; + } + + .example-tile-icon { + align-content: space-around; + align-items: center; + background: $primary-color; + border-radius: $border-radius; + color: $light-color; + display: flex; + font-size: 1.2rem; + height: 2rem; + width: 2rem; + + .icon { + margin: auto; + } + } + + .comparison-slider { + height: auto; + padding-bottom: 56.2222%; + + .filter-grayscale { + filter: grayscale(75%); + } + } + + .off-canvas { + position: relative; + + .off-canvas-toggle { + left: $layout-spacing; + position: absolute; + top: $layout-spacing; + z-index: $zindex-0; + } + } +} + +.docs-brand { + color: $primary-color; + left: 1.5rem; + position: fixed; + top: .85rem; + + .docs-logo { + align-items: center; + border-radius: $border-radius; + display: inline-flex; + height: 2rem; + padding: .2rem; + width: auto; + + &:focus, + &:hover { + text-decoration: none; + } + + img { + display: inline; + height: auto; + width: 1.6rem; + } + + h2 { + display: inline; + font-size: .8rem; + font-weight: 700; + line-height: 1.5rem; + margin-bottom: 0; + margin-left: .5rem; + margin-right: .5rem; + } + } +} + +.docs-footer { + color: $gray-color; + padding: .5rem .5rem 1.5rem .5rem; + + a { + color: $gray-color-dark; + } +} + +.btn { + .feather { + height: 1rem; + vertical-align: middle; + } +} + +/* Spectre Homepage style */ +.section-hero { + padding: 1rem .5rem; + + .docs-brand { + position: absolute; + top: .85rem; + + h2 { + color: $primary-color; + } + } + + .column { + padding: $layout-spacing; + } +} + +.section-updates { + padding: 4.5rem .5rem 3.5rem .5rem; + + .card { + border: 0; + color: lighten($body-font-color, 15%); + margin-bottom: 1rem; + } +} + +.section-features { + padding: 4.5rem .5rem; + + .column { + padding: $layout-spacing; + } +} + +.section-footer { + color: $gray-color; + padding: 1.8rem .75rem 1rem .75rem; + position: relative; + z-index: 200; + + a { + color: $gray-color-dark; + } +} + +.grid-hero { + padding-bottom: 2rem; + padding-top: 6rem; + + h1 { + color: $body-font-color; + font-size: 1.6rem; + margin-bottom: 1.5rem; + } + + h2 { + color: lighten($body-font-color, 5%); + font-size: .9rem; + font-weight: 400; + line-height: 1.5rem; + margin-bottom: 1.5rem; + + u { + border-bottom: $border-width-lg solid currentColor; + padding-bottom: $unit-o; + text-decoration: none; + } + } + + .card { + background: none; + border: 0; + color: lighten($body-font-color, 15%); + padding: .5rem; + + .card-title { + color: $primary-color; + font-size: .9rem; + margin-bottom: 0; + } + } +} + +@media (max-width: 960px) { + .off-canvas { + .off-canvas-toggle { + z-index: $zindex-3; + } + } + + .docs-sidebar { + .docs-brand { + margin: .85rem 1.5rem; + padding: 0; + position: static; + } + + .docs-nav { + margin-top: 1rem; + position: static; + } + + .menu .menu-item > a { + padding: .3rem .4rem; + } + } + + .docs-navbar { + backdrop-filter: blur(5px); + background: rgba($bg-color, .65); + left: 0; + } + + .docs-content { + &.off-canvas-content { + min-width: auto; + padding: 0 1.5rem; + width: 100%; + } + + .s-title, + .s-subtitle { + padding-top: 5rem; + position: static; + + &::before { + content: none; + } + } + } + + .section-hero { + .s-brand { + height: 5rem; + padding: 1.5rem .5rem; + text-align: center; + width: 100%; + + .s-logo { + height: auto; + } + + img { + height: 3.2rem; + width: 3.2rem; + } + + h2 { + display: none; + } + } + } +} + +@media (max-width: 600px) { + .grid-hero { + h2 { + font-size: .9rem; + } + .card { + padding: 0; + } + } + + .off-canvas { + .off-canvas-toggle { + left: .5rem; + } + } + + .docs-navbar { + .btn { + right: 1rem; + } + } + + .grid-hero { + .docs-brand { + left: 1rem; + } + } + + .docs-sidebar { + .docs-brand { + margin: .85rem 1rem; + } + + .docs-nav { + padding: .5rem 1rem; + } + } + + .docs-content { + &.off-canvas-content { + padding: 0 .5rem; + } + + .docs-block { + padding: $unit-2 $unit-h; + } + + .anchor { + display: none; + } + } +} + +@media (min-width: 1366px) { + .docs-ad { + &.docs-ad-sidebar { + bottom: 1rem; + position: fixed; + right: 1rem; + width: 7.3rem; + } + } +} \ No newline at end of file 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"; -- cgit v1.3.1-23-gd82d From f8d7a075fa0b28b299e33c1bdc2a9d25dd668847 Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Sun, 20 May 2018 09:57:10 +0800 Subject: Move more Docs pages to Pug --- docs/dist/docs.css | 11 +- docs/dist/docs.min.css | 2 +- docs/elements.html | 2344 ++++++-------------------------------- docs/getting-started.html | 6 - docs/src/contents/buttons.pug | 0 docs/src/contents/codes.pug | 0 docs/src/contents/custom.pug | 12 +- docs/src/contents/forms.pug | 0 docs/src/contents/grid.pug | 0 docs/src/contents/icons.pug | 0 docs/src/contents/labels.pug | 0 docs/src/contents/media.pug | 0 docs/src/contents/navbar.pug | 0 docs/src/contents/responsive.pug | 0 docs/src/contents/tables.pug | 64 ++ docs/src/contents/typography.pug | 267 +++++ docs/src/elements.pug | 41 + docs/src/getting-started.pug | 4 +- docs/src/scss/docs.scss | 20 +- 19 files changed, 770 insertions(+), 2001 deletions(-) create mode 100644 docs/src/contents/buttons.pug create mode 100644 docs/src/contents/codes.pug create mode 100644 docs/src/contents/forms.pug create mode 100644 docs/src/contents/grid.pug create mode 100644 docs/src/contents/icons.pug create mode 100644 docs/src/contents/labels.pug create mode 100644 docs/src/contents/media.pug create mode 100644 docs/src/contents/navbar.pug create mode 100644 docs/src/contents/responsive.pug create mode 100644 docs/src/contents/tables.pug create mode 100644 docs/src/contents/typography.pug create mode 100644 docs/src/elements.pug (limited to 'docs/src') diff --git a/docs/dist/docs.css b/docs/dist/docs.css index e3c1473..56db536 100644 --- a/docs/dist/docs.css +++ b/docs/dist/docs.css @@ -184,6 +184,10 @@ font-size: .7rem; } +.docs-content .columns { + margin-bottom: 1rem; +} + .docs-content .column { padding: .4rem; } @@ -451,6 +455,9 @@ .off-canvas .off-canvas-toggle { z-index: 300; } + .off-canvas .off-canvas-content { + width: 100%; + } .docs-sidebar .docs-brand { margin: .85rem 1.5rem; padding: 0; @@ -469,7 +476,7 @@ background: rgba(248, 249, 250, .65); left: 0; } - .docs-content.off-canvas-content { + .docs-content { min-width: auto; padding: 0 1.5rem; width: 100%; @@ -523,7 +530,7 @@ .docs-sidebar .docs-nav { padding: .5rem 1rem; } - .docs-content.off-canvas-content { + .docs-content { padding: 0 .5rem; } .docs-content .docs-block { diff --git a/docs/dist/docs.min.css b/docs/dist/docs.min.css index 782728c..1578bf3 100644 --- a/docs/dist/docs.min.css +++ b/docs/dist/docs.min.css @@ -1 +1 @@ -/*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */.version::after{content:"0.5.2"}.off-canvas .off-canvas-toggle{font-size:1rem;left:1.5rem;position:fixed;top:1rem}.off-canvas .off-canvas-sidebar{width:12rem}.off-canvas .off-canvas-content{padding:0}.docs-navbar{height:3.8rem;position:fixed;right:0;top:0;z-index:100}.docs-navbar .btn{position:absolute;right:1.5rem;top:1rem}.docs-sidebar .docs-nav{bottom:1.5rem;-webkit-overflow-scrolling:touch;overflow-y:auto;padding:.5rem 1.5rem;position:fixed;top:3.5rem;width:12rem}.docs-sidebar .accordion{margin-bottom:.75rem}.docs-sidebar .accordion input~.accordion-header{color:#5b657a;font-size:.65rem;font-weight:600;text-transform:uppercase}.docs-sidebar .accordion input:checked~.accordion-header{color:#667189}.docs-sidebar .accordion .menu .menu-item{font-size:.7rem;padding-left:1rem}.docs-sidebar .accordion .menu .menu-item>a{background:0 0;color:#667189;display:inline-block}.docs-content{-ms-flex:1 1 auto;flex:1 1 auto;padding:0 4rem;width:calc(100vw - 12rem)}.docs-content>.container{margin-left:0;max-width:800px;padding-bottom:1.5rem}.docs-content .anchor{color:#6362dc;height:0;margin-left:-2em;overflow:hidden;padding:0 1em;position:absolute;text-align:center;width:0;z-index:100}.docs-content .anchor:focus,.docs-content .anchor:hover{box-shadow:none;height:auto;text-decoration:none;width:2em}.docs-content .s-subtitle,.docs-content .s-title{color:#414857;line-height:1.8rem;margin-bottom:0;padding-bottom:1rem;padding-top:1rem;position:static}@supports ((position:-webkit-sticky) or (position:sticky)){.docs-content .s-subtitle,.docs-content .s-title{position:sticky;position:-webkit-sticky;top:0;z-index:100}.docs-content .s-subtitle::before,.docs-content .s-title::before{background:#fff;bottom:0;content:"";display:block;left:-10px;position:absolute;right:-10px;top:-5px;z-index:-1}}.docs-content .s-subtitle:hover .anchor,.docs-content .s-title:hover .anchor{height:auto;width:1em}.docs-content .s-subtitle+.docs-note,.docs-content .s-title+.docs-note{margin-top:.4rem}.docs-content .docs-note{margin:1.5rem 0}.docs-content .docs-ad{background:#f8f9fa;border-radius:.1rem;display:inline-block;padding:.4rem;position:relative}.docs-content .docs-ad::before{color:#acb3c2;content:"AD";font-size:.7rem;position:absolute;right:.4rem;top:.1rem}.docs-content .docs-ad.docs-ad-sidebar::before{content:none}.docs-content .carbon-wrap .carbon-img{display:block}.docs-content .carbon-wrap .carbon-text{color:#667189;display:block;font-size:.7rem}.docs-content .carbon-poweredby{color:#acb3c2;font-size:.7rem}.docs-content .column{padding:.4rem}.docs-content .docs-block{border-radius:.1rem;padding:.4rem}.docs-content .docs-block.bg-gray{background:#f0f1f4}.docs-content .docs-shape{height:4.8rem;line-height:1.2rem;padding:1.8rem 0;width:4.8rem}.docs-content .docs-dot{border-radius:50%;display:inline-block;height:.5rem;padding:0;width:.5rem}.docs-content .docs-table td,.docs-content .docs-table th{padding:.75rem .25rem}.docs-content .docs-color{border-radius:.1rem;margin:.25rem 0;padding:.5rem}.docs-content .docs-color .color-subtitle{font-size:.7rem;opacity:.75}.docs-content .code .hljs-tag{color:#667189}.docs-content .code .hljs-comment{color:#acb3c2}.docs-content .code .hljs-class,.docs-content .code .hljs-string,.docs-content .code .hljs-title{color:#5755d9}.docs-content .code .hljs-attribute,.docs-content .code .hljs-built_in,.docs-content .code .hljs-keyword,.docs-content .code .hljs-variable{color:#d73e48}.docs-content .code .hljs-hexcolor,.docs-content .code .hljs-value{color:#667189}.docs-content .panel{height:75vh}.docs-content .panel .tile{margin:.75rem 0}.docs-content .parallax{margin:2rem auto}.docs-content .form-autocomplete .menu{position:static}.docs-content .example-tile-icon{align-content:space-around;align-items:center;background:#5755d9;border-radius:.1rem;color:#fff;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-line-pack:distribute;font-size:1.2rem;height:2rem;width:2rem}.docs-content .example-tile-icon .icon{margin:auto}.docs-content .comparison-slider{height:auto;padding-bottom:56.2222%}.docs-content .comparison-slider .filter-grayscale{filter:grayscale(75%)}.docs-content .off-canvas{position:relative}.docs-content .off-canvas .off-canvas-toggle{left:.4rem;position:absolute;top:.4rem;z-index:1}.docs-brand{color:#5755d9;left:1.5rem;position:fixed;top:.85rem}.docs-brand .docs-logo{align-items:center;border-radius:.1rem;display:inline-flex;display:-ms-inline-flexbox;-ms-flex-align:center;height:2rem;padding:.2rem;width:auto}.docs-brand .docs-logo:focus,.docs-brand .docs-logo:hover{text-decoration:none}.docs-brand .docs-logo img{display:inline;height:auto;width:1.6rem}.docs-brand .docs-logo h2{display:inline;font-size:.8rem;font-weight:700;line-height:1.5rem;margin-bottom:0;margin-left:.5rem;margin-right:.5rem}.docs-footer{color:#acb3c2;padding:.5rem .5rem 1.5rem .5rem}.docs-footer a{color:#667189}.btn .feather{height:1rem;vertical-align:middle}.section-hero{padding:1rem .5rem}.section-hero .docs-brand{position:absolute;top:.85rem}.section-hero .docs-brand h2{color:#5755d9}.section-hero .column{padding:.4rem}.section-updates{padding:4.5rem .5rem 3.5rem .5rem}.section-updates .card{border:0;color:#727e96;margin-bottom:1rem}.section-features{padding:4.5rem .5rem}.section-features .column{padding:.4rem}.section-footer{color:#acb3c2;padding:1.8rem .75rem 1rem .75rem;position:relative;z-index:200}.section-footer a{color:#667189}.grid-hero{padding-bottom:2rem;padding-top:6rem}.grid-hero h1{color:#50596c;font-size:1.6rem;margin-bottom:1.5rem}.grid-hero h2{color:#5b657a;font-size:.9rem;font-weight:400;line-height:1.5rem;margin-bottom:1.5rem}.grid-hero h2 u{border-bottom:.1rem solid currentColor;padding-bottom:.05rem;text-decoration:none}.grid-hero .card{background:0 0;border:0;color:#727e96;padding:.5rem}.grid-hero .card .card-title{color:#5755d9;font-size:.9rem;margin-bottom:0}@media (max-width:960px){.off-canvas .off-canvas-toggle{z-index:300}.docs-sidebar .docs-brand{margin:.85rem 1.5rem;padding:0;position:static}.docs-sidebar .docs-nav{margin-top:1rem;position:static}.docs-sidebar .menu .menu-item>a{padding:.3rem .4rem}.docs-navbar{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:rgba(248,249,250,.65);left:0}.docs-content.off-canvas-content{min-width:auto;padding:0 1.5rem;width:100%}.docs-content .s-subtitle,.docs-content .s-title{padding-top:5rem;position:static}.docs-content .s-subtitle::before,.docs-content .s-title::before{content:none}.section-hero .s-brand{height:5rem;padding:1.5rem .5rem;text-align:center;width:100%}.section-hero .s-brand .s-logo{height:auto}.section-hero .s-brand img{height:3.2rem;width:3.2rem}.section-hero .s-brand h2{display:none}}@media (max-width:600px){.grid-hero h2{font-size:.9rem}.grid-hero .card{padding:0}.off-canvas .off-canvas-toggle{left:.5rem}.docs-navbar .btn{right:1rem}.grid-hero .docs-brand{left:1rem}.docs-sidebar .docs-brand{margin:.85rem 1rem}.docs-sidebar .docs-nav{padding:.5rem 1rem}.docs-content.off-canvas-content{padding:0 .5rem}.docs-content .docs-block{padding:.4rem .1rem}.docs-content .anchor{display:none}}@media (min-width:1366px){.docs-ad.docs-ad-sidebar{bottom:1rem;position:fixed;right:1rem;width:7.3rem}} \ No newline at end of file +/*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */.version::after{content:"0.5.2"}.off-canvas .off-canvas-toggle{font-size:1rem;left:1.5rem;position:fixed;top:1rem}.off-canvas .off-canvas-sidebar{width:12rem}.off-canvas .off-canvas-content{padding:0}.docs-navbar{height:3.8rem;position:fixed;right:0;top:0;z-index:100}.docs-navbar .btn{position:absolute;right:1.5rem;top:1rem}.docs-sidebar .docs-nav{bottom:1.5rem;-webkit-overflow-scrolling:touch;overflow-y:auto;padding:.5rem 1.5rem;position:fixed;top:3.5rem;width:12rem}.docs-sidebar .accordion{margin-bottom:.75rem}.docs-sidebar .accordion input~.accordion-header{color:#5b657a;font-size:.65rem;font-weight:600;text-transform:uppercase}.docs-sidebar .accordion input:checked~.accordion-header{color:#667189}.docs-sidebar .accordion .menu .menu-item{font-size:.7rem;padding-left:1rem}.docs-sidebar .accordion .menu .menu-item>a{background:0 0;color:#667189;display:inline-block}.docs-content{-ms-flex:1 1 auto;flex:1 1 auto;padding:0 4rem;width:calc(100vw - 12rem)}.docs-content>.container{margin-left:0;max-width:800px;padding-bottom:1.5rem}.docs-content .anchor{color:#6362dc;height:0;margin-left:-2em;overflow:hidden;padding:0 1em;position:absolute;text-align:center;width:0;z-index:100}.docs-content .anchor:focus,.docs-content .anchor:hover{box-shadow:none;height:auto;text-decoration:none;width:2em}.docs-content .s-subtitle,.docs-content .s-title{color:#414857;line-height:1.8rem;margin-bottom:0;padding-bottom:1rem;padding-top:1rem;position:static}@supports ((position:-webkit-sticky) or (position:sticky)){.docs-content .s-subtitle,.docs-content .s-title{position:sticky;position:-webkit-sticky;top:0;z-index:100}.docs-content .s-subtitle::before,.docs-content .s-title::before{background:#fff;bottom:0;content:"";display:block;left:-10px;position:absolute;right:-10px;top:-5px;z-index:-1}}.docs-content .s-subtitle:hover .anchor,.docs-content .s-title:hover .anchor{height:auto;width:1em}.docs-content .s-subtitle+.docs-note,.docs-content .s-title+.docs-note{margin-top:.4rem}.docs-content .docs-note{margin:1.5rem 0}.docs-content .docs-ad{background:#f8f9fa;border-radius:.1rem;display:inline-block;padding:.4rem;position:relative}.docs-content .docs-ad::before{color:#acb3c2;content:"AD";font-size:.7rem;position:absolute;right:.4rem;top:.1rem}.docs-content .docs-ad.docs-ad-sidebar::before{content:none}.docs-content .carbon-wrap .carbon-img{display:block}.docs-content .carbon-wrap .carbon-text{color:#667189;display:block;font-size:.7rem}.docs-content .carbon-poweredby{color:#acb3c2;font-size:.7rem}.docs-content .columns{margin-bottom:1rem}.docs-content .column{padding:.4rem}.docs-content .docs-block{border-radius:.1rem;padding:.4rem}.docs-content .docs-block.bg-gray{background:#f0f1f4}.docs-content .docs-shape{height:4.8rem;line-height:1.2rem;padding:1.8rem 0;width:4.8rem}.docs-content .docs-dot{border-radius:50%;display:inline-block;height:.5rem;padding:0;width:.5rem}.docs-content .docs-table td,.docs-content .docs-table th{padding:.75rem .25rem}.docs-content .docs-color{border-radius:.1rem;margin:.25rem 0;padding:.5rem}.docs-content .docs-color .color-subtitle{font-size:.7rem;opacity:.75}.docs-content .code .hljs-tag{color:#667189}.docs-content .code .hljs-comment{color:#acb3c2}.docs-content .code .hljs-class,.docs-content .code .hljs-string,.docs-content .code .hljs-title{color:#5755d9}.docs-content .code .hljs-attribute,.docs-content .code .hljs-built_in,.docs-content .code .hljs-keyword,.docs-content .code .hljs-variable{color:#d73e48}.docs-content .code .hljs-hexcolor,.docs-content .code .hljs-value{color:#667189}.docs-content .panel{height:75vh}.docs-content .panel .tile{margin:.75rem 0}.docs-content .parallax{margin:2rem auto}.docs-content .form-autocomplete .menu{position:static}.docs-content .example-tile-icon{align-content:space-around;align-items:center;background:#5755d9;border-radius:.1rem;color:#fff;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-line-pack:distribute;font-size:1.2rem;height:2rem;width:2rem}.docs-content .example-tile-icon .icon{margin:auto}.docs-content .comparison-slider{height:auto;padding-bottom:56.2222%}.docs-content .comparison-slider .filter-grayscale{filter:grayscale(75%)}.docs-content .off-canvas{position:relative}.docs-content .off-canvas .off-canvas-toggle{left:.4rem;position:absolute;top:.4rem;z-index:1}.docs-brand{color:#5755d9;left:1.5rem;position:fixed;top:.85rem}.docs-brand .docs-logo{align-items:center;border-radius:.1rem;display:inline-flex;display:-ms-inline-flexbox;-ms-flex-align:center;height:2rem;padding:.2rem;width:auto}.docs-brand .docs-logo:focus,.docs-brand .docs-logo:hover{text-decoration:none}.docs-brand .docs-logo img{display:inline;height:auto;width:1.6rem}.docs-brand .docs-logo h2{display:inline;font-size:.8rem;font-weight:700;line-height:1.5rem;margin-bottom:0;margin-left:.5rem;margin-right:.5rem}.docs-footer{color:#acb3c2;padding:.5rem .5rem 1.5rem .5rem}.docs-footer a{color:#667189}.btn .feather{height:1rem;vertical-align:middle}.section-hero{padding:1rem .5rem}.section-hero .docs-brand{position:absolute;top:.85rem}.section-hero .docs-brand h2{color:#5755d9}.section-hero .column{padding:.4rem}.section-updates{padding:4.5rem .5rem 3.5rem .5rem}.section-updates .card{border:0;color:#727e96;margin-bottom:1rem}.section-features{padding:4.5rem .5rem}.section-features .column{padding:.4rem}.section-footer{color:#acb3c2;padding:1.8rem .75rem 1rem .75rem;position:relative;z-index:200}.section-footer a{color:#667189}.grid-hero{padding-bottom:2rem;padding-top:6rem}.grid-hero h1{color:#50596c;font-size:1.6rem;margin-bottom:1.5rem}.grid-hero h2{color:#5b657a;font-size:.9rem;font-weight:400;line-height:1.5rem;margin-bottom:1.5rem}.grid-hero h2 u{border-bottom:.1rem solid currentColor;padding-bottom:.05rem;text-decoration:none}.grid-hero .card{background:0 0;border:0;color:#727e96;padding:.5rem}.grid-hero .card .card-title{color:#5755d9;font-size:.9rem;margin-bottom:0}@media (max-width:960px){.off-canvas .off-canvas-toggle{z-index:300}.off-canvas .off-canvas-content{width:100%}.docs-sidebar .docs-brand{margin:.85rem 1.5rem;padding:0;position:static}.docs-sidebar .docs-nav{margin-top:1rem;position:static}.docs-sidebar .menu .menu-item>a{padding:.3rem .4rem}.docs-navbar{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:rgba(248,249,250,.65);left:0}.docs-content{min-width:auto;padding:0 1.5rem;width:100%}.docs-content .s-subtitle,.docs-content .s-title{padding-top:5rem;position:static}.docs-content .s-subtitle::before,.docs-content .s-title::before{content:none}.section-hero .s-brand{height:5rem;padding:1.5rem .5rem;text-align:center;width:100%}.section-hero .s-brand .s-logo{height:auto}.section-hero .s-brand img{height:3.2rem;width:3.2rem}.section-hero .s-brand h2{display:none}}@media (max-width:600px){.grid-hero h2{font-size:.9rem}.grid-hero .card{padding:0}.off-canvas .off-canvas-toggle{left:.5rem}.docs-navbar .btn{right:1rem}.grid-hero .docs-brand{left:1rem}.docs-sidebar .docs-brand{margin:.85rem 1rem}.docs-sidebar .docs-nav{padding:.5rem 1rem}.docs-content{padding:0 .5rem}.docs-content .docs-block{padding:.4rem .1rem}.docs-content .anchor{display:none}}@media (min-width:1366px){.docs-ad.docs-ad-sidebar{bottom:1rem;position:fixed;right:1rem;width:7.3rem}} \ No newline at end of file diff --git a/docs/elements.html b/docs/elements.html index f6269e4..cf1c334 100644 --- a/docs/elements.html +++ b/docs/elements.html @@ -1,2013 +1,405 @@ - - - - - - - Elements - Spectre.css CSS Framework - - - - - - - - -
-
- - - - GitHub -
- - - - - -
-
-

Elements

-
- -
-
-
- - - - -
-
- - - -
-
-
- -
-

Typography

-
-

Typography sets default styles for headings, paragraphs, semantic text, blockquote and lists elements.

-
-

Headings

-
-
-

H1 Heading 40px

-
-
-

H2 Heading 32px

-
-
-

H3 Heading 28px

-
-
-

H4 Heading 24px

-
-
-
H5 Heading 20px
-
-
-
H6 Heading 16px
-
-
- - -
<h1>H1 Heading</h1>
-<h1>H1 Heading <small class="label">40px</small></h1>
-<span class="h1">H1 Heading</span>
-
- -

Paragraphs

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.

-

Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.

-
- - -
<p>Lorem ipsum dolor sit amet, ...</p>
-<p>...</p>
-
- -

Semantic text elements

-
-
- I18N - <abbr> -
-
- Bold - <strong> <b> -
-
- Citation - <cite> -
-
- Hello World! - <code> -
-
- Deleted - <del> -
-
- Emphasis - <em> -
-
- Italic - <i> -
-
- Inserted - <ins> -
-
- Ctrl + S - <kbd> -
-
- Highlighted - <mark> -
-
- - 漢 kan - 字 ji - - <ruby> -
-
- Strikethrough - <s> -
-
- Sample - <samp> -
-
- Text Subscripted - <sub> -
-
- Text Superscripted - <sup> -
-
- - <time> -
-
- Underline - <u> -
-
- x = y + 2 - <var> -
-
- -

Optimized for east asian fonts

-
你好, こんにちは, 안녕하세요
-
-

Chinese (Simplified)

-

革命不是请客吃饭，不是做文章，不是绘画绣花，不能那样雅致，那样从容不迫，“文质彬彬”，那样“温良恭俭让”。革命就是暴动，是一个阶级推翻一个阶级的暴烈的行动。

-

Chinese (Tranditional)

-

山不在高，有仙則名；水不在深，有龍則靈。斯是陋室，惟吾德馨。苔痕上階綠，草色入簾青；談笑有鴻儒，往來無白丁。可以調素琴，閱金經。無絲竹之亂耳，無案牘之勞形。南陽諸葛廬，西蜀子雲亭。孔子云：「何陋之有？」

-

Japanese

-

祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。おごれる人も久しからず。ただ春の夜の夢のごとし。たけき者も遂にはほろびぬ、ひとへ‌​に風の前の塵に同じ。

-

Korean

-

나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로, 어리석은 백성들이 말하고자 하는 바가 있어도, 끝내 제 뜻을 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨, 새로 스물 여덟 글자를 만드니, 사람마다 하여금 쉽게 익혀, 날마다 씀에 편하게 하고자 할 따름이다.

-
-
-

Use the lang attribute to the container element to have better Asian CJK (Chinese, Japanese and Korean) font support.

-
- - -
<p lang="zh-Hans">革命不是请客吃饭，不是做文章……</p>
-<p lang="ja">祇園精舎の鐘の声、諸行無常の響きあり……</p>
-<p lang="ko">나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로……</p>
-
- -
-

And you can use the cjk class or the lang attribute to add spacing between underlines and strike-through text for better Chinese and Japanese readability.

-
-
-

祇園精舎の鐘の声、諸行無常の響きあり。

-

祇園精舎の鐘の声、諸行無常の響きあり。

-
- - -
<p class="cjk"><u>祇園</u><u>精舎</u>の鐘の声、諸行無常の響きあり。……</p>
-<p class="cjk"><del>祇園</del><del>精舎</del>の鐘の声、諸行無常の響きあり。……</p>
-
- -

Fonts

-
-

Spectre sets the most common and best font-family for each OS with fallback support in old systems. There are also fonts targeted East Asian typography.

-
- - -
<!-- Western typography targeted -->
-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
-<!-- Monospace typography targeted -->
-font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace;
-
-<!-- Chinese (lang="zh-Hans" and lang="zh-Hant") targeted -->
-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif;
-<!-- Japanese (lang="ja") targeted -->
-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Meiryo, "Helvetica Neue", sans-serif;
-<!-- Korean (lang="ko") targeted -->
-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Malgun Gothic", "Helvetica Neue", sans-serif;
-
- -

Blockquote

-
-

The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life.

- - Bill Gates -
- - -
<blockquote>
-  <p>The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life. </p>
-  <cite>- Bill Gates</cite>
-</blockquote>
-
- -

Lists

-
-
-
-
-
    -
  1. list item 1
    2. -
  2. list item 2 -
      -
    1. list item 2.1
      2. -
    2. list item 2.2
      3. -
    3. list item 2.3
      4. -
    -
    3. -
  3. list item 3
    4. -
-
-
-
-
description list term 1
-
description list description 1
-
description list term 2
-
description list description 2
-
description list term 3
-
description list description 3
-
-
-
- - -
<!-- unordered list -->
-<ul>
-  <li>list item 1</li>
-  <li>list item 2
-    <ul>
-      <li>list item 2.1</li>
-      <li>list item 2.2</li>
-      <li>list item 2.3</li>
-    </ul>
-  </li>
-  <li>list item 3</li>
-</ul>
-
-<!-- description list -->
-<dl>
-  <dt>description list term</dt>
-  <dd>description list description</dd>
-</dl>
-
- -
- -
-
- -
-
- -
-

Tables

-
-

Tables include default styles for tables and data sets.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameGenreRelease date
The Shawshank RedemptionCrime, Drama14 October 1994
The GodfatherCrime, Drama24 March 1972
Schindler's ListBiography, Drama, History4 February 1994
Se7enCrime, Drama, Mystery22 September 1995
-
-

Add the table class to any <table> element. The class will add padding, border and emphasized table header. Use the table-striped class to <table> to add zebra striped style. For hoverable table rows, you can add the table-hover class to enable hover style.

-

Use the active class to make <tr> element highlighted.

-
- - -
<table class="table table-striped table-hover">
-  <thead>
-    <tr>
-      <th>name</th>
-      <th>genre</th>
-      <th>release date</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr class="active">
-      <td>The Shawshank Redemption</td>
-      <td>Crime, Drama</td>
-      <td>14 October 1994</td>
-    </tr>
-  </tbody>
-</table>
-
- -
-

If you need the tables with horizontal scroll, add the table-scroll class to the <table> element.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameGenreDirectorRatingDurationRelease date
The Shawshank RedemptionCrime, DramaFrank DarabontR2h 22min14 October 1994
The GodfatherCrime, DramaFrancis Ford CoppolaR2h 55min24 March 1972
Schindler's ListBiography, Drama, HistorySteven SpielbergR3h 15min4 February 1994
Se7enCrime, Drama, MysteryDavid FincherR2h 7min22 September 1995
- - -
<table class="table table-scroll">
-  <!-- table content -->
-</table>
-
- -
- -
-

Buttons

-
-

Buttons include simple button styles for actions in different types and sizes.

-
-
-
- - - -
-
- -
-

Add the btn class to <a>, <input> or <button> elements for a default button. There are classes btn-primary and btn-link for predefined primary and link buttons.

-
- - -
<button class="btn">default button</button>
-<button class="btn btn-primary">primary button</button>
-<button class="btn btn-link">link button</button>
-
- -

Button colors

-
-
- - -
-
-
-

Add the btn-success or btn-error class for success (green) or error (red) button color. If you need more button colors, please use button mixins to create your own button color variants.

-
- - -
<button class="btn btn-success">success button</button>
-<button class="btn btn-error">error button</button>
-
- -

Button sizes

-
-
- - -
-
- - -
-
- - -
-
-
-

Add the btn-sm or btn-lg class for small or large button size. Also, you can add the btn-block class for a full-width button.

-
- - -
<button class="btn btn-lg">large button</button>
-<button class="btn btn-sm">small button</button>
-
-<button class="btn btn-block">block button</button>
-
-<button class="btn btn-primary btn-lg"><i class="icon icon-arrow-left"></i> large</button>
-<button class="btn btn-primary"><i class="icon icon-arrow-left"></i> normal</button>
-<button class="btn btn-primary btn-sm"><i class="icon icon-arrow-left"></i> small</button>
-
- -
-

Please note that you could use the btn-action class for a square button, or add another circle class for a round button, which is often used as a Float Action Button (FAB).

-
- -
-
- - - -
-
- - - -
-
- - -
<button class="btn btn-action"><i class="icon icon-arrow-left"></i></button>
-<button class="btn btn-action circle"><i class="icon icon-arrow-left"></i></button>
-
- -

Button states

- -
-

Add the active class for active button state style.

-
- -
-
- - - -
-
- - -
<!-- buttons with active state -->
-<button class="btn active">active button</button>
-
- -
-

Add the disabled class or the disabled attribute for disabled button state style.

-
- -
-
- - - -
-
- - -
<!-- buttons with disabled state -->
-<button class="btn disabled" tabindex="-1">disabled button</button>
-<button class="btn" disabled tabindex="-1">disabled button</button>
-
- -
-

A button with the loading class can show loading indicator.

-
- -
-
- - - -
-
- - -
<!-- a button with loading state -->
-<button class="btn loading">button</button>
-
- -

Button groups

-
-
-
- - - -
-
-
-
- - - -
-
-
-
-
-
- - - -
-
-
-
- - - -
-
-
-
-

If you want to use buttons as a group, add the btn-group class to the container. You can add the btn-group-block class for a full-width button group.

-
- - -
<div class="btn-group btn-group-block">
-  <button class="btn">first button</button>
-  <button class="btn">second button</button>
-  <button class="btn">third button</button>
-</div>
-
- -
- -
-

Forms

-
-

Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch.

-
-
-
-
- - -
-
- - -
-
-
- -
<!-- form input control -->
-<div class="form-group">
-  <label class="form-label" for="input-example-1">Name</label>
-  <input class="form-input" type="text" id="input-example-1" placeholder="Name">
-</div>
-
- -
-
-
- - -
-
-
- -
<!-- form textarea control -->
-<div class="form-group">
-  <label class="form-label" for="input-example-3">Message</label>
-  <textarea class="form-input" id="input-example-3" placeholder="Textarea" rows="3"></textarea>
-</div>
-
- -
-
-
- +
-
- +
+ + +
+ +
-
-
- -
<!-- form select control -->
-<div class="form-group">
-  <select class="form-select">
-    <option>Choose an option</option>
-    <option>Slack</option>
-    <option>Skype</option>
-    <option>Hipchat</option>
-  </select>
-</div>
-
- -
-
-
-
- - - +
+ + +
+
- -
-
- -
<!-- form radio control -->
-<div class="form-group">
-  <label class="form-label">Gender</label>
-  <label class="form-radio">
-    <input type="radio" name="gender" checked>
-    <i class="form-icon"></i> Male
-  </label>
-  <label class="form-radio">
-    <input type="radio" name="gender">
-    <i class="form-icon"></i> Female
-  </label>
-</div>
-
- -
-
-
-
-
- +
+ + +
+ +
-
-
- -
<!-- form switch control -->
-<div class="form-group">
-  <label class="form-switch">
-    <input type="checkbox">
-    <i class="form-icon"></i> Send me emails with news and tips
-  </label>
-</div>
-
- -
-
-
- +
+ + +
+ +
-
- +
+ + +
+ +
- -
<!-- form checkbox control -->
-<div class="form-group">
-  <label class="form-checkbox">
-    <input type="checkbox">
-    <i class="form-icon"></i> Remember me
-  </label>
-</div>
-
- -
-

You can use :indeterminate pseudo class for indeterminate state of checkboxes.

-
- -

Horizontal forms

-
-

If you want to have a horizontal form, add the form-horizontal class to the <form> container. And add the col-[1-12] and col-xs/sm/lg/xl-[1-12] class to the child elements for responsive form row layout.

-
-
-
-
-
-
- -
-
- -
+
+
+
+
+

Typography

+

Typography sets default styles for headings, paragraphs, semantic text, blockquote and lists elements.

+

Headings

+
+
+

H1 Heading 40px

-
-
- -
-
- -
+
+

H2 Heading 32px

-
-
- -
-
- - -
+
+

H3 Heading 28px

-
-
- -
-
- -
+
+

H4 Heading 24px

-
-
- -
+
+
H5 Heading 20px
-
-
- -
-
- -
+
+
H6 Heading 16px
-
-
- -
-
- -
-
- - -
<form class="form-horizontal">
-  <div class="form-group">
-    <div class="col-3 col-sm-12">
-      <label class="form-label" for="input-example-1">Name</label>
-    </div>
-    <div class="col-9 col-sm-12">
-      <input class="form-input" type="text" id="input-example-1" placeholder="Name">
-    </div>
-  </div>
-  <!-- form structure -->
-</form>
-
- -

Form sizes

-
-

For smaller or larger input and select controls, you could add the input-sm/input-lg, select-sm/select-lg and label-sm/label-lg classes to the elements.

-
-
-
- -
-
- -
-
- -
-
-
-
- -
-
- -
-
- -
-
-
-

You can add the input-sm/input-lg classes to the input-checkbox, input-radio and input-switch to have different sizes.

-
- -

Form icons

-
-

Spectre Form components has Spectre Icons support.

-

Add a wrapper with the has-icon-left/has-icon-right class to <input> element. And add the icon with form-icon class next to the <input>.

-
-
-
-
- -
-
-
-
- - -
-
-
-
- - -
-
-
-
-
-
- - -
-
-
-
- - -
-
-
-
- - -
-
-
- - -
<!-- form input with Spectre icon -->
-<div class="has-icon-left">
-  <input type="text" class="form-input" placeholder="...">
-  <i class="form-icon icon icon-check"></i>
-</div>
-
- -
-

You can use the loading class for loading or posting state.

-
- -
-
-
- - -
-
-
-
- - -
-
-
-
- - -
-
-
- -
<!-- form input with loading icon -->
-<div class="has-icon-right">
-  <input type="text" class="form-input" placeholder="...">
-  <i class="form-icon loading"></i>
-</div>
-
- -

Input types

-
-
-
-
-
- -
-
- -
+ 
<h1>H1 Heading</h1>
+<h1>H1 Heading <small class="label">40px</small></h1>
+<span class="h1">H1 Heading</span>
+
+

Paragraphs

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.

+

Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.

+ 
<p>Lorem ipsum dolor sit amet, ...</p>
+<p>...</p>
+
+

Semantic text elements

+
+
I18Nabbr
+
Boldstrongb
+
+ Citationcite
-
-
- -
-
- -
+
Hello World!code
+
+ Deleteddel
-
-
- -
-
- -
+
Emphasisem
+
Italici
+
Insertedins
+
Ctrl + Skbd
+
+ Highlightedmark
-
-
- -
-
- -
+
+ 漢 + kan字 + ji + ruby
-
-
- -
-
- -
+
+ Strikethroughs
-
-
- -
-
- -
+
Samplesamp
+
Text Subscriptedsub
+
Text Superscriptedsup
+
+ time
-
-
- -
-
- -
+
+ Underlineu
-
-
- -
-
- -
+
+ x = + y + 2var
-
-
- -
-
- -
-
- -
-
- -

Input groups

-
-
-
- - -
-
-
-
- slack.com/ - - -
-
-
-
-
-
- - -
-
-
-
- slack.com/ - -
-
-
-
-
-
- - -
-
-
-
- - -
-
-
-
-
-
- - -
-
-
-
- slack.com/ - - -
-
-
- -
-

If you want to attach text and button along with an input, add the input-group class to the input container. And add the input-group-addon class to the text element and input-group-btn to the button element.

-
- - -
<!-- normal input group -->
-<div class="input-group">
-  <span class="input-group-addon">...</span>
-  <input type="text" class="form-input" placeholder="...">
-</div>
-
-<!-- large input group -->
-<div class="input-group">
-  <span class="input-group-addon addon-lg">...</span>
-  <input type="text" class="form-input input-lg" placeholder="...">
-</div>
-
-<!-- normal input group with button -->
-<div class="input-group">
-  <span class="input-group-addon">...</span>
-  <input type="text" class="form-input" placeholder="...">
-  <button class="btn btn-primary input-group-btn">Submit</button>
-</div>
-
- -

Form validation styles

-
-

To use form validation styles, add is-success or is-error class to the controls or add has-success or has-error class to parent elements. You can use the form-input-hint class to provide form validation success and error messages.

-
-
-
-
- Input -
- - -

The name is valid.

-
-
- - -

Passwords must have at least 8 characters.

-
-
- - -

The Email address is unavailable.

-
-
-
- Select -
- -

The option is invalid.

-
-
- -

The option is available.

+

Optimized for East Asian fonts

+

你好, こんにちは, 안녕하세요

+

Chinese (Simplified)

+

革命不是请客吃饭，不是做文章，不是绘画绣花，不能那样雅致，那样从容不迫，“文质彬彬”，那样“温良恭俭让”。革命就是暴动，是一个阶级推翻一个阶级的暴烈的行动。

+

Chinese (Tranditional)

+

山不在高，有仙則名；水不在深，有龍則靈。斯是陋室，惟吾德馨。苔痕上階綠，草色入簾青；談笑有鴻儒，往來無白丁。可以調素琴，閱金經。無絲竹之亂耳，無案牘之勞形。南陽諸葛廬，西蜀子雲亭。孔子云：「何陋之有？」

+

Japanese

+

祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。おごれる人も久しからず。ただ春の夜の夢のごとし。たけき者も遂にはほろびぬ、ひとへ‌​に風の前の塵に同じ。

+

Korean

+

나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로, 어리석은 백성들이 말하고자 하는 바가 있어도, 끝내 제 뜻을 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨, 새로 스물 여덟 글자를 만드니, 사람마다 하여금 쉽게 익혀, 날마다 씀에 편하게 하고자 할 따름이다.

+

Use the lang attribute to the container element to have better Asian CJK (Chinese, Japanese and Korean) font support.

+ 
<p lang="zh-Hans">革命不是请客吃饭，不是做文章……</p>
+<p lang="ja">祇園精舎の鐘の声、諸行無常の響きあり……</p>
+<p lang="ko">나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로……</p>
+
+

And you can use the cjk class or the lang attribute to add spacing between underlines and strike-through text for better Chinese and Japanese readability.

+

+ 祇園 + 精舎の鐘の声、諸行無常の響きあり。 +

+

+ 祇園 + 精舎の鐘の声、諸行無常の響きあり。 +

+ 
<p class="cjk"><u>祇園</u><u>精舎</u>の鐘の声、諸行無常の響きあり。……</p>
+<p class="cjk"><del>祇園</del><del>精舎</del>の鐘の声、諸行無常の響きあり。……</p>
+
+

Fonts

+

Spectre sets the most common and best font-family for each OS with fallback support in old systems. There are also fonts targeted East Asian typography.

+ 
/* Western typography targeted */
+font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+/* Monospace typography targeted */
+font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace;
+
+/* Chinese (lang="zh-Hans" and lang="zh-Hant") targeted */
+font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif;
+/* Japanese (lang="ja") targeted */
+font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Meiryo, "Helvetica Neue", sans-serif;
+/* Korean (lang="ko") targeted */
+font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Malgun Gothic", "Helvetica Neue", sans-serif;
+
+

Blockquote

+
+

The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life.

+ - Bill Gates +
+ 
<blockquote>
+  <p>The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life. </p>
+  <cite>- Bill Gates</cite>
+</blockquote>
+
+

Lists

+
+
+
    +
  • list item 1
    • +
  • list item 2 +
      +
    • list item 2.1
      • +
    • list item 2.2
      • +
    • list item 2.3
      • +
    +
    • +
  • list item 3
    • +
-
-
- Checkbox, Radio and Switch (Error state only) -
- +
+
    +
  1. list item 1
    2. +
  2. list item 2 +
      +
    1. list item 2.1
      2. +
    2. list item 2.2
      3. +
    3. list item 2.3
      4. +
    +
    3. +
  3. list item 3
    4. +
-
- - +
+
+
description list term 1
+
description list description 1
+
description list term 2
+
description list description 2
+
description list term 3
+
description list description 3
+
-
- +
+ 
<!-- unordered list -->
+<ul>
+  <li>list item 1</li>
+  <li>list item 2
+    <ul>
+      <li>list item 2.1</li>
+      <li>list item 2.2</li>
+      <li>list item 2.3</li>
+    </ul>
+  </li>
+  <li>list item 3</li>
+</ul>
+
+<!-- description list -->
+<dl>
+  <dt>description list term</dt>
+  <dd>description list description</dd>
+</dl>
+
+
+

Tables

+

Tables include default styles for tables and data sets.

+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameGenreRelease date
The Shawshank RedemptionCrime, Drama14 October 1994
The GodfatherCrime, Drama24 March 1972
Schindler's ListBiography, Drama, History4 February 1994
Se7enCrime, Drama, Mystery22 September 1995
-
-
-
- - -
<form>
-  <!-- form validation class: has-success -->
-  <div class="form-group has-success">
-    <label class="form-label" for="input-example-1">Name</label>
-    <input class="form-input" type="text" id="input-example-1" placeholder="...">
-    <p class="form-input-hint">The name is invalid.</p>
-  </div>
-
-  <!-- form validation class: is-success -->
-  <div class="form-group">
-    <label class="form-label" for="input-example-1">Name</label>
-    <input class="form-input is-success" type="text" id="input-example-1" placeholder="...">
-    <p class="form-input-hint">The name is invalid.</p>
-  </div>
-
-  <!-- form validation example for checkbox, radio and switch -->
-  <div class="form-group">
-    <label class="form-checkbox is-error">
-      <input type="checkbox">
-      <i class="form-icon"></i> Remember me
-    </label>
-  </div>
-</form>
-
- -

Form disabled styles

-
-

Add the disabled attribute to the element or <fieldset> for a disabled form components style.

-
-
-
-
-
-
- - -
-
- - - -
-
- -
-
- -
-
- - -
-
- -
-
-
-
-
-
- -
-

Icons experimental

-
-

Icons are single-element, responsive and pure CSS icons. You can include spectre-icons.css located in the dist folder to your web <head> to have these CSS icons.

-
-

Navigation icons

-
-
- -

icon-arrow-up

-
-
- -

icon-arrow-right

-
-
- -

icon-arrow-down

-
-
- -

icon-arrow-left

-
-
- -

icon-upward

-
-
- -

icon-forward

-
-
- -

icon-downward

-
-
- -

icon-back

-
-
- -

icon-caret

-
-
- -

icon-menu

-
-
- -

icon-apps

-
-
- -

icon-more-horiz

-
-
- -

icon-more-vert

-
-
-

Action icons

-
-
- -

icon-resize-horiz

-
-
- -

icon-resize-vert

-
-
- -

icon-plus

-
-
- -

icon-minus

-
-
- -

icon-cross

-
-
- -

icon-check

-
-
- -

icon-stop

-
-
- -

icon-shutdown

-
-
- -

icon-refresh

-
-
- -

icon-search

-
-
- -

icon-flag

-
-
- -

icon-bookmark

-
-
- -

icon-edit

-
-
- -

icon-delete

-
-
- -

icon-share

-
-
- -

icon-download

-
-
- -

icon-upload

-
-
-

Object icons

-
-
- -

icon-mail

-
-
- -

icon-people

-
-
- -

icon-message

-
-
- -

icon-photo

-
-
- -

icon-time

-
-
- -

icon-location

-
-
- -

icon-link

-
-
- -

icon-emoji

-
-
- - -
<i class="icon icon-menu"></i>
-
- -

Icon sizes

-
-

Use icon-2x, icon-3x and icon-4x classes to increase icon sizes. You can set font-size to have different icon sizes.

-
-
-
-

-

icon-2x (32px)

-
-
-

-

icon-3x (48px)

-
-
-

-

icon-4x (64px)

-
-
- - -
<i class="icon icon-2x icon-mail"></i>
-
- -
- -
-

Labels

-
-

Labels are formatted text tags for highlighted, informative information.

-
-
-
- default label - primary label - secondary label - success label - warning label - error label -
-
-
-

Add the label class to <span> or <small> elements. You can add another class label-primary, label-secondary, label-success, label-warning and label-error for colored labels.

-
-
-
- default label - primary label - secondary label - success label - warning label - error label -
-
-
-

Add the label-rounded class to have rounded labels.

-
- - -
<span class="label">default label</span>
-<span class="label label-primary">primary label</span>
-
- -
- -
-

Codes

-
-

Codes are inline and multiline code snippets.

-

For inline code, you can use the element <code>. For multiline code snippet blocks, you can use <pre> with the code class as a container, and add <code> inside it. The data-lang attribute is rendered as the language name in the top right.

-
- -
<!-- code snippets -->
-<button class="btn">
-  Submit
-</button>
-
- - -
<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- code snippets --&gt;</span>
-&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn&quot;</span>&gt;
-  Submit
-&lt;<span class="tag">/button</span>&gt;
-</code></pre>
-
- -
- -
-

Media

-
-

Media includes responsive images, figures and video classes.

-
-

Images

-
-

Add the img-responsive class to <img> elements. The images will scale with the parent sizes.

-
-
-
- macOS El Capitan Wallpaper -
-
- -
-

Add the img-fit-contain or img-fit-cover class to <img> or <video> elements. The media will crop itself to fit inside the element (and you don't need another container). This feature can replace the background image trick. Microsoft Edge support is shipped.

-
-
-
-
- macOS Yosemite Wallpaper -
img-fit-contain
-
-
-
-
- macOS Yosemite Wallpaper -
img-fit-cover
-
-
-
- -
<img src="img/osx-el-capitan.jpg" class="img-responsive ..." alt="...">
-<img src="img/osx-el-capitan.jpg" class="img-fit-contain ..." alt="...">
-<img src="img/osx-el-capitan.jpg" class="img-fit-cover ..." alt="...">
-
- -
-

You can use the element <figure> for an image with a caption. Add the figure class to <figure> element. The images with the img-responsive class will be responsive. And the included class figure-caption will provide basic style for caption. Also, you can use text-left, text-center and text-right for caption alignment.

-
-
-
-
- macOS Yosemite Wallpaper -
macOS Yosemite wallpaper
-
-
-
- -
<figure class="figure">
-  <img src="img/osx-yosemite-2.jpg" class="img-responsive ..." alt="...">
-  <figcaption class="figure-caption text-center">macOS Yosemite wallpaper</figcaption>
-</figure>
-
- -

Video

-
-

For responsive video, add a container with the video-responsive class. Insert any YouTube, Youku or other iframe/embed video inside the container. The ratio is 16:9 by default. You may add video-responsive-4-3 for 4:3 ratio video container or video-responsive-1-1 for 1:1 ratio.

-
-
-
-
-
+

Add the table class to any <table> element. The class will add padding, border and emphasized table header. Use the table-striped class to <table> to add zebra striped style. For hoverable table rows, you can add the table-hover class to enable hover style. +

+

Use the active class to make element highlighted.

+ 
<table class="table table-striped table-hover">
+  <thead>
+    <tr>
+      <th>name</th>
+      <th>genre</th>
+      <th>release date</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr class="active">
+      <td>The Shawshank Redemption</td>
+      <td>Crime, Drama</td>
+      <td>14 October 1994</td>
+    </tr>
+  </tbody>
+</table>
+
+
+

Buttons

+
+
+

Forms

+
+
+

Icons

+
+
+

Labels

+
+
+

Codes

+
+
+

Media

- -
-

For responsive video elements, you can add the video-responsive class directly to the video.

-
- - -
<div class="video-responsive video-responsive-4-3">
-  <iframe src="..." width="..." height="..." frameborder="0" allowfullscreen></iframe>
-</div>
-
-<video class="video-responsive" src="...">...</video>
-
-
- - -
-
- - - - + + + \ No newline at end of file diff --git a/docs/getting-started.html b/docs/getting-started.html index 97c85bc..0f3f1ff 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -189,7 +189,6 @@
  • Then create your project-name.scss file in the root folder. You can use project-name.scss to define your variables.
  • Compile the Sass file to CSS to get the custom version of Spectre.
    • - 
    // Example of project-name.scss
 // Define variables to override default ones
 $primary-color: #2e5bec;
@@ -199,7 +198,6 @@
 @import "node_modules/spectre.css/src/spectre";

    Alternatively, you can create custom _variables.scss and import it to project-name.scss.

    - 
    // Example of project-name.scss
 @import "variables";
 
@@ -208,7 +206,6 @@
 @import "node_modules/spectre.css/src/forms";

    Folder structure

    - 
    spectre/
 ├── dist/                           // Build folder
 │   ├── spectre-exp.css
@@ -338,7 +335,6 @@
               
  • @mixin button-variant($color: $primary-color);
    • 
               
  • @mixin button-outline-variant($color: $primary-color);
    • 
             
-            
             
    <!-- filled button with the success color -->
 .btn-success {
   @include button-variant($success-color);
@@ -355,11 +351,9 @@
             
    Spectre uses 4px as the unit size. Sizes of components are based on the unit size.
    
             
    Variables - Custom prefix
    
             
    There is also a way to add custom prefix to all CSS classes. You can use gulp-css-prefix plugin and add a new Gulp task to enable it.
    
-            
             
    npm install gulp-css-prefix
 
    
             
    To add spectre- to all classes, you can add the Gulp task to gulpfile.js file.
    
-            
             
    var cssPrefix = require('gulp-css-prefix');
 
 gulp.task('prefix', function() {
diff --git a/docs/src/contents/buttons.pug b/docs/src/contents/buttons.pug
new file mode 100644
index 0000000..e69de29
diff --git a/docs/src/contents/codes.pug b/docs/src/contents/codes.pug
new file mode 100644
index 0000000..e69de29
diff --git a/docs/src/contents/custom.pug b/docs/src/contents/custom.pug
index ce787f7..a21357e 100644
--- a/docs/src/contents/custom.pug
+++ b/docs/src/contents/custom.pug
@@ -64,7 +64,7 @@ ul
     |  to define your variables.
   li Compile the Sass file to CSS to get the custom version of Spectre.
 
-// importing
+//- importing
 pre.code(data-lang='Sass')
   code
     :highlight(lang="scss")
@@ -83,7 +83,7 @@ p
   code project-name.scss
   | .
 
-// custom variables
+//- custom variables
 pre.code(data-lang='Sass')
   code
     :highlight(lang="scss")
@@ -96,7 +96,7 @@ pre.code(data-lang='Sass')
 
 +docs-subheading('folders', 'Folder structure')
 
-// folder structure
+//- folder structure
 pre.code
   code
     :highlight
@@ -221,7 +221,7 @@ ul
     code $color
     | : $primary-color);
 
-// button mixins
+//- button mixins
 pre.code(data-lang='Sass')
   code
     :highlight(lang="scss")
@@ -256,7 +256,7 @@ p
   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
+//- custom prefix
 pre.code(data-lang='Bash')
   code
     :highlight(lang="Bash")
@@ -269,7 +269,7 @@ p
   code gulpfile.js
   |  file.
 
-// custom prefix
+//- custom prefix
 pre.code
   code
     :highlight(lang="JavaScript")
diff --git a/docs/src/contents/forms.pug b/docs/src/contents/forms.pug
new file mode 100644
index 0000000..e69de29
diff --git a/docs/src/contents/grid.pug b/docs/src/contents/grid.pug
new file mode 100644
index 0000000..e69de29
diff --git a/docs/src/contents/icons.pug b/docs/src/contents/icons.pug
new file mode 100644
index 0000000..e69de29
diff --git a/docs/src/contents/labels.pug b/docs/src/contents/labels.pug
new file mode 100644
index 0000000..e69de29
diff --git a/docs/src/contents/media.pug b/docs/src/contents/media.pug
new file mode 100644
index 0000000..e69de29
diff --git a/docs/src/contents/navbar.pug b/docs/src/contents/navbar.pug
new file mode 100644
index 0000000..e69de29
diff --git a/docs/src/contents/responsive.pug b/docs/src/contents/responsive.pug
new file mode 100644
index 0000000..e69de29
diff --git a/docs/src/contents/tables.pug b/docs/src/contents/tables.pug
new file mode 100644
index 0000000..a66aa34
--- /dev/null
+++ b/docs/src/contents/tables.pug
@@ -0,0 +1,64 @@
+p Tables include default styles for tables and data sets.
+
+.columns
+  .column.col-12
+    table.table.table-striped
+      thead
+        tr
+          th Name
+          th Genre
+          th Release date
+      tbody
+        tr
+          td The Shawshank Redemption
+          td Crime, Drama
+          td 14 October 1994
+        tr
+          td The Godfather
+          td Crime, Drama
+          td 24 March 1972
+        tr
+          td Schindler's List
+          td Biography, Drama, History
+          td 4 February 1994
+        tr
+          td Se7en
+          td Crime, Drama, Mystery
+          td 22 September 1995
+
+p
+  | Add the 
+  code table
+  |  class to any 
+  = ''
+  |  element. The class will add padding, border and emphasized table header. Use the 
+  code table-striped
+  |  class to 
+  = '
    '
+  |  to add zebra striped style. For hoverable table rows, you can add the 
+  code table-hover
+  |  class to enable hover style.
+p
+  | Use the 
+  code active
+  |  class to make  element highlighted.
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
    
+        
+          
+            
+            
+            
+          
+        
+        
+          
+            
+            
+            
+          
+        
+      
    namegenrerelease date
    The Shawshank RedemptionCrime, Drama14 October 1994
    
\ No newline at end of file
diff --git a/docs/src/contents/typography.pug b/docs/src/contents/typography.pug
new file mode 100644
index 0000000..47b980a
--- /dev/null
+++ b/docs/src/contents/typography.pug
@@ -0,0 +1,267 @@
+p
+  | Typography sets default styles for headings, paragraphs, semantic text, blockquote and lists elements.
+
++docs-subheading('typography-headings', 'Headings')
+
+.columns
+  .column.col-12
+    h1
+      | H1 Heading 
+      small.label 40px
+  .column.col-12
+    h2
+      | H2 Heading 
+      small.label 32px
+  .column.col-12
+    h3
+      | H3 Heading 
+      small.label 28px
+  .column.col-12
+    h4
+      | H4 Heading 
+      small.label 24px
+  .column.col-12
+    h5
+      | H5 Heading 
+      small.label 20px
+  .column.col-12
+    h6
+      | H6 Heading 
+      small.label 16px
+
+//- headings
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
    H1 Heading
    
+      
    H1 Heading 40px
    
+      H1 Heading
+
++docs-subheading('typography-paragraphs', 'Paragraphs')
+
+p
+  | Lorem ipsum dolor sit amet, consectetur 
+  a(href='#typography') adipiscing elit. Praesent risus leo, dictum in vehicula sit amet
+  | , feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.
+p
+  | Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.
+
+//- paragraphs
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
    Lorem ipsum dolor sit amet, ...
    
+      
    ...
    
+
++docs-subheading('typography-semantic-text', 'Semantic text elements')
+
+.columns
+  .column.col-6.col-xs-12
+    abbr(title='Internationalization') I18N
+    code.ml-2 abbr
+  .column.col-6.col-xs-12
+    strong Bold
+    code.ml-2 strong
+    code.ml-2 b
+  .column.col-6.col-xs-12
+    cite Citation
+    code.ml-2 cite
+  .column.col-6.col-xs-12
+    code Hello World!
+    code.ml-2 code
+  .column.col-6.col-xs-12
+    del Deleted
+    code.ml-2 del
+  .column.col-6.col-xs-12
+    em Emphasis
+    code.ml-2 em
+  .column.col-6.col-xs-12
+    i Italic
+    code.ml-2 i
+  .column.col-6.col-xs-12
+    ins Inserted
+    code.ml-2 ins
+  .column.col-6.col-xs-12
+    kbd Ctrl + S
+    code.ml-2 kbd
+  .column.col-6.col-xs-12
+    mark Highlighted
+    code.ml-2 mark
+  .column.col-6.col-xs-12
+    ruby
+      | 漢 
+      rt kan
+      | 字 
+      rt ji
+    code.ml-2 ruby
+  .column.col-6.col-xs-12
+    s Strikethrough
+    code.ml-2 s
+  .column.col-6.col-xs-12
+    samp Sample
+    code.ml-2 samp
+  .column.col-6.col-xs-12
+    | Text 
+    sub Subscripted
+    code.ml-2 sub
+  .column.col-6.col-xs-12
+    | Text 
+    sup Superscripted
+    code.ml-2 sup
+  .column.col-6.col-xs-12
+    time 20:00
+    code.ml-2 time
+  .column.col-6.col-xs-12
+    u Underline
+    code.ml-2 u
+  .column.col-6.col-xs-12
+    var x
+    |  = 
+    var y
+    |  + 2
+    code.ml-2 var
+
++docs-subheading('typography-east-asian', 'Optimized for East Asian fonts')
+
+p.h5
+  small(lang='zh-Hans') 你好
+  | , 
+  small(lang='ja') こんにちは
+  | , 
+  small(lang='ko') 안녕하세요
+
+p.h6 Chinese (Simplified)
+p(lang='zh-Hans') 革命不是请客吃饭，不是做文章，不是绘画绣花，不能那样雅致，那样从容不迫，“文质彬彬”，那样“温良恭俭让”。革命就是暴动，是一个阶级推翻一个阶级的暴烈的行动。
+p.h6 Chinese (Tranditional)
+p(lang='zh-Hant')
+  | 山不在高，有仙則名；水不在深，有龍則靈。斯是陋室，惟吾德馨。苔痕上階綠，草色入簾青；談笑有鴻儒，往來無白丁。可以調素琴，閱金經。無絲竹之亂耳，無案牘之勞形。南陽諸葛廬，西蜀子雲亭。孔子云：「何陋之有？」
+p.h6 Japanese
+p(lang='ja')
+  | 祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。おごれる人も久しからず。ただ春の夜の夢のごとし。たけき者も遂にはほろびぬ、ひとへ‌​に風の前の塵に同じ。
+p.h6 Korean
+p(lang='ko')
+  | 나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로, 어리석은 백성들이 말하고자 하는 바가 있어도, 끝내 제 뜻을 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨, 새로 스물 여덟 글자를 만드니, 사람마다 하여금 쉽게 익혀, 날마다 씀에 편하게 하고자 할 따름이다.
+p
+  | Use the 
+  code lang
+  |  attribute to the container element to have better Asian CJK (Chinese, Japanese and Korean) font support.
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
    革命不是请客吃饭，不是做文章……
    
+      
    祇園精舎の鐘の声、諸行無常の響きあり……
    
+      
    나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로……
    
+
+p
+  | And you can use the 
+  code cjk
+  |  class or the 
+  code lang
+  |  attribute to add spacing between underlines and strike-through text for better Chinese and Japanese readability.
+
+p(lang='ja')
+  u 祇園
+  u 精舎
+  | の鐘の声、諸行無常の響きあり。
+p(lang='ja')
+  del 祇園
+  del 精舎
+  | の鐘の声、諸行無常の響きあり。
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
    祇園精舎の鐘の声、諸行無常の響きあり。……
    
+      
    祇園精舎の鐘の声、諸行無常の響きあり。……
    
+
++docs-subheading('typography-fonts', 'Fonts')
+
+p
+  | Spectre sets the most common and best 
+  code font-family
+  |  for each OS with fallback support in old systems. There are also fonts targeted East Asian typography.
+
+pre.code
+  code
+    :highlight(lang="scss")
+      /* Western typography targeted */
+      font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+      /* Monospace typography targeted */
+      font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace;
+
+      /* Chinese (lang="zh-Hans" and lang="zh-Hant") targeted */
+      font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif;
+      /* Japanese (lang="ja") targeted */
+      font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Meiryo, "Helvetica Neue", sans-serif;
+      /* Korean (lang="ko") targeted */
+      font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Malgun Gothic", "Helvetica Neue", sans-serif;
+
++docs-subheading('typography-blockquote', 'Blockquote')
+
+blockquote
+  p
+    | The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life.
+  cite - Bill Gates
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
    
+        
    The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life. 
    
+        - Bill Gates
+      
    
+
++docs-subheading('typography-lists', 'Lists')
+
+.columns
+  .column.col-4.col-xs-12
+    ul.list
+      li list item 1
+      li
+        | list item 2
+        ul
+          li list item 2.1
+          li list item 2.2
+          li list item 2.3
+      li list item 3
+  .column.col-4.col-xs-12
+    ol.list
+      li list item 1
+      li
+        | list item 2
+        ol
+          li list item 2.1
+          li list item 2.2
+          li list item 2.3
+      li list item 3
+  .column.col-4.col-xs-12
+    dl.list
+      dt description list term 1
+      dd description list description 1
+      dt description list term 2
+      dd description list description 2
+      dt description list term 3
+      dd description list description 3
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+      
      
+        
    • list item 1
      • 
+        
    • list item 2
+          
        
+            
      • list item 2.1
        • 
+            
      • list item 2.2
        • 
+            
      • list item 2.3
        • 
+          
      
+        
      • 
+        
    • list item 3
      • 
+      
    
+
+      
+      
    
+        
    description list term
    
+        
    description list description
    
+      
    
\ No newline at end of file
diff --git a/docs/src/elements.pug b/docs/src/elements.pug
new file mode 100644
index 0000000..d7cf0f0
--- /dev/null
+++ b/docs/src/elements.pug
@@ -0,0 +1,41 @@
+extends _docs-layout.pug
+
+block variables
+  - var title = 'Elements - Spectre.css CSS Framework'
+  - var description = ''
+  - var current = 'elements'
+
+block docs-content
+  //- Typography
+  +docs-heading('typography', 'Typography')
+    include contents/typography.pug
+    
+  //- Tables
+  +docs-heading('tables', 'Tables')
+    include contents/tables.pug
+
+  //- Buttons
+  +docs-heading('buttons', 'Buttons')
+    include contents/buttons.pug
+
+  //- Forms
+  +docs-heading('forms', 'Forms')
+    include contents/forms.pug
+  
+  //- Icons
+  +docs-heading('icons', 'Icons')
+    include contents/icons.pug
+
+  //- Labels
+  +docs-heading('labels', 'Labels')
+    include contents/labels.pug
+
+  //- Codes
+  +docs-heading('codes', 'Codes')
+    include contents/codes.pug
+  
+  //- Media
+  +docs-heading('media', 'Media')
+    include contents/media.pug
+
+    
\ No newline at end of file
diff --git a/docs/src/getting-started.pug b/docs/src/getting-started.pug
index 19e1db0..d5e8ac3 100644
--- a/docs/src/getting-started.pug
+++ b/docs/src/getting-started.pug
@@ -6,11 +6,11 @@ block variables
   - var current = 'getting-started'
 
 block docs-content
-  //- introduction
+  //- Introduction
   +docs-heading('introduction', 'Introduction')
     include contents/introduction.pug
     
-  //- installation
+  //- Installation
   +docs-heading('installation', 'Installation')
     include contents/installation.pug
 
diff --git a/docs/src/scss/docs.scss b/docs/src/scss/docs.scss
index 342ca8c..e17f832 100644
--- a/docs/src/scss/docs.scss
+++ b/docs/src/scss/docs.scss
@@ -195,6 +195,10 @@
     font-size: $font-size-sm;
   }
 
+  .columns {
+    margin-bottom: 1rem;
+  }
+
   .column {
     padding: $layout-spacing;
   }
@@ -463,6 +467,10 @@
     .off-canvas-toggle {
       z-index: $zindex-3;
     }
+
+    .off-canvas-content {
+      width: 100%;
+    }
   }
 
   .docs-sidebar {
@@ -489,11 +497,9 @@
   }
 
   .docs-content {
-    &.off-canvas-content {
-      min-width: auto;
-      padding: 0 1.5rem;
-      width: 100%;
-    }
+    min-width: auto;
+    padding: 0 1.5rem;
+    width: 100%;
 
     .s-title,
     .s-subtitle {
@@ -568,9 +574,7 @@
   }
 
   .docs-content {
-    &.off-canvas-content {
-      padding: 0 .5rem;
-    }
+    padding: 0 .5rem;
 
     .docs-block {
       padding: $unit-2 $unit-h;
-- 
cgit v1.3.1-23-gd82d


From c59e31abc96642d4e54e56e3aa8167806a35f35e Mon Sep 17 00:00:00 2001
From: Yan Zhu 
Date: Sun, 3 Jun 2018 17:37:29 +0800
Subject: Update buttons and forms docs to Pug templates

---
 docs/elements.html               |  941 ++++++++++-
 docs/getting-started.html        |   36 +-
 docs/src/contents/buttons.pug    |  179 ++
 docs/src/contents/forms.pug      |  626 +++++++
 docs/src/contents/tables.pug     |   19 +-
 docs/src/contents/typography.pug |   22 +-
 package-lock.json                | 3349 --------------------------------------
 package.json                     |    8 +-
 8 files changed, 1725 insertions(+), 3455 deletions(-)
 delete mode 100644 package-lock.json

(limited to 'docs/src')

diff --git a/docs/elements.html b/docs/elements.html
index cf1c334..f971860 100644
--- a/docs/elements.html
+++ b/docs/elements.html
@@ -153,15 +153,17 @@
                 
    H6 Heading 16px
    - 
    <h1>H1 Heading</h1>
-<h1>H1 Heading <small class="label">40px</small></h1>
-<span class="h1">H1 Heading</span>
+            
    <h1>H1 Heading</h1>
+<h1>H1 Heading <small class="label">40px</small></h1>
+<span class="h1">H1 Heading</span>
 
    
             
    Paragraphs
    
-            
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.
    
+            
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+              Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.
+            
    
             
    Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.
    
-            
    <p>Lorem ipsum dolor sit amet, ...</p>
-<p>...</p>
+            
    <p>Lorem ipsum dolor sit amet, ...</p>
+<p>...</p>
 
    
             
    Semantic text elements
    
             
    
@@ -205,7 +207,7 @@

    Optimized for East Asian fonts

    -

    你好, こんにちは, 안녕하세요

    +

    你好, こんにちは,안녕하세요

    Chinese (Simplified)

    革命不是请客吃饭，不是做文章，不是绘画绣花，不能那样雅致，那样从容不迫，“文质彬彬”，那样“温良恭俭让”。革命就是暴动，是一个阶级推翻一个阶级的暴烈的行动。

    Chinese (Tranditional)

    @@ -215,9 +217,9 @@

    Korean

    나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로, 어리석은 백성들이 말하고자 하는 바가 있어도, 끝내 제 뜻을 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨, 새로 스물 여덟 글자를 만드니, 사람마다 하여금 쉽게 익혀, 날마다 씀에 편하게 하고자 할 따름이다.

    Use the lang attribute to the container element to have better Asian CJK (Chinese, Japanese and Korean) font support.

    - 
    <p lang="zh-Hans">革命不是请客吃饭，不是做文章……</p>
-<p lang="ja">祇園精舎の鐘の声、諸行無常の響きあり……</p>
-<p lang="ko">나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로……</p>
+            
    <p lang="zh-Hans">革命不是请客吃饭，不是做文章……</p>
+<p lang="ja">祇園精舎の鐘の声、諸行無常の響きあり……</p>
+<p lang="ko">나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로……</p>
 
    
             
    And you can use the cjk class or the lang attribute to add spacing between underlines and strike-through text for better Chinese and Japanese readability.
    
             
    
@@ -228,32 +230,34 @@
               祇園
               精舎の鐘の声、諸行無常の響きあり。
             
    
-            
    <p class="cjk"><u>祇園</u><u>精舎</u>の鐘の声、諸行無常の響きあり。……</p>
-<p class="cjk"><del>祇園</del><del>精舎</del>の鐘の声、諸行無常の響きあり。……</p>
+            
    <p class="cjk"><u>祇園</u><u>精舎</u>の鐘の声、諸行無常の響きあり。……</p>
+<p class="cjk"><del>祇園</del><del>精舎</del>の鐘の声、諸行無常の響きあり。……</p>
 
    
             
    Fonts
    
-            
    Spectre sets the most common and best font-family for each OS with fallback support in old systems. There are also fonts targeted East Asian typography.
    
+            
    Spectre sets the most common and best font-family for each OS with fallback support in old systems.
+              There are also fonts targeted East Asian typography.
+            
    
             
    /* Western typography targeted */
-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
 /* Monospace typography targeted */
-font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace;
+font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace;
 
 /* Chinese (lang="zh-Hans" and lang="zh-Hant") targeted */
-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif;
+font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif;
 /* Japanese (lang="ja") targeted */
-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Meiryo, "Helvetica Neue", sans-serif;
+font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Meiryo, "Helvetica Neue", sans-serif;
 /* Korean (lang="ko") targeted */
-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Malgun Gothic", "Helvetica Neue", sans-serif;
+font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Malgun Gothic", "Helvetica Neue", sans-serif;
 
    
             
    Blockquote
    
             
    
               
    The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life.
    
               - Bill Gates
             
    
-            
    <blockquote>
-  <p>The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life. </p>
-  <cite>- Bill Gates</cite>
-</blockquote>
+            
    <blockquote>
+  <p>The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life. </p>
+  <cite>- Bill Gates</cite>
+</blockquote>
 
    
             
    Lists
    
             
    
@@ -295,23 +299,23 @@
               
    
             
    <!-- unordered list -->
-<ul>
-  <li>list item 1</li>
-  <li>list item 2
-    <ul>
-      <li>list item 2.1</li>
-      <li>list item 2.2</li>
-      <li>list item 2.3</li>
-    </ul>
-  </li>
-  <li>list item 3</li>
-</ul>
+<ul>
+  <li>list item 1</li>
+  <li>list item 2
+    <ul>
+      <li>list item 2.1</li>
+      <li>list item 2.2</li>
+      <li>list item 2.3</li>
+    </ul>
+  </li>
+  <li>list item 3</li>
+</ul>
 
 <!-- description list -->
-<dl>
-  <dt>description list term</dt>
-  <dd>description list description</dd>
-</dl>
    +<dl> + <dt>description list term</dt> + <dd>description list description</dd> +</dl>

    Tables

    @@ -351,31 +355,858 @@
    -

    Add the table class to any <table> element. The class will add padding, border and emphasized table header. Use the table-striped class to <table> to add zebra striped style. For hoverable table rows, you can add the table-hover class to enable hover style. +

    Add the table class to any <table> element. + The class will add padding, border and emphasized table header. + Use the table-striped class to <table> to add zebra striped style. + For hoverable table rows, you can add the table-hover class to enable hover style.

    -

    Use the active class to make element highlighted.

    - 
    <table class="table table-striped table-hover">
-  <thead>
-    <tr>
-      <th>name</th>
-      <th>genre</th>
-      <th>release date</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr class="active">
-      <td>The Shawshank Redemption</td>
-      <td>Crime, Drama</td>
-      <td>14 October 1994</td>
-    </tr>
-  </tbody>
-</table>
    +

    Use the active class to make <tr> element highlighted.

    + 
    <table class="table table-striped table-hover">
+  <thead>
+    <tr>
+      <th>name</th>
+      <th>genre</th>
+      <th>release date</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr class="active">
+      <td>The Shawshank Redemption</td>
+      <td>Crime, Drama</td>
+      <td>14 October 1994</td>
+    </tr>
+  </tbody>
+</table>

    Buttons

    +

    Buttons include simple button styles for actions in different types and sizes.

    +
    +
    + + + +
    +
    +

    Add the btn class to <a>, <input> or <button> elements for a default button. + There are classes btn-primary and btn-link for predefined primary and link buttons. +

    + 
    <button class="btn">default button</button>
+<button class="btn btn-primary">primary button</button>
+<button class="btn btn-link">link button</button>
+
    +

    Button colors

    +
    +
    + + +
    +
    +

    Add the btn-success or btn-error class for success (green) or error (red) button color. + If you need more button colors, please use button mixins to create your own button color variants. +

    + 
    <button class="btn btn-success">success button</button>
+<button class="btn btn-error">error button</button>
+
    +

    Button sizes

    +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    +

    Add the btn-sm or btn-lg class for small or large button size. + Also, you can add the btn-block class for a full-width button. +

    + 
    <button class="btn btn-lg">large button</button>
+<button class="btn btn-sm">small button</button>
+
+<button class="btn btn-block">block button</button>
+
+<button class="btn btn-primary btn-lg"><i class="icon icon-arrow-left"></i> large</button>
+<button class="btn btn-primary"><i class="icon icon-arrow-left"></i> normal</button>
+<button class="btn btn-primary btn-sm"><i class="icon icon-arrow-left"></i> small</button>
+
    +

    Please note that you could use the btn-action class for a square button, or add another circle class for a round button, which is often used as a Float Action Button (FAB).

    +
    +
    + + + +
    +
    + + + +
    +
    + 
    <button class="btn btn-action"><i class="icon icon-arrow-left"></i></button>
+<button class="btn btn-action circle"><i class="icon icon-arrow-left"></i></button>
+
    +

    Button states

    +

    Add the active class for active button state style.

    +
    +
    + + + +
    +
    +

    Add the disabled class or the disabled attribute for disabled button state style.

    +
    +
    + + + +
    +
    + 
    <!-- buttons with disabled state -->
+<button class="btn disabled" tabindex="-1">disabled button</button>
+<button class="btn" disabled tabindex="-1">disabled button</button>
+
    +

    A button with the loading class can show loading indicator.

    +
    +
    + + + +
    +
    + 
    <!-- buttons with loading state -->
+<button class="btn loading">button</button>
+<button class="btn btn-primary loading">primary button</button>
+
    +

    Button groups

    +
    +
    +
    + + + +
    +
    +
    +
    + + + +
    +
    +
    +
    +
    +
    + + + +
    +
    +
    +
    + + + +
    +
    +
    +

    If you want to use buttons as a group, add the btn-group class to the container. + You can add the btn-group-block class for a full-width button group. +

    + 
    <div class="btn-group btn-group-block">
+  <button class="btn">first button</button>
+  <button class="btn">second button</button>
+  <button class="btn">third button</button>
+</div>

    Forms

    +

    Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch.

    +
    +
    +
    + + +
    +
    + + +
    +
    +
    + 
    <!-- form input control -->
+<div class="form-group">
+  <label class="form-label" for="input-example-1">Name</label>
+  <input class="form-input" type="text" id="input-example-1" placeholder="Name">
+</div>
+
    +
    +
    +
    + + +
    +
    +
    + 
    <!-- form textarea control -->
+<div class="form-group">
+  <label class="form-label" for="input-example-3">Message</label>
+  <textarea class="form-input" id="input-example-3" placeholder="Textarea" rows="3"></textarea>
+</div>
+
    +
    +
    +
    + +
    +
    + +
    +
    +
    + 
    <!-- form select control -->
+<div class="form-group">
+  <select class="form-select">
+    <option>Choose an option</option>
+    <option>Slack</option>
+    <option>Skype</option>
+    <option>Hipchat</option>
+  </select>
+</div>
+
    +
    +
    +
    +
    + + + +
    +
    +
    +
    + 
    <!-- form radio control -->
+<div class="form-group">
+  <label class="form-label">Gender</label>
+  <label class="form-radio">
+    <input type="radio" name="gender" checked>
+    <i class="form-icon"></i> Male
+  </label>
+  <label class="form-radio">
+    <input type="radio" name="gender">
+    <i class="form-icon"></i> Female
+  </label>
+</div>
+
    +
    +
    +
    + +
    +
    + +
    +
    +
    + 
    <!-- form switch control -->
+<div class="form-group">
+  <label class="form-switch">
+    <input type="checkbox">
+    <i class="form-icon"></i> Send me emails with news and tips
+  </label>
+</div>
+
    +
    +
    +
    + +
    +
    + +
    +
    +
    + 
    <!-- form checkbox control -->
+<div class="form-group">
+  <label class="form-checkbox">
+    <input type="checkbox">
+    <i class="form-icon"></i> Remember me
+  </label>
+</div>
+
    +

    You can use :indeterminate pseudo class for indeterminate state of checkboxes.

    +

    Horizontal forms

    +

    If you want to have a horizontal form, add the form-horizontal class to the <form> container. + And add the col-<1-12> and col-xs/sm/lg/xl-<1-12> class to the child elements for responsive form row layout. +

    +
    +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    +
    + + +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
    +
    + 
    <form class="form-horizontal">
+  <div class="form-group">
+    <div class="col-3 col-sm-12">
+      <label class="form-label" for="input-example-1">Name</label>
+    </div>
+    <div class="col-9 col-sm-12">
+      <input class="form-input" type="text" id="input-example-1" placeholder="Name">
+    </div>
+  </div>
+  <!-- form structure -->
+</form>
+
    +

    Form sizes

    +

    For smaller or larger input and select controls, you could add the input-sm/input-lg, select-sm/select-lg and label-sm/label-lg classes to the elements.

    +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    +

    You can add the input-sm/input-lg classes to the input-checkbox, input-radio and input-switch to have different sizes.

    +

    Form icons

    +

    Spectre Form components has Spectre Icons support.

    +

    Add a wrapper with the has-icon-left/has-icon-right class to <input> element. + And add the icon with form-icon class next to the <input>. +

    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    + 
    <!-- form input with Spectre icon -->
+<div class="has-icon-left">
+  <input type="text" class="form-input" placeholder="...">
+  <i class="form-icon icon icon-check"></i>
+</div>
+
    +

    You can use the loading class for loading or posting state.

    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    + 
    <!-- form input with loading icon -->
+<div class="has-icon-right">
+  <input type="text" class="form-input" placeholder="...">
+  <i class="form-icon loading"></i>
+</div>
+
    +

    Input types

    +
    +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +

    Input groups

    +
    +
    +
    + + +
    +
    +
    +
    slack.com/ + + +
    +
    +
    +
    +
    +
    + + +
    +
    +
    +
    slack.com/ + + +
    +
    +
    +
    +
    +
    + + +
    +
    +
    +
    + + +
    +
    +
    +
    +
    +
    + + +
    +
    +
    +
    slack.com/ + + +
    +
    +
    +

    If you want to attach text and button along with an input, add the input-group class to the input container. + And add the input-group-addon class to the text element and input-group-btn to the button element. +

    + 
    <!-- normal input group -->
+<div class="input-group">
+  <span class="input-group-addon">...</span>
+  <input type="text" class="form-input" placeholder="...">
+</div>
+
+<!-- large input group -->
+<div class="input-group">
+  <span class="input-group-addon addon-lg">...</span>
+  <input type="text" class="form-input input-lg" placeholder="...">
+</div>
+
+<!-- normal input group with button -->
+<div class="input-group">
+  <span class="input-group-addon">...</span>
+  <input type="text" class="form-input" placeholder="...">
+  <button class="btn btn-primary input-group-btn">Submit</button>
+</div>
+
    +

    Form validation styles

    +

    To use form validation styles, you can either add is-success or is-error class to the controls or add has-success or has-error class to parent elements. + Use the form-input-hint class to provide form validation success and error messages. +

    +
    +
    +
    + Input +
    + + +

    The name is valid.

    +
    +
    + + +

    Passwords must have at least 8 characters.

    +
    +
    + + +

    The Email address is unavailable.

    +
    +
    +
    + Select +
    + +

    The option is invalid.

    +
    +
    + +

    The option is available.

    +
    +
    +
    + Checkbox, Radio and Switch (Error state only) +
    + +
    +
    + + +
    +
    + +
    +
    +
    +
    + 
    <form>
+  <!-- form validation class: has-success -->
+  <div class="form-group has-success">
+    <label class="form-label" for="input-example-1">Name</label>
+    <input class="form-input" type="text" id="input-example-1" placeholder="...">
+    <p class="form-input-hint">The name is invalid.</p>
+  </div>
+
+  <!-- form validation class: is-success -->
+  <div class="form-group">
+    <label class="form-label" for="input-example-1">Name</label>
+    <input class="form-input is-success" type="text" id="input-example-1" placeholder="...">
+    <p class="form-input-hint">The name is invalid.</p>
+  </div>
+
+  <!-- form validation example for checkbox, radio and switch -->
+  <div class="form-group">
+    <label class="form-checkbox is-error">
+      <input type="checkbox">
+      <i class="form-icon"></i> Remember me
+    </label>
+  </div>
+</form>
+
    +

    Form disabled styles

    +

    + Add the disabled attribute to the element or <fieldset> for a disabled form components style.

    +
    +
    +
    +
    +
    + + +
    +
    + + + +
    +
    + +
    +
    + +
    +
    + + +
    +
    + +
    +
    +
    +
    +
    + 
    <form action="#forms">
+  <fieldset disabled>
+    <div class="form-group">
+      <label class="form-label" for="input-example-19">Name</label>
+      <input class="form-input" type="text" id="input-example-19" placeholder="Name">
+    </div>
+    <div class="form-group">
+      <label class="form-label">Gender</label>
+      <label class="form-radio">
+        <input type="radio" name="gender" disabled>
+        <i class="form-icon"></i> Male
+      </label>
+      <label class="form-radio">
+        <input type="radio" name="gender" disabled>
+        <i class="form-icon"></i> Female
+      </label>
+    </div>
+    <div class="form-group">
+      <select class="form-select" disabled>
+        <option>Choose an option</option>
+        <option>Slack</option>
+        <option>Skype</option>
+        <option>Hipchat</option>
+      </select>
+    </div>
+    <div class="form-group">
+      <label class="form-switch">
+        <input type="checkbox" disabled>
+        <i class="form-icon"></i> Send me emails with news and tips
+      </label>
+    </div>
+    <div class="form-group">
+      <label class="form-label" for="input-example-20">Message</label>
+      <textarea class="form-input" id="input-example-20" placeholder="Textarea" rows="3" disabled></textarea>
+    </div>
+    <div class="form-group">
+      <label class="form-checkbox">
+        <input type="checkbox" disabled>
+        <i class="form-icon"></i> Remember me
+      </label>
+    </div>
+  </fieldset>

    Icons

    diff --git a/docs/getting-started.html b/docs/getting-started.html index 0f3f1ff..4d9f7ee 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -142,15 +142,15 @@

    Download the compiled and minified Spectre CSS file (core ~10KB min+gzip):

    Download Spectre.css

    Include spectre.css located in /dist in your website or Web app . Also, you can add spectre-icons.css and spectre-exp.css accordingly.

    - 
    <link rel="stylesheet" href="spectre.min.css">
-<link rel="stylesheet" href="spectre-exp.min.css">
-<link rel="stylesheet" href="spectre-icons.min.css">
+            
    <link rel="stylesheet" href="spectre.min.css">
+<link rel="stylesheet" href="spectre-exp.min.css">
+<link rel="stylesheet" href="spectre-icons.min.css">
 
    
             
    Install from CDN
    
             
    Alternatively, you can use the unpkg or cdnjs CDN to load compiled Spectre.css.
    
-            
    <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">
+            
    <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">
 
    
             
    Install with NPM
    
             
    npm install spectre.css --save
@@ -191,19 +191,19 @@
             
             
    // Example of project-name.scss
 // Define variables to override default ones
-$primary-color: #2e5bec;
-$dark-color: #3e396b;
+$primary-color: #2e5bec;
+$dark-color: #3e396b;
 
 // Import full Spectre source code
-@import "node_modules/spectre.css/src/spectre";
+@import "node_modules/spectre.css/src/spectre";
 
    
             
    Alternatively, you can create custom _variables.scss and import it to project-name.scss.
    
             
    // Example of project-name.scss
-@import "variables";
+@import "variables";
 
 // Import only the needed components
-@import "node_modules/spectre.css/src/buttons";
-@import "node_modules/spectre.css/src/forms";
+@import "node_modules/spectre.css/src/buttons";
+@import "node_modules/spectre.css/src/forms";
 
    
             
    Folder structure
    
             
    spectre/
@@ -335,14 +335,14 @@
               
  • @mixin button-variant($color: $primary-color);
    • 
               
  • @mixin button-outline-variant($color: $primary-color);
    • 
             
-            
    <!-- filled button with the success color -->
-.btn-success {
-  @include button-variant($success-color);
+            
    <!-- 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);
+<!-- outlined button with the success color -->
+.btn-outline-success {
+  @include button-outline-variant($success-color);
 }
 
    
             
    Variables - Sizes
    
diff --git a/docs/src/contents/buttons.pug b/docs/src/contents/buttons.pug
index e69de29..8f8dbb1 100644
--- a/docs/src/contents/buttons.pug
+++ b/docs/src/contents/buttons.pug
@@ -0,0 +1,179 @@
+p Buttons include simple button styles for actions in different types and sizes.
+
+.columns
+  .column.col-12
+    button.btn default button
+    button.btn.btn-primary primary button
+    button.btn.btn-link link button
+
+p
+  | Add the #[code btn] class to #{''}, #{''} or #{'
+      
+      
+
++docs-subheading('buttons-colors', 'Button colors')
+
+.columns
+  .column.col-12
+    button.btn.btn-success success button
+    button.btn.btn-error error button
+
+p
+  | Add the #[code btn-success] or #[code btn-error] class for success (green) or error (red) button color.
+  | If you need more button colors, please use 
+  a(href="getting-started.html#variables-buttons") button mixins
+  |  to create your own button color variants.
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+      
+
++docs-subheading('buttons-sizes', 'Button sizes')
+
+.columns
+  .column.col-12
+    button.btn.btn-primary.btn-lg
+      | large 
+      i.icon.icon-arrow-down
+    button.btn.btn-primary.btn-lg large button
+  .column.col-12
+    button.btn.btn-primary
+      | normal 
+      i.icon.icon-arrow-down
+    button.btn.btn-primary normal button
+  .column.col-12
+    button.btn.btn-primary.btn-sm
+      | small 
+      i.icon.icon-arrow-down
+    button.btn.btn-primary.btn-sm small button
+
+
+p
+  | Add the #[code btn-sm] or #[code btn-lg] class for small or large button size. 
+  | Also, you can add the #[code btn-block] class for a full-width button.
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+      
+
+      
+
+      
+      
+      
+
+p
+  | Please note that you could use the #[code btn-action] class for a square button, or add another #[code circle] class for a round button, which is often used as a Float Action Button (FAB).
+
+.columns
+  .column.col-xs-12
+    button.btn.btn-action.btn-primary.btn-lg
+      i.icon.icon-menu
+    button.btn.btn-action.btn-primary
+      i.icon.icon-menu
+    button.btn.btn-action.btn-primary.btn-sm
+      i.icon.icon-menu
+  .column.col-xs-12
+    button.btn.btn-action.btn-primary.btn-lg.circle
+      i.icon.icon-arrow-up
+    button.btn.btn-action.btn-primary.circle
+      i.icon.icon-arrow-up
+    button.btn.btn-action.btn-primary.btn-sm.circle
+      i.icon.icon-arrow-up
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+      
+
++docs-subheading('buttons-states', 'Button states')
+
+p
+  | Add the #[code active] class for active button state style.
+
+.columns
+  .column.col-12
+    button.btn.active default active
+    button.btn.btn-primary.active primary active
+    button.btn.btn-link.active link active
+
+p
+  | Add the #[code disabled] class or the #[code disabled] attribute for disabled button state style.
+
+.columns
+  .column.col-12
+    button.btn.disabled(tabindex="-1") default disabled
+    button.btn.btn-primary(disabled="" tabindex="-1") primary disabled
+    button.btn.btn-link(disabled="" tabindex="-1") link disabled
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+      
+      
+
+p
+  | A button with the #[code loading] class can show loading indicator.
+
+.columns
+  .column.col-12
+    button.btn.loading default button
+    button.btn.btn-primary.loading primary button
+    button.btn.btn-link.loading link button
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+      
+      
+
++docs-subheading('buttons-groups', 'Button groups')
+
+.columns
+  .column.col-md-12
+    .btn-group
+      button.btn first button
+      button.btn second button
+      button.btn third button
+  .column.col-md-12
+    .btn-group.btn-group-block
+      button.btn.btn-primary first button
+      button.btn.btn-primary second button
+      button.btn.btn-primary third button
+.columns
+  .column.col-md-12
+    .btn-group
+      button.btn.btn-sm.active first button
+      button.btn.btn-sm second button
+      button.btn.btn-sm third button
+  .column.col-md-12
+    .btn-group.btn-group-block
+      button.btn.btn-primary.btn-sm.active first button
+      button.btn.btn-primary.btn-sm second button
+      button.btn.btn-primary.btn-sm third button
+    
+p
+  | If you want to use buttons as a group, add the #[code btn-group] class to the container.
+  | You can add the #[code btn-group-block] class for a full-width button group.
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
    
+        
+        
+        
+      
     
\ No newline at end of file
diff --git a/docs/src/contents/forms.pug b/docs/src/contents/forms.pug
index e69de29..bcfde1a 100644
--- a/docs/src/contents/forms.pug
+++ b/docs/src/contents/forms.pug
@@ -0,0 +1,626 @@
+p
+  | Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch.
+
+.columns
+  .column.col-6.col-xs-12
+    .form-group
+      label.form-label(for="input-example-1") Name
+      input#input-example-1.form-input(type="text" placeholder="Name")
+    .form-group
+      label.form-label(for="input-example-2") Email
+      input#input-example-2.form-input(type="email" placeholder="Email")
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+      
    
+        
+        
+      
    
+
+.columns
+  .column.col-6.col-xs-12
+    .form-group
+      label.form-label(for="input-example-3") Message
+      textarea#input-example-3.form-input(placeholder="Textarea" rows="3")
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+      
    
+        
+        
+      
    
+
+.columns
+  .column.col-6.col-xs-12
+    .form-group
+      select.form-select
+        option Choose an option
+        option Slack
+        option Skype
+        option Hipchat
+    .form-group
+      select.form-select(multiple="")
+        option Choose an option
+        option Slack
+        option Skype
+        option Hipchat
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+      
    
+        
+      
    
+
+.columns
+  .column.col-6.col-xs-12
+    form
+      .form-group
+        label.form-label Gender
+        label.form-radio
+          input(type="radio" name="gender" checked="")
+          i.form-icon
+          |  Male
+        label.form-radio
+          input(type="radio" name="gender")
+          i.form-icon
+          |  Female
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+      
    
+        
+        
+        
+      
    
+
+.columns
+  .column.col-6.col-xs-12
+    .form-group
+      label.form-switch
+        input(type="checkbox")
+        i.form-icon
+        |  Send me emails with news and tips
+    .form-group
+      label.form-switch
+        input(type="checkbox" checked="")
+        i.form-icon
+        |  Send me emails with news and tips
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+      
    
+        
+      
    
+
+.columns
+  .column.col-6.col-xs-12
+    .form-group
+      label.form-checkbox
+        input(type="checkbox")
+        i.form-icon
+        |  Remember me
+    .form-group
+      label.form-checkbox
+        input(type="checkbox" checked="")
+        i.form-icon
+        |  Remember me
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+      
    
+        
+      
    
+
+p
+  | You can use #[code :indeterminate] pseudo class for indeterminate state of checkboxes.
+
++docs-subheading('forms-horizontal', 'Horizontal forms')
+
+p
+  | If you want to have a horizontal form, add the #[code form-horizontal] class to the #{'
    '} container.
+  | And add the #[code col-<1-12>] and #[code col-xs/sm/lg/xl-<1-12>] class to the child elements for responsive form row layout.
+
+.columns
+  .column.col-9.col-sm-12
+    form.form-horizontal(action="#forms")
+      .form-group
+        .col-3.col-sm-12
+          label.form-label(for="input-example-4") Name
+        .col-9.col-sm-12
+          input#input-example-4.form-input(type="text" placeholder="Name")
+      .form-group
+        .col-3.col-sm-12
+          label.form-label(for="input-example-5") Email
+        .col-9.col-sm-12
+          input#input-example-5.form-input(type="email" placeholder="Email")
+      .form-group
+        .col-3.col-sm-12
+          label.form-label Gender
+        .col-9.col-sm-12
+          label.form-radio
+            input(type="radio" name="gender")
+            i.form-icon
+            |  Male
+          label.form-radio
+            input(type="radio" name="gender" checked="")
+            i.form-icon
+            |  Female
+      .form-group
+        .col-3.col-sm-12
+          label.form-label Source
+        .col-9.col-sm-12
+          select.form-select(multiple="")
+            option Slack
+            option Skype
+            option Hipchat
+      .form-group
+        .col-9.col-sm-12.col-ml-auto
+          label.form-switch
+            input(type="checkbox")
+            i.form-icon
+            |  Send me emails with news and tips
+      .form-group
+        .col-3.col-sm-12
+          label.form-label(for="input-example-6") Message
+        .col-9.col-sm-12
+          textarea#input-example-6.form-input(placeholder="Textarea" rows="3")
+      .form-group
+        .col-9.col-sm-12.col-ml-auto
+          label.form-checkbox
+            input(type="checkbox")
+            i.form-icon
+            |  Remember me
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+        
    
+          
    
+            
+          
    
+          
    
+            
+          
    
+        
    
+        
+      
    
+
++docs-subheading('forms-sizes', 'Form sizes')
+
+p
+  | For smaller or larger input and select controls, you could add the #[code input-sm]/#[code input-lg], #[code select-sm]/#[code select-lg] and #[code label-sm]/#[code label-lg] classes to the elements.
+
+.columns
+  .column.col-4.col-xs-12
+    label.form-label.label-sm Label
+  .column.col-4.col-xs-12
+    input.form-input.input-sm(type="text" placeholder="Name")
+  .column.col-4.col-xs-12
+    select.form-select.select-sm
+      option Choose an option
+      option Slack
+      option Skype
+      option Hipchat
+.columns
+  .column.col-4.col-xs-12
+    label.form-label.label-lg Label
+  .column.col-4.col-xs-12
+    input.form-input.input-lg(type="text" placeholder="Name")
+  .column.col-4.col-xs-12
+    select.form-select.select-lg
+      option Choose an option
+      option Slack
+      option Skype
+      option Hipchat
+
+p
+  | You can add the #[code input-sm]/#[code input-lg] classes to the input-checkbox, input-radio and input-switch to have different sizes.
+
++docs-subheading('forms-icons', 'Form icons')
+
+p
+  | Spectre Form components has 
+  a(href="#icons") Spectre Icons
+  |  support.
+p
+  | Add a wrapper with the #[code has-icon-left]/#[code has-icon-right] class to #{''} element.
+  | And add the icon with #[code form-icon] class next to the #{''}.
+
+.columns
+  .column.col-4.col-xs-12
+    .has-icon-left
+      input.form-input.input-sm(type="text" placeholder="Name")
+      i.form-icon.icon.icon-arrow-right
+  .column.col-4.col-xs-12
+    .has-icon-left.tooltip(data-tooltip="Lorem ipsum dolor sit amet")
+      input.form-input(type="text" placeholder="Name")
+      i.form-icon.icon.icon-arrow-right
+  .column.col-4.col-xs-12
+    .has-icon-left
+      input.form-input.input-lg(type="text" placeholder="Name")
+      i.form-icon.icon.icon-arrow-right
+.columns
+  .column.col-4.col-xs-12
+    .has-icon-right
+      input.form-input.input-sm(type="text" placeholder="Name")
+      i.form-icon.icon.icon-check
+  .column.col-4.col-xs-12
+    .has-icon-right
+      input.form-input(type="text" placeholder="Name")
+      i.form-icon.icon.icon-check
+  .column.col-4.col-xs-12
+    .has-icon-right
+      input.form-input.input-lg(type="text" placeholder="Name")
+      i.form-icon.icon.icon-check
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+      
    
+        
+        
+      
    
+
+p
+  | You can use the #[code loading] class for loading or posting state.
+
+.columns
+  .column.col-4.col-xs-12
+    .has-icon-right
+      input.form-input.input-sm(type="text" placeholder="Name")
+      i.form-icon.loading
+  .column.col-4.col-xs-12
+    .has-icon-right
+      input.form-input(type="text" placeholder="Name")
+      i.form-icon.loading
+  .column.col-4.col-xs-12
+    .has-icon-right
+      input.form-input.input-lg(type="text" placeholder="Name")
+      i.form-icon.loading
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+      
    
+        
+        
+      
    
+
++docs-subheading('forms-input', 'Input types')
+
+.columns
+  .column.col-9.col-sm-12
+    form.form-horizontal(action="#forms")
+      .form-group
+        .col-3
+          label.form-label(for="input-example-8") Email
+        .col-9
+          input#input-example-8.form-input(type="email" placeholder="Email" value="spectre@example.com" pattern="[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$")
+      .form-group
+        .col-3
+          label.form-label(for="input-example-9") URL
+        .col-9
+          input#input-example-9.form-input(type="url" placeholder="URL" value="https://github.com/picturepan2/spectre")
+      .form-group
+        .col-3
+          label.form-label(for="input-example-10") Search
+        .col-9
+          input#input-example-10.form-input(type="search" placeholder="Search")
+      .form-group
+        .col-3
+          label.form-label(for="input-example-11") Tel
+        .col-9
+          input#input-example-11.form-input(type="tel" placeholder="Tel" value="1-(888)-888-8888")
+      .form-group
+        .col-3
+          label.form-label(for="input-example-12") Password
+        .col-9
+          input#input-example-12.form-input(type="password" placeholder="Password" value="123456789")
+      .form-group
+        .col-3
+          label.form-label(for="input-example-13") Number
+        .col-9
+          input#input-example-13.form-input(type="number" placeholder="00" value="66")
+      .form-group
+        .col-3
+          label.form-label(for="input-example-14") Date
+        .col-9
+          input#input-example-14.form-input(type="date" value="2016-12-31")
+      .form-group
+        .col-3
+          label.form-label(for="input-example-15") Color
+        .col-9
+          input#input-example-15.form-input(type="color" value="#5755d9")
+      .form-group
+        .col-3
+          label.form-label(for="input-example-16") File
+        .col-9
+          input#input-example-16.form-input(type="file")
+
++docs-subheading('forms-input-groups', 'Input groups')
+
+.columns
+  .column.col-xs-12
+    .input-group
+      input.form-input.input-sm(type="text" placeholder="username")
+      select.form-select.select-sm
+        option Slack
+        option Skype
+        option Hipchat
+  .column.col-xs-12
+    .input-group
+      span.input-group-addon.addon-sm slack.com/
+      input.form-input.input-sm(type="text" placeholder="site name")
+      button.btn.btn-primary.input-group-btn.btn-sm Submit
+.columns
+  .column.col-xs-12
+    .input-group
+      input.form-input(type="text" placeholder="username")
+      select.form-select
+        option Slack
+        option Skype
+        option Hipchat
+  .column.col-xs-12
+    .input-group
+      span.input-group-addon slack.com/
+      input.form-input(type="text" placeholder="site name")
+      button.btn.btn-primary.input-group-btn Submit
+.columns
+  .column.col-xs-12
+    .input-group
+      label.form-switch
+        input(type="checkbox")
+        i.form-icon
+      input.form-input(type="text" placeholder="name")
+  .column.col-xs-12
+    .input-group
+      label.form-checkbox
+        input(type="checkbox")
+        i.form-icon
+      input.form-input(type="text" placeholder="name")
+.columns
+  .column.col-xs-12
+    .input-group
+      input.form-input.input-lg(type="text" placeholder="username")
+      select.form-select.select-lg
+        option Slack
+        option Skype
+        option Hipchat
+  .column.col-xs-12
+    .input-group
+      span.input-group-addon.addon-lg slack.com/
+      input.form-input.input-lg(type="text" placeholder="site name")
+      button.btn.btn-primary.input-group-btn.btn-lg Submit
+
+p
+  | If you want to attach text and button along with an input, add the #[code input-group] class to the input container.
+  | And add the #[code input-group-addon] class to the text element and #[code input-group-btn] to the button element.
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+      
    
+        ...
+        
+      
    
+
+      
+      
    
+        ...
+        
+      
    
+
+      
+      
    
+        ...
+        
+        
+      
    
+
++docs-subheading('forms-validation', 'Form validation styles')
+
+p
+  | To use form validation styles, you can either add #[code is-success] or #[code is-error] class to the controls or add #[code has-success] or #[code has-error] class to parent elements.
+  | Use the #[code form-input-hint] class to provide form validation success and error messages.
+
+.columns
+  .column.col-9.col-sm-12
+    fieldset
+      legend Input
+      .form-group
+        label.form-label(for="input-example-17") Name
+        input#input-example-17.form-input.is-success(type="text" placeholder="Name")
+        p.form-input-hint The name is valid.
+      .form-group.has-error
+        label.form-label(for="input-example-18") Password
+        input#input-example-18.form-input(type="password" placeholder="Password")
+        p.form-input-hint Passwords must have at least 8 characters.
+      .form-group
+        label.form-label(for="input-example-21") Email
+        input#input-example-21.form-input(type="text" placeholder="Email" pattern="[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$")
+        p.form-input-hint The Email address is unavailable.
+    fieldset
+      legend Select
+      .form-group
+        select.form-select.is-error
+          option Choose an option
+          option Slack
+          option Skype
+          option Hipchat
+        p.form-input-hint The option is invalid.
+      .form-group.has-success
+        select.form-select
+          option Choose an option
+          option Slack
+          option Skype
+          option Hipchat
+        p.form-input-hint The option is available.
+    fieldset
+      legend Checkbox, Radio and Switch (Error state only)
+      .form-group
+        label.form-checkbox.is-error
+          input(type="checkbox" checked="")
+          i.form-icon
+          |  I'm not a robot.
+      .form-group.has-error
+        label.form-radio
+          input(type="radio" name="gender" checked="")
+          i.form-icon
+          |  Male
+        label.form-radio
+          input(type="radio" name="gender")
+          i.form-icon
+          |  Female
+      .form-group
+        label.form-switch.is-error
+          input(type="checkbox" checked="")
+          i.form-icon
+          |  Send me emails with news and tips
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
    
+        
+        
    
+          
+          
+          
    The name is invalid.
    
+        
    
+
+        
+        
    
+          
+          
+          
    The name is invalid.
    
+        
    
+
+        
+        
    
+          
+        
    
+      
    
+
++docs-subheading('forms-disabled', 'Form disabled styles')
+
+p 
+  | Add the #[code disabled] attribute to the element or #{'
    '} for a disabled form components style.
+
+.columns
+  .column.col-6.col-xs-12
+    form(action="#forms")
+      fieldset(disabled="")
+        .form-group
+          label.form-label(for="input-example-19") Name
+          input#input-example-19.form-input(type="text" placeholder="Name")
+        .form-group
+          label.form-label Gender
+          label.form-radio
+            input(type="radio" name="gender" disabled="")
+            i.form-icon
+            |  Male
+          label.form-radio
+            input(type="radio" name="gender" disabled="")
+            i.form-icon
+            |  Female
+        .form-group
+          select.form-select(disabled="")
+            option Choose an option
+            option Slack
+            option Skype
+            option Hipchat
+        .form-group
+          label.form-switch
+            input(type="checkbox" disabled="")
+            i.form-icon
+            |  Send me emails with news and tips
+        .form-group
+          label.form-label(for="input-example-20") Message
+          textarea#input-example-20.form-input(placeholder="Textarea" rows="3" disabled="")
+        .form-group
+          label.form-checkbox
+            input(type="checkbox" disabled="")
+            i.form-icon
+            |  Remember me
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
    
+        
    
+          
    
+            
+            
+          
    
+          
    
+            
+            
+            
+          
    
+          
    
+            
+          
    
+          
    
+            
+          
    
+          
    
+            
+            
+          
    
+          
    
+            
+          
    
+        
    
\ No newline at end of file
diff --git a/docs/src/contents/tables.pug b/docs/src/contents/tables.pug
index a66aa34..64e4ffd 100644
--- a/docs/src/contents/tables.pug
+++ b/docs/src/contents/tables.pug
@@ -27,21 +27,12 @@ p Tables include default styles for tables and data sets.
           td 22 September 1995
 
 p
-  | Add the 
-  code table
-  |  class to any 
-  = ''
-  |  element. The class will add padding, border and emphasized table header. Use the 
-  code table-striped
-  |  class to 
-  = '
    '
-  |  to add zebra striped style. For hoverable table rows, you can add the 
-  code table-hover
-  |  class to enable hover style.
+  | Add the #[code table] class to any #{'
    '} element. 
+  | The class will add padding, border and emphasized table header. 
+  | Use the #[code table-striped] class to #{'
    '} to add zebra striped style.
+  | For hoverable table rows, you can add the #[code table-hover] class to enable hover style.
 p
-  | Use the 
-  code active
-  |  class to make  element highlighted.
+  | Use the #[code active] class to make #{''} element highlighted.
 
 pre.code(data-lang='HTML')
   code
diff --git a/docs/src/contents/typography.pug b/docs/src/contents/typography.pug
index 47b980a..28ffc17 100644
--- a/docs/src/contents/typography.pug
+++ b/docs/src/contents/typography.pug
@@ -40,9 +40,8 @@ pre.code(data-lang='HTML')
 +docs-subheading('typography-paragraphs', 'Paragraphs')
 
 p
-  | Lorem ipsum dolor sit amet, consectetur 
-  a(href='#typography') adipiscing elit. Praesent risus leo, dictum in vehicula sit amet
-  | , feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.
+  | Lorem ipsum dolor sit amet, consectetur #[a(href='#typography') adipiscing elit].
+  | Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.
 p
   | Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.
 
@@ -127,7 +126,7 @@ p.h5
   small(lang='zh-Hans') 你好
   | , 
   small(lang='ja') こんにちは
-  | , 
+  | ,
   small(lang='ko') 안녕하세요
 
 p.h6 Chinese (Simplified)
@@ -142,9 +141,7 @@ p.h6 Korean
 p(lang='ko')
   | 나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로, 어리석은 백성들이 말하고자 하는 바가 있어도, 끝내 제 뜻을 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨, 새로 스물 여덟 글자를 만드니, 사람마다 하여금 쉽게 익혀, 날마다 씀에 편하게 하고자 할 따름이다.
 p
-  | Use the 
-  code lang
-  |  attribute to the container element to have better Asian CJK (Chinese, Japanese and Korean) font support.
+  | Use the #[code lang] attribute to the container element to have better Asian CJK (Chinese, Japanese and Korean) font support.
 
 pre.code(data-lang='HTML')
   code
@@ -154,11 +151,7 @@ pre.code(data-lang='HTML')
       
    나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로……
    
 
 p
-  | And you can use the 
-  code cjk
-  |  class or the 
-  code lang
-  |  attribute to add spacing between underlines and strike-through text for better Chinese and Japanese readability.
+  | And you can use the #[code cjk] class or the #[code lang] attribute to add spacing between underlines and strike-through text for better Chinese and Japanese readability.
 
 p(lang='ja')
   u 祇園
@@ -178,9 +171,8 @@ pre.code(data-lang='HTML')
 +docs-subheading('typography-fonts', 'Fonts')
 
 p
-  | Spectre sets the most common and best 
-  code font-family
-  |  for each OS with fallback support in old systems. There are also fonts targeted East Asian typography.
+  | Spectre sets the most common and best #[code font-family] for each OS with fallback support in old systems.
+  | There are also fonts targeted East Asian typography.
 
 pre.code
   code
diff --git a/package-lock.json b/package-lock.json
deleted file mode 100644
index eb01640..0000000
--- a/package-lock.json
+++ /dev/null
@@ -1,3349 +0,0 @@
-{
-  "name": "spectre.css",
-  "version": "0.4.0",
-  "lockfileVersion": 1,
-  "requires": true,
-  "dependencies": {
-    "abbrev": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.0.tgz",
-      "integrity": "sha1-0FVMIlZjbi9W58LlrRg/hZQo2B8=",
-      "dev": true
-    },
-    "ajv": {
-      "version": "4.11.8",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-4.11.8.tgz",
-      "integrity": "sha1-gv+wKynmYq5TvcIK8VlHcGc5xTY=",
-      "dev": true,
-      "requires": {
-        "co": "4.6.0",
-        "json-stable-stringify": "1.0.1"
-      }
-    },
-    "amdefine": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
-      "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=",
-      "dev": true
-    },
-    "ansi-regex": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-      "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
-      "dev": true
-    },
-    "ansi-styles": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
-      "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
-      "dev": true
-    },
-    "aproba": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.1.2.tgz",
-      "integrity": "sha512-ZpYajIfO0j2cOFTO955KUMIKNmj6zhX8kVztMAxFsDaMwz+9Z9SV0uou2pC9HJqcfpffOsjnbrDMvkNy+9RXPw==",
-      "dev": true
-    },
-    "archy": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/archy/-/archy-1.0.0.tgz",
-      "integrity": "sha1-+cjBN1fMHde8N5rHeyxipcKGjEA=",
-      "dev": true
-    },
-    "are-we-there-yet": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.4.tgz",
-      "integrity": "sha1-u13KOCu5TwXhUZQ3PRb9O6HKEQ0=",
-      "dev": true,
-      "requires": {
-        "delegates": "1.0.0",
-        "readable-stream": "2.3.3"
-      },
-      "dependencies": {
-        "isarray": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
-          "dev": true
-        },
-        "readable-stream": {
-          "version": "2.3.3",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.3.tgz",
-          "integrity": "sha512-m+qzzcn7KUxEmd1gMbchF+Y2eIUbieUaxkWtptyHywrX0rE8QEYqPC07Vuy4Wm32/xE16NcdBctb8S0Xe/5IeQ==",
-          "dev": true,
-          "requires": {
-            "core-util-is": "1.0.2",
-            "inherits": "2.0.3",
-            "isarray": "1.0.0",
-            "process-nextick-args": "1.0.7",
-            "safe-buffer": "5.1.1",
-            "string_decoder": "1.0.3",
-            "util-deprecate": "1.0.2"
-          }
-        },
-        "string_decoder": {
-          "version": "1.0.3",
-          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
-          "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
-          "dev": true,
-          "requires": {
-            "safe-buffer": "5.1.1"
-          }
-        }
-      }
-    },
-    "arr-diff": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-2.0.0.tgz",
-      "integrity": "sha1-jzuCf5Vai9ZpaX5KQlasPOrjVs8=",
-      "dev": true,
-      "requires": {
-        "arr-flatten": "1.1.0"
-      }
-    },
-    "arr-flatten": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/arr-flatten/-/arr-flatten-1.1.0.tgz",
-      "integrity": "sha512-L3hKV5R/p5o81R7O02IGnwpDmkp6E982XhtbuwSe3O4qOtMMMtodicASA1Cny2U+aCXcNpml+m4dPsvsJ3jatg==",
-      "dev": true
-    },
-    "array-differ": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/array-differ/-/array-differ-1.0.0.tgz",
-      "integrity": "sha1-7/UuN1gknTO+QCuLuOVkuytdQDE=",
-      "dev": true
-    },
-    "array-each": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/array-each/-/array-each-1.0.1.tgz",
-      "integrity": "sha1-p5SvDAWrF1KEbudTofIRoFugxE8=",
-      "dev": true
-    },
-    "array-find-index": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/array-find-index/-/array-find-index-1.0.2.tgz",
-      "integrity": "sha1-3wEKoSh+Fku9pvlyOwqWoexBh6E=",
-      "dev": true
-    },
-    "array-slice": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/array-slice/-/array-slice-1.0.0.tgz",
-      "integrity": "sha1-5zA08A3MH0CHYAj9IP6ud71LfC8=",
-      "dev": true
-    },
-    "array-uniq": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz",
-      "integrity": "sha1-r2rId6Jcx/dOBYiUdThY39sk/bY=",
-      "dev": true
-    },
-    "array-unique": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.2.1.tgz",
-      "integrity": "sha1-odl8yvy8JiXMcPrc6zalDFiwGlM=",
-      "dev": true
-    },
-    "asn1": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.3.tgz",
-      "integrity": "sha1-2sh4dxPJlmhJ/IGAd36+nB3fO4Y=",
-      "dev": true
-    },
-    "assert-plus": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-0.2.0.tgz",
-      "integrity": "sha1-104bh+ev/A24qttwIfP+SBAasjQ=",
-      "dev": true
-    },
-    "async-foreach": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/async-foreach/-/async-foreach-0.1.3.tgz",
-      "integrity": "sha1-NhIfhFwFeBct5Bmpfb6x0W7DRUI=",
-      "dev": true
-    },
-    "asynckit": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=",
-      "dev": true
-    },
-    "autoprefixer": {
-      "version": "7.1.3",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-7.1.3.tgz",
-      "integrity": "sha512-zGy6aRrZjWhR+25n89jYkpLXutg6xdDGKKnVNzkfamnnhK3mYchkKj5GJR14aJiU0x4UqZ1+N728tkFNUL5N2g==",
-      "dev": true,
-      "requires": {
-        "browserslist": "2.4.0",
-        "caniuse-lite": "1.0.30000718",
-        "normalize-range": "0.1.2",
-        "num2fraction": "1.2.2",
-        "postcss": "6.0.10",
-        "postcss-value-parser": "3.3.0"
-      }
-    },
-    "aws-sign2": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.6.0.tgz",
-      "integrity": "sha1-FDQt0428yU0OW4fXY81jYSwOeU8=",
-      "dev": true
-    },
-    "aws4": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.6.0.tgz",
-      "integrity": "sha1-g+9cqGCysy5KDe7e6MdxudtXRx4=",
-      "dev": true
-    },
-    "balanced-match": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
-      "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
-      "dev": true
-    },
-    "bcrypt-pbkdf": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.1.tgz",
-      "integrity": "sha1-Y7xdy2EzG5K8Bf1SiVPDNGKgb40=",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "tweetnacl": "0.14.5"
-      }
-    },
-    "beeper": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/beeper/-/beeper-1.1.1.tgz",
-      "integrity": "sha1-5tXqjF2tABMEpwsiY4RH9pyy+Ak=",
-      "dev": true
-    },
-    "block-stream": {
-      "version": "0.0.9",
-      "resolved": "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz",
-      "integrity": "sha1-E+v+d4oDIFz+A3UUgeu0szAMEmo=",
-      "dev": true,
-      "requires": {
-        "inherits": "2.0.3"
-      }
-    },
-    "boom": {
-      "version": "2.10.1",
-      "resolved": "https://registry.npmjs.org/boom/-/boom-2.10.1.tgz",
-      "integrity": "sha1-OciRjO/1eZ+D+UkqhI9iWt0Mdm8=",
-      "dev": true,
-      "requires": {
-        "hoek": "2.16.3"
-      }
-    },
-    "brace-expansion": {
-      "version": "1.1.8",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.8.tgz",
-      "integrity": "sha1-wHshHHyVLsH479Uad+8NHTmQopI=",
-      "dev": true,
-      "requires": {
-        "balanced-match": "1.0.0",
-        "concat-map": "0.0.1"
-      }
-    },
-    "braces": {
-      "version": "1.8.5",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-1.8.5.tgz",
-      "integrity": "sha1-uneWLhLf+WnWt2cR6RS3N4V79qc=",
-      "dev": true,
-      "requires": {
-        "expand-range": "1.8.2",
-        "preserve": "0.2.0",
-        "repeat-element": "1.1.2"
-      }
-    },
-    "browserslist": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-2.4.0.tgz",
-      "integrity": "sha512-aM2Gt4x9bVlCUteADBS6JP0F+2tMWKM1jQzUulVROtdFWFIcIVvY76AJbr7GDqy0eDhn+PcnpzzivGxY4qiaKQ==",
-      "dev": true,
-      "requires": {
-        "caniuse-lite": "1.0.30000718",
-        "electron-to-chromium": "1.3.18"
-      }
-    },
-    "builtin-modules": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-1.1.1.tgz",
-      "integrity": "sha1-Jw8HbFpywC9bZaR9+Uxf46J4iS8=",
-      "dev": true
-    },
-    "camelcase": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-2.1.1.tgz",
-      "integrity": "sha1-fB0W1nmhu+WcoCys7PsBHiAfWh8=",
-      "dev": true
-    },
-    "camelcase-keys": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz",
-      "integrity": "sha1-MIvur/3ygRkFHvodkyITyRuPkuc=",
-      "dev": true,
-      "requires": {
-        "camelcase": "2.1.1",
-        "map-obj": "1.0.1"
-      }
-    },
-    "caniuse-lite": {
-      "version": "1.0.30000718",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000718.tgz",
-      "integrity": "sha1-DdJCkL6xExCy2A9rcKgjwqZab60=",
-      "dev": true
-    },
-    "caseless": {
-      "version": "0.12.0",
-      "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
-      "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=",
-      "dev": true
-    },
-    "chalk": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
-      "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
-      "dev": true,
-      "requires": {
-        "ansi-styles": "2.2.1",
-        "escape-string-regexp": "1.0.5",
-        "has-ansi": "2.0.0",
-        "strip-ansi": "3.0.1",
-        "supports-color": "2.0.0"
-      }
-    },
-    "clean-css": {
-      "version": "4.1.7",
-      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.1.7.tgz",
-      "integrity": "sha1-ua6k+FZ5iJzz6ui0A0nsTr390DI=",
-      "dev": true,
-      "requires": {
-        "source-map": "0.5.6"
-      }
-    },
-    "cliui": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/cliui/-/cliui-3.2.0.tgz",
-      "integrity": "sha1-EgYBU3qRbSmUD5NNo7SNWFo5IT0=",
-      "dev": true,
-      "requires": {
-        "string-width": "1.0.2",
-        "strip-ansi": "3.0.1",
-        "wrap-ansi": "2.1.0"
-      }
-    },
-    "clone": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.2.tgz",
-      "integrity": "sha1-Jgt6meux7f4kdTgXX3gyQ8sZ0Uk=",
-      "dev": true
-    },
-    "clone-stats": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/clone-stats/-/clone-stats-0.0.1.tgz",
-      "integrity": "sha1-uI+UqCzzi4eR1YBG6kAprYjKmdE=",
-      "dev": true
-    },
-    "co": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
-      "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=",
-      "dev": true
-    },
-    "code-point-at": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
-      "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
-      "dev": true
-    },
-    "color-convert": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.0.tgz",
-      "integrity": "sha1-Gsz5fdc5uYO/mU1W/sj5WFNkG3o=",
-      "dev": true,
-      "requires": {
-        "color-name": "1.1.3"
-      }
-    },
-    "color-name": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
-      "dev": true
-    },
-    "combined-stream": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.5.tgz",
-      "integrity": "sha1-k4NwpXtKUd6ix3wV1cX9+JUWQAk=",
-      "dev": true,
-      "requires": {
-        "delayed-stream": "1.0.0"
-      }
-    },
-    "commander": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-2.0.0.tgz",
-      "integrity": "sha1-0bhvkB+LZL2UG96tr5JFMDk76Sg=",
-      "dev": true
-    },
-    "concat-map": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
-      "dev": true
-    },
-    "console-control-strings": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
-      "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
-      "dev": true
-    },
-    "core-util-is": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
-      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
-      "dev": true
-    },
-    "cross-spawn": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-3.0.1.tgz",
-      "integrity": "sha1-ElYDfsufDF9549bvE14wdwGEuYI=",
-      "dev": true,
-      "requires": {
-        "lru-cache": "4.1.1",
-        "which": "1.3.0"
-      },
-      "dependencies": {
-        "lru-cache": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.1.tgz",
-          "integrity": "sha512-q4spe4KTfsAS1SUHLO0wz8Qiyf1+vMIAgpRYioFYDMNqKfHQbg+AVDH3i4fvpl71/P1L0dBl+fQi+P37UYf0ew==",
-          "dev": true,
-          "requires": {
-            "pseudomap": "1.0.2",
-            "yallist": "2.1.2"
-          }
-        }
-      }
-    },
-    "cryptiles": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-2.0.5.tgz",
-      "integrity": "sha1-O9/s3GCBR8HGcgL6KR59ylnqo7g=",
-      "dev": true,
-      "requires": {
-        "boom": "2.10.1"
-      }
-    },
-    "csscomb": {
-      "version": "3.1.8",
-      "resolved": "https://registry.npmjs.org/csscomb/-/csscomb-3.1.8.tgz",
-      "integrity": "sha1-qKc4iE9Am6817JRhr8UuHHW9I6I=",
-      "dev": true,
-      "requires": {
-        "commander": "2.0.0",
-        "csscomb-core": "3.0.0-3.1",
-        "gonzales-pe": "3.0.0-28",
-        "vow": "0.4.4"
-      }
-    },
-    "csscomb-core": {
-      "version": "3.0.0-3.1",
-      "resolved": "https://registry.npmjs.org/csscomb-core/-/csscomb-core-3.0.0-3.1.tgz",
-      "integrity": "sha1-tBHI18/g3z8v4d+E0b1kpvAEbGg=",
-      "dev": true,
-      "requires": {
-        "gonzales-pe": "3.0.0-28",
-        "minimatch": "0.2.12",
-        "vow": "0.4.4",
-        "vow-fs": "0.3.2"
-      },
-      "dependencies": {
-        "minimatch": {
-          "version": "0.2.12",
-          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-0.2.12.tgz",
-          "integrity": "sha1-6oKgEqxmLH3fqhRPHBR+aUb12vs=",
-          "dev": true,
-          "requires": {
-            "lru-cache": "2.7.3",
-            "sigmund": "1.0.1"
-          }
-        }
-      }
-    },
-    "currently-unhandled": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz",
-      "integrity": "sha1-mI3zP+qxke95mmE2nddsF635V+o=",
-      "dev": true,
-      "requires": {
-        "array-find-index": "1.0.2"
-      }
-    },
-    "dashdash": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
-      "integrity": "sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=",
-      "dev": true,
-      "requires": {
-        "assert-plus": "1.0.0"
-      },
-      "dependencies": {
-        "assert-plus": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
-          "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
-          "dev": true
-        }
-      }
-    },
-    "dateformat": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/dateformat/-/dateformat-2.0.0.tgz",
-      "integrity": "sha1-J0Pjq7XD/CRi5SfcpEXgTp9N7hc=",
-      "dev": true
-    },
-    "decamelize": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
-      "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=",
-      "dev": true
-    },
-    "defaults": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.3.tgz",
-      "integrity": "sha1-xlYFHpgX2f8I7YgUd/P+QBnz730=",
-      "dev": true,
-      "requires": {
-        "clone": "1.0.2"
-      }
-    },
-    "delayed-stream": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
-      "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
-      "dev": true
-    },
-    "delegates": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
-      "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
-      "dev": true
-    },
-    "deprecated": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/deprecated/-/deprecated-0.0.1.tgz",
-      "integrity": "sha1-+cmvVGSvoeepcUWKi97yqpTVuxk=",
-      "dev": true
-    },
-    "detect-file": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/detect-file/-/detect-file-0.1.0.tgz",
-      "integrity": "sha1-STXe39lIhkjgBrASlWbpOGcR6mM=",
-      "dev": true,
-      "requires": {
-        "fs-exists-sync": "0.1.0"
-      }
-    },
-    "duplexer2": {
-      "version": "0.0.2",
-      "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.0.2.tgz",
-      "integrity": "sha1-xhTc9n4vsUmVqRcR5aYX6KYKMds=",
-      "dev": true,
-      "requires": {
-        "readable-stream": "1.1.14"
-      }
-    },
-    "ecc-jsbn": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz",
-      "integrity": "sha1-D8c6ntXw1Tw4GTOYUj735UN3dQU=",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "jsbn": "0.1.1"
-      }
-    },
-    "electron-to-chromium": {
-      "version": "1.3.18",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.18.tgz",
-      "integrity": "sha1-PcyZ2j5rZl9qu8ccKK1Ros1zGpw=",
-      "dev": true
-    },
-    "end-of-stream": {
-      "version": "0.1.5",
-      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-0.1.5.tgz",
-      "integrity": "sha1-jhdyBsPICDfYVjLouTWd/osvbq8=",
-      "dev": true,
-      "requires": {
-        "once": "1.3.3"
-      }
-    },
-    "error-ex": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.1.tgz",
-      "integrity": "sha1-+FWobOYa3E6GIcPNoh56dhLDqNw=",
-      "dev": true,
-      "requires": {
-        "is-arrayish": "0.2.1"
-      }
-    },
-    "escape-string-regexp": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
-      "dev": true
-    },
-    "expand-brackets": {
-      "version": "0.1.5",
-      "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-0.1.5.tgz",
-      "integrity": "sha1-3wcoTjQqgHzXM6xa9yQR5YHRF3s=",
-      "dev": true,
-      "requires": {
-        "is-posix-bracket": "0.1.1"
-      }
-    },
-    "expand-range": {
-      "version": "1.8.2",
-      "resolved": "https://registry.npmjs.org/expand-range/-/expand-range-1.8.2.tgz",
-      "integrity": "sha1-opnv/TNf4nIeuujiV+x5ZE/IUzc=",
-      "dev": true,
-      "requires": {
-        "fill-range": "2.2.3"
-      }
-    },
-    "expand-tilde": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/expand-tilde/-/expand-tilde-1.2.2.tgz",
-      "integrity": "sha1-C4HrqJflo9MdHD0QL48BRB5VlEk=",
-      "dev": true,
-      "requires": {
-        "os-homedir": "1.0.2"
-      }
-    },
-    "extend": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.1.tgz",
-      "integrity": "sha1-p1Xqe8Gt/MWjHOfnYtuq3F5jZEQ=",
-      "dev": true
-    },
-    "extglob": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/extglob/-/extglob-0.3.2.tgz",
-      "integrity": "sha1-Lhj/PS9JqydlzskCPwEdqo2DSaE=",
-      "dev": true,
-      "requires": {
-        "is-extglob": "1.0.0"
-      }
-    },
-    "extsprintf": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
-      "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=",
-      "dev": true
-    },
-    "fancy-log": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/fancy-log/-/fancy-log-1.3.0.tgz",
-      "integrity": "sha1-Rb4X0Cu5kX1gzP/UmVyZnmyMmUg=",
-      "dev": true,
-      "requires": {
-        "chalk": "1.1.3",
-        "time-stamp": "1.1.0"
-      }
-    },
-    "filename-regex": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/filename-regex/-/filename-regex-2.0.1.tgz",
-      "integrity": "sha1-wcS5vuPglyXdsQa3XB4wH+LxiyY=",
-      "dev": true
-    },
-    "fill-range": {
-      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-2.2.3.tgz",
-      "integrity": "sha1-ULd9/X5Gm8dJJHCWNpn+eoSFpyM=",
-      "dev": true,
-      "requires": {
-        "is-number": "2.1.0",
-        "isobject": "2.1.0",
-        "randomatic": "1.1.7",
-        "repeat-element": "1.1.2",
-        "repeat-string": "1.6.1"
-      }
-    },
-    "find-index": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/find-index/-/find-index-0.1.1.tgz",
-      "integrity": "sha1-Z101iyyjiS15Whq0cjL4tuLg3eQ=",
-      "dev": true
-    },
-    "find-up": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz",
-      "integrity": "sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=",
-      "dev": true,
-      "requires": {
-        "path-exists": "2.1.0",
-        "pinkie-promise": "2.0.1"
-      }
-    },
-    "findup-sync": {
-      "version": "0.4.3",
-      "resolved": "https://registry.npmjs.org/findup-sync/-/findup-sync-0.4.3.tgz",
-      "integrity": "sha1-QAQ5Kee8YK3wt/SCfExudaDeyhI=",
-      "dev": true,
-      "requires": {
-        "detect-file": "0.1.0",
-        "is-glob": "2.0.1",
-        "micromatch": "2.3.11",
-        "resolve-dir": "0.1.1"
-      }
-    },
-    "fined": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/fined/-/fined-1.1.0.tgz",
-      "integrity": "sha1-s33IRLdqL15wgeiE98CuNE8VNHY=",
-      "dev": true,
-      "requires": {
-        "expand-tilde": "2.0.2",
-        "is-plain-object": "2.0.4",
-        "object.defaults": "1.1.0",
-        "object.pick": "1.3.0",
-        "parse-filepath": "1.0.1"
-      },
-      "dependencies": {
-        "expand-tilde": {
-          "version": "2.0.2",
-          "resolved": "https://registry.npmjs.org/expand-tilde/-/expand-tilde-2.0.2.tgz",
-          "integrity": "sha1-l+gBqgUt8CRU3kawK/YhZCzchQI=",
-          "dev": true,
-          "requires": {
-            "homedir-polyfill": "1.0.1"
-          }
-        }
-      }
-    },
-    "first-chunk-stream": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/first-chunk-stream/-/first-chunk-stream-1.0.0.tgz",
-      "integrity": "sha1-Wb+1DNkF9g18OUzT2ayqtOatk04=",
-      "dev": true
-    },
-    "flagged-respawn": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/flagged-respawn/-/flagged-respawn-0.3.2.tgz",
-      "integrity": "sha1-/xke3c1wiKZ1smEP/8l2vpuAdLU=",
-      "dev": true
-    },
-    "for-in": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
-      "integrity": "sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=",
-      "dev": true
-    },
-    "for-own": {
-      "version": "0.1.5",
-      "resolved": "https://registry.npmjs.org/for-own/-/for-own-0.1.5.tgz",
-      "integrity": "sha1-UmXGgaTylNq78XyVCbZ2OqhFEM4=",
-      "dev": true,
-      "requires": {
-        "for-in": "1.0.2"
-      }
-    },
-    "forever-agent": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
-      "integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=",
-      "dev": true
-    },
-    "form-data": {
-      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.1.4.tgz",
-      "integrity": "sha1-M8GDrPGTJ27KqYFDpp6Uv+4XUNE=",
-      "dev": true,
-      "requires": {
-        "asynckit": "0.4.0",
-        "combined-stream": "1.0.5",
-        "mime-types": "2.1.16"
-      }
-    },
-    "fs-exists-sync": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/fs-exists-sync/-/fs-exists-sync-0.1.0.tgz",
-      "integrity": "sha1-mC1ok6+RjnLQjeyehnP/K1qNat0=",
-      "dev": true
-    },
-    "fs.realpath": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
-      "dev": true
-    },
-    "fstream": {
-      "version": "1.0.11",
-      "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.11.tgz",
-      "integrity": "sha1-XB+x8RdHcRTwYyoOtLcbPLD9MXE=",
-      "dev": true,
-      "requires": {
-        "graceful-fs": "4.1.11",
-        "inherits": "2.0.3",
-        "mkdirp": "0.5.1",
-        "rimraf": "2.6.1"
-      },
-      "dependencies": {
-        "graceful-fs": {
-          "version": "4.1.11",
-          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
-          "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=",
-          "dev": true
-        }
-      }
-    },
-    "gauge": {
-      "version": "2.7.4",
-      "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
-      "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
-      "dev": true,
-      "requires": {
-        "aproba": "1.1.2",
-        "console-control-strings": "1.1.0",
-        "has-unicode": "2.0.1",
-        "object-assign": "4.1.1",
-        "signal-exit": "3.0.2",
-        "string-width": "1.0.2",
-        "strip-ansi": "3.0.1",
-        "wide-align": "1.1.2"
-      },
-      "dependencies": {
-        "object-assign": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-          "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
-          "dev": true
-        }
-      }
-    },
-    "gaze": {
-      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/gaze/-/gaze-0.5.2.tgz",
-      "integrity": "sha1-QLcJU30k0dRXZ9takIaJ3+aaxE8=",
-      "dev": true,
-      "requires": {
-        "globule": "0.1.0"
-      }
-    },
-    "get-caller-file": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-1.0.2.tgz",
-      "integrity": "sha1-9wLmMSfn4jHBYKgMFVSstw1QR+U=",
-      "dev": true
-    },
-    "get-stdin": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
-      "integrity": "sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4=",
-      "dev": true
-    },
-    "getpass": {
-      "version": "0.1.7",
-      "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz",
-      "integrity": "sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo=",
-      "dev": true,
-      "requires": {
-        "assert-plus": "1.0.0"
-      },
-      "dependencies": {
-        "assert-plus": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
-          "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
-          "dev": true
-        }
-      }
-    },
-    "glob": {
-      "version": "4.5.3",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-4.5.3.tgz",
-      "integrity": "sha1-xstz0yJsHv7wTePFbQEvAzd+4V8=",
-      "dev": true,
-      "requires": {
-        "inflight": "1.0.6",
-        "inherits": "2.0.3",
-        "minimatch": "2.0.10",
-        "once": "1.3.3"
-      }
-    },
-    "glob-base": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/glob-base/-/glob-base-0.3.0.tgz",
-      "integrity": "sha1-27Fk9iIbHAscz4Kuoyi0l98Oo8Q=",
-      "dev": true,
-      "requires": {
-        "glob-parent": "2.0.0",
-        "is-glob": "2.0.1"
-      }
-    },
-    "glob-parent": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-2.0.0.tgz",
-      "integrity": "sha1-gTg9ctsFT8zPUzbaqQLxgvbtuyg=",
-      "dev": true,
-      "requires": {
-        "is-glob": "2.0.1"
-      }
-    },
-    "glob-stream": {
-      "version": "3.1.18",
-      "resolved": "https://registry.npmjs.org/glob-stream/-/glob-stream-3.1.18.tgz",
-      "integrity": "sha1-kXCl8St5Awb9/lmPMT+PeVT9FDs=",
-      "dev": true,
-      "requires": {
-        "glob": "4.5.3",
-        "glob2base": "0.0.12",
-        "minimatch": "2.0.10",
-        "ordered-read-streams": "0.1.0",
-        "through2": "0.6.5",
-        "unique-stream": "1.0.0"
-      },
-      "dependencies": {
-        "readable-stream": {
-          "version": "1.0.34",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
-          "integrity": "sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=",
-          "dev": true,
-          "requires": {
-            "core-util-is": "1.0.2",
-            "inherits": "2.0.3",
-            "isarray": "0.0.1",
-            "string_decoder": "0.10.31"
-          }
-        },
-        "through2": {
-          "version": "0.6.5",
-          "resolved": "https://registry.npmjs.org/through2/-/through2-0.6.5.tgz",
-          "integrity": "sha1-QaucZ7KdVyCQcUEOHXp6lozTrUg=",
-          "dev": true,
-          "requires": {
-            "readable-stream": "1.0.34",
-            "xtend": "4.0.1"
-          }
-        }
-      }
-    },
-    "glob-watcher": {
-      "version": "0.0.6",
-      "resolved": "https://registry.npmjs.org/glob-watcher/-/glob-watcher-0.0.6.tgz",
-      "integrity": "sha1-uVtKjfdLOcgymLDAXJeLTZo7cQs=",
-      "dev": true,
-      "requires": {
-        "gaze": "0.5.2"
-      }
-    },
-    "glob2base": {
-      "version": "0.0.12",
-      "resolved": "https://registry.npmjs.org/glob2base/-/glob2base-0.0.12.tgz",
-      "integrity": "sha1-nUGbPijxLoOjYhZKJ3BVkiycDVY=",
-      "dev": true,
-      "requires": {
-        "find-index": "0.1.1"
-      }
-    },
-    "global-modules": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-0.2.3.tgz",
-      "integrity": "sha1-6lo77ULG1s6ZWk+KEmm12uIjgo0=",
-      "dev": true,
-      "requires": {
-        "global-prefix": "0.1.5",
-        "is-windows": "0.2.0"
-      }
-    },
-    "global-prefix": {
-      "version": "0.1.5",
-      "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-0.1.5.tgz",
-      "integrity": "sha1-jTvGuNo8qBEqFg2NSW/wRiv+948=",
-      "dev": true,
-      "requires": {
-        "homedir-polyfill": "1.0.1",
-        "ini": "1.3.4",
-        "is-windows": "0.2.0",
-        "which": "1.3.0"
-      }
-    },
-    "globule": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/globule/-/globule-0.1.0.tgz",
-      "integrity": "sha1-2cjt3h2nnRJaFRt5UzuXhnY0auU=",
-      "dev": true,
-      "requires": {
-        "glob": "3.1.21",
-        "lodash": "1.0.2",
-        "minimatch": "0.2.14"
-      },
-      "dependencies": {
-        "glob": {
-          "version": "3.1.21",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-3.1.21.tgz",
-          "integrity": "sha1-0p4KBV3qUTj00H7UDomC6DwgZs0=",
-          "dev": true,
-          "requires": {
-            "graceful-fs": "1.2.3",
-            "inherits": "1.0.2",
-            "minimatch": "0.2.14"
-          }
-        },
-        "graceful-fs": {
-          "version": "1.2.3",
-          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-1.2.3.tgz",
-          "integrity": "sha1-FaSAaldUfLLS2/J/QuiajDRRs2Q=",
-          "dev": true
-        },
-        "inherits": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/inherits/-/inherits-1.0.2.tgz",
-          "integrity": "sha1-ykMJ2t7mtUzAuNJH6NfHoJdb3Js=",
-          "dev": true
-        },
-        "minimatch": {
-          "version": "0.2.14",
-          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-0.2.14.tgz",
-          "integrity": "sha1-x054BXT2PG+aCQ6Q775u9TpqdWo=",
-          "dev": true,
-          "requires": {
-            "lru-cache": "2.7.3",
-            "sigmund": "1.0.1"
-          }
-        }
-      }
-    },
-    "glogg": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/glogg/-/glogg-1.0.0.tgz",
-      "integrity": "sha1-f+DxmfV6yQbPUS/urY+Q7kooT8U=",
-      "dev": true,
-      "requires": {
-        "sparkles": "1.0.0"
-      }
-    },
-    "gonzales-pe": {
-      "version": "3.0.0-28",
-      "resolved": "https://registry.npmjs.org/gonzales-pe/-/gonzales-pe-3.0.0-28.tgz",
-      "integrity": "sha1-3VC0HdFbaCooxA5fD/IAeQGsYr0=",
-      "dev": true
-    },
-    "graceful-fs": {
-      "version": "3.0.11",
-      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-3.0.11.tgz",
-      "integrity": "sha1-dhPHeKGv6mLyXGMKCG1/Osu92Bg=",
-      "dev": true,
-      "requires": {
-        "natives": "1.1.0"
-      }
-    },
-    "gulp": {
-      "version": "3.9.1",
-      "resolved": "https://registry.npmjs.org/gulp/-/gulp-3.9.1.tgz",
-      "integrity": "sha1-VxzkWSjdQK9lFPxAEYZgFsE4RbQ=",
-      "dev": true,
-      "requires": {
-        "archy": "1.0.0",
-        "chalk": "1.1.3",
-        "deprecated": "0.0.1",
-        "gulp-util": "3.0.8",
-        "interpret": "1.0.3",
-        "liftoff": "2.3.0",
-        "minimist": "1.2.0",
-        "orchestrator": "0.3.8",
-        "pretty-hrtime": "1.0.3",
-        "semver": "4.3.6",
-        "tildify": "1.2.0",
-        "v8flags": "2.1.1",
-        "vinyl-fs": "0.3.14"
-      }
-    },
-    "gulp-autoprefixer": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/gulp-autoprefixer/-/gulp-autoprefixer-4.0.0.tgz",
-      "integrity": "sha1-4AqMVxuF0GUWrCY0G+kN/Z/B6rA=",
-      "dev": true,
-      "requires": {
-        "autoprefixer": "7.1.3",
-        "gulp-util": "3.0.8",
-        "postcss": "6.0.10",
-        "through2": "2.0.3",
-        "vinyl-sourcemaps-apply": "0.2.1"
-      }
-    },
-    "gulp-clean-css": {
-      "version": "3.7.0",
-      "resolved": "https://registry.npmjs.org/gulp-clean-css/-/gulp-clean-css-3.7.0.tgz",
-      "integrity": "sha1-VLM1JtyJmTCUn7N7TKz4UcXV2Ts=",
-      "dev": true,
-      "requires": {
-        "clean-css": "4.1.7",
-        "gulp-util": "3.0.8",
-        "through2": "2.0.3",
-        "vinyl-sourcemaps-apply": "0.2.1"
-      }
-    },
-    "gulp-csscomb": {
-      "version": "3.0.8",
-      "resolved": "https://registry.npmjs.org/gulp-csscomb/-/gulp-csscomb-3.0.8.tgz",
-      "integrity": "sha1-3zSCSlgKTH0zUcHo67ateh1aibc=",
-      "dev": true,
-      "requires": {
-        "csscomb": "3.1.8",
-        "gulp-util": "3.0.8",
-        "through2": "2.0.3"
-      }
-    },
-    "gulp-rename": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/gulp-rename/-/gulp-rename-1.2.2.tgz",
-      "integrity": "sha1-OtRCh2PwXidk3sHGfYaNsnVoeBc=",
-      "dev": true
-    },
-    "gulp-sass": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/gulp-sass/-/gulp-sass-3.1.0.tgz",
-      "integrity": "sha1-U9xLaKH13f5EJKtMJHZVJpqLdLc=",
-      "dev": true,
-      "requires": {
-        "gulp-util": "3.0.8",
-        "lodash.clonedeep": "4.5.0",
-        "node-sass": "4.5.3",
-        "through2": "2.0.3",
-        "vinyl-sourcemaps-apply": "0.2.1"
-      }
-    },
-    "gulp-util": {
-      "version": "3.0.8",
-      "resolved": "https://registry.npmjs.org/gulp-util/-/gulp-util-3.0.8.tgz",
-      "integrity": "sha1-AFTh50RQLifATBh8PsxQXdVLu08=",
-      "dev": true,
-      "requires": {
-        "array-differ": "1.0.0",
-        "array-uniq": "1.0.3",
-        "beeper": "1.1.1",
-        "chalk": "1.1.3",
-        "dateformat": "2.0.0",
-        "fancy-log": "1.3.0",
-        "gulplog": "1.0.0",
-        "has-gulplog": "0.1.0",
-        "lodash._reescape": "3.0.0",
-        "lodash._reevaluate": "3.0.0",
-        "lodash._reinterpolate": "3.0.0",
-        "lodash.template": "3.6.2",
-        "minimist": "1.2.0",
-        "multipipe": "0.1.2",
-        "object-assign": "3.0.0",
-        "replace-ext": "0.0.1",
-        "through2": "2.0.3",
-        "vinyl": "0.5.3"
-      }
-    },
-    "gulplog": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/gulplog/-/gulplog-1.0.0.tgz",
-      "integrity": "sha1-4oxNRdBey77YGDY86PnFkmIp/+U=",
-      "dev": true,
-      "requires": {
-        "glogg": "1.0.0"
-      }
-    },
-    "har-schema": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-1.0.5.tgz",
-      "integrity": "sha1-0mMTX0MwfALGAq/I/pWXDAFRNp4=",
-      "dev": true
-    },
-    "har-validator": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-4.2.1.tgz",
-      "integrity": "sha1-M0gdDxu/9gDdID11gSpqX7oALio=",
-      "dev": true,
-      "requires": {
-        "ajv": "4.11.8",
-        "har-schema": "1.0.5"
-      }
-    },
-    "has-ansi": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
-      "integrity": "sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=",
-      "dev": true,
-      "requires": {
-        "ansi-regex": "2.1.1"
-      }
-    },
-    "has-flag": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-2.0.0.tgz",
-      "integrity": "sha1-6CB68cx7MNRGzHC3NLXovhj4jVE=",
-      "dev": true
-    },
-    "has-gulplog": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/has-gulplog/-/has-gulplog-0.1.0.tgz",
-      "integrity": "sha1-ZBTIKRNpfaUVkDl9r7EvIpZ4Ec4=",
-      "dev": true,
-      "requires": {
-        "sparkles": "1.0.0"
-      }
-    },
-    "has-unicode": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
-      "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
-      "dev": true
-    },
-    "hawk": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/hawk/-/hawk-3.1.3.tgz",
-      "integrity": "sha1-B4REvXwWQLD+VA0sm3PVlnjo4cQ=",
-      "dev": true,
-      "requires": {
-        "boom": "2.10.1",
-        "cryptiles": "2.0.5",
-        "hoek": "2.16.3",
-        "sntp": "1.0.9"
-      }
-    },
-    "hoek": {
-      "version": "2.16.3",
-      "resolved": "https://registry.npmjs.org/hoek/-/hoek-2.16.3.tgz",
-      "integrity": "sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0=",
-      "dev": true
-    },
-    "homedir-polyfill": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.1.tgz",
-      "integrity": "sha1-TCu8inWJmP7r9e1oWA921GdotLw=",
-      "dev": true,
-      "requires": {
-        "parse-passwd": "1.0.0"
-      }
-    },
-    "hosted-git-info": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.5.0.tgz",
-      "integrity": "sha512-pNgbURSuab90KbTqvRPsseaTxOJCZBD0a7t+haSN33piP9cCM4l0CqdzAif2hUqm716UovKB2ROmiabGAKVXyg==",
-      "dev": true
-    },
-    "http-signature": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.1.1.tgz",
-      "integrity": "sha1-33LiZwZs0Kxn+3at+OE0qPvPkb8=",
-      "dev": true,
-      "requires": {
-        "assert-plus": "0.2.0",
-        "jsprim": "1.4.1",
-        "sshpk": "1.13.1"
-      }
-    },
-    "in-publish": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/in-publish/-/in-publish-2.0.0.tgz",
-      "integrity": "sha1-4g/146KvwmkDILbcVSaCqcf631E=",
-      "dev": true
-    },
-    "indent-string": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-2.1.0.tgz",
-      "integrity": "sha1-ji1INIdCEhtKghi3oTfppSBJ3IA=",
-      "dev": true,
-      "requires": {
-        "repeating": "2.0.1"
-      }
-    },
-    "inflight": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
-      "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
-      "dev": true,
-      "requires": {
-        "once": "1.3.3",
-        "wrappy": "1.0.2"
-      }
-    },
-    "inherits": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
-      "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
-      "dev": true
-    },
-    "ini": {
-      "version": "1.3.4",
-      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.4.tgz",
-      "integrity": "sha1-BTfLedr1m1mhpRff9wbIbsA5Fi4=",
-      "dev": true
-    },
-    "interpret": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/interpret/-/interpret-1.0.3.tgz",
-      "integrity": "sha1-y8NcYu7uc/Gat7EKgBURQBr8D5A=",
-      "dev": true
-    },
-    "invert-kv": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-1.0.0.tgz",
-      "integrity": "sha1-EEqOSqym09jNFXqO+L+rLXo//bY=",
-      "dev": true
-    },
-    "is-absolute": {
-      "version": "0.2.6",
-      "resolved": "https://registry.npmjs.org/is-absolute/-/is-absolute-0.2.6.tgz",
-      "integrity": "sha1-IN5p89uULvLYe5wto28XIjWxtes=",
-      "dev": true,
-      "requires": {
-        "is-relative": "0.2.1",
-        "is-windows": "0.2.0"
-      }
-    },
-    "is-arrayish": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
-      "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=",
-      "dev": true
-    },
-    "is-buffer": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.5.tgz",
-      "integrity": "sha1-Hzsm72E7IUuIy8ojzGwB2Hlh7sw=",
-      "dev": true
-    },
-    "is-builtin-module": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-builtin-module/-/is-builtin-module-1.0.0.tgz",
-      "integrity": "sha1-VAVy0096wxGfj3bDDLwbHgN6/74=",
-      "dev": true,
-      "requires": {
-        "builtin-modules": "1.1.1"
-      }
-    },
-    "is-dotfile": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/is-dotfile/-/is-dotfile-1.0.3.tgz",
-      "integrity": "sha1-pqLzL/0t+wT1yiXs0Pa4PPeYoeE=",
-      "dev": true
-    },
-    "is-equal-shallow": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/is-equal-shallow/-/is-equal-shallow-0.1.3.tgz",
-      "integrity": "sha1-IjgJj8Ih3gvPpdnqxMRdY4qhxTQ=",
-      "dev": true,
-      "requires": {
-        "is-primitive": "2.0.0"
-      }
-    },
-    "is-extendable": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
-      "integrity": "sha1-YrEQ4omkcUGOPsNqYX1HLjAd/Ik=",
-      "dev": true
-    },
-    "is-extglob": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz",
-      "integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=",
-      "dev": true
-    },
-    "is-finite": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/is-finite/-/is-finite-1.0.2.tgz",
-      "integrity": "sha1-zGZ3aVYCvlUO8R6LSqYwU0K20Ko=",
-      "dev": true,
-      "requires": {
-        "number-is-nan": "1.0.1"
-      }
-    },
-    "is-fullwidth-code-point": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
-      "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
-      "dev": true,
-      "requires": {
-        "number-is-nan": "1.0.1"
-      }
-    },
-    "is-glob": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz",
-      "integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=",
-      "dev": true,
-      "requires": {
-        "is-extglob": "1.0.0"
-      }
-    },
-    "is-number": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-number/-/is-number-2.1.0.tgz",
-      "integrity": "sha1-Afy7s5NGOlSPL0ZszhbezknbkI8=",
-      "dev": true,
-      "requires": {
-        "kind-of": "3.2.2"
-      }
-    },
-    "is-plain-object": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
-      "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
-      "dev": true,
-      "requires": {
-        "isobject": "3.0.1"
-      },
-      "dependencies": {
-        "isobject": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
-          "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
-          "dev": true
-        }
-      }
-    },
-    "is-posix-bracket": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/is-posix-bracket/-/is-posix-bracket-0.1.1.tgz",
-      "integrity": "sha1-MzTceXdDaOkvAW5vvAqI9c1ua8Q=",
-      "dev": true
-    },
-    "is-primitive": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/is-primitive/-/is-primitive-2.0.0.tgz",
-      "integrity": "sha1-IHurkWOEmcB7Kt8kCkGochADRXU=",
-      "dev": true
-    },
-    "is-relative": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/is-relative/-/is-relative-0.2.1.tgz",
-      "integrity": "sha1-0n9MfVFtF1+2ENuEu+7yPDvJeqU=",
-      "dev": true,
-      "requires": {
-        "is-unc-path": "0.1.2"
-      }
-    },
-    "is-typedarray": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
-      "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=",
-      "dev": true
-    },
-    "is-unc-path": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/is-unc-path/-/is-unc-path-0.1.2.tgz",
-      "integrity": "sha1-arBTpyVzwQJQ/0FqOBTDUXivObk=",
-      "dev": true,
-      "requires": {
-        "unc-path-regex": "0.1.2"
-      }
-    },
-    "is-utf8": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.1.tgz",
-      "integrity": "sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=",
-      "dev": true
-    },
-    "is-windows": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-0.2.0.tgz",
-      "integrity": "sha1-3hqm1j6indJIc3tp8f+LgALSEIw=",
-      "dev": true
-    },
-    "isarray": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-      "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=",
-      "dev": true
-    },
-    "isexe": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-      "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=",
-      "dev": true
-    },
-    "isobject": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/isobject/-/isobject-2.1.0.tgz",
-      "integrity": "sha1-8GVWEJaj8dou9GJy+BXIQNh+DIk=",
-      "dev": true,
-      "requires": {
-        "isarray": "1.0.0"
-      },
-      "dependencies": {
-        "isarray": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
-          "dev": true
-        }
-      }
-    },
-    "isstream": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
-      "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=",
-      "dev": true
-    },
-    "js-base64": {
-      "version": "2.1.9",
-      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.1.9.tgz",
-      "integrity": "sha1-8OgK4DmkvWVLXygfyT8EqRSn/M4=",
-      "dev": true
-    },
-    "jsbn": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
-      "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM=",
-      "dev": true,
-      "optional": true
-    },
-    "json-schema": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz",
-      "integrity": "sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM=",
-      "dev": true
-    },
-    "json-stable-stringify": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz",
-      "integrity": "sha1-mnWdOcXy/1A/1TAGRu1EX4jE+a8=",
-      "dev": true,
-      "requires": {
-        "jsonify": "0.0.0"
-      }
-    },
-    "json-stringify-safe": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
-      "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=",
-      "dev": true
-    },
-    "jsonify": {
-      "version": "0.0.0",
-      "resolved": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.0.tgz",
-      "integrity": "sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM=",
-      "dev": true
-    },
-    "jsprim": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz",
-      "integrity": "sha1-MT5mvB5cwG5Di8G3SZwuXFastqI=",
-      "dev": true,
-      "requires": {
-        "assert-plus": "1.0.0",
-        "extsprintf": "1.3.0",
-        "json-schema": "0.2.3",
-        "verror": "1.10.0"
-      },
-      "dependencies": {
-        "assert-plus": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
-          "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
-          "dev": true
-        }
-      }
-    },
-    "kind-of": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-      "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-      "dev": true,
-      "requires": {
-        "is-buffer": "1.1.5"
-      }
-    },
-    "lcid": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/lcid/-/lcid-1.0.0.tgz",
-      "integrity": "sha1-MIrMr6C8SDo4Z7S28rlQYlHRuDU=",
-      "dev": true,
-      "requires": {
-        "invert-kv": "1.0.0"
-      }
-    },
-    "liftoff": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/liftoff/-/liftoff-2.3.0.tgz",
-      "integrity": "sha1-qY8v9nGD2Lp8+soQVIvX/wVQs4U=",
-      "dev": true,
-      "requires": {
-        "extend": "3.0.1",
-        "findup-sync": "0.4.3",
-        "fined": "1.1.0",
-        "flagged-respawn": "0.3.2",
-        "lodash.isplainobject": "4.0.6",
-        "lodash.isstring": "4.0.1",
-        "lodash.mapvalues": "4.6.0",
-        "rechoir": "0.6.2",
-        "resolve": "1.4.0"
-      }
-    },
-    "load-json-file": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
-      "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=",
-      "dev": true,
-      "requires": {
-        "graceful-fs": "4.1.11",
-        "parse-json": "2.2.0",
-        "pify": "2.3.0",
-        "pinkie-promise": "2.0.1",
-        "strip-bom": "2.0.0"
-      },
-      "dependencies": {
-        "graceful-fs": {
-          "version": "4.1.11",
-          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
-          "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=",
-          "dev": true
-        },
-        "strip-bom": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-2.0.0.tgz",
-          "integrity": "sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4=",
-          "dev": true,
-          "requires": {
-            "is-utf8": "0.2.1"
-          }
-        }
-      }
-    },
-    "lodash": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-1.0.2.tgz",
-      "integrity": "sha1-j1dWDIO1n8JwvT1WG2kAQ0MOJVE=",
-      "dev": true
-    },
-    "lodash._basecopy": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/lodash._basecopy/-/lodash._basecopy-3.0.1.tgz",
-      "integrity": "sha1-jaDmqHbPNEwK2KVIghEd08XHyjY=",
-      "dev": true
-    },
-    "lodash._basetostring": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/lodash._basetostring/-/lodash._basetostring-3.0.1.tgz",
-      "integrity": "sha1-0YYdh3+CSlL2aYMtyvPuFVZqB9U=",
-      "dev": true
-    },
-    "lodash._basevalues": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/lodash._basevalues/-/lodash._basevalues-3.0.0.tgz",
-      "integrity": "sha1-W3dXYoAr3j0yl1A+JjAIIP32Ybc=",
-      "dev": true
-    },
-    "lodash._getnative": {
-      "version": "3.9.1",
-      "resolved": "https://registry.npmjs.org/lodash._getnative/-/lodash._getnative-3.9.1.tgz",
-      "integrity": "sha1-VwvH3t5G1hzc3mh9ZdPuy6o6r/U=",
-      "dev": true
-    },
-    "lodash._isiterateecall": {
-      "version": "3.0.9",
-      "resolved": "https://registry.npmjs.org/lodash._isiterateecall/-/lodash._isiterateecall-3.0.9.tgz",
-      "integrity": "sha1-UgOte6Ql+uhCRg5pbbnPPmqsBXw=",
-      "dev": true
-    },
-    "lodash._reescape": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/lodash._reescape/-/lodash._reescape-3.0.0.tgz",
-      "integrity": "sha1-Kx1vXf4HyKNVdT5fJ/rH8c3hYWo=",
-      "dev": true
-    },
-    "lodash._reevaluate": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/lodash._reevaluate/-/lodash._reevaluate-3.0.0.tgz",
-      "integrity": "sha1-WLx0xAZklTrgsSTYBpltrKQx4u0=",
-      "dev": true
-    },
-    "lodash._reinterpolate": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
-      "integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=",
-      "dev": true
-    },
-    "lodash._root": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/lodash._root/-/lodash._root-3.0.1.tgz",
-      "integrity": "sha1-+6HEUkwZ7ppfgTa0YJ8BfPTe1pI=",
-      "dev": true
-    },
-    "lodash.assign": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz",
-      "integrity": "sha1-DZnzzNem0mHRm9rrkkUAXShYCOc=",
-      "dev": true
-    },
-    "lodash.clonedeep": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
-      "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=",
-      "dev": true
-    },
-    "lodash.escape": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/lodash.escape/-/lodash.escape-3.2.0.tgz",
-      "integrity": "sha1-mV7g3BjBtIzJLv+ucaEKq1tIdpg=",
-      "dev": true,
-      "requires": {
-        "lodash._root": "3.0.1"
-      }
-    },
-    "lodash.isarguments": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz",
-      "integrity": "sha1-L1c9hcaiQon/AGY7SRwdM4/zRYo=",
-      "dev": true
-    },
-    "lodash.isarray": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.4.tgz",
-      "integrity": "sha1-eeTriMNqgSKvhvhEqpvNhRtfu1U=",
-      "dev": true
-    },
-    "lodash.isplainobject": {
-      "version": "4.0.6",
-      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
-      "integrity": "sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs=",
-      "dev": true
-    },
-    "lodash.isstring": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz",
-      "integrity": "sha1-1SfftUVuynzJu5XV2ur4i6VKVFE=",
-      "dev": true
-    },
-    "lodash.keys": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-3.1.2.tgz",
-      "integrity": "sha1-TbwEcrFWvlCgsoaFXRvQsMZWCYo=",
-      "dev": true,
-      "requires": {
-        "lodash._getnative": "3.9.1",
-        "lodash.isarguments": "3.1.0",
-        "lodash.isarray": "3.0.4"
-      }
-    },
-    "lodash.mapvalues": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/lodash.mapvalues/-/lodash.mapvalues-4.6.0.tgz",
-      "integrity": "sha1-G6+lAF3p3W9PJmaMMMo3IwzJaJw=",
-      "dev": true
-    },
-    "lodash.mergewith": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/lodash.mergewith/-/lodash.mergewith-4.6.0.tgz",
-      "integrity": "sha1-FQzwoWeR9ZA7iJHqsVRgknS96lU=",
-      "dev": true
-    },
-    "lodash.restparam": {
-      "version": "3.6.1",
-      "resolved": "https://registry.npmjs.org/lodash.restparam/-/lodash.restparam-3.6.1.tgz",
-      "integrity": "sha1-k2pOMJ7zMKdkXtQUWYbIWuWyCAU=",
-      "dev": true
-    },
-    "lodash.template": {
-      "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-3.6.2.tgz",
-      "integrity": "sha1-+M3sxhaaJVvpCYrosMU9N4kx0U8=",
-      "dev": true,
-      "requires": {
-        "lodash._basecopy": "3.0.1",
-        "lodash._basetostring": "3.0.1",
-        "lodash._basevalues": "3.0.0",
-        "lodash._isiterateecall": "3.0.9",
-        "lodash._reinterpolate": "3.0.0",
-        "lodash.escape": "3.2.0",
-        "lodash.keys": "3.1.2",
-        "lodash.restparam": "3.6.1",
-        "lodash.templatesettings": "3.1.1"
-      }
-    },
-    "lodash.templatesettings": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-3.1.1.tgz",
-      "integrity": "sha1-+zB4RHU7Zrnxr6VOJix0UwfbqOU=",
-      "dev": true,
-      "requires": {
-        "lodash._reinterpolate": "3.0.0",
-        "lodash.escape": "3.2.0"
-      }
-    },
-    "loud-rejection": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/loud-rejection/-/loud-rejection-1.6.0.tgz",
-      "integrity": "sha1-W0b4AUft7leIcPCG0Eghz5mOVR8=",
-      "dev": true,
-      "requires": {
-        "currently-unhandled": "0.4.1",
-        "signal-exit": "3.0.2"
-      }
-    },
-    "lru-cache": {
-      "version": "2.7.3",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.7.3.tgz",
-      "integrity": "sha1-bUUk6LlV+V1PW1iFHOId1y+06VI=",
-      "dev": true
-    },
-    "map-cache": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/map-cache/-/map-cache-0.2.2.tgz",
-      "integrity": "sha1-wyq9C9ZSXZsFFkW7TyasXcmKDb8=",
-      "dev": true
-    },
-    "map-obj": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
-      "integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=",
-      "dev": true
-    },
-    "meow": {
-      "version": "3.7.0",
-      "resolved": "https://registry.npmjs.org/meow/-/meow-3.7.0.tgz",
-      "integrity": "sha1-cstmi0JSKCkKu/qFaJJYcwioAfs=",
-      "dev": true,
-      "requires": {
-        "camelcase-keys": "2.1.0",
-        "decamelize": "1.2.0",
-        "loud-rejection": "1.6.0",
-        "map-obj": "1.0.1",
-        "minimist": "1.2.0",
-        "normalize-package-data": "2.4.0",
-        "object-assign": "4.1.1",
-        "read-pkg-up": "1.0.1",
-        "redent": "1.0.0",
-        "trim-newlines": "1.0.0"
-      },
-      "dependencies": {
-        "object-assign": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-          "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
-          "dev": true
-        }
-      }
-    },
-    "micromatch": {
-      "version": "2.3.11",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-2.3.11.tgz",
-      "integrity": "sha1-hmd8l9FyCzY0MdBNDRUpO9OMFWU=",
-      "dev": true,
-      "requires": {
-        "arr-diff": "2.0.0",
-        "array-unique": "0.2.1",
-        "braces": "1.8.5",
-        "expand-brackets": "0.1.5",
-        "extglob": "0.3.2",
-        "filename-regex": "2.0.1",
-        "is-extglob": "1.0.0",
-        "is-glob": "2.0.1",
-        "kind-of": "3.2.2",
-        "normalize-path": "2.1.1",
-        "object.omit": "2.0.1",
-        "parse-glob": "3.0.4",
-        "regex-cache": "0.4.3"
-      }
-    },
-    "mime-db": {
-      "version": "1.29.0",
-      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.29.0.tgz",
-      "integrity": "sha1-SNJtI1WJZRcErFkWygYAGRQmaHg=",
-      "dev": true
-    },
-    "mime-types": {
-      "version": "2.1.16",
-      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.16.tgz",
-      "integrity": "sha1-K4WKUuXs1RbbiXrCvodIeDBpjiM=",
-      "dev": true,
-      "requires": {
-        "mime-db": "1.29.0"
-      }
-    },
-    "minimatch": {
-      "version": "2.0.10",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-2.0.10.tgz",
-      "integrity": "sha1-jQh8OcazjAAbl/ynzm0OHoCvusc=",
-      "dev": true,
-      "requires": {
-        "brace-expansion": "1.1.8"
-      }
-    },
-    "minimist": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
-      "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
-      "dev": true
-    },
-    "mkdirp": {
-      "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
-      "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
-      "dev": true,
-      "requires": {
-        "minimist": "0.0.8"
-      },
-      "dependencies": {
-        "minimist": {
-          "version": "0.0.8",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
-          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
-          "dev": true
-        }
-      }
-    },
-    "multipipe": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/multipipe/-/multipipe-0.1.2.tgz",
-      "integrity": "sha1-Ko8t33Du1WTf8tV/HhoTfZ8FB4s=",
-      "dev": true,
-      "requires": {
-        "duplexer2": "0.0.2"
-      }
-    },
-    "nan": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/nan/-/nan-2.6.2.tgz",
-      "integrity": "sha1-5P805slf37WuzAjeZZb0NgWn20U=",
-      "dev": true
-    },
-    "natives": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/natives/-/natives-1.1.0.tgz",
-      "integrity": "sha1-6f+EFBimsux6SV6TmYT3jxY+bjE=",
-      "dev": true
-    },
-    "node-gyp": {
-      "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-3.6.2.tgz",
-      "integrity": "sha1-m/vlRWIoYoSDjnUOrAUpWFP6HGA=",
-      "dev": true,
-      "requires": {
-        "fstream": "1.0.11",
-        "glob": "7.1.2",
-        "graceful-fs": "4.1.11",
-        "minimatch": "3.0.4",
-        "mkdirp": "0.5.1",
-        "nopt": "3.0.6",
-        "npmlog": "4.1.2",
-        "osenv": "0.1.4",
-        "request": "2.81.0",
-        "rimraf": "2.6.1",
-        "semver": "5.3.0",
-        "tar": "2.2.1",
-        "which": "1.3.0"
-      },
-      "dependencies": {
-        "glob": {
-          "version": "7.1.2",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
-          "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==",
-          "dev": true,
-          "requires": {
-            "fs.realpath": "1.0.0",
-            "inflight": "1.0.6",
-            "inherits": "2.0.3",
-            "minimatch": "3.0.4",
-            "once": "1.3.3",
-            "path-is-absolute": "1.0.1"
-          }
-        },
-        "graceful-fs": {
-          "version": "4.1.11",
-          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
-          "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=",
-          "dev": true
-        },
-        "minimatch": {
-          "version": "3.0.4",
-          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
-          "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
-          "dev": true,
-          "requires": {
-            "brace-expansion": "1.1.8"
-          }
-        },
-        "semver": {
-          "version": "5.3.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
-          "integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8=",
-          "dev": true
-        }
-      }
-    },
-    "node-sass": {
-      "version": "4.5.3",
-      "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.5.3.tgz",
-      "integrity": "sha1-0JydEXlkEjnRuX/8YjH9zsU+FWg=",
-      "dev": true,
-      "requires": {
-        "async-foreach": "0.1.3",
-        "chalk": "1.1.3",
-        "cross-spawn": "3.0.1",
-        "gaze": "1.1.2",
-        "get-stdin": "4.0.1",
-        "glob": "7.1.2",
-        "in-publish": "2.0.0",
-        "lodash.assign": "4.2.0",
-        "lodash.clonedeep": "4.5.0",
-        "lodash.mergewith": "4.6.0",
-        "meow": "3.7.0",
-        "mkdirp": "0.5.1",
-        "nan": "2.6.2",
-        "node-gyp": "3.6.2",
-        "npmlog": "4.1.2",
-        "request": "2.81.0",
-        "sass-graph": "2.2.4",
-        "stdout-stream": "1.4.0"
-      },
-      "dependencies": {
-        "gaze": {
-          "version": "1.1.2",
-          "resolved": "https://registry.npmjs.org/gaze/-/gaze-1.1.2.tgz",
-          "integrity": "sha1-hHIkZ3rbiHDWeSV+0ziP22HkAQU=",
-          "dev": true,
-          "requires": {
-            "globule": "1.2.0"
-          }
-        },
-        "glob": {
-          "version": "7.1.2",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
-          "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==",
-          "dev": true,
-          "requires": {
-            "fs.realpath": "1.0.0",
-            "inflight": "1.0.6",
-            "inherits": "2.0.3",
-            "minimatch": "3.0.4",
-            "once": "1.3.3",
-            "path-is-absolute": "1.0.1"
-          }
-        },
-        "globule": {
-          "version": "1.2.0",
-          "resolved": "https://registry.npmjs.org/globule/-/globule-1.2.0.tgz",
-          "integrity": "sha1-HcScaCLdnoovoAuiopUAboZkvQk=",
-          "dev": true,
-          "requires": {
-            "glob": "7.1.2",
-            "lodash": "4.17.4",
-            "minimatch": "3.0.4"
-          }
-        },
-        "lodash": {
-          "version": "4.17.4",
-          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz",
-          "integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4=",
-          "dev": true
-        },
-        "minimatch": {
-          "version": "3.0.4",
-          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
-          "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
-          "dev": true,
-          "requires": {
-            "brace-expansion": "1.1.8"
-          }
-        }
-      }
-    },
-    "node-uuid": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/node-uuid/-/node-uuid-1.4.0.tgz",
-      "integrity": "sha1-B/myM3Vy/2J1x3Xh1IUT86RdemU=",
-      "dev": true
-    },
-    "nopt": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/nopt/-/nopt-3.0.6.tgz",
-      "integrity": "sha1-xkZdvwirzU2zWTF/eaxopkayj/k=",
-      "dev": true,
-      "requires": {
-        "abbrev": "1.1.0"
-      }
-    },
-    "normalize-package-data": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.4.0.tgz",
-      "integrity": "sha512-9jjUFbTPfEy3R/ad/2oNbKtW9Hgovl5O1FvFWKkKblNXoN/Oou6+9+KKohPK13Yc3/TyunyWhJp6gvRNR/PPAw==",
-      "dev": true,
-      "requires": {
-        "hosted-git-info": "2.5.0",
-        "is-builtin-module": "1.0.0",
-        "semver": "4.3.6",
-        "validate-npm-package-license": "3.0.1"
-      }
-    },
-    "normalize-path": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz",
-      "integrity": "sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=",
-      "dev": true,
-      "requires": {
-        "remove-trailing-separator": "1.1.0"
-      }
-    },
-    "normalize-range": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
-      "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=",
-      "dev": true
-    },
-    "npmlog": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
-      "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
-      "dev": true,
-      "requires": {
-        "are-we-there-yet": "1.1.4",
-        "console-control-strings": "1.1.0",
-        "gauge": "2.7.4",
-        "set-blocking": "2.0.0"
-      }
-    },
-    "num2fraction": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz",
-      "integrity": "sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=",
-      "dev": true
-    },
-    "number-is-nan": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
-      "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
-      "dev": true
-    },
-    "oauth-sign": {
-      "version": "0.8.2",
-      "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.8.2.tgz",
-      "integrity": "sha1-Rqarfwrq2N6unsBWV4C31O/rnUM=",
-      "dev": true
-    },
-    "object-assign": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-3.0.0.tgz",
-      "integrity": "sha1-m+3VygiXlJvKR+f/QIBi1Un1h/I=",
-      "dev": true
-    },
-    "object.defaults": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/object.defaults/-/object.defaults-1.1.0.tgz",
-      "integrity": "sha1-On+GgzS0B96gbaFtiNXNKeQ1/s8=",
-      "dev": true,
-      "requires": {
-        "array-each": "1.0.1",
-        "array-slice": "1.0.0",
-        "for-own": "1.0.0",
-        "isobject": "3.0.1"
-      },
-      "dependencies": {
-        "for-own": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/for-own/-/for-own-1.0.0.tgz",
-          "integrity": "sha1-xjMy9BXO3EsE2/5wz4NklMU8tEs=",
-          "dev": true,
-          "requires": {
-            "for-in": "1.0.2"
-          }
-        },
-        "isobject": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
-          "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
-          "dev": true
-        }
-      }
-    },
-    "object.omit": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/object.omit/-/object.omit-2.0.1.tgz",
-      "integrity": "sha1-Gpx0SCnznbuFjHbKNXmuKlTr0fo=",
-      "dev": true,
-      "requires": {
-        "for-own": "0.1.5",
-        "is-extendable": "0.1.1"
-      }
-    },
-    "object.pick": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/object.pick/-/object.pick-1.3.0.tgz",
-      "integrity": "sha1-h6EKxMFpS9Lhy/U1kaZhQftd10c=",
-      "dev": true,
-      "requires": {
-        "isobject": "3.0.1"
-      },
-      "dependencies": {
-        "isobject": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
-          "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
-          "dev": true
-        }
-      }
-    },
-    "once": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/once/-/once-1.3.3.tgz",
-      "integrity": "sha1-suJhVXzkwxTsgwTz+oJmPkKXyiA=",
-      "dev": true,
-      "requires": {
-        "wrappy": "1.0.2"
-      }
-    },
-    "orchestrator": {
-      "version": "0.3.8",
-      "resolved": "https://registry.npmjs.org/orchestrator/-/orchestrator-0.3.8.tgz",
-      "integrity": "sha1-FOfp4nZPcxX7rBhOUGx6pt+UrX4=",
-      "dev": true,
-      "requires": {
-        "end-of-stream": "0.1.5",
-        "sequencify": "0.0.7",
-        "stream-consume": "0.1.0"
-      }
-    },
-    "ordered-read-streams": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/ordered-read-streams/-/ordered-read-streams-0.1.0.tgz",
-      "integrity": "sha1-/VZamvjrRHO6abbtijQ1LLVS8SY=",
-      "dev": true
-    },
-    "os-homedir": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
-      "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=",
-      "dev": true
-    },
-    "os-locale": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
-      "integrity": "sha1-IPnxeuKe00XoveWDsT0gCYA8FNk=",
-      "dev": true,
-      "requires": {
-        "lcid": "1.0.0"
-      }
-    },
-    "os-tmpdir": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
-      "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
-      "dev": true
-    },
-    "osenv": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.4.tgz",
-      "integrity": "sha1-Qv5tWVPfBsgGS+bxdsPQWqqjRkQ=",
-      "dev": true,
-      "requires": {
-        "os-homedir": "1.0.2",
-        "os-tmpdir": "1.0.2"
-      }
-    },
-    "parse-filepath": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/parse-filepath/-/parse-filepath-1.0.1.tgz",
-      "integrity": "sha1-FZ1hVdQ5BNFsEO9piRHaHpGWm3M=",
-      "dev": true,
-      "requires": {
-        "is-absolute": "0.2.6",
-        "map-cache": "0.2.2",
-        "path-root": "0.1.1"
-      }
-    },
-    "parse-glob": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/parse-glob/-/parse-glob-3.0.4.tgz",
-      "integrity": "sha1-ssN2z7EfNVE7rdFz7wu246OIORw=",
-      "dev": true,
-      "requires": {
-        "glob-base": "0.3.0",
-        "is-dotfile": "1.0.3",
-        "is-extglob": "1.0.0",
-        "is-glob": "2.0.1"
-      }
-    },
-    "parse-json": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz",
-      "integrity": "sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=",
-      "dev": true,
-      "requires": {
-        "error-ex": "1.3.1"
-      }
-    },
-    "parse-passwd": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/parse-passwd/-/parse-passwd-1.0.0.tgz",
-      "integrity": "sha1-bVuTSkVpk7I9N/QKOC1vFmao5cY=",
-      "dev": true
-    },
-    "path-exists": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-2.1.0.tgz",
-      "integrity": "sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=",
-      "dev": true,
-      "requires": {
-        "pinkie-promise": "2.0.1"
-      }
-    },
-    "path-is-absolute": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
-      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
-      "dev": true
-    },
-    "path-parse": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.5.tgz",
-      "integrity": "sha1-PBrfhx6pzWyUMbbqK9dKD/BVxME=",
-      "dev": true
-    },
-    "path-root": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/path-root/-/path-root-0.1.1.tgz",
-      "integrity": "sha1-mkpoFMrBwM1zNgqV8yCDyOpHRbc=",
-      "dev": true,
-      "requires": {
-        "path-root-regex": "0.1.2"
-      }
-    },
-    "path-root-regex": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/path-root-regex/-/path-root-regex-0.1.2.tgz",
-      "integrity": "sha1-v8zcjfWxLcUsi0PsONGNcsBLqW0=",
-      "dev": true
-    },
-    "path-type": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/path-type/-/path-type-1.1.0.tgz",
-      "integrity": "sha1-WcRPfuSR2nBNpBXaWkBwuk+P5EE=",
-      "dev": true,
-      "requires": {
-        "graceful-fs": "4.1.11",
-        "pify": "2.3.0",
-        "pinkie-promise": "2.0.1"
-      },
-      "dependencies": {
-        "graceful-fs": {
-          "version": "4.1.11",
-          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
-          "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=",
-          "dev": true
-        }
-      }
-    },
-    "performance-now": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-0.2.0.tgz",
-      "integrity": "sha1-M+8wxcd9TqIcWlOGnZG1bY8lVeU=",
-      "dev": true
-    },
-    "pify": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-      "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
-      "dev": true
-    },
-    "pinkie": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz",
-      "integrity": "sha1-clVrgM+g1IqXToDnckjoDtT3+HA=",
-      "dev": true
-    },
-    "pinkie-promise": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz",
-      "integrity": "sha1-ITXW36ejWMBprJsXh3YogihFD/o=",
-      "dev": true,
-      "requires": {
-        "pinkie": "2.0.4"
-      }
-    },
-    "postcss": {
-      "version": "6.0.10",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.10.tgz",
-      "integrity": "sha512-7WOpqea/cQHH1XUXdN1mqoFFmhigW3KAXJ+ssMOk/f6mKmwqFgqqdwsnjLGH+wuY+kwaJvT4whHcfKt5kWga0A==",
-      "dev": true,
-      "requires": {
-        "chalk": "2.1.0",
-        "source-map": "0.5.7",
-        "supports-color": "4.2.1"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "3.2.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.0.tgz",
-          "integrity": "sha512-NnSOmMEYtVR2JVMIGTzynRkkaxtiq1xnFBcdQD/DnNCYPoEPsVJhM98BDyaoNOQIi7p4okdi3E27eN7GQbsUug==",
-          "dev": true,
-          "requires": {
-            "color-convert": "1.9.0"
-          }
-        },
-        "chalk": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.1.0.tgz",
-          "integrity": "sha512-LUHGS/dge4ujbXMJrnihYMcL4AoOweGnw9Tp3kQuqy1Kx5c1qKjqvMJZ6nVJPMWJtKCTN72ZogH3oeSO9g9rXQ==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "3.2.0",
-            "escape-string-regexp": "1.0.5",
-            "supports-color": "4.2.1"
-          }
-        },
-        "source-map": {
-          "version": "0.5.7",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "4.2.1",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.2.1.tgz",
-          "integrity": "sha512-qxzYsob3yv6U+xMzPrv170y8AwGP7i74g+pbixCfD6rgso8BscLT2qXIuz6TpOaiJZ3mFgT5O9lyT9nMU4LfaA==",
-          "dev": true,
-          "requires": {
-            "has-flag": "2.0.0"
-          }
-        }
-      }
-    },
-    "postcss-value-parser": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz",
-      "integrity": "sha1-h/OPnxj3dKSrTIojL1xc6IcqnRU=",
-      "dev": true
-    },
-    "preserve": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/preserve/-/preserve-0.2.0.tgz",
-      "integrity": "sha1-gV7R9uvGWSb4ZbMQwHE7yzMVzks=",
-      "dev": true
-    },
-    "pretty-hrtime": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
-      "integrity": "sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=",
-      "dev": true
-    },
-    "process-nextick-args": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-1.0.7.tgz",
-      "integrity": "sha1-FQ4gt1ZZCtP5EJPyWk8q2L/zC6M=",
-      "dev": true
-    },
-    "pseudomap": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
-      "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM=",
-      "dev": true
-    },
-    "punycode": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
-      "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4=",
-      "dev": true
-    },
-    "qs": {
-      "version": "6.4.0",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.4.0.tgz",
-      "integrity": "sha1-E+JtKK1rD/qpExLNO/cI7TUecjM=",
-      "dev": true
-    },
-    "randomatic": {
-      "version": "1.1.7",
-      "resolved": "https://registry.npmjs.org/randomatic/-/randomatic-1.1.7.tgz",
-      "integrity": "sha512-D5JUjPyJbaJDkuAazpVnSfVkLlpeO3wDlPROTMLGKG1zMFNFRgrciKo1ltz/AzNTkqE0HzDx655QOL51N06how==",
-      "dev": true,
-      "requires": {
-        "is-number": "3.0.0",
-        "kind-of": "4.0.0"
-      },
-      "dependencies": {
-        "is-number": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
-          "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
-          "dev": true,
-          "requires": {
-            "kind-of": "3.2.2"
-          },
-          "dependencies": {
-            "kind-of": {
-              "version": "3.2.2",
-              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-              "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-              "dev": true,
-              "requires": {
-                "is-buffer": "1.1.5"
-              }
-            }
-          }
-        },
-        "kind-of": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-4.0.0.tgz",
-          "integrity": "sha1-IIE989cSkosgc3hpGkUGb65y3Vc=",
-          "dev": true,
-          "requires": {
-            "is-buffer": "1.1.5"
-          }
-        }
-      }
-    },
-    "read-pkg": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
-      "integrity": "sha1-9f+qXs0pyzHAR0vKfXVra7KePyg=",
-      "dev": true,
-      "requires": {
-        "load-json-file": "1.1.0",
-        "normalize-package-data": "2.4.0",
-        "path-type": "1.1.0"
-      }
-    },
-    "read-pkg-up": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-1.0.1.tgz",
-      "integrity": "sha1-nWPBMnbAZZGNV/ACpX9AobZD+wI=",
-      "dev": true,
-      "requires": {
-        "find-up": "1.1.2",
-        "read-pkg": "1.1.0"
-      }
-    },
-    "readable-stream": {
-      "version": "1.1.14",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz",
-      "integrity": "sha1-fPTFTvZI44EwhMY23SB54WbAgdk=",
-      "dev": true,
-      "requires": {
-        "core-util-is": "1.0.2",
-        "inherits": "2.0.3",
-        "isarray": "0.0.1",
-        "string_decoder": "0.10.31"
-      }
-    },
-    "rechoir": {
-      "version": "0.6.2",
-      "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.6.2.tgz",
-      "integrity": "sha1-hSBLVNuoLVdC4oyWdW70OvUOM4Q=",
-      "dev": true,
-      "requires": {
-        "resolve": "1.4.0"
-      }
-    },
-    "redent": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/redent/-/redent-1.0.0.tgz",
-      "integrity": "sha1-z5Fqsf1fHxbfsggi3W7H9zDCr94=",
-      "dev": true,
-      "requires": {
-        "indent-string": "2.1.0",
-        "strip-indent": "1.0.1"
-      }
-    },
-    "regex-cache": {
-      "version": "0.4.3",
-      "resolved": "https://registry.npmjs.org/regex-cache/-/regex-cache-0.4.3.tgz",
-      "integrity": "sha1-mxpsNdTQ3871cRrmUejp09cRQUU=",
-      "dev": true,
-      "requires": {
-        "is-equal-shallow": "0.1.3",
-        "is-primitive": "2.0.0"
-      }
-    },
-    "remove-trailing-separator": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz",
-      "integrity": "sha1-wkvOKig62tW8P1jg1IJJuSN52O8=",
-      "dev": true
-    },
-    "repeat-element": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/repeat-element/-/repeat-element-1.1.2.tgz",
-      "integrity": "sha1-7wiaF40Ug7quTZPrmLT55OEdmQo=",
-      "dev": true
-    },
-    "repeat-string": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz",
-      "integrity": "sha1-jcrkcOHIirwtYA//Sndihtp15jc=",
-      "dev": true
-    },
-    "repeating": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/repeating/-/repeating-2.0.1.tgz",
-      "integrity": "sha1-UhTFOpJtNVJwdSf7q0FdvAjQbdo=",
-      "dev": true,
-      "requires": {
-        "is-finite": "1.0.2"
-      }
-    },
-    "replace-ext": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/replace-ext/-/replace-ext-0.0.1.tgz",
-      "integrity": "sha1-KbvZIHinOfC8zitO5B6DeVNSKSQ=",
-      "dev": true
-    },
-    "request": {
-      "version": "2.81.0",
-      "resolved": "https://registry.npmjs.org/request/-/request-2.81.0.tgz",
-      "integrity": "sha1-xpKJRqDgbF+Nb4qTM0af/aRimKA=",
-      "dev": true,
-      "requires": {
-        "aws-sign2": "0.6.0",
-        "aws4": "1.6.0",
-        "caseless": "0.12.0",
-        "combined-stream": "1.0.5",
-        "extend": "3.0.1",
-        "forever-agent": "0.6.1",
-        "form-data": "2.1.4",
-        "har-validator": "4.2.1",
-        "hawk": "3.1.3",
-        "http-signature": "1.1.1",
-        "is-typedarray": "1.0.0",
-        "isstream": "0.1.2",
-        "json-stringify-safe": "5.0.1",
-        "mime-types": "2.1.16",
-        "oauth-sign": "0.8.2",
-        "performance-now": "0.2.0",
-        "qs": "6.4.0",
-        "safe-buffer": "5.1.1",
-        "stringstream": "0.0.5",
-        "tough-cookie": "2.3.2",
-        "tunnel-agent": "0.6.0",
-        "uuid": "3.1.0"
-      }
-    },
-    "require-directory": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
-      "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I=",
-      "dev": true
-    },
-    "require-main-filename": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-1.0.1.tgz",
-      "integrity": "sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE=",
-      "dev": true
-    },
-    "resolve": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.4.0.tgz",
-      "integrity": "sha512-aW7sVKPufyHqOmyyLzg/J+8606v5nevBgaliIlV7nUpVMsDnoBGV/cbSLNjZAg9q0Cfd/+easKVKQ8vOu8fn1Q==",
-      "dev": true,
-      "requires": {
-        "path-parse": "1.0.5"
-      }
-    },
-    "resolve-dir": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/resolve-dir/-/resolve-dir-0.1.1.tgz",
-      "integrity": "sha1-shklmlYC+sXFxJatiUpujMQwJh4=",
-      "dev": true,
-      "requires": {
-        "expand-tilde": "1.2.2",
-        "global-modules": "0.2.3"
-      }
-    },
-    "rimraf": {
-      "version": "2.6.1",
-      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.1.tgz",
-      "integrity": "sha1-wjOOxkPfeht/5cVPqG9XQopV8z0=",
-      "dev": true,
-      "requires": {
-        "glob": "7.1.2"
-      },
-      "dependencies": {
-        "glob": {
-          "version": "7.1.2",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
-          "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==",
-          "dev": true,
-          "requires": {
-            "fs.realpath": "1.0.0",
-            "inflight": "1.0.6",
-            "inherits": "2.0.3",
-            "minimatch": "3.0.4",
-            "once": "1.3.3",
-            "path-is-absolute": "1.0.1"
-          }
-        },
-        "minimatch": {
-          "version": "3.0.4",
-          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
-          "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
-          "dev": true,
-          "requires": {
-            "brace-expansion": "1.1.8"
-          }
-        }
-      }
-    },
-    "safe-buffer": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz",
-      "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==",
-      "dev": true
-    },
-    "sass-graph": {
-      "version": "2.2.4",
-      "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-2.2.4.tgz",
-      "integrity": "sha1-E/vWPNHK8JCLn9k0dq1DpR0eC0k=",
-      "dev": true,
-      "requires": {
-        "glob": "7.1.2",
-        "lodash": "4.17.4",
-        "scss-tokenizer": "0.2.3",
-        "yargs": "7.1.0"
-      },
-      "dependencies": {
-        "glob": {
-          "version": "7.1.2",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
-          "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==",
-          "dev": true,
-          "requires": {
-            "fs.realpath": "1.0.0",
-            "inflight": "1.0.6",
-            "inherits": "2.0.3",
-            "minimatch": "3.0.4",
-            "once": "1.3.3",
-            "path-is-absolute": "1.0.1"
-          }
-        },
-        "lodash": {
-          "version": "4.17.4",
-          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz",
-          "integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4=",
-          "dev": true
-        },
-        "minimatch": {
-          "version": "3.0.4",
-          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
-          "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
-          "dev": true,
-          "requires": {
-            "brace-expansion": "1.1.8"
-          }
-        }
-      }
-    },
-    "scss-tokenizer": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz",
-      "integrity": "sha1-jrBtualyMzOCTT9VMGQRSYR85dE=",
-      "dev": true,
-      "requires": {
-        "js-base64": "2.1.9",
-        "source-map": "0.4.4"
-      },
-      "dependencies": {
-        "source-map": {
-          "version": "0.4.4",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz",
-          "integrity": "sha1-66T12pwNyZneaAMti092FzZSA2s=",
-          "dev": true,
-          "requires": {
-            "amdefine": "1.0.1"
-          }
-        }
-      }
-    },
-    "semver": {
-      "version": "4.3.6",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-4.3.6.tgz",
-      "integrity": "sha1-MAvG4OhjdPe6YQaLWx7NV/xlMto=",
-      "dev": true
-    },
-    "sequencify": {
-      "version": "0.0.7",
-      "resolved": "https://registry.npmjs.org/sequencify/-/sequencify-0.0.7.tgz",
-      "integrity": "sha1-kM/xnQLgcCf9dn9erT57ldHnOAw=",
-      "dev": true
-    },
-    "set-blocking": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
-      "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=",
-      "dev": true
-    },
-    "sigmund": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.1.tgz",
-      "integrity": "sha1-P/IfGYytIXX587eBhT/ZTQ0ZtZA=",
-      "dev": true
-    },
-    "signal-exit": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
-      "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=",
-      "dev": true
-    },
-    "sntp": {
-      "version": "1.0.9",
-      "resolved": "https://registry.npmjs.org/sntp/-/sntp-1.0.9.tgz",
-      "integrity": "sha1-ZUEYTMkK7qbG57NeJlkIJEPGYZg=",
-      "dev": true,
-      "requires": {
-        "hoek": "2.16.3"
-      }
-    },
-    "source-map": {
-      "version": "0.5.6",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz",
-      "integrity": "sha1-dc449SvwczxafwwRjYEzSiu19BI=",
-      "dev": true
-    },
-    "sparkles": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/sparkles/-/sparkles-1.0.0.tgz",
-      "integrity": "sha1-Gsu/tZJDbRC76PeFt8xvgoFQEsM=",
-      "dev": true
-    },
-    "spdx-correct": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-1.0.2.tgz",
-      "integrity": "sha1-SzBz2TP/UfORLwOsVRlJikFQ20A=",
-      "dev": true,
-      "requires": {
-        "spdx-license-ids": "1.2.2"
-      }
-    },
-    "spdx-expression-parse": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-1.0.4.tgz",
-      "integrity": "sha1-m98vIOH0DtRH++JzJmGR/O1RYmw=",
-      "dev": true
-    },
-    "spdx-license-ids": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-1.2.2.tgz",
-      "integrity": "sha1-yd96NCRZSt5r0RkA1ZZpbcBrrFc=",
-      "dev": true
-    },
-    "sshpk": {
-      "version": "1.13.1",
-      "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.13.1.tgz",
-      "integrity": "sha1-US322mKHFEMW3EwY/hzx2UBzm+M=",
-      "dev": true,
-      "requires": {
-        "asn1": "0.2.3",
-        "assert-plus": "1.0.0",
-        "bcrypt-pbkdf": "1.0.1",
-        "dashdash": "1.14.1",
-        "ecc-jsbn": "0.1.1",
-        "getpass": "0.1.7",
-        "jsbn": "0.1.1",
-        "tweetnacl": "0.14.5"
-      },
-      "dependencies": {
-        "assert-plus": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
-          "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
-          "dev": true
-        }
-      }
-    },
-    "stdout-stream": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/stdout-stream/-/stdout-stream-1.4.0.tgz",
-      "integrity": "sha1-osfIWH5U2UJ+qe2zrD8s1SLfN4s=",
-      "dev": true,
-      "requires": {
-        "readable-stream": "2.3.3"
-      },
-      "dependencies": {
-        "isarray": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
-          "dev": true
-        },
-        "readable-stream": {
-          "version": "2.3.3",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.3.tgz",
-          "integrity": "sha512-m+qzzcn7KUxEmd1gMbchF+Y2eIUbieUaxkWtptyHywrX0rE8QEYqPC07Vuy4Wm32/xE16NcdBctb8S0Xe/5IeQ==",
-          "dev": true,
-          "requires": {
-            "core-util-is": "1.0.2",
-            "inherits": "2.0.3",
-            "isarray": "1.0.0",
-            "process-nextick-args": "1.0.7",
-            "safe-buffer": "5.1.1",
-            "string_decoder": "1.0.3",
-            "util-deprecate": "1.0.2"
-          }
-        },
-        "string_decoder": {
-          "version": "1.0.3",
-          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
-          "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
-          "dev": true,
-          "requires": {
-            "safe-buffer": "5.1.1"
-          }
-        }
-      }
-    },
-    "stream-consume": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/stream-consume/-/stream-consume-0.1.0.tgz",
-      "integrity": "sha1-pB6tGm1ggc63n2WwYZAbbY89HQ8=",
-      "dev": true
-    },
-    "string_decoder": {
-      "version": "0.10.31",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-      "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=",
-      "dev": true
-    },
-    "string-width": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
-      "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
-      "dev": true,
-      "requires": {
-        "code-point-at": "1.1.0",
-        "is-fullwidth-code-point": "1.0.0",
-        "strip-ansi": "3.0.1"
-      }
-    },
-    "stringstream": {
-      "version": "0.0.5",
-      "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz",
-      "integrity": "sha1-TkhM1N5aC7vuGORjB3EKioFiGHg=",
-      "dev": true
-    },
-    "strip-ansi": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
-      "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
-      "dev": true,
-      "requires": {
-        "ansi-regex": "2.1.1"
-      }
-    },
-    "strip-bom": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-1.0.0.tgz",
-      "integrity": "sha1-hbiGLzhEtabV7IRnqTWYFzo295Q=",
-      "dev": true,
-      "requires": {
-        "first-chunk-stream": "1.0.0",
-        "is-utf8": "0.2.1"
-      }
-    },
-    "strip-indent": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-1.0.1.tgz",
-      "integrity": "sha1-DHlipq3vp7vUrDZkYKY4VSrhoKI=",
-      "dev": true,
-      "requires": {
-        "get-stdin": "4.0.1"
-      }
-    },
-    "supports-color": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
-      "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
-      "dev": true
-    },
-    "tar": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/tar/-/tar-2.2.1.tgz",
-      "integrity": "sha1-jk0qJWwOIYXGsYrWlK7JaLg8sdE=",
-      "dev": true,
-      "requires": {
-        "block-stream": "0.0.9",
-        "fstream": "1.0.11",
-        "inherits": "2.0.3"
-      }
-    },
-    "through2": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.3.tgz",
-      "integrity": "sha1-AARWmzfHx0ujnEPzzteNGtlBQL4=",
-      "dev": true,
-      "requires": {
-        "readable-stream": "2.3.3",
-        "xtend": "4.0.1"
-      },
-      "dependencies": {
-        "isarray": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
-          "dev": true
-        },
-        "readable-stream": {
-          "version": "2.3.3",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.3.tgz",
-          "integrity": "sha512-m+qzzcn7KUxEmd1gMbchF+Y2eIUbieUaxkWtptyHywrX0rE8QEYqPC07Vuy4Wm32/xE16NcdBctb8S0Xe/5IeQ==",
-          "dev": true,
-          "requires": {
-            "core-util-is": "1.0.2",
-            "inherits": "2.0.3",
-            "isarray": "1.0.0",
-            "process-nextick-args": "1.0.7",
-            "safe-buffer": "5.1.1",
-            "string_decoder": "1.0.3",
-            "util-deprecate": "1.0.2"
-          }
-        },
-        "string_decoder": {
-          "version": "1.0.3",
-          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
-          "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
-          "dev": true,
-          "requires": {
-            "safe-buffer": "5.1.1"
-          }
-        }
-      }
-    },
-    "tildify": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/tildify/-/tildify-1.2.0.tgz",
-      "integrity": "sha1-3OwD9V3Km3qj5bBPIYF+tW5jWIo=",
-      "dev": true,
-      "requires": {
-        "os-homedir": "1.0.2"
-      }
-    },
-    "time-stamp": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/time-stamp/-/time-stamp-1.1.0.tgz",
-      "integrity": "sha1-dkpaEa9QVhkhsTPztE5hhofg9cM=",
-      "dev": true
-    },
-    "tough-cookie": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.3.2.tgz",
-      "integrity": "sha1-8IH3bkyFcg5sN6X6ztc3FQ2EByo=",
-      "dev": true,
-      "requires": {
-        "punycode": "1.4.1"
-      }
-    },
-    "trim-newlines": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-1.0.0.tgz",
-      "integrity": "sha1-WIeWa7WCpFA6QetST301ARgVphM=",
-      "dev": true
-    },
-    "tunnel-agent": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
-      "integrity": "sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=",
-      "dev": true,
-      "requires": {
-        "safe-buffer": "5.1.1"
-      }
-    },
-    "tweetnacl": {
-      "version": "0.14.5",
-      "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
-      "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=",
-      "dev": true,
-      "optional": true
-    },
-    "unc-path-regex": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/unc-path-regex/-/unc-path-regex-0.1.2.tgz",
-      "integrity": "sha1-5z3T17DXxe2G+6xrCufYxqadUPo=",
-      "dev": true
-    },
-    "unique-stream": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/unique-stream/-/unique-stream-1.0.0.tgz",
-      "integrity": "sha1-1ZpKdUJ0R9mqbJHnAmP40mpLEEs=",
-      "dev": true
-    },
-    "user-home": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/user-home/-/user-home-1.1.1.tgz",
-      "integrity": "sha1-K1viOjK2Onyd640PKNSFcko98ZA=",
-      "dev": true
-    },
-    "util-deprecate": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
-      "dev": true
-    },
-    "uuid": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.1.0.tgz",
-      "integrity": "sha512-DIWtzUkw04M4k3bf1IcpS2tngXEL26YUD2M0tMDUpnUrz2hgzUBlD55a4FjdLGPvfHxS6uluGWvaVEqgBcVa+g==",
-      "dev": true
-    },
-    "v8flags": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/v8flags/-/v8flags-2.1.1.tgz",
-      "integrity": "sha1-qrGh+jDUX4jdMhFIh1rALAtV5bQ=",
-      "dev": true,
-      "requires": {
-        "user-home": "1.1.1"
-      }
-    },
-    "validate-npm-package-license": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.1.tgz",
-      "integrity": "sha1-KAS6vnEq0zeUWaz74kdGqywwP7w=",
-      "dev": true,
-      "requires": {
-        "spdx-correct": "1.0.2",
-        "spdx-expression-parse": "1.0.4"
-      }
-    },
-    "verror": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
-      "integrity": "sha1-OhBcoXBTr1XW4nDB+CiGguGNpAA=",
-      "dev": true,
-      "requires": {
-        "assert-plus": "1.0.0",
-        "core-util-is": "1.0.2",
-        "extsprintf": "1.3.0"
-      },
-      "dependencies": {
-        "assert-plus": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
-          "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
-          "dev": true
-        }
-      }
-    },
-    "vinyl": {
-      "version": "0.5.3",
-      "resolved": "https://registry.npmjs.org/vinyl/-/vinyl-0.5.3.tgz",
-      "integrity": "sha1-sEVbOPxeDPMNQyUTLkYZcMIJHN4=",
-      "dev": true,
-      "requires": {
-        "clone": "1.0.2",
-        "clone-stats": "0.0.1",
-        "replace-ext": "0.0.1"
-      }
-    },
-    "vinyl-fs": {
-      "version": "0.3.14",
-      "resolved": "https://registry.npmjs.org/vinyl-fs/-/vinyl-fs-0.3.14.tgz",
-      "integrity": "sha1-mmhRzhysHBzqX+hsCTHWIMLPqeY=",
-      "dev": true,
-      "requires": {
-        "defaults": "1.0.3",
-        "glob-stream": "3.1.18",
-        "glob-watcher": "0.0.6",
-        "graceful-fs": "3.0.11",
-        "mkdirp": "0.5.1",
-        "strip-bom": "1.0.0",
-        "through2": "0.6.5",
-        "vinyl": "0.4.6"
-      },
-      "dependencies": {
-        "clone": {
-          "version": "0.2.0",
-          "resolved": "https://registry.npmjs.org/clone/-/clone-0.2.0.tgz",
-          "integrity": "sha1-xhJqkK1Pctv1rNskPMN3JP6T/B8=",
-          "dev": true
-        },
-        "readable-stream": {
-          "version": "1.0.34",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
-          "integrity": "sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=",
-          "dev": true,
-          "requires": {
-            "core-util-is": "1.0.2",
-            "inherits": "2.0.3",
-            "isarray": "0.0.1",
-            "string_decoder": "0.10.31"
-          }
-        },
-        "through2": {
-          "version": "0.6.5",
-          "resolved": "https://registry.npmjs.org/through2/-/through2-0.6.5.tgz",
-          "integrity": "sha1-QaucZ7KdVyCQcUEOHXp6lozTrUg=",
-          "dev": true,
-          "requires": {
-            "readable-stream": "1.0.34",
-            "xtend": "4.0.1"
-          }
-        },
-        "vinyl": {
-          "version": "0.4.6",
-          "resolved": "https://registry.npmjs.org/vinyl/-/vinyl-0.4.6.tgz",
-          "integrity": "sha1-LzVsh6VQolVGHza76ypbqL94SEc=",
-          "dev": true,
-          "requires": {
-            "clone": "0.2.0",
-            "clone-stats": "0.0.1"
-          }
-        }
-      }
-    },
-    "vinyl-sourcemaps-apply": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/vinyl-sourcemaps-apply/-/vinyl-sourcemaps-apply-0.2.1.tgz",
-      "integrity": "sha1-q2VJ1h0XLCsbh75cUI0jnI74dwU=",
-      "dev": true,
-      "requires": {
-        "source-map": "0.5.6"
-      }
-    },
-    "vow": {
-      "version": "0.4.4",
-      "resolved": "https://registry.npmjs.org/vow/-/vow-0.4.4.tgz",
-      "integrity": "sha1-yf5GCRKdf1qmIVCOvmS1HJW8e5g=",
-      "dev": true
-    },
-    "vow-fs": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/vow-fs/-/vow-fs-0.3.2.tgz",
-      "integrity": "sha1-6isDTYXh24wnfrLpqG0cFfXTjno=",
-      "dev": true,
-      "requires": {
-        "glob": "3.2.8",
-        "node-uuid": "1.4.0",
-        "vow": "0.4.4",
-        "vow-queue": "0.3.1"
-      },
-      "dependencies": {
-        "glob": {
-          "version": "3.2.8",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-3.2.8.tgz",
-          "integrity": "sha1-VQb0MRchvMYYx9jboUQYh1AwcHM=",
-          "dev": true,
-          "requires": {
-            "inherits": "2.0.3",
-            "minimatch": "0.2.14"
-          }
-        },
-        "minimatch": {
-          "version": "0.2.14",
-          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-0.2.14.tgz",
-          "integrity": "sha1-x054BXT2PG+aCQ6Q775u9TpqdWo=",
-          "dev": true,
-          "requires": {
-            "lru-cache": "2.7.3",
-            "sigmund": "1.0.1"
-          }
-        }
-      }
-    },
-    "vow-queue": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/vow-queue/-/vow-queue-0.3.1.tgz",
-      "integrity": "sha1-WYxRoVsKgabV/AX0dhzrRi3h6Gg=",
-      "dev": true,
-      "requires": {
-        "vow": "0.4.4"
-      }
-    },
-    "which": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/which/-/which-1.3.0.tgz",
-      "integrity": "sha512-xcJpopdamTuY5duC/KnTTNBraPK54YwpenP4lzxU8H91GudWpFv38u0CKjclE1Wi2EH2EDz5LRcHcKbCIzqGyg==",
-      "dev": true,
-      "requires": {
-        "isexe": "2.0.0"
-      }
-    },
-    "which-module": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/which-module/-/which-module-1.0.0.tgz",
-      "integrity": "sha1-u6Y8qGGUiZT/MHc2CJ47lgJsKk8=",
-      "dev": true
-    },
-    "wide-align": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.2.tgz",
-      "integrity": "sha512-ijDLlyQ7s6x1JgCLur53osjm/UXUYD9+0PbYKrBsYisYXzCxN+HC3mYDNy/dWdmf3AwqwU3CXwDCvsNgGK1S0w==",
-      "dev": true,
-      "requires": {
-        "string-width": "1.0.2"
-      }
-    },
-    "wrap-ansi": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
-      "integrity": "sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=",
-      "dev": true,
-      "requires": {
-        "string-width": "1.0.2",
-        "strip-ansi": "3.0.1"
-      }
-    },
-    "wrappy": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
-      "dev": true
-    },
-    "xtend": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.1.tgz",
-      "integrity": "sha1-pcbVMr5lbiPbgg77lDofBJmNY68=",
-      "dev": true
-    },
-    "y18n": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.1.tgz",
-      "integrity": "sha1-bRX7qITAhnnA136I53WegR4H+kE=",
-      "dev": true
-    },
-    "yallist": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
-      "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=",
-      "dev": true
-    },
-    "yargs": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/yargs/-/yargs-7.1.0.tgz",
-      "integrity": "sha1-a6MY6xaWFyf10oT46gA+jWFU0Mg=",
-      "dev": true,
-      "requires": {
-        "camelcase": "3.0.0",
-        "cliui": "3.2.0",
-        "decamelize": "1.2.0",
-        "get-caller-file": "1.0.2",
-        "os-locale": "1.4.0",
-        "read-pkg-up": "1.0.1",
-        "require-directory": "2.1.1",
-        "require-main-filename": "1.0.1",
-        "set-blocking": "2.0.0",
-        "string-width": "1.0.2",
-        "which-module": "1.0.0",
-        "y18n": "3.2.1",
-        "yargs-parser": "5.0.0"
-      },
-      "dependencies": {
-        "camelcase": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-3.0.0.tgz",
-          "integrity": "sha1-MvxLn82vhF/N9+c7uXysImHwqwo=",
-          "dev": true
-        }
-      }
-    },
-    "yargs-parser": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-5.0.0.tgz",
-      "integrity": "sha1-J17PDX/+Bcd+ZOfIbkzZS/DhIoo=",
-      "dev": true,
-      "requires": {
-        "camelcase": "3.0.0"
-      },
-      "dependencies": {
-        "camelcase": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-3.0.0.tgz",
-          "integrity": "sha1-MvxLn82vhF/N9+c7uXysImHwqwo=",
-          "dev": true
-        }
-      }
-    }
-  }
-}
diff --git a/package.json b/package.json
index de9ec69..b65da1f 100644
--- a/package.json
+++ b/package.json
@@ -26,11 +26,11 @@
   "devDependencies": {
     "gulp": "latest",
     "gulp-autoprefixer": "latest",
-    "gulp-clean-css": "^3.7.0",
-    "gulp-csscomb": "^3.0.8",
-    "gulp-rename": "^1.2.2",
+    "gulp-clean-css": "latest",
+    "gulp-csscomb": "latest",
+    "gulp-rename": "latest",
     "gulp-sass": "latest",
-    "gulp-pug": "^4.0.1",
+    "gulp-pug": "latest",
     "jstransformer-highlight": "latest",
     "jstransformer-markdown-it": "latest"
   },
-- 
cgit v1.3.1-23-gd82d


From 611c666dbcbae64c233f0f335a09a2cee36c7132 Mon Sep 17 00:00:00 2001
From: Yan Zhu 
Date: Sun, 3 Jun 2018 17:45:42 +0800
Subject: Update labels docs to Pug template

---
 docs/elements.html           | 17 +++++++++++++++++
 docs/src/contents/labels.pug | 32 ++++++++++++++++++++++++++++++++
 2 files changed, 49 insertions(+)

(limited to 'docs/src')

diff --git a/docs/elements.html b/docs/elements.html
index f971860..ae803f4 100644
--- a/docs/elements.html
+++ b/docs/elements.html
@@ -1213,6 +1213,23 @@
           
           
    
             
    Labels
    
+            
    Labels are formatted text tags for highlighted, informative information.
    
+            
    
+              
    default labelprimary labelsecondary labelsuccess labelwarning labelerror label
    
+            
    
+            
    Add the label class to <span> or <small> elements.
+              You can add another class label-primary, label-secondary, label-success, label-warning and label-error for colored labels.
+            
    
+            
    
+              
    default labelprimary label
    
+            
    
+            
    Add the label-rounded class to have rounded labels.
    
+            
    <!-- normal labels -->
+<span class="label">default label</span>
+<span class="label label-primary">primary label</span>
+
+<!-- rounded labels -->
+<span class="label label-rounded label-primary">primary label</span>
    
           
    
           
    
             
    Codes
    
diff --git a/docs/src/contents/labels.pug b/docs/src/contents/labels.pug
index e69de29..2d55412 100644
--- a/docs/src/contents/labels.pug
+++ b/docs/src/contents/labels.pug
@@ -0,0 +1,32 @@
+p Labels are formatted text tags for highlighted, informative information.
+
+.columns
+  .column
+    span.label.mr-1 default label
+    span.label.label-primary.mr-1 primary label
+    span.label.label-secondary.mr-1 secondary label
+    span.label.label-success.mr-1 success label
+    span.label.label-warning.mr-1 warning label
+    span.label.label-error error label
+  
+p
+  | Add the #[code label] class to #{''} or #{''} elements.
+  | You can add another class #[code label-primary], #[code label-secondary], #[code label-success], #[code label-warning] and #[code label-error] for colored labels.
+
+.columns
+  .column
+    span.label.label-rounded.mr-1 default label
+    span.label.label-rounded.label-primary primary label
+
+p
+  | Add the #[code label-rounded] class to have rounded labels.
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+      default label
+      primary label
+
+      
+      primary label
\ No newline at end of file
-- 
cgit v1.3.1-23-gd82d


From f7344f3e056a94640b6260ad7b7badfd33646c37 Mon Sep 17 00:00:00 2001
From: Yan Zhu 
Date: Sun, 3 Jun 2018 18:07:08 +0800
Subject: Update code and media docs to new Pug templates

---
 README.md                   |  2 +-
 docs/elements.html          | 75 ++++++++++++++++++++++++++++++++++++++++++++-
 docs/src/contents/code.pug  | 22 +++++++++++++
 docs/src/contents/codes.pug |  0
 docs/src/contents/media.pug | 73 +++++++++++++++++++++++++++++++++++++++++++
 docs/src/elements.pug       |  4 +--
 6 files changed, 172 insertions(+), 4 deletions(-)
 create mode 100644 docs/src/contents/code.pug
 delete mode 100644 docs/src/contents/codes.pug

(limited to 'docs/src')

diff --git a/README.md b/README.md
index 711be7e..c5a47a8 100644
--- a/README.md
+++ b/README.md
@@ -52,7 +52,7 @@ You can compile your custom version of Spectre.css. Read [the documentation](htt
 - [Forms](https://picturepan2.github.io/spectre/elements.html#forms)
 - [Icons](https://picturepan2.github.io/spectre/elements.html#icons) - CSS only
 - [Labels](https://picturepan2.github.io/spectre/elements.html#labels)
-- [Codes](https://picturepan2.github.io/spectre/elements.html#codes)
+- [Code](https://picturepan2.github.io/spectre/elements.html#code)
 - [Media](https://picturepan2.github.io/spectre/elements.html#media)
 
 ### Layout
diff --git a/docs/elements.html b/docs/elements.html
index ae803f4..e7b4e82 100644
--- a/docs/elements.html
+++ b/docs/elements.html
@@ -1232,10 +1232,83 @@
 <span class="label label-rounded label-primary">primary label</span>
           
    
           
    
-            
    Codes
    
+            
    Code
    
+            
    Code is used for styling inline and multiline code snippets.
    
+            
    For inline code, you can use the <code> element. 
+              For multiline code snippet blocks, you can use <pre> with the code class as a container, and add <code> inside it.
+              The data-lang ibute is rendered as the language name in the top right.
+            
    
+            
    <!-- code snippets -->
+<button class="btn">
+  Submit
+</button>
+
    
+            
    <pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- code snippets --&gt;</span>
+&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn&quot;</span>&gt;
+  Submit
+&lt;<span class="tag">/button</span>&gt;
+</code></pre>
    
           
    
           
    
             
    Media
    
+            
    Media includes responsive images, figures and video classes.
    
+            
    Images
    
+            
    Add the img-responsive class to <img> elements. The images will scale with the parent sizes.
    
+            
    
+              
    macOS El Capitan Wallpaper
    
+            
    
+            
    Add the img-fit-contain or img-fit-cover class to <img> or <video> elements. The media will crop itself to fit inside the element (and you don't need another container).
+              This feature can replace the classic background image trick. Microsoft Edge support is shipped  with Build Number 16299+.
+            
    
+            
    
+              
    
+                
    macOS Yosemite Wallpaper
+                  
    img-fit-contain
    
+                
    
+              
    
+              
    
+                
    macOS Yosemite Wallpaper
+                  
    img-fit-cover
    
+                
    
+              
    
+            
    
+            
    <img src="img/osx-el-capitan.jpg" class="img-responsive ..." alt="...">
+<img src="img/osx-el-capitan.jpg" class="img-fit-contain ..." alt="...">
+<img src="img/osx-el-capitan.jpg" class="img-fit-cover ..." alt="...">
+
    
+            
    Figure
    
+            
    You can use the element <figure> for an image with a caption.
+              Add the figure class to <figure> element.
+              The images with the img-responsive class will be responsive.
+              And the included class figure-caption will provide basic style for caption.
+              Also, you can use text-left, text-center and text-right for caption alignment.
+            
    
+            
    
+              
    
+                
    macOS Yosemite Wallpaper
+                  
    macOS Yosemite wallpaper
    
+                
    
+              
    
+            
    
+            
    Video
    
+            
    For responsive video, add a container with the video-responsive class. 
+              Insert any YouTube, Youku or other iframe/embed video inside the container. 
+              The ratio is 16:9 by default.
+              You may add video-responsive-4-3 for 4:3 ratio video container or video-responsive-1-1 for 1:1 ratio.
+            
    
+            
    
+              
    
+                
    
+                  
+                
    
+              
    
+            
    
+            
    For responsive <video> elements, you can add the video-responsive class directly.
    
+            
    <div class="video-responsive video-responsive-4-3">
+  <iframe src="..." width="..." height="..." frameborder="0" allowfullscreen></iframe>
+</div>
+
+<video class="video-responsive" src="...">...</video>
    
           
    
         
       
diff --git a/docs/src/contents/code.pug b/docs/src/contents/code.pug
new file mode 100644
index 0000000..f1ee876
--- /dev/null
+++ b/docs/src/contents/code.pug
@@ -0,0 +1,22 @@
+p Code is used for styling inline and multiline code snippets.
+p
+  | For inline code, you can use the #{''} element. 
+  | For multiline code snippet blocks, you can use #{'
    '} with the #[code code] class as a container, and add #{''} inside it.
+  | The #[code data-lang] ibute is rendered as the language name in the top right.
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+      
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
    <!-- code snippets -->
+      <button class="btn">
+        Submit
+      </button>
+      
    
\ No newline at end of file
diff --git a/docs/src/contents/codes.pug b/docs/src/contents/codes.pug
deleted file mode 100644
index e69de29..0000000
diff --git a/docs/src/contents/media.pug b/docs/src/contents/media.pug
index e69de29..fcb8d36 100644
--- a/docs/src/contents/media.pug
+++ b/docs/src/contents/media.pug
@@ -0,0 +1,73 @@
+p Media includes responsive images, figures and video classes.
+
++docs-subheading('media-images', 'Images')
+
+p
+  | Add the #[code img-responsive] class to #{''} elements. The images will scale with the parent sizes.
+
+.columns
+  .column.col-12
+    img.img-responsive.rounded(src="img/osx-el-capitan.jpg" alt="macOS El Capitan Wallpaper")
+
+p
+  | Add the #[code img-fit-contain] or #[code img-fit-cover] class to #{''} or #{'
    '} for an image with a caption.
+  | Add the #[code figure] class to #{'
    '} element.
+  | The images with the #[code img-responsive] class will be responsive.
+  | And the included class #[code figure-caption] will provide basic style for caption.
+  | Also, you can use #[code text-left], #[code text-center] and #[code text-right] for caption alignment.
+
+.columns
+  .column.col-12
+    figure.figure
+      img.img-responsive.rounded(src="img/osx-yosemite-2.jpg" alt="macOS Yosemite Wallpaper")
+      figcaption.figure-caption.text-center macOS Yosemite wallpaper
+
++docs-subheading('media-video', 'Video')
+
+p
+  | For responsive video, add a container with the #[code video-responsive] class. 
+  | Insert any YouTube, Youku or other iframe/embed video inside the container. 
+  | The ratio is 16:9 by default.
+  | You may add #[code video-responsive-4-3] for 4:3 ratio video container or #[code video-responsive-1-1] for 1:1 ratio.
+
+.columns
+  .column.col-12
+    .video-responsive
+      iframe(width="560" height="315" src="https://www.youtube.com/embed/7DbslbKsQSk" allowfullscreen="")
+
+p
+  | For responsive #{'
    
         
    
-          
    
-            
    Typography
    
+          
    
+            
    Typography
    
             
    Typography sets default styles for headings, paragraphs, semantic text, blockquote and lists elements.
    
             
    Headings
    
             
    
@@ -317,8 +317,8 @@
   <dd>description list description</dd>
 </dl>
    
           
-          
    
-            
    Tables
    
+          
    
+            
    Tables
    
             
    Tables include default styles for tables and data sets.
    
             
    
               
    
@@ -378,8 +378,8 @@
   </tbody>
 </table>
           
    
-          
    
-            
    Buttons
    
+          
    
+            
    Buttons
    
             
    Buttons include simple button styles for actions in different types and sizes.
    
             
    
               
    
@@ -526,8 +526,8 @@
   <button class="btn">third button</button>
 </div> 
           
    
-          
    
-            
    Forms
    
+          
    
+            
    Forms
    
             
    Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch.
    
             
    
               
    
@@ -1208,11 +1208,11 @@
     </div>
   </fieldset>
           
    
-          
    
-            
    Icons
    
+          
    
+            
    Icons
    
           
    
-          
    
-            
    Labels
    
+          
    
+            
    Labels
    
             
    Labels are formatted text tags for highlighted, informative information.
    
             
    
               
    default labelprimary labelsecondary labelsuccess labelwarning labelerror label
    
@@ -1231,8 +1231,8 @@
 <!-- rounded labels -->
 <span class="label label-rounded label-primary">primary label</span>
           
    
-          
    
-            
    Code
    
+          
    
+            
    Code
    
             
    Code is used for styling inline and multiline code snippets.
    
             
    For inline code, you can use the <code> element. 
               For multiline code snippet blocks, you can use <pre> with the code class as a container, and add <code> inside it.
@@ -1249,8 +1249,8 @@
 &lt;<span class="tag">/button</span>&gt;
 </code></pre>
           
    
-          
    
-            
    Media
    
+          
    
+            
    Media
    
             
    Media includes responsive images, figures and video classes.
    
             
    Images
    
             
    Add the img-responsive class to <img> elements. The images will scale with the parent sizes.
    
diff --git a/docs/getting-started.html b/docs/getting-started.html
index 4d9f7ee..2665d0c 100644
--- a/docs/getting-started.html
+++ b/docs/getting-started.html
@@ -46,7 +46,7 @@
                   
  • Forms
    • 
                   
  • Icons
    • 
                   
  • Labels
    • 
-                  
  • Codes
    • 
+                  
  • Code
    • 
                   
  • Media
    • 
                 
               
    
@@ -129,14 +129,14 @@
       
    
       
    
         
    
-          
    
-            
    Introduction
    
+          
    
+            
    Introduction
    
             
     Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development.
    
             
    
                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.
    
           
    
-          
    
-            
    Installation
    
+          
    
+            
    Installation
    
             
    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.
    
             
    Install manually
    
             
    Download the compiled and minified Spectre CSS file (core ~10KB min+gzip):
    
@@ -161,8 +161,8 @@
             
    Install from Bower
    
             
    bower install spectre.css --save
    
           
    
-          
    
-            
    Custom version
    
+          
    
+            
    Custom version
    
             
    You can customize your version of Spectre.css by editing Sass files in /src directory or removing unneeded components from .scss source files.
    
             
    Sass Source Code
    
             
    If you are looking for Less version of Spectre.css, please switch to Less branch.
    
@@ -364,11 +364,11 @@ gulp.task('prefix', 
             
    After you compile your version of Spectre in the /dist, run gulp prefix in the directory of Spectre.
    
           
    
-          
    
-            
    Accessibility
    
+          
    
+            
    Accessibility
    
           
    
-          
    
-            
    Browser support
    
+          
    
+            
    Browser support
    
             
    Spectre uses Autoprefixer to make most styles compatible with earlier browsers and Normalize.css for CSS resets. Spectre is designed for modern browsers. For best compatibility, these browsers are recommended:
    
             
      
               
    • Chrome LAST 4
      • 
@@ -380,8 +380,8 @@ gulp.task('prefix', 
             
      Spectre supports Internet Explorer 10+, but some HTML5 and CSS3 features are not perfectly supported by Internet Explorer.
      
           
    
-          
    
-            
    What's new
    
+          
    
+            
    What's new
    
             
    September 2017
    
             
      
               
    • Off-canvas: navigation layout that the sidebar can slide in and out of the viewport NEW
      • 
diff --git a/docs/layout.html b/docs/layout.html
index dd4fae5..b20594a 100644
--- a/docs/layout.html
+++ b/docs/layout.html
@@ -1,799 +1,1326 @@
 
 
-
-  
-  
-  
-  
-  
-  Layout - Spectre.css CSS Framework
-  
-  
-  
-  
-  
-  
-
-
-  
      
-    
      
-      
-        
-      
-      GitHub
-    
      
-
-    
    
+                  
+                    
+                      
+                      
+                      
+                    
+                  
+                  
+                    
+                      
+                      
+                      
+                    
+                    
+                      
+                      
+                      
+                    
+                    
+                      
+                      
+                      
+                    
+                    
+                      
+                      
+                      
+                    
+                  
+                
    NameGenreRelease date
    The Shawshank RedemptionCrime, Drama14 October 1994
    The GodfatherCrime, Drama24 March 1972
    Schindler's ListBiography, Drama, History4 February 1994
    Se7enCrime, Drama, Mystery22 September 1995
    
+
    +
    +

    Add the table class to any <table> element. + The class will add padding, border and emphasized table header. + Use the table-striped class to <table> to add zebra striped style. + For hoverable table rows, you can add the table-hover class to enable hover style. +

    +

    Use the active class to make <tr> element highlighted.

    + 
    <table class="table table-striped table-hover">
+  <thead>
+    <tr>
+      <th>name</th>
+      <th>genre</th>
+      <th>release date</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr class="active">
+      <td>The Shawshank Redemption</td>
+      <td>Crime, Drama</td>
+      <td>14 October 1994</td>
+    </tr>
+  </tbody>
+</table>
    -
    - - -
    <div class="container">
-  <div class="columns">
-    <div class="column col-6">col-6</div>
-    <div class="column col-3">col-3</div>
-    <div class="column col-2">col-2</div>
-    <div class="column col-1">col-1</div>
-  </div>
-
-  <div class="columns col-gapless">
-    <div class="column col-6">col-6</div>
-    <div class="column col-6">col-6</div>
-  </div>
-
-  <div class="columns col-oneline">
-    <div class="column col-8">col-8</div>
-    <div class="column col-8">col-8</div>
-  </div>
-</div>
+          
    
+            
    Buttons
    
+            
    Buttons include simple button styles for actions in different types and sizes.
    
+            
    
+              
    
+                
+                
+                
+              
    
+            
    
+            
    Add the btn class to <a>, <input> or <button> elements for a default button. 
+              There are classes btn-primary and btn-link for predefined primary and link buttons.
+            
    
+            
    <button class="btn">default button</button>
+<button class="btn btn-primary">primary button</button>
+<button class="btn btn-link">link button</button>
 
    
+            
    Button colors
    
+            
    
+              
    
+                
+                
+              
    
+            
    
+            
    Add the btn-success or btn-error class for success (green) or error (red) button color.
+              If you need more button colors, please use button mixins to create your own button color variants.
+            
    
+            
    <button class="btn btn-success">success button</button>
+<button class="btn btn-error">error button</button>
+
    
+            
    Button sizes
    
+            
    
+              
    
+                
+                
+              
    
+              
    
+                
+                
+              
    
+              
    
+                
+                
+              
    
+            
    
+            
    Add the btn-sm or btn-lg class for small or large button size. 
+              Also, you can add the btn-block class for a full-width button.
+            
    
+            
    <button class="btn btn-lg">large button</button>
+<button class="btn btn-sm">small button</button>
 
-        
    Grid offset
    
-        
    
-          
    The Flexbox grid provides margin auto utilities to set offset. There are col-mx-auto, col-ml-auto and col-mr-auto to set margins between columns without using empty columns.
    
-        
    
+<button class="btn btn-block">block button</button>
 
-        
    
-          
    
-            
    col-2
    
-          
    
-          
    
-            
    col-4 col-mx-auto
    
-          
    
-        
    
-        
    
-          
    
-            
    col-2
    
-          
    
-          
    
-            
    col-4 col-ml-auto
    
-          
    
-        
    
-        
    
-          
    
-            
    col-4 col-ml-auto
    
-          
    
-          
    
-            
    col-2
    
-          
    
-        
    
-        
    
-          
    
-            
    col-4 col-mx-auto
    
-          
    
-          
    
-            
    col-2
    
-          
    
-        
    
-        
    
-          
    
-            
    col-4 col-mr-auto
    
-          
    
-          
    
-            
    col-2
    
-          
    
-        
    
-        
    
-          
    
-            
    col-4 col-mx-auto
    
-          
    
-        
    
-
-
-
    <div class="container">
-  <div class="columns">
-    <div class="column col-4 col-mr-auto">col-4 col-mr-auto</div>
-    <div class="column col-2">col-2</div>
-  </div>
-</div>
+<button class="btn btn-primary btn-lg"><i class="icon icon-arrow-left"></i> large</button>
+<button class="btn btn-primary"><i class="icon icon-arrow-left"></i> normal</button>
+<button class="btn btn-primary btn-sm"><i class="icon icon-arrow-left"></i> small</button>
 
    
-
-        
    Grid nesting
    
-        
    
-          
    To nest grids, add the new columns and column structure within an existing column.
    
-        
    
-        
    
-          
    
-            
    col-6
    
+            
    Please note that you could use the btn-action class for a square button, or add another circle class for a round button, which is often used as a Float Action Button (FAB).
    
             
    
-              
    
-                
    col-6
    
+              
    
+                
+                
+                
               
    
-              
    
-                
    col-6
    
+              
    
+                
+                
+                
               
    
             
    
-          
    
-          
    
-            
    col-6
    
-          
    
-        
    
-
-
-
    <div class="container">
-  <div class="columns">
-    <div class="column col-6">col-6
-      <div class="columns">
-        <div class="column col-6">col-6</div>
-        <div class="column col-6">col-6</div>
-      </div>
-    </div>
-    <div class="column col-6">col-6</div>
-  </div>
-</div>
+            
    <button class="btn btn-action"><i class="icon icon-arrow-left"></i></button>
+<button class="btn btn-action circle"><i class="icon icon-arrow-left"></i></button>
 
    
-
-      
    
-
-      
    
-        
    
-          
-        
    
-      
    
-
-      
    
-        
    Responsive
    
-        
    
-          
    Spectre provides a neat responsive layout grid system and responsive visibility utilities. 
    
-        
    
-        
    
-          
    
-            
    col-10 
     col-lg-8 
     col-md-6 
     col-sm-4
    
-          
    
-          
    
-            
    col-2 
     col-lg-4 
     col-md-6 
     col-sm-8
    
+            
    Button states
    
+            
    Add the active class for active button state style.
    
+            
    
+              
    
+                
+                
+                
+              
    
+            
    
+            
    Add the disabled class or the disabled attribute for disabled button state style.
    
+            
    
+              
    
+                
+                
+                
+              
    
+            
    
+            
    <!-- buttons with disabled state -->
+<button class="btn disabled" tabindex="-1">disabled button</button>
+<button class="btn" disabled tabindex="-1">disabled button</button>
+
    
+            
    A button with the loading class can show loading indicator.
    
+            
    
+              
    
+                
+                
+                
+              
    
+            
    
+            
    <!-- buttons with loading state -->
+<button class="btn loading">button</button>
+<button class="btn btn-primary loading">primary button</button>
+
    
+            
    Button groups
    
+            
    
+              
    
+                
    
+                  
+                  
+                  
+                
    
+              
    
+              
    
+                
    
+                  
+                  
+                  
+                
    
+              
    
+            
    
+            
    
+              
    
+                
    
+                  
+                  
+                  
+                
    
+              
    
+              
    
+                
    
+                  
+                  
+                  
+                
    
+              
    
+            
    
+            
    If you want to use buttons as a group, add the btn-group class to the container.
+              You can add the btn-group-block class for a full-width button group.
+            
    
+            
    <div class="btn-group btn-group-block">
+  <button class="btn">first button</button>
+  <button class="btn">second button</button>
+  <button class="btn">third button</button>
+</div> 
    
           
    
-        
    
-
-        
    
-          
    There are col-xs-[1-12], col-sm-[1-12], col-md-[1-12], col-lg-[1-12] and col-xl-[1-12] available for flexible grid across mobile, tablet and desktop viewport usage.
    
-          
      
-            
    • col-xs-[1-12] apply to window width smaller than or equal to 480px. 
      • 
-            
    • col-sm-[1-12] apply to window width smaller than or equal to 600px. 
      • 
-            
    • col-md-[1-12] apply to window width smaller than or equal to 840px. 
      • 
-            
    • col-lg-[1-12] apply to window width smaller than or equal to 960px. 
      • 
-            
    • col-xl-[1-12] apply to window width smaller than or equal to 1280px. 
      • 
-            
    • col-[1-12] apply to all window width, including the width wider than 1280px. 
      • 
-          
    
-        
    
-
-
-
    <div class="container">
-  <div class="columns">
-    <div class="column col-xs-6">col-xs-6</div>
-    <div class="column col-xs-3">col-xs-3</div>
-    <div class="column col-xs-3">col-xs-3</div>
-  </div>
-</div>
+          
    
+            
    Forms
    
+            
    Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch.
    
+            
    
+              
    
+                
    
+                  
+                  
+                
    
+                
    
+                  
+                  
+                
    
+              
    
+            
    
+            
    <!-- form input control -->
+<div class="form-group">
+  <label class="form-label" for="input-example-1">Name</label>
+  <input class="form-input" type="text" id="input-example-1" placeholder="Name">
+</div>
 
    
-
-        
    Responsive container
    
-        
    
-          
    The responsive layout also provides fixed-width containers. Use grid-xs(480px), grid-sm (600px), grid-md (840px), grid-lg (960px) or grid-xl (1280px) to container for a fixed-width container with the specific max-width.
    
-        
    
-
-
-
    <!-- 100% width container with max-width set to grid-lg (960px) -->
-<div class="container grid-lg">
-  <div class="columns">
-    ...
-  </div>
-</div>
+            
    
+              
    
+                
    
+                  
+                  
+                
    
+              
    
+            
    
+            
    <!-- form textarea control -->
+<div class="form-group">
+  <label class="form-label" for="input-example-3">Message</label>
+  <textarea class="form-input" id="input-example-3" placeholder="Textarea" rows="3"></textarea>
+</div>
 
    
+            
    
+              
    
+                
    
+                  
+                
    
+                
    
+                  
+                
    
+              
    
+            
    
+            
    <!-- form select control -->
+<div class="form-group">
+  <select class="form-select">
+    <option>Choose an option</option>
+    <option>Slack</option>
+    <option>Skype</option>
+    <option>Hipchat</option>
+  </select>
+</div>
+
    
+            
    
+              
    
+                
+                  
    
+                    
+                    
+                    
+                  
    
+                
+              
    
+            
    
+            
    <!-- form radio control -->
+<div class="form-group">
+  <label class="form-label">Gender</label>
+  <label class="form-radio">
+    <input type="radio" name="gender" checked>
+    <i class="form-icon"></i> Male
+  </label>
+  <label class="form-radio">
+    <input type="radio" name="gender">
+    <i class="form-icon"></i> Female
+  </label>
+</div>
+
    
+            
    
+              
    
+                
    
+                  
+                
    
+                
    
+                  
+                
    
+              
    
+            
    
+            
    <!-- form switch control -->
+<div class="form-group">
+  <label class="form-switch">
+    <input type="checkbox">
+    <i class="form-icon"></i> Send me emails with news and tips
+  </label>
+</div>
+
    
+            
    
+              
    
+                
    
+                  
+                
    
+                
    
+                  
+                
    
+              
    
+            
    
+            
    <!-- form checkbox control -->
+<div class="form-group">
+  <label class="form-checkbox">
+    <input type="checkbox">
+    <i class="form-icon"></i> Remember me
+  </label>
+</div>
+
    
+            
    You can use :indeterminate pseudo class for indeterminate state of checkboxes.
    
+            
    Horizontal forms
    
+            
    If you want to have a horizontal form, add the form-horizontal class to the <form> container.
+              And add the col-<1-12> and col-xs/sm/lg/xl-<1-12> class to the child elements for responsive form row layout.
+            
    
+            
    
+              
    
+                
    
+                  
    
+                    
    
+                      
+                    
    
+                    
    
+                      
+                    
    
+                  
    
+                  
    
+                    
    
+                      
+                    
    
+                    
    
+                      
+                    
    
+                  
    
+                  
    
+                    
    
+                      
+                    
    
+                    
    
+                      
+                      
+                    
    
+                  
    
+                  
    
+                    
    
+                      
+                    
    
+                    
    
+                      
+                    
    
+                  
    
+                  
    
+                    
    
+                      
+                    
    
+                  
    
+                  
    
+                    
    
+                      
+                    
    
+                    
    
+                      
+                    
    
+                  
    
+                  
    
+                    
    
+                      
+                    
    
+                  
    
+                
    
+              
    
+            
    
+            
    <form class="form-horizontal">
+  <div class="form-group">
+    <div class="col-3 col-sm-12">
+      <label class="form-label" for="input-example-1">Name</label>
+    </div>
+    <div class="col-9 col-sm-12">
+      <input class="form-input" type="text" id="input-example-1" placeholder="Name">
+    </div>
+  </div>
+  <!-- form structure -->
+</form>
+
    
+            
    Form sizes
    
+            
    For smaller or larger input and select controls, you could add the input-sm/input-lg, select-sm/select-lg and label-sm/label-lg classes to the elements.
    
+            
    
+              
    
+                
+              
    
+              
    
+                
+              
    
+              
    
+                
+              
    
+            
    
+            
    
+              
    
+                
+              
    
+              
    
+                
+              
    
+              
    
+                
+              
    
+            
    
+            
    You can add the input-sm/input-lg classes to the input-checkbox, input-radio and input-switch to have different sizes.
    
+            
    Form icons
    
+            
    Spectre Form components has Spectre Icons support.
    
+            
    Add a wrapper with the has-icon-left/has-icon-right class to <input> element.
+              And add the icon with form-icon class next to the <input>.
+            
    
+            
    
+              
    
+                
    
+                  
+                
    
+              
    
+              
    
+                
    
+                  
+                
    
+              
    
+              
    
+                
    
+                  
+                
    
+              
    
+            
    
+            
    
+              
    
+                
    
+                  
+                
    
+              
    
+              
    
+                
    
+                  
+                
    
+              
    
+              
    
+                
    
+                  
+                
    
+              
    
+            
    
+            
    <!-- form input with Spectre icon -->
+<div class="has-icon-left">
+  <input type="text" class="form-input" placeholder="...">
+  <i class="form-icon icon icon-check"></i>
+</div>
+
    
+            
    You can use the loading class for loading or posting state.
    
+            
    
+              
    
+                
    
+                  
+                
    
+              
    
+              
    
+                
    
+                  
+                
    
+              
    
+              
    
+                
    
+                  
+                
    
+              
    
+            
    
+            
    <!-- form input with loading icon -->
+<div class="has-icon-right">
+  <input type="text" class="form-input" placeholder="...">
+  <i class="form-icon loading"></i>
+</div>
+
    
+            
    Input types
    
+            
    
+              
    
+                
    
+                  
    
+                    
    
+                      
+                    
    
+                    
    
+                      
+                    
    
+                  
    
+                  
    
+                    
    
+                      
+                    
    
+                    
    
+                      
+                    
    
+                  
    
+                  
    
+                    
    
+                      
+                    
    
+                    
    
+                      
+                    
    
+                  
    
+                  
    
+                    
    
+                      
+                    
    
+                    
    
+                      
+                    
    
+                  
    
+                  
    
+                    
    
+                      
+                    
    
+                    
    
+                      
+                    
    
+                  
    
+                  
    
+                    
    
+                      
+                    
    
+                    
    
+                      
+                    
    
+                  
    
+                  
    
+                    
    
+                      
+                    
    
+                    
    
+                      
+                    
    
+                  
    
+                  
    
+                    
    
+                      
+                    
    
+                    
    
+                      
+                    
    
+                  
    
+                  
    
+                    
    
+                      
+                    
    
+                    
    
+                      
+                    
    
+                  
    
+                
    
+              
    
+            
    
+            
    Input groups
    
+            
    
+              
    
+                
    
+                  
+                  
+                
    
+              
    
+              
    
+                
    slack.com/
+                  
+                  
+                
    
+              
    
+            
    
+            
    
+              
    
+                
    
+                  
+                  
+                
    
+              
    
+              
    
+                
    slack.com/
+                  
+                  
+                
    
+              
    
+            
    
+            
    
+              
    
+                
    
+                  
+                  
+                
    
+              
    
+              
    
+                
    
+                  
+                  
+                
    
+              
    
+            
    
+            
    
+              
    
+                
    
+                  
+                  
+                
    
+              
    
+              
    
+                
    slack.com/
+                  
+                  
+                
    
+              
    
+            
    
+            
    If you want to attach text and button along with an input, add the input-group class to the input container.
+              And add the input-group-addon class to the text element and input-group-btn to the button element.
+            
    
+            
    <!-- normal input group -->
+<div class="input-group">
+  <span class="input-group-addon">...</span>
+  <input type="text" class="form-input" placeholder="...">
+</div>
 
-        
    Responsive visibility
    
-        
    
-          
    The responsive visibility utilities help show and hide elements on specific viewport sizes. 
    
-        
    
-        
-          
-            
-              
-              
-              
-              
-              
-              
-            
-          
-          
-            
-              
-              
-              
-              
-              
-              
-            
-            
-              
-              
-              
-              
-              
-              
-            
-            
-              
-              
-              
-              
-              
-              
-            
-            
-              
-              
-              
-              
-              
-              
-            
-            
-              
-              
-              
-              
-              
-              
-            
-          
-        
    size-xssize-smsize-mdsize-lgsize-xl
    hide-xs
    hide-sm
    hide-md
    hide-lg
    hide-xl
    
-
-        
    
-          
    For hiding elements on specific viewport sizes, there are classes hide-xs, hide-sm, hide-md, hide-lg and hide-xl available.
    
-          
      
-            
    • hide-xs hides elements when the window width is smaller than or equal to 480px. 
      • 
-            
    • hide-sm hides elements when the window width is smaller than or equal to 600px. 
      • 
-            
    • hide-md hides elements when the window width is smaller than or equal to 840px. 
      • 
-            
    • hide-lg hides elements when the window width is smaller than or equal to 960px. 
      • 
-            
    • hide-xl hides elements when the window width is smaller than or equal to 1280px. 
      • 
-          
    
-        
    
+<!-- large input group -->
+<div class="input-group">
+  <span class="input-group-addon addon-lg">...</span>
+  <input type="text" class="form-input input-lg" placeholder="...">
+</div>
 
-        
-          
-            
-              
-              
-              
-              
-              
-              
-            
-          
-          
-            
-              
-              
-              
-              
-              
-              
-            
-            
-              
-              
-              
-              
-              
-              
-            
-            
-              
-              
-              
-              
-              
-              
-            
-            
-              
-              
-              
-              
-              
-              
-            
-            
-              
-              
-              
-              
-              
-              
-            
-          
-        
    size-xssize-smsize-mdsize-lgsize-xl
    show-xs
    show-sm
    show-md
    show-lg
    show-xl
    
+<!-- normal input group with button -->
+<div class="input-group">
+  <span class="input-group-addon">...</span>
+  <input type="text" class="form-input" placeholder="...">
+  <button class="btn btn-primary input-group-btn">Submit</button>
+</div>
+
    
+            
    Form validation styles
    
+            
    To use form validation styles, you can either add is-success or is-error class to the controls or add has-success or has-error class to parent elements.
+              Use the form-input-hint class to provide form validation success and error messages.
+            
    
+            
    
+              
    
+                
    
+                  Input
+                  
    
+                    
+                    
+                    
    The name is valid.
    
+                  
    
+                  
    
+                    
+                    
+                    
    Passwords must have at least 8 characters.
    
+                  
    
+                  
    
+                    
+                    
+                    
    The Email address is unavailable.
    
+                  
    
+                
    
+                
    
+                  Select
+                  
    
+                    
+                    
    The option is invalid.
    
+                  
    
+                  
    
+                    
+                    
    The option is available.
    
+                  
    
+                
    
+                
    
+                  Checkbox, Radio and Switch (Error state only)
+                  
    
+                    
+                  
    
+                  
    
+                    
+                    
+                  
    
+                  
    
+                    
+                  
    
+                
    
+              
    
+            
    
+            
    <form>
+  <!-- form validation class: has-success -->
+  <div class="form-group has-success">
+    <label class="form-label" for="input-example-1">Name</label>
+    <input class="form-input" type="text" id="input-example-1" placeholder="...">
+    <p class="form-input-hint">The name is invalid.</p>
+  </div>
 
-        
    
-          
    For showing elements on specific viewport sizes, there are classes show-xs, show-sm, show-md, show-lg and show-xl available.
    
-          
      
-            
    • show-xs shows elements when the window width is smaller than or equal to 480px. 
      • 
-            
    • show-sm shows elements when the window width is smaller than or equal to 600px. 
      • 
-            
    • show-md shows elements when the window width is smaller than or equal to 840px. 
      • 
-            
    • show-lg shows elements when the window width is smaller than or equal to 960px. 
      • 
-            
    • show-xl shows elements when the window width is smaller than or equal to 1280px. 
      • 
-          
    
-          
    Spectre also has a responsive web test tool Responsive Resizer. You can clone the GitHub Repo to use it locally or use it online.
    
-          
    Responsive Resizer
    
-        
    
-      
    
+  <!-- form validation class: is-success -->
+  <div class="form-group">
+    <label class="form-label" for="input-example-1">Name</label>
+    <input class="form-input is-success" type="text" id="input-example-1" placeholder="...">
+    <p class="form-input-hint">The name is invalid.</p>
+  </div>
 
-      
    
+            
    Form disabled styles
    
+            
    
+               Add the disabled attribute to the element or <fieldset> for a disabled form components style.
    
+            
    
+              
    
+                
    
+                  
    
+                    
    
+                      
+                      
+                    
    
+                    
    
+                      
+                      
+                      
+                    
    
+                    
    
+                      
+                    
    
+                    
    
+                      
+                    
    
+                    
    
+                      
+                      
+                    
    
+                    
    
+                      
+                    
    
+                  
    
+                
    
               
    
             
    
+            
    <form action="#forms">
+  <fieldset disabled>
+    <div class="form-group">
+      <label class="form-label" for="input-example-19">Name</label>
+      <input class="form-input" type="text" id="input-example-19" placeholder="Name">
+    </div>
+    <div class="form-group">
+      <label class="form-label">Gender</label>
+      <label class="form-radio">
+        <input type="radio" name="gender" disabled>
+        <i class="form-icon"></i> Male
+      </label>
+      <label class="form-radio">
+        <input type="radio" name="gender" disabled>
+        <i class="form-icon"></i> Female
+      </label>
+    </div>
+    <div class="form-group">
+      <select class="form-select" disabled>
+        <option>Choose an option</option>
+        <option>Slack</option>
+        <option>Skype</option>
+        <option>Hipchat</option>
+      </select>
+    </div>
+    <div class="form-group">
+      <label class="form-switch">
+        <input type="checkbox" disabled>
+        <i class="form-icon"></i> Send me emails with news and tips
+      </label>
+    </div>
+    <div class="form-group">
+      <label class="form-label" for="input-example-20">Message</label>
+      <textarea class="form-input" id="input-example-20" placeholder="Textarea" rows="3" disabled></textarea>
+    </div>
+    <div class="form-group">
+      <label class="form-checkbox">
+        <input type="checkbox" disabled>
+        <i class="form-icon"></i> Remember me
+      </label>
+    </div>
+  </fieldset>
    
           
    
-        
    
-        
    
-          
    The navbar component can include logo brand, nav links and buttons, search box or any combination of those elements. Each section with the navbar-section class will be evenly distributed in the container.
    
-        
    
+          
    
+            
    Icons
    
+          
    
+          
    
+            
    Labels
    
+            
    Labels are formatted text tags for highlighted, informative information.
    
+            
    
+              
    default labelprimary labelsecondary labelsuccess labelwarning labelerror label
    
+            
    
+            
    Add the label class to <span> or <small> elements.
+              You can add another class label-primary, label-secondary, label-success, label-warning and label-error for colored labels.
+            
    
+            
    
+              
    default labelprimary label
    
+            
    
+            
    Add the label-rounded class to have rounded labels.
    
+            
    <!-- normal labels -->
+<span class="label">default label</span>
+<span class="label label-primary">primary label</span>
 
-
-
    <header class="navbar">
-  <section class="navbar-section">
-    <a href="#" class="navbar-brand mr-2">Spectre.css</a>
-    <a href="#" class="btn btn-link">Docs</a>
-    <a href="https://github.com/picturepan2/spectre" class="btn btn-link">GitHub</a>
-  </section>
-  <section class="navbar-section">
-    <div class="input-group input-inline">
-      <input class="form-input" type="text" placeholder="search">
-      <button class="btn btn-primary input-group-btn">Search</button>
-    </div>
-  </section>
-</header>
+<!-- rounded labels -->
+<span class="label label-rounded label-primary">primary label</span>
    
+          
    
+          
    
+            
    Code
    
+            
    Code is used for styling inline and multiline code snippets.
    
+            
    For inline code, you can use the <code> element. 
+              For multiline code snippet blocks, you can use <pre> with the code class as a container, and add <code> inside it.
+              The data-lang ibute is rendered as the language name in the top right.
+            
    
+            
    <!-- code snippets -->
+<button class="btn">
+  Submit
+</button>
 
    
-
-        
    
-          
    You can use navbar-center class to have a centered section.
    
-        
    
-
-        
    
-          
    
-            
    
-              
    
-                Docs
-                Examples
+            
    <pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- code snippets --&gt;</span>
+&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn&quot;</span>&gt;
+  Submit
+&lt;<span class="tag">/button</span>&gt;
+</code></pre>
    
+          
    
+          
    
+            
    Media
    
+            
    Media includes responsive images, figures and video classes.
    
+            
    Images
    
+            
    Add the img-responsive class to <img> elements. The images will scale with the parent sizes.
    
+            
    
+              
    macOS El Capitan Wallpaper
    
+            
    
+            
    Add the img-fit-contain or img-fit-cover class to <img> or <video> elements. The media will crop itself to fit inside the element (and you don't need another container).
+              This feature can replace the classic background image trick. Microsoft Edge support is shipped  with Build Number 16299+.
+            
    
+            
    
+              
    
+                
    macOS Yosemite Wallpaper
+                  
    img-fit-contain
    
+                
    
               
    
-              
    
-                Spectre.css
+              
    
+                
    macOS Yosemite Wallpaper
+                  
    img-fit-cover
    
+                
    
+              
    
+            
    
+            
    <img src="img/osx-el-capitan.jpg" class="img-responsive ..." alt="...">
+<img src="img/osx-el-capitan.jpg" class="img-fit-contain ..." alt="...">
+<img src="img/osx-el-capitan.jpg" class="img-fit-cover ..." alt="...">
+
    
+            
    Figure
    
+            
    You can use the element <figure> for an image with a caption.
+              Add the figure class to <figure> element.
+              The images with the img-responsive class will be responsive.
+              And the included class figure-caption will provide basic style for caption.
+              Also, you can use text-left, text-center and text-right for caption alignment.
+            
    
+            
    
+              
    
+                
    macOS Yosemite Wallpaper
+                  
    macOS Yosemite wallpaper
    
+                
    
               
    
-              
    
-                Twitter
-                GitHub
+            
    
+            
    Video
    
+            
    For responsive video, add a container with the video-responsive class. 
+              Insert any YouTube, Youku or other iframe/embed video inside the container. 
+              The ratio is 16:9 by default.
+              You may add video-responsive-4-3 for 4:3 ratio video container or video-responsive-1-1 for 1:1 ratio.
+            
    
+            
    
+              
    
+                
    
+                  
+                
    
               
    
             
    
+            
    For responsive <video> elements, you can add the video-responsive class directly.
    
+            
    <div class="video-responsive video-responsive-4-3">
+  <iframe src="..." width="..." height="..." frameborder="0" allowfullscreen></iframe>
+</div>
+
+<video class="video-responsive" src="...">...</video>
    
           
    
         
    
-
-
-
    <header class="navbar">
-  <section class="navbar-section">
-    <a href="#" class="btn btn-link">Docs</a>
-    <a href="#" class="btn btn-link">Examples</a>
-  </section>
-  <section class="navbar-center">
-    <!-- centered logo or brand -->
-  </section>
-  <section class="navbar-section">
-    <a href="#" class="btn btn-link">Twitter</a>
-    <a href="#" class="btn btn-link">GitHub</a>
-  </section>
-</header>
-
    
-
       
    
-
-      
-
     
    
-  
    
-
-  
-
-
+    
+  
+
\ No newline at end of file
diff --git a/docs/src/_docs-layout.pug b/docs/src/_docs-layout.pug
index 7ae771c..ae2da02 100644
--- a/docs/src/_docs-layout.pug
+++ b/docs/src/_docs-layout.pug
@@ -32,7 +32,7 @@ block content
             {url: '#forms', name: 'Forms'},
             {url: '#icons', name: 'Icons'},
             {url: '#labels', name: 'Labels'},
-            {url: '#codes', name: 'Codes'},
+            {url: '#code', name: 'Code'},
             {url: '#media', name: 'Media'}
           )
           +docs-accordion(
diff --git a/docs/src/_mixins.pug b/docs/src/_mixins.pug
index 54e76d7..ccbe89e 100644
--- a/docs/src/_mixins.pug
+++ b/docs/src/_mixins.pug
@@ -9,8 +9,8 @@ mixin docs-accordion(id, name, ...pages)
             a(href=id + '.html' + page.url)= page.name
 
 mixin docs-heading(id, name)
-  .container
-    h3.s-title(id=id)
+  .container(id=id)
+    h3.s-title
       a.anchor(href='#'+id aria-hidden='true') #
       | #{name}
     if block
diff --git a/docs/src/elements.pug b/docs/src/elements.pug
index 809fe0f..3f1e270 100644
--- a/docs/src/elements.pug
+++ b/docs/src/elements.pug
@@ -36,6 +36,4 @@ block docs-content
   
   //- Media
   +docs-heading('media', 'Media')
-    include contents/media.pug
-
-    
\ No newline at end of file
+    include contents/media.pug
\ No newline at end of file
diff --git a/docs/src/layout.pug b/docs/src/layout.pug
new file mode 100644
index 0000000..3f1e270
--- /dev/null
+++ b/docs/src/layout.pug
@@ -0,0 +1,39 @@
+extends _docs-layout.pug
+
+block variables
+  - var title = 'Elements - Spectre.css CSS Framework'
+  - var description = ''
+  - var current = 'elements'
+
+block docs-content
+  //- Typography
+  +docs-heading('typography', 'Typography')
+    include contents/typography.pug
+    
+  //- Tables
+  +docs-heading('tables', 'Tables')
+    include contents/tables.pug
+
+  //- Buttons
+  +docs-heading('buttons', 'Buttons')
+    include contents/buttons.pug
+
+  //- Forms
+  +docs-heading('forms', 'Forms')
+    include contents/forms.pug
+  
+  //- Icons
+  +docs-heading('icons', 'Icons')
+    include contents/icons.pug
+
+  //- Labels
+  +docs-heading('labels', 'Labels')
+    include contents/labels.pug
+
+  //- Codes
+  +docs-heading('code', 'Code')
+    include contents/code.pug
+  
+  //- Media
+  +docs-heading('media', 'Media')
+    include contents/media.pug
\ No newline at end of file
-- 
cgit v1.3.1-23-gd82d


From c8c8ec045ad7337e6cb6f7d6c07f6a0900e2cd54 Mon Sep 17 00:00:00 2001
From: Yan Zhu 
Date: Sun, 3 Jun 2018 18:44:10 +0800
Subject: Update Flexbox grid to new Pug template

---
 docs/layout.html           | 1237 +++++---------------------------------------
 docs/src/contents/grid.pug |  172 ++++++
 docs/src/layout.pug        |   42 +-
 3 files changed, 312 insertions(+), 1139 deletions(-)

(limited to 'docs/src')

diff --git a/docs/layout.html b/docs/layout.html
index b20594a..7878690 100644
--- a/docs/layout.html
+++ b/docs/layout.html
@@ -1,7 +1,7 @@
 
 
   
-    Elements - Spectre.css CSS Framework
+    Layout - Spectre.css CSS Framework
     
     
     
@@ -36,7 +36,7 @@
               
    
             
    
             
    
-              
+              
               
               
    
                 
      
@@ -52,7 +52,7 @@
               
    
             
    
             
    
-              
+              
               
               
    
                 
      
@@ -129,1186 +129,207 @@
       
    
       
    
         
    
-          
    
-            
    Typography
    
-            
    Typography sets default styles for headings, paragraphs, semantic text, blockquote and lists elements.
    
-            
    Headings
    
+          
    
+            
    Flexbox grid
    
+            
    Layout includes flexbox based responsive grid system with 12 columns.
    
             
    
-              
    
-                
    H1 Heading 40px
    
+              
    
+                
    
               
    
-              
    
-                
    H2 Heading 32px
    
+              
    
+                
    
               
    
-              
    
-                
    H3 Heading 28px
    
+              
    
+                
    
               
    
-              
    
-                
    H4 Heading 24px
    
+              
    
+                
    
               
    
-              
    
-                
    H5 Heading 20px
    
+              
    
+                
    
               
    
-              
    
-                
    H6 Heading 16px
    
+              
    
+                
    
               
    
-            
    
-            
    <h1>H1 Heading</h1>
-<h1>H1 Heading <small class="label">40px</small></h1>
-<span class="h1">H1 Heading</span>
-
    
-            
    Paragraphs
    
-            
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-              Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.
-            
    
-            
    Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.
    
-            
    <p>Lorem ipsum dolor sit amet, ...</p>
-<p>...</p>
-
    
-            
    Semantic text elements
    
-            
    
-              
    I18Nabbr
    
-              
    Boldstrongb
    
-              
    
-                Citationcite
-              
    
-              
    Hello World!code
    
-              
    
-                Deleteddel
-              
    
-              
    Emphasisem
    
-              
    Italici
    
-              
    Insertedins
    
-              
    Ctrl + Skbd
    
-              
    
-                Highlightedmark
+              
    
+                
    
               
    
-              
    
-                漢 
-                  kan字 
-                  ji
-                ruby
+              
    
+                
    
               
    
-              
    
-                Strikethroughs
+              
    
+                
    
               
    
-              
    Samplesamp
    
-              
    Text Subscriptedsub
    
-              
    Text Superscriptedsup
    
-              
    
-                time
-              
    
-              
    
-                Underlineu
-              
    
-              
    
-                x = 
-                y + 2var
-              
    
-            
    
-            
    Optimized for East Asian fonts
    
-            
    你好, こんにちは,안녕하세요
    
-            
    Chinese (Simplified)
    
-            
    革命不是请客吃饭，不是做文章，不是绘画绣花，不能那样雅致，那样从容不迫，“文质彬彬”，那样“温良恭俭让”。革命就是暴动，是一个阶级推翻一个阶级的暴烈的行动。
    
-            
    Chinese (Tranditional)
    
-            
    山不在高，有仙則名；水不在深，有龍則靈。斯是陋室，惟吾德馨。苔痕上階綠，草色入簾青；談笑有鴻儒，往來無白丁。可以調素琴，閱金經。無絲竹之亂耳，無案牘之勞形。南陽諸葛廬，西蜀子雲亭。孔子云：「何陋之有？」
    
-            
    Japanese
    
-            
    祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。おごれる人も久しからず。ただ春の夜の夢のごとし。たけき者も遂にはほろびぬ、ひとへ‌​に風の前の塵に同じ。
    
-            
    Korean
    
-            
    나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로, 어리석은 백성들이 말하고자 하는 바가 있어도, 끝내 제 뜻을 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨, 새로 스물 여덟 글자를 만드니, 사람마다 하여금 쉽게 익혀, 날마다 씀에 편하게 하고자 할 따름이다.
    
-            
    Use the lang attribute to the container element to have better Asian CJK (Chinese, Japanese and Korean) font support.
    
-            
    <p lang="zh-Hans">革命不是请客吃饭，不是做文章……</p>
-<p lang="ja">祇園精舎の鐘の声、諸行無常の響きあり……</p>
-<p lang="ko">나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로……</p>
-
    
-            
    And you can use the cjk class or the lang attribute to add spacing between underlines and strike-through text for better Chinese and Japanese readability.
    
-            
    
-              祇園
-              精舎の鐘の声、諸行無常の響きあり。
-            
    
-            
    
-              祇園
-              精舎の鐘の声、諸行無常の響きあり。
-            
    
-            
    <p class="cjk"><u>祇園</u><u>精舎</u>の鐘の声、諸行無常の響きあり。……</p>
-<p class="cjk"><del>祇園</del><del>精舎</del>の鐘の声、諸行無常の響きあり。……</p>
-
    
-            
    Fonts
    
-            
    Spectre sets the most common and best font-family for each OS with fallback support in old systems.
-              There are also fonts targeted East Asian typography.
-            
    
-            
    /* Western typography targeted */
-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
-/* Monospace typography targeted */
-font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace;
-
-/* Chinese (lang="zh-Hans" and lang="zh-Hant") targeted */
-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif;
-/* Japanese (lang="ja") targeted */
-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Meiryo, "Helvetica Neue", sans-serif;
-/* Korean (lang="ko") targeted */
-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Malgun Gothic", "Helvetica Neue", sans-serif;
-
    
-            
    Blockquote
    
-            
    
-              
    The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life.
    
-              - Bill Gates
-            
    
-            
    <blockquote>
-  <p>The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life. </p>
-  <cite>- Bill Gates</cite>
-</blockquote>
-
    
-            
    Lists
    
-            
    
-              
    
-                
      
-                  
    • list item 1
      • 
-                  
    • list item 2
-                    
        
-                      
      • list item 2.1
        • 
-                      
      • list item 2.2
        • 
-                      
      • list item 2.3
        • 
-                    
      
-                  
      • 
-                  
    • list item 3
      • 
-                
    
-              
    
-              
    
-                
      
-                  
    1. list item 1
      2. 
-                  
    2. list item 2
-                    
        
-                      
      1. list item 2.1
        2. 
-                      
      2. list item 2.2
        3. 
-                      
      3. list item 2.3
        4. 
-                    
      
-                  
      3. 
-                  
    3. list item 3
      4. 
-                
    
-              
    
-              
    
-                
    
-                  
    description list term 1
    
-                  
    description list description 1
    
-                  
    description list term 2
    
-                  
    description list description 2
    
-                  
    description list term 3
    
-                  
    description list description 3
    
-                
    
-              
    
-            
    
-            
    <!-- unordered list -->
-<ul>
-  <li>list item 1</li>
-  <li>list item 2
-    <ul>
-      <li>list item 2.1</li>
-      <li>list item 2.2</li>
-      <li>list item 2.3</li>
-    </ul>
-  </li>
-  <li>list item 3</li>
-</ul>
-
-<!-- description list -->
-<dl>
-  <dt>description list term</dt>
-  <dd>description list description</dd>
-</dl>
    
-          
    
-          
    
-            
    Tables
    
-            
    Tables include default styles for tables and data sets.
    
-            
    
-              
    
-                
-                  
-                    
-                      
-                      
-                      
-                    
-                  
-                  
-                    
-                      
-                      
-                      
-                    
-                    
-                      
-                      
-                      
-                    
-                    
-                      
-                      
-                      
-                    
-                    
-                      
-                      
-                      
-                    
-                  
-                
    NameGenreRelease date
    The Shawshank RedemptionCrime, Drama14 October 1994
    The GodfatherCrime, Drama24 March 1972
    Schindler's ListBiography, Drama, History4 February 1994
    Se7enCrime, Drama, Mystery22 September 1995
    
+              
    
+                
    
               
    
-            
    
-            
    Add the table class to any <table> element. 
-              The class will add padding, border and emphasized table header. 
-              Use the table-striped class to <table> to add zebra striped style.
-              For hoverable table rows, you can add the table-hover class to enable hover style.
-            
    
-            
    Use the active class to make <tr> element highlighted.
    
-            
    <table class="table table-striped table-hover">
-  <thead>
-    <tr>
-      <th>name</th>
-      <th>genre</th>
-      <th>release date</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr class="active">
-      <td>The Shawshank Redemption</td>
-      <td>Crime, Drama</td>
-      <td>14 October 1994</td>
-    </tr>
-  </tbody>
-</table>
    
-          
    
-          
    
-            
    Buttons
    
-            
    Buttons include simple button styles for actions in different types and sizes.
    
-            
    
-              
    
-                
-                
-                
+              
    
+                
    
               
    
-            
    
-            
    Add the btn class to <a>, <input> or <button> elements for a default button. 
-              There are classes btn-primary and btn-link for predefined primary and link buttons.
-            
    
-            
    <button class="btn">default button</button>
-<button class="btn btn-primary">primary button</button>
-<button class="btn btn-link">link button</button>
-
    
-            
    Button colors
    
-            
    
-              
    
-                
-                
+              
    
+                
    
               
    
             
    
-            
    Add the btn-success or btn-error class for success (green) or error (red) button color.
-              If you need more button colors, please use button mixins to create your own button color variants.
-            
    
-            
    <button class="btn btn-success">success button</button>
-<button class="btn btn-error">error button</button>
-
    
-            
    Button sizes
    
             
    
               
    
-                
-                
-              
    
-              
    
-                
-                
-              
    
-              
    
-                
-                
+                
    col-12 (100%)
    
               
    
             
    
-            
    Add the btn-sm or btn-lg class for small or large button size. 
-              Also, you can add the btn-block class for a full-width button.
-            
    
-            
    <button class="btn btn-lg">large button</button>
-<button class="btn btn-sm">small button</button>
-
-<button class="btn btn-block">block button</button>
-
-<button class="btn btn-primary btn-lg"><i class="icon icon-arrow-left"></i> large</button>
-<button class="btn btn-primary"><i class="icon icon-arrow-left"></i> normal</button>
-<button class="btn btn-primary btn-sm"><i class="icon icon-arrow-left"></i> small</button>
-
    
-            
    Please note that you could use the btn-action class for a square button, or add another circle class for a round button, which is often used as a Float Action Button (FAB).
    
-            
    
-              
    
-                
-                
-                
-              
    
-              
    
-                
-                
-                
-              
    
-            
    
-            
    <button class="btn btn-action"><i class="icon icon-arrow-left"></i></button>
-<button class="btn btn-action circle"><i class="icon icon-arrow-left"></i></button>
-
    
-            
    Button states
    
-            
    Add the active class for active button state style.
    
             
    
-              
    
-                
-                
-                
+              
    
+                
    col-9 (75%)
    
               
    
             
    
-            
    Add the disabled class or the disabled attribute for disabled button state style.
    
             
    
-              
    
-                
-                
-                
+              
    
+                
    col-6 (50%)
    
               
    
             
    
-            
    <!-- buttons with disabled state -->
-<button class="btn disabled" tabindex="-1">disabled button</button>
-<button class="btn" disabled tabindex="-1">disabled button</button>
-
    
-            
    A button with the loading class can show loading indicator.
    
             
    
-              
    
-                
-                
-                
+              
    
+                
    col-3 (25%)
    
               
    
             
    
-            
    <!-- buttons with loading state -->
-<button class="btn loading">button</button>
-<button class="btn btn-primary loading">primary button</button>
-
    
-            
    Button groups
    
-            
    
-              
    
-                
    
-                  
-                  
-                  
-                
    
-              
    
-              
    
-                
    
-                  
-                  
-                  
-                
    
-              
    
-            
    
-            
    
-              
    
-                
    
-                  
-                  
-                  
-                
    
-              
    
-              
    
-                
    
-                  
-                  
-                  
-                
    
-              
    
-            
    
-            
    If you want to use buttons as a group, add the btn-group class to the container.
-              You can add the btn-group-block class for a full-width button group.
-            
    
-            
    <div class="btn-group btn-group-block">
-  <button class="btn">first button</button>
-  <button class="btn">second button</button>
-  <button class="btn">third button</button>
-</div> 
    
-          
    
-          
    
-            
    Forms
    
-            
    Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch.
    
-            
    
-              
    
-                
    
-                  
-                  
-                
    
-                
    
-                  
-                  
-                
    
-              
    
-            
    
-            
    <!-- form input control -->
-<div class="form-group">
-  <label class="form-label" for="input-example-1">Name</label>
-  <input class="form-input" type="text" id="input-example-1" placeholder="Name">
+            
    <!-- flexbox grid example -->
+<div class="container">
+  <div class="columns">
+    <div class="column col-6">col-6</div>
+    <div class="column col-3">col-3</div>
+    <div class="column col-2">col-2</div>
+    <div class="column col-1">col-1</div>
+  </div>
 </div>
 
    
-            
    
-              
    
-                
    
-                  
-                  
-                
    
+            
    Add the columns class to a container with the container class. 
+              And add any element you want with the column class inside the container. These columns will take up the space equally.
+              You can specific the width of each column by adding class col-<1-12>.
+            
    
+            
    And you can add the col-gapless class to the columns to have gapless columns.
    
+            
    
+              
    
+                
    col-6 (gapless)
    
               
    
-            
    
-            
    <!-- form textarea control -->
-<div class="form-group">
-  <label class="form-label" for="input-example-3">Message</label>
-  <textarea class="form-input" id="input-example-3" placeholder="Textarea" rows="3"></textarea>
-</div>
-
    
-            
    
-              
    
-                
    
-                  
-                
    
-                
    
-                  
-                
    
+              
    
+                
    col-6 (gapless)
    
               
    
             
    
-            
    <!-- form select control -->
-<div class="form-group">
-  <select class="form-select">
-    <option>Choose an option</option>
-    <option>Slack</option>
-    <option>Skype</option>
-    <option>Hipchat</option>
-  </select>
+            
    <!-- gapless columns -->
+<div class="columns col-gapless">
+  <div class="column col-6">col-6</div>
+  <div class="column col-6">col-6</div>
 </div>
 
    
-            
    
-              
    
-                
    
-                  
    
-                    
-                    
-                    
-                  
    
-                
    
+            
    By default, Spectre grid has multi-line flexbox enabled. You can add the col-oneline class to columns to make all its child columns positioned in the same single row.
    
+            
    
+              
    
+                
    col-8
    
               
    
-            
    
-            
    <!-- form radio control -->
-<div class="form-group">
-  <label class="form-label">Gender</label>
-  <label class="form-radio">
-    <input type="radio" name="gender" checked>
-    <i class="form-icon"></i> Male
-  </label>
-  <label class="form-radio">
-    <input type="radio" name="gender">
-    <i class="form-icon"></i> Female
-  </label>
-</div>
-
    
-            
    
-              
    
-                
    
-                  
-                
    
-                
    
-                  
-                
    
+              
    
+                
    col-8
    
               
    
             
    
-            
    <!-- form switch control -->
-<div class="form-group">
-  <label class="form-switch">
-    <input type="checkbox">
-    <i class="form-icon"></i> Send me emails with news and tips
-  </label>
+            
    <!-- one line columns -->
+<div class="columns col-oneline">
+  <div class="column col-8">col-8</div>
+  <div class="column col-8">col-8</div>
 </div>
 
    
-            
    
-              
    
-                
    
-                  
-                
    
-                
    
-                  
-                
    
-              
    
-            
    
-            
    <!-- form checkbox control -->
-<div class="form-group">
-  <label class="form-checkbox">
-    <input type="checkbox">
-    <i class="form-icon"></i> Remember me
-  </label>
-</div>
-
    
-            
    You can use :indeterminate pseudo class for indeterminate state of checkboxes.
    
-            
    Horizontal forms
    
-            
    If you want to have a horizontal form, add the form-horizontal class to the <form> container.
-              And add the col-<1-12> and col-xs/sm/lg/xl-<1-12> class to the child elements for responsive form row layout.
+            
    Grid offset
    
+            
    
+              The Flexbox grid provides margin auto utilities to set offset. 
+              There are col-mx-auto, col-ml-auto and col-mr-auto to set margins between columns without using empty columns.
             
    
             
    
-              
    
-                
    
-                  
    
-                    
    
-                      
-                    
    
-                    
    
-                      
-                    
    
-                  
    
-                  
    
-                    
    
-                      
-                    
    
-                    
    
-                      
-                    
    
-                  
    
-                  
    
-                    
    
-                      
-                    
    
-                    
    
-                      
-                      
-                    
    
-                  
    
-                  
    
-                    
    
-                      
-                    
    
-                    
    
-                      
-                    
    
-                  
    
-                  
    
-                    
    
-                      
-                    
    
-                  
    
-                  
    
-                    
    
-                      
-                    
    
-                    
    
-                      
-                    
    
-                  
    
-                  
    
-                    
    
-                      
-                    
    
-                  
    
-                
    
+              
    
+                
    col-2
    
+              
    
+              
    
+                
    col-4 col-mx-auto
    
               
    
             
    
-            
    <form class="form-horizontal">
-  <div class="form-group">
-    <div class="col-3 col-sm-12">
-      <label class="form-label" for="input-example-1">Name</label>
-    </div>
-    <div class="col-9 col-sm-12">
-      <input class="form-input" type="text" id="input-example-1" placeholder="Name">
-    </div>
-  </div>
-  <!-- form structure -->
-</form>
-
    
-            
    Form sizes
    
-            
    For smaller or larger input and select controls, you could add the input-sm/input-lg, select-sm/select-lg and label-sm/label-lg classes to the elements.
    
             
    
-              
    
-                
-              
    
-              
    
-                
+              
    
+                
    col-2
    
               
    
-              
    
-                
+              
    
+                
    col-4 col-ml-auto
    
               
    
             
    
             
    
-              
    
-                
+              
    
+                
    col-4 col-ml-auto
    
               
    
-              
    
-                
-              
    
-              
    
-                
+              
    
+                
    col-2
    
               
    
             
    
-            
    You can add the input-sm/input-lg classes to the input-checkbox, input-radio and input-switch to have different sizes.
    
-            
    Form icons
    
-            
    Spectre Form components has Spectre Icons support.
    
-            
    Add a wrapper with the has-icon-left/has-icon-right class to <input> element.
-              And add the icon with form-icon class next to the <input>.
-            
    
             
    
-              
    
-                
    
-                  
-                
    
+              
    
+                
    col-4 col-mx-auto
    
               
    
-              
    
-                
    
-                  
-                
    
-              
    
-              
    
-                
    
-                  
-                
    
+              
    
+                
    col-2
    
               
    
             
    
             
    
-              
    
-                
    
-                  
-                
    
+              
    
+                
    col-4 col-mr-auto
    
               
    
-              
    
-                
    
-                  
-                
    
-              
    
-              
    
-                
    
-                  
-                
    
+              
    
+                
    col-2
    
               
    
             
    
-            
    <!-- form input with Spectre icon -->
-<div class="has-icon-left">
-  <input type="text" class="form-input" placeholder="...">
-  <i class="form-icon icon icon-check"></i>
-</div>
-
    
-            
    You can use the loading class for loading or posting state.
    
             
    
-              
    
-                
    
-                  
-                
    
-              
    
-              
    
-                
    
-                  
-                
    
-              
    
-              
    
-                
    
-                  
-                
    
+              
    
+                
    col-4 col-mx-auto
    
               
    
             
    
-            
    <!-- form input with loading icon -->
-<div class="has-icon-right">
-  <input type="text" class="form-input" placeholder="...">
-  <i class="form-icon loading"></i>
+            
    <!-- grid offset example -->
+<div class="container">
+  <div class="columns">
+    <div class="column col-4 col-mr-auto">col-4 col-mr-auto</div>
+    <div class="column col-2">col-2</div>
+  </div>
 </div>
 
    
-            
    Input types
    
+            
    Grid nesting
    
+            
    To nest grids, add the new columns and column structure within an existing column.
    
             
    
-              
    
-                
    
-                  
    
-                    
    
-                      
-                    
    
-                    
    
-                      
-                    
    
-                  
    
-                  
    
-                    
    
-                      
-                    
    
-                    
    
-                      
-                    
    
-                  
    
-                  
    
-                    
    
-                      
-                    
    
-                    
    
-                      
-                    
    
-                  
    
-                  
    
-                    
    
-                      
-                    
    
-                    
    
-                      
-                    
    
-                  
    
-                  
    
-                    
    
-                      
-                    
    
-                    
    
-                      
-                    
    
-                  
    
-                  
    
-                    
    
-                      
+              
    
+                
    
+                  
    col-6
    
+                  
    
+                    
    
+                      
    col-6
    
                     
    
-                    
    
-                      
+                    
    
+                      
    col-6
    
                     
    
                   
    
-                  
    
-                    
    
-                      
-                    
    
-                    
    
-                      
-                    
    
-                  
    
-                  
    
-                    
    
-                      
-                    
    
-                    
    
-                      
-                    
    
-                  
    
-                  
    
-                    
    
-                      
-                    
    
-                    
    
-                      
-                    
    
-                  
    
-                
-              
    
-            
    
-            
    Input groups
    
-            
    
-              
    
-                
    
-                  
-                  
-                
    
-              
    
-              
    
-                
    slack.com/
-                  
-                  
-                
    
-              
    
-            
    
-            
    
-              
    
-                
    
-                  
-                  
-                
    
-              
    
-              
    
-                
    slack.com/
-                  
-                  
-                
    
-              
    
-            
    
-            
    
-              
    
-                
    
-                  
-                  
-                
    
-              
    
-              
    
-                
    
-                  
-                  
-                
    
-              
    
-            
    
-            
    
-              
    
-                
    
-                  
-                  
-                
    
-              
    
-              
    
-                
    slack.com/
-                  
-                  
                 
    
               
    
-            
    
-            
    If you want to attach text and button along with an input, add the input-group class to the input container.
-              And add the input-group-addon class to the text element and input-group-btn to the button element.
-            
    
-            
    <!-- normal input group -->
-<div class="input-group">
-  <span class="input-group-addon">...</span>
-  <input type="text" class="form-input" placeholder="...">
-</div>
-
-<!-- large input group -->
-<div class="input-group">
-  <span class="input-group-addon addon-lg">...</span>
-  <input type="text" class="form-input input-lg" placeholder="...">
-</div>
-
-<!-- normal input group with button -->
-<div class="input-group">
-  <span class="input-group-addon">...</span>
-  <input type="text" class="form-input" placeholder="...">
-  <button class="btn btn-primary input-group-btn">Submit</button>
-</div>
-
    
-            
    Form validation styles
    
-            
    To use form validation styles, you can either add is-success or is-error class to the controls or add has-success or has-error class to parent elements.
-              Use the form-input-hint class to provide form validation success and error messages.
-            
    
-            
    
-              
    
-                
    
-                  Input
-                  
    
-                    
-                    
-                    
    The name is valid.
    
-                  
    
-                  
    
-                    
-                    
-                    
    Passwords must have at least 8 characters.
    
-                  
    
-                  
    
-                    
-                    
-                    
    The Email address is unavailable.
    
-                  
    
-                
    
-                
    
-                  Select
-                  
    
-                    
-                    
    The option is invalid.
    
-                  
    
-                  
    
-                    
-                    
    The option is available.
    
-                  
    
-                
    
-                
    
-                  Checkbox, Radio and Switch (Error state only)
-                  
    
-                    
-                  
    
-                  
    
-                    
-                    
-                  
    
-                  
    
-                    
-                  
    
-                
    
+              
    
+                
    col-6
    
               
    
             
    
-            
    <form>
-  <!-- form validation class: has-success -->
-  <div class="form-group has-success">
-    <label class="form-label" for="input-example-1">Name</label>
-    <input class="form-input" type="text" id="input-example-1" placeholder="...">
-    <p class="form-input-hint">The name is invalid.</p>
-  </div>
-
-  <!-- form validation class: is-success -->
-  <div class="form-group">
-    <label class="form-label" for="input-example-1">Name</label>
-    <input class="form-input is-success" type="text" id="input-example-1" placeholder="...">
-    <p class="form-input-hint">The name is invalid.</p>
-  </div>
-
-  <!-- form validation example for checkbox, radio and switch -->
-  <div class="form-group">
-    <label class="form-checkbox is-error">
-      <input type="checkbox">
-      <i class="form-icon"></i> Remember me
-    </label>
-  </div>
-</form>
-
    
-            
    Form disabled styles
    
-            
    
-               Add the disabled attribute to the element or <fieldset> for a disabled form components style.
    
-            
    
-              
    
-                
    
-                  
    
-                    
    
-                      
-                      
-                    
    
-                    
    
-                      
-                      
-                      
-                    
    
-                    
    
-                      
-                    
    
-                    
    
-                      
-                    
    
-                    
    
-                      
-                      
-                    
    
-                    
    
-                      
-                    
    
-                  
    
-                
    
-              
    
-            
    
-            
    <form action="#forms">
-  <fieldset disabled>
-    <div class="form-group">
-      <label class="form-label" for="input-example-19">Name</label>
-      <input class="form-input" type="text" id="input-example-19" placeholder="Name">
-    </div>
-    <div class="form-group">
-      <label class="form-label">Gender</label>
-      <label class="form-radio">
-        <input type="radio" name="gender" disabled>
-        <i class="form-icon"></i> Male
-      </label>
-      <label class="form-radio">
-        <input type="radio" name="gender" disabled>
-        <i class="form-icon"></i> Female
-      </label>
-    </div>
-    <div class="form-group">
-      <select class="form-select" disabled>
-        <option>Choose an option</option>
-        <option>Slack</option>
-        <option>Skype</option>
-        <option>Hipchat</option>
-      </select>
-    </div>
-    <div class="form-group">
-      <label class="form-switch">
-        <input type="checkbox" disabled>
-        <i class="form-icon"></i> Send me emails with news and tips
-      </label>
+            
    <!-- grid nesting example -->
+<div class="container">
+  <div class="columns">
+    <div class="column col-6">col-6
+      <div class="columns">
+        <div class="column col-6">col-6</div>
+        <div class="column col-6">col-6</div>
+      </div>
     </div>
-    <div class="form-group">
-      <label class="form-label" for="input-example-20">Message</label>
-      <textarea class="form-input" id="input-example-20" placeholder="Textarea" rows="3" disabled></textarea>
-    </div>
-    <div class="form-group">
-      <label class="form-checkbox">
-        <input type="checkbox" disabled>
-        <i class="form-icon"></i> Remember me
-      </label>
-    </div>
-  </fieldset>
    
-          
    
-          
    
-            
    Icons
    
-          
    
-          
    
-            
    Labels
    
-            
    Labels are formatted text tags for highlighted, informative information.
    
-            
    
-              
    default labelprimary labelsecondary labelsuccess labelwarning labelerror label
    
-            
    
-            
    Add the label class to <span> or <small> elements.
-              You can add another class label-primary, label-secondary, label-success, label-warning and label-error for colored labels.
-            
    
-            
    
-              
    default labelprimary label
    
-            
    
-            
    Add the label-rounded class to have rounded labels.
    
-            
    <!-- normal labels -->
-<span class="label">default label</span>
-<span class="label label-primary">primary label</span>
-
-<!-- rounded labels -->
-<span class="label label-rounded label-primary">primary label</span>
    
+    <div class="column col-6">col-6</div>
+  </div>
+</div>
    
           
    
-          
    
-            
    Code
    
-            
    Code is used for styling inline and multiline code snippets.
    
-            
    For inline code, you can use the <code> element. 
-              For multiline code snippet blocks, you can use <pre> with the code class as a container, and add <code> inside it.
-              The data-lang ibute is rendered as the language name in the top right.
-            
    
-            
    <!-- code snippets -->
-<button class="btn">
-  Submit
-</button>
-
    
-            
    <pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- code snippets --&gt;</span>
-&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn&quot;</span>&gt;
-  Submit
-&lt;<span class="tag">/button</span>&gt;
-</code></pre>
    
+          
    
+            
    Responsive
    
           
    
-          
    
-            
    Media
    
-            
    Media includes responsive images, figures and video classes.
    
-            
    Images
    
-            
    Add the img-responsive class to <img> elements. The images will scale with the parent sizes.
    
-            
    
-              
    macOS El Capitan Wallpaper
    
-            
    
-            
    Add the img-fit-contain or img-fit-cover class to <img> or <video> elements. The media will crop itself to fit inside the element (and you don't need another container).
-              This feature can replace the classic background image trick. Microsoft Edge support is shipped  with Build Number 16299+.
-            
    
-            
    
-              
    
-                
    macOS Yosemite Wallpaper
-                  
    img-fit-contain
    
-                
    
-              
    
-              
    
-                
    macOS Yosemite Wallpaper
-                  
    img-fit-cover
    
-                
    
-              
    
-            
    
-            
    <img src="img/osx-el-capitan.jpg" class="img-responsive ..." alt="...">
-<img src="img/osx-el-capitan.jpg" class="img-fit-contain ..." alt="...">
-<img src="img/osx-el-capitan.jpg" class="img-fit-cover ..." alt="...">
-
    
-            
    Figure
    
-            
    You can use the element <figure> for an image with a caption.
-              Add the figure class to <figure> element.
-              The images with the img-responsive class will be responsive.
-              And the included class figure-caption will provide basic style for caption.
-              Also, you can use text-left, text-center and text-right for caption alignment.
-            
    
-            
    
-              
    
-                
    macOS Yosemite Wallpaper
-                  
    macOS Yosemite wallpaper
    
-                
    
-              
    
-            
    
-            
    Video
    
-            
    For responsive video, add a container with the video-responsive class. 
-              Insert any YouTube, Youku or other iframe/embed video inside the container. 
-              The ratio is 16:9 by default.
-              You may add video-responsive-4-3 for 4:3 ratio video container or video-responsive-1-1 for 1:1 ratio.
-            
    
-            
    
-              
    
-                
    
-                  
-                
    
-              
    
-            
    
-            
    For responsive <video> elements, you can add the video-responsive class directly.
    
-            
    <div class="video-responsive video-responsive-4-3">
-  <iframe src="..." width="..." height="..." frameborder="0" allowfullscreen></iframe>
-</div>
-
-<video class="video-responsive" src="...">...</video>
    
+          
         
    
       
    
diff --git a/docs/src/contents/grid.pug b/docs/src/contents/grid.pug
index e69de29..d0172fb 100644
--- a/docs/src/contents/grid.pug
+++ b/docs/src/contents/grid.pug
@@ -0,0 +1,172 @@
+p
+  | Layout includes flexbox based responsive grid system with 12 columns.
+
+.columns
+  .column
+    .bg-primary.text-secondary.docs-block
+  .column
+    .bg-primary.text-secondary.docs-block
+  .column
+    .bg-primary.text-secondary.docs-block
+  .column
+    .bg-primary.text-secondary.docs-block
+  .column
+    .bg-primary.text-secondary.docs-block
+  .column
+    .bg-primary.text-secondary.docs-block
+  .column
+    .bg-primary.text-secondary.docs-block
+  .column
+    .bg-primary.text-secondary.docs-block
+  .column
+    .bg-primary.text-secondary.docs-block
+  .column
+    .bg-primary.text-secondary.docs-block
+  .column
+    .bg-primary.text-secondary.docs-block
+  .column
+    .bg-primary.text-secondary.docs-block
+.columns
+  .column.col-12
+    .bg-gray.docs-block col-12 (100%)
+.columns
+  .column.col-9
+    .bg-gray.docs-block col-9 (75%)
+.columns
+  .column.col-6
+    .bg-gray.docs-block col-6 (50%)
+.columns
+  .column.col-3
+    .bg-gray.docs-block col-3 (25%)
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+      
    
+        
    
+          
    col-6
    
+          
    col-3
    
+          
    col-2
    
+          
    col-1
    
+        
    
+      
    
+
+p
+  | Add the #[code columns] class to a container with the #[code container] class. 
+  | And add any element you want with the #[code column] class inside the container. These columns will take up the space equally.
+  | You can specific the width of each column by adding class #[code col-<1-12>].
+p
+  | And you can add the #[code col-gapless] class to the #[code columns] to have gapless columns.
+
+.columns.col-gapless
+  .column.col-6
+    .bg-gray.docs-block col-6 (gapless)
+  .column.col-6
+    .bg-gray.docs-block col-6 (gapless)
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+      
    
+        
    col-6
    
+        
    col-6
    
+      
    
+
+p
+  | By default, Spectre grid has multi-line flexbox enabled. You can add the #[code col-oneline] class to #[code columns] to make all its child columns positioned in the same single row.
+
+.columns.col-oneline
+  .column.col-8
+    .bg-gray.docs-block col-8
+  .column.col-8
+    .bg-gray.docs-block col-8
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+      
    
+        
    col-8
    
+        
    col-8
    
+      
    
+
++docs-subheading('grid-offset', 'Grid offset')
+
+p
+  | The Flexbox grid provides margin auto utilities to set offset. 
+  | There are #[code col-mx-auto], #[code col-ml-auto] and #[code col-mr-auto] to set margins between columns without using empty columns.
+
+.columns
+  .column.col-2
+    .bg-gray.docs-block col-2
+  .column.col-4.col-mx-auto
+    .bg-gray.docs-block col-4 col-mx-auto
+.columns
+  .column.col-2
+    .bg-gray.docs-block col-2
+  .column.col-4.col-ml-auto
+    .bg-gray.docs-block col-4 col-ml-auto
+.columns
+  .column.col-4.col-ml-auto
+    .bg-gray.docs-block col-4 col-ml-auto
+  .column.col-2
+    .bg-gray.docs-block col-2
+.columns
+  .column.col-4.col-mx-auto
+    .bg-gray.docs-block col-4 col-mx-auto
+  .column.col-2
+    .bg-gray.docs-block col-2
+.columns
+  .column.col-4.col-mr-auto
+    .bg-gray.docs-block col-4 col-mr-auto
+  .column.col-2
+    .bg-gray.docs-block col-2
+.columns
+  .column.col-4.col-mx-auto
+    .bg-gray.docs-block col-4 col-mx-auto
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+      
    
+        
    
+          
    col-4 col-mr-auto
    
+          
    col-2
    
+        
    
+      
    
+
++docs-subheading('grid-nesting', 'Grid nesting')
+
+p
+  | To nest grids, add the new #[code columns] and #[code column] structure within an existing column.
+
+.columns
+  .column.col-6
+    .bg-gray
+      .docs-block col-6
+      .columns
+        .column.col-6
+          .bg-primary.docs-block col-6
+        .column.col-6
+          .bg-primary.docs-block col-6
+  .column.col-6
+    .bg-gray.docs-block col-6
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+      
    
+        
    
+          
    col-6
+            
    
+              
    col-6
    
+              
    col-6
    
+            
    
+          
    
+          
    col-6
    
+        
    
+      
    
\ No newline at end of file
diff --git a/docs/src/layout.pug b/docs/src/layout.pug
index 3f1e270..3adaf6e 100644
--- a/docs/src/layout.pug
+++ b/docs/src/layout.pug
@@ -1,39 +1,19 @@
 extends _docs-layout.pug
 
 block variables
-  - var title = 'Elements - Spectre.css CSS Framework'
+  - var title = 'Layout - Spectre.css CSS Framework'
   - var description = ''
-  - var current = 'elements'
+  - var current = 'layout'
 
 block docs-content
-  //- Typography
-  +docs-heading('typography', 'Typography')
-    include contents/typography.pug
+  //- Flexbox grid
+  +docs-heading('grid', 'Flexbox grid')
+    include contents/grid.pug
     
-  //- Tables
-  +docs-heading('tables', 'Tables')
-    include contents/tables.pug
+  //- Responsive
+  +docs-heading('responsive', 'Responsive')
+    include contents/responsive.pug
 
-  //- Buttons
-  +docs-heading('buttons', 'Buttons')
-    include contents/buttons.pug
-
-  //- Forms
-  +docs-heading('forms', 'Forms')
-    include contents/forms.pug
-  
-  //- Icons
-  +docs-heading('icons', 'Icons')
-    include contents/icons.pug
-
-  //- Labels
-  +docs-heading('labels', 'Labels')
-    include contents/labels.pug
-
-  //- Codes
-  +docs-heading('code', 'Code')
-    include contents/code.pug
-  
-  //- Media
-  +docs-heading('media', 'Media')
-    include contents/media.pug
\ No newline at end of file
+  //- Navbar
+  +docs-heading('navbar', 'Navbar')
+    include contents/navbar.pug
\ No newline at end of file
-- 
cgit v1.3.1-23-gd82d


From 17423a6156ba7cdc4de6744b0098d61702111101 Mon Sep 17 00:00:00 2001
From: Yan Zhu 
Date: Sun, 3 Jun 2018 21:48:19 +0800
Subject: Update responsive and navbar to new Pug templates

---
 docs/layout.html                 | 332 +++++++++++++++++++++++++++++++++++++++
 docs/src/contents/navbar.pug     |  66 ++++++++
 docs/src/contents/responsive.pug | 254 ++++++++++++++++++++++++++++++
 3 files changed, 652 insertions(+)

(limited to 'docs/src')

diff --git a/docs/layout.html b/docs/layout.html
index 7878690..95f95f2 100644
--- a/docs/layout.html
+++ b/docs/layout.html
@@ -327,9 +327,341 @@
           
    
           
    
             
    Responsive
    
+            
    Spectre provides a neat responsive layout grid system and responsive visibility utilities.
    
+            
    
+              
    
+                
    col-10 
     col-lg-8 
     col-md-6 
     col-sm-4
    
+              
    
+              
    
+                
    col-2 
     col-lg-4 
     col-md-6 
     col-sm-8
    
+              
    
+            
    
+            
    There are col-xs-<1-12>, col-sm-<1-12>, col-md-<1-12>, col-lg-<1-12> and col-xl-<1-12> available for flexible grid across mobile, tablet and desktop viewport usage.
    
+            
      
+              
    • col-xs-<1-12> apply to window width smaller than or equal to 480px.
      • 
+              
    • col-sm-<1-12> apply to window width smaller than or equal to 600px.
      • 
+              
    • col-md-<1-12> apply to window width smaller than or equal to 840px.
      • 
+              
    • col-lg-<1-12> apply to window width smaller than or equal to 960px.
      • 
+              
    • col-xl-<1-12> apply to window width smaller than or equal to 1280px.
      • 
+              
    • col-<1-12> apply to all window width, including the width wider than 1280px.
      • 
+            
    
+            
    <div class="container">
+  <div class="columns">
+    <div class="column col-xs-6">col-xs-6</div>
+    <div class="column col-xs-3">col-xs-3</div>
+    <div class="column col-xs-3">col-xs-3</div>
+  </div>
+</div>
+
    
+            
    Responsive container
    
+            
    
+              The responsive layout also provides fixed-width containers.
+              Use grid-xs(480px), grid-sm(600px), grid-md(840px), grid-lg(960px) or grid-xl(1280px) to the container for a fixed-width container with the specific max-width.
+            
    
+            
    <!-- 100% width container with max-width set to grid-lg (960px) -->
+<div class="container grid-lg">
+  <div class="columns">
+    ...
+  </div>
+</div>
+
    
+            
    Responsive visibility
    
+            
    The responsive visibility utilities help show and hide elements on specific viewport sizes.
    
+            
    
+              
    
+                
+                  
+                    
+                      
+                      
+                      
+                      
+                      
+                      
+                    
+                  
+                  
+                    
+                      
+                      
+                      
+                      
+                      
+                      
+                    
+                    
+                      
+                      
+                      
+                      
+                      
+                      
+                    
+                    
+                      
+                      
+                      
+                      
+                      
+                      
+                    
+                    
+                      
+                      
+                      
+                      
+                      
+                      
+                    
+                    
+                      
+                      
+                      
+                      
+                      
+                      
+                    
+                  
+                
    size-xssize-smsize-mdsize-lgsize-xl
    hide-xs
+                        
    
+                          		
+                        
    
+                          		
+                        
    
+                          		
+                        
    
+                          		
+                        
    
+                      
    hide-sm
+                        
    
+                          		
+                        
    
+                          		
+                        
    
+                          		
+                        
    
+                          		
+                        
    
+                      
    hide-md
+                        
    
+                          		
+                        
    
+                          		
+                        
    
+                          		
+                        
    
+                          		
+                        
    
+                      
    hide-lg
+                        
    
+                          		
+                        
    
+                          		
+                        
    
+                          		
+                        
    
+                          		
+                        
    
+                      
    hide-xl
+                        
    
+                          		
+                        
    
+                          		
+                        
    
+                          		
+                        
    
+                          		
+                        
    
+                      
    
+              
    
+            
    
+            
    For hiding elements on specific viewport sizes, there are classes hide-xs, hide-sm, hide-md, hide-lg and hide-xl available.
    
+            
      
+              
    • hide-xs hides elements when the window width is smaller than or equal to 480px.
      • 
+              
    • hide-sm hides elements when the window width is smaller than or equal to 600px.
      • 
+              
    • hide-md hides elements when the window width is smaller than or equal to 840px.
      • 
+              
    • hide-lg hides elements when the window width is smaller than or equal to 960px.
      • 
+              
    • hide-xl hides elements when the window width is smaller than or equal to 1280px.
      • 
+            
    
+            
    
+              
    
+                
+                  
+                    
+                      
+                      
+                      
+                      
+                      
+                      
+                    
+                  
+                  
+                    
+                      
+                      
+                      
+                      
+                      
+                      
+                    
+                    
+                      
+                      
+                      
+                      
+                      
+                      
+                    
+                    
+                      
+                      
+                      
+                      
+                      
+                      
+                    
+                    
+                      
+                      
+                      
+                      
+                      
+                      
+                    
+                    
+                      
+                      
+                      
+                      
+                      
+                      
+                    
+                  
+                
    size-xssize-smsize-mdsize-lgsize-xl
    show-xs
+                        
    
+                          		
+                        
    
+                          		
+                        
    
+                          		
+                        
    
+                          		
+                        
    
+                      
    show-sm
+                        
    
+                          		
+                        
    
+                          		
+                        
    
+                          		
+                        
    
+                          		
+                        
    
+                      
    show-md
+                        
    
+                          		
+                        
    
+                          		
+                        
    
+                          		
+                        
    
+                          		
+                        
    
+                      
    show-lg
+                        
    
+                          		
+                        
    
+                          		
+                        
    
+                          		
+                        
    
+                          		
+                        
    
+                      
    show-xl
+                        
    
+                          		
+                        
    
+                          		
+                        
    
+                          		
+                        
    
+                          		
+                        
    
+                      
    
+              
    
+            
    
+            
    For showing elements on specific viewport sizes, there are classes show-xs, show-sm, show-md, show-lg and show-xl available.
    
+            
      
+              
    • show-xs shows elements when the window width is smaller than or equal to 480px.
      • 
+              
    • show-sm shows elements when the window width is smaller than or equal to 600px.
      • 
+              
    • show-md shows elements when the window width is smaller than or equal to 840px.
      • 
+              
    • show-lg shows elements when the window width is smaller than or equal to 960px.
      • 
+              
    • show-xl shows elements when the window width is smaller than or equal to 1280px.
      • 
+            
    
+            
    
+              Spectre also has a responsive web test tool Responsive Resizer. 
+              You can clone the GitHub Repo to use it locally or use it online.
+            
    
+            
    Responsive Resizer
    
           
    
           
         
    
       
    
diff --git a/docs/src/contents/navbar.pug b/docs/src/contents/navbar.pug
index e69de29..21d13e4 100644
--- a/docs/src/contents/navbar.pug
+++ b/docs/src/contents/navbar.pug
@@ -0,0 +1,66 @@
+p Navbar is a layout container that appears in the header of apps and websites.
+
+.columns
+  .column
+    .navbar
+      .navbar-section
+        a.navbar-brand.mr-2(href="#navbar") Spectre.css
+        a.btn.btn-link(href="#navbar") Docs
+        a.btn.btn-link(href="https://github.com/picturepan2/spectre") GitHub
+      .navbar-section
+        .input-group.input-inline
+          input.form-input(type="text" placeholder="search")
+          button.btn.btn-primary.input-group-btn Search
+
+p
+  | The navbar component can include logo brand, nav links and buttons, search box or any combination of those elements.
+  | Each section with the #[code navbar-section] class will be evenly distributed in the container.
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
    
+        
    
+          Spectre.css
+          Docs
+          GitHub
+        
    
+        
    
+          
    
+            
+            
+          
    
+        
    
+      
    
+
+p
+  | You can use #[code navbar-center] class to have a centered section.
+
+.columns
+  .column.col-12
+    .navbar
+      .navbar-section
+        a.btn.btn-link(href="#navbar") Docs
+        a.btn.btn-link(href="#navbar") Examples
+      .navbar-center
+        img(src="img/spectre-logo.svg" alt="Spectre.css")
+      .navbar-section
+        a.btn.btn-link(href="https://twitter.com/spectrecss") Twitter
+        a.btn.btn-link(href="https://github.com/picturepan2/spectre") GitHub
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
    
+        
    
+          Docs
+          Examples
+        
    
+        
    
+          
+        
    
+        
    
+          Twitter
+          GitHub
+        
    
+      
    
\ No newline at end of file
diff --git a/docs/src/contents/responsive.pug b/docs/src/contents/responsive.pug
index e69de29..8898958 100644
--- a/docs/src/contents/responsive.pug
+++ b/docs/src/contents/responsive.pug
@@ -0,0 +1,254 @@
+p Spectre provides a neat responsive layout grid system and responsive visibility utilities.
+
+.columns
+  .column.col-10.col-lg-8.col-md-6.col-sm-4
+    .bg-gray.docs-block
+      | col-10 
+      br
+      |  col-lg-8 
+      br
+      |  col-md-6 
+      br
+      |  col-sm-4
+  .column.col-2.col-lg-4.col-md-6.col-sm-8
+    .bg-gray.docs-block
+      | col-2 
+      br
+      |  col-lg-4 
+      br
+      |  col-md-6 
+      br
+      |  col-sm-8
+
+p
+  | There are #[code col-xs-<1-12>], #[code col-sm-<1-12>], #[code col-md-<1-12>], #[code col-lg-<1-12>] and #[code col-xl-<1-12>] available for flexible grid across mobile, tablet and desktop viewport usage.
+
+ul
+  li
+    | #[code col-xs-<1-12>] apply to window width smaller than or equal to #[strong 480px].
+  li
+    | #[code col-sm-<1-12>] apply to window width smaller than or equal to #[strong 600px].
+  li
+    | #[code col-md-<1-12>] apply to window width smaller than or equal to #[strong 840px].
+  li
+    | #[code col-lg-<1-12>] apply to window width smaller than or equal to #[strong 960px].
+  li
+    | #[code col-xl-<1-12>] apply to window width smaller than or equal to #[strong 1280px].
+  li
+    | #[code col-<1-12>] apply to all window width, including the width wider than #[strong 1280px].
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
    
+        
    
+          
    col-xs-6
    
+          
    col-xs-3
    
+          
    col-xs-3
    
+        
    
+      
    
+
++docs-subheading('responsive-container', 'Responsive container')
+
+p
+  | The responsive layout also provides fixed-width containers.
+  | Use #[code grid-xs](480px), #[code grid-sm](600px), #[code grid-md](840px), #[code grid-lg](960px) or #[code grid-xl](1280px) to the container for a fixed-width container with the specific max-width.
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+      
    
+        
    
+          ...
+        
    
+      
    
+
++docs-subheading('responsive-visibility', 'Responsive visibility')
+
+p The responsive visibility utilities help show and hide elements on specific viewport sizes.
+
+.columns
+  .column.col-12
+    table.docs-table.table.table-striped.text-center
+      thead
+        tr
+          th
+          th size-xs
+          th size-sm
+          th size-md
+          th size-lg
+          th size-xl
+      tbody
+        tr
+          td.text-left hide-xs
+          td
+            .bg-secondary.docs-dot
+          td
+            .bg-primary.docs-dot
+          td
+            .bg-primary.docs-dot
+          td
+            .bg-primary.docs-dot
+          td
+            .bg-primary.docs-dot
+        tr
+          td.text-left hide-sm
+          td
+            .bg-secondary.docs-dot
+          td
+            .bg-secondary.docs-dot
+          td
+            .bg-primary.docs-dot
+          td
+            .bg-primary.docs-dot
+          td
+            .bg-primary.docs-dot
+        tr
+          td.text-left hide-md
+          td
+            .bg-secondary.docs-dot
+          td
+            .bg-secondary.docs-dot
+          td
+            .bg-secondary.docs-dot
+          td
+            .bg-primary.docs-dot
+          td
+            .bg-primary.docs-dot
+        tr
+          td.text-left hide-lg
+          td
+            .bg-secondary.docs-dot
+          td
+            .bg-secondary.docs-dot
+          td
+            .bg-secondary.docs-dot
+          td
+            .bg-secondary.docs-dot
+          td
+            .bg-primary.docs-dot
+        tr
+          td.text-left hide-xl
+          td
+            .bg-secondary.docs-dot
+          td
+            .bg-secondary.docs-dot
+          td
+            .bg-secondary.docs-dot
+          td
+            .bg-secondary.docs-dot
+          td
+            .bg-secondary.docs-dot
+
+p
+  | For hiding elements on specific viewport sizes, there are classes #[code hide-xs], #[code hide-sm], #[code hide-md], #[code hide-lg] and #[code hide-xl] available.
+
+ul
+  li
+    | #[code hide-xs] hides elements when the window width is smaller than or equal to #[strong 480px].
+  li
+    | #[code hide-sm] hides elements when the window width is smaller than or equal to #[strong 600px].
+  li
+    | #[code hide-md] hides elements when the window width is smaller than or equal to #[strong 840px].
+  li
+    | #[code hide-lg] hides elements when the window width is smaller than or equal to #[strong 960px].
+  li
+    | #[code hide-xl] hides elements when the window width is smaller than or equal to #[strong 1280px].
+
+.columns
+  .column.col-12
+    table.docs-table.table.table-striped.text-center
+      thead
+        tr
+          th
+          th size-xs
+          th size-sm
+          th size-md
+          th size-lg
+          th size-xl
+      tbody
+        tr
+          td.text-left show-xs
+          td
+            .bg-primary.docs-dot
+          td
+            .bg-secondary.docs-dot
+          td
+            .bg-secondary.docs-dot
+          td
+            .bg-secondary.docs-dot
+          td
+            .bg-secondary.docs-dot
+        tr
+          td.text-left show-sm
+          td
+            .bg-primary.docs-dot
+          td
+            .bg-primary.docs-dot
+          td
+            .bg-secondary.docs-dot
+          td
+            .bg-secondary.docs-dot
+          td
+            .bg-secondary.docs-dot
+        tr
+          td.text-left show-md
+          td
+            .bg-primary.docs-dot
+          td
+            .bg-primary.docs-dot
+          td
+            .bg-primary.docs-dot
+          td
+            .bg-secondary.docs-dot
+          td
+            .bg-secondary.docs-dot
+        tr
+          td.text-left show-lg
+          td
+            .bg-primary.docs-dot
+          td
+            .bg-primary.docs-dot
+          td
+            .bg-primary.docs-dot
+          td
+            .bg-primary.docs-dot
+          td
+            .bg-secondary.docs-dot
+        tr
+          td.text-left show-xl
+          td
+            .bg-primary.docs-dot
+          td
+            .bg-primary.docs-dot
+          td
+            .bg-primary.docs-dot
+          td
+            .bg-primary.docs-dot
+          td
+            .bg-primary.docs-dot
+
+p
+  | For showing elements on specific viewport sizes, there are classes #[code show-xs], #[code show-sm], #[code show-md], #[code show-lg] and #[code show-xl] available.
+
+ul
+  li
+    | #[code show-xs] shows elements when the window width is smaller than or equal to #[strong 480px].
+  li
+    | #[code show-sm] shows elements when the window width is smaller than or equal to #[strong 600px].
+  li
+    | #[code show-md] shows elements when the window width is smaller than or equal to #[strong 840px].
+  li
+    | #[code show-lg] shows elements when the window width is smaller than or equal to #[strong 960px].
+  li
+    | #[code show-xl] shows elements when the window width is smaller than or equal to #[strong 1280px].
+
+p
+  | Spectre also has a responsive web test tool Responsive Resizer. 
+  | You can clone the 
+  a(href="https://github.com/picturepan2/responsive-resizer" target="_blank") GitHub Repo
+  |  to use it locally or use it online.
+p
+  a.btn.btn-primary(href="https://picturepan2.github.io/responsive-resizer/" target="_blank") Responsive Resizer
+
-- 
cgit v1.3.1-23-gd82d


From b903b30d81eb531eead430db3c9cc934ab5dea8f Mon Sep 17 00:00:00 2001
From: Yan Zhu 
Date: Mon, 4 Jun 2018 21:12:57 +0800
Subject: Update old docs to new Pug templates

---
 README.md                           |    4 +-
 docs/components.html                | 3661 ++++++++++++++---------------------
 docs/elements.html                  |    4 +-
 docs/experimentals.html             | 2012 +++++++++----------
 docs/getting-started.html           |    4 +-
 docs/layout.html                    |    4 +-
 docs/src/_docs-layout.pug           |    4 +-
 docs/src/components.pug             |   83 +
 docs/src/contents/accordions.pug    |  113 ++
 docs/src/contents/autocomplete.pug  |  119 ++
 docs/src/contents/avatars.pug       |   93 +
 docs/src/contents/badges.pug        |   59 +
 docs/src/contents/bars.pug          |   84 +
 docs/src/contents/breadcrumbs.pug   |   45 +
 docs/src/contents/calendars.pug     |  195 ++
 docs/src/contents/cards.pug         |   94 +
 docs/src/contents/carousels.pug     |   39 +
 docs/src/contents/chips.pug         |   44 +
 docs/src/contents/colors.pug        |   89 +
 docs/src/contents/comparison.pug    |   29 +
 docs/src/contents/cursor.pug        |   31 +
 docs/src/contents/display.pug       |   26 +
 docs/src/contents/divider.pug       |   54 +
 docs/src/contents/empty.pug         |   50 +
 docs/src/contents/experimentals.pug |    4 +
 docs/src/contents/filters.pug       |  107 +
 docs/src/contents/loading.pug       |   21 +
 docs/src/contents/menu.pug          |  184 ++
 docs/src/contents/meters.pug        |   22 +
 docs/src/contents/modals.pug        |  141 ++
 docs/src/contents/nav.pug           |   57 +
 docs/src/contents/off-canvas.pug    |   45 +
 docs/src/contents/pagination.pug    |  102 +
 docs/src/contents/panels.pug        |  114 ++
 docs/src/contents/parallax.pug      |   34 +
 docs/src/contents/popovers.pug      |   82 +
 docs/src/contents/position.pug      |   40 +
 docs/src/contents/progress.pug      |   17 +
 docs/src/contents/shapes.pug        |   17 +
 docs/src/contents/sliders.pug       |   18 +
 docs/src/contents/steps.pug         |   47 +
 docs/src/contents/tabs.pug          |  132 ++
 docs/src/contents/text.pug          |   36 +
 docs/src/contents/tiles.pug         |   92 +
 docs/src/contents/timelines.pug     |   81 +
 docs/src/contents/toasts.pug        |   49 +
 docs/src/contents/tooltips.pug      |   24 +
 docs/src/experimentals.pug          |   55 +
 docs/src/utilities.pug              |   39 +
 docs/utilities.html                 | 1060 ++++------
 50 files changed, 5557 insertions(+), 4003 deletions(-)
 create mode 100644 docs/src/components.pug
 create mode 100644 docs/src/contents/accordions.pug
 create mode 100644 docs/src/contents/autocomplete.pug
 create mode 100644 docs/src/contents/avatars.pug
 create mode 100644 docs/src/contents/badges.pug
 create mode 100644 docs/src/contents/bars.pug
 create mode 100644 docs/src/contents/breadcrumbs.pug
 create mode 100644 docs/src/contents/calendars.pug
 create mode 100644 docs/src/contents/cards.pug
 create mode 100644 docs/src/contents/carousels.pug
 create mode 100644 docs/src/contents/chips.pug
 create mode 100644 docs/src/contents/colors.pug
 create mode 100644 docs/src/contents/comparison.pug
 create mode 100644 docs/src/contents/cursor.pug
 create mode 100644 docs/src/contents/display.pug
 create mode 100644 docs/src/contents/divider.pug
 create mode 100644 docs/src/contents/empty.pug
 create mode 100644 docs/src/contents/experimentals.pug
 create mode 100644 docs/src/contents/filters.pug
 create mode 100644 docs/src/contents/loading.pug
 create mode 100644 docs/src/contents/menu.pug
 create mode 100644 docs/src/contents/meters.pug
 create mode 100644 docs/src/contents/modals.pug
 create mode 100644 docs/src/contents/nav.pug
 create mode 100644 docs/src/contents/off-canvas.pug
 create mode 100644 docs/src/contents/pagination.pug
 create mode 100644 docs/src/contents/panels.pug
 create mode 100644 docs/src/contents/parallax.pug
 create mode 100644 docs/src/contents/popovers.pug
 create mode 100644 docs/src/contents/position.pug
 create mode 100644 docs/src/contents/progress.pug
 create mode 100644 docs/src/contents/shapes.pug
 create mode 100644 docs/src/contents/sliders.pug
 create mode 100644 docs/src/contents/steps.pug
 create mode 100644 docs/src/contents/tabs.pug
 create mode 100644 docs/src/contents/text.pug
 create mode 100644 docs/src/contents/tiles.pug
 create mode 100644 docs/src/contents/timelines.pug
 create mode 100644 docs/src/contents/toasts.pug
 create mode 100644 docs/src/contents/tooltips.pug
 create mode 100644 docs/src/experimentals.pug
 create mode 100644 docs/src/utilities.pug

(limited to 'docs/src')

diff --git a/README.md b/README.md
index c5a47a8..8d249e9 100644
--- a/README.md
+++ b/README.md
@@ -69,8 +69,8 @@ You can compile your custom version of Spectre.css. Read [the documentation](htt
 - [Cards](https://picturepan2.github.io/spectre/components.html#cards)
 - [Chips](https://picturepan2.github.io/spectre/components.html#chips)
 - [Empty states](https://picturepan2.github.io/spectre/components.html#empty)
-- [Menus](https://picturepan2.github.io/spectre/components.html#menus)
-- [Navs](https://picturepan2.github.io/spectre/components.html#navs)
+- [Menu](https://picturepan2.github.io/spectre/components.html#menu)
+- [Nav](https://picturepan2.github.io/spectre/components.html#nav)
 - [Modals](https://picturepan2.github.io/spectre/components.html#modals)
 - [Pagination](https://picturepan2.github.io/spectre/components.html#pagination)
 - [Panels](https://picturepan2.github.io/spectre/components.html#panels)
diff --git a/docs/components.html b/docs/components.html
index fb2ddd8..4185433 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -1,2384 +1,1633 @@
 
 
-
-  
-  
-  
-  
-  
-  Components - Spectre.css CSS Framework
-  
-  
-  
-  
-  
-  
-
-
-  
    
-    
    
-      
-        
-      
-      GitHub
-    
    
-
-    
-
-    
-
-    
    
-      
    
-        
    Components
    
-      
    
-
-      
    
-        
    
-          
    
-            
-            
-            
-            
-          
    
-          
    
-            
-            
-            
-          
    
-        
    
-      
    
-      
-      
    
-        
    Accordions
    
-        
    
-          
    Accordions are used to toggle sections of content.
    
-        
    
-        
    
-          
    
+  
+    Components - Spectre.css CSS Framework
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+  
+  
+    
    
+      
    GitHub
    
+      
+      
    
+        
    
+          
    
+            
    Accordions
    
+            
    Accordions are used to toggle sections of content.
    
+            
    
+              
    
+                
    
+                  
+                  
+                  
    
+                    
+                  
    
+                
    
+                
    
+                  
+                  
+                  
    
+                    
+                  
    
+                
    
+                
    
+                  
+                  
+                  
    
+                    
+                  
    
+                
    
+              
    
+              
    
+                
    
+                  
+                  
+                  
    
+                    
+                  
    
+                
    
+                
    
+                  
+                  
+                  
    
+                    
+                  
    
+                
    
+                
    
+                  
+                  
+                  
    
+                    
+                  
    
+                
    
+              
    
+            
    
+            
    <!-- standard Accordions example -->
+<div class="accordion">
+  <input type="checkbox" id="accordion-1" name="accordion-checkbox" hidden>
+  <label class="accordion-header">
+    <i class="icon icon-arrow-right mr-1"></i>
     Title
-  </label>
-  <div class="accordion-body">
-    <!-- Accordions content -->
-  </div>
-</div>
-
-<!-- mutually exclusive Accordions example (with same input names) -->
-<div class="accordion">
-  <input type="radio" id="accordion-1" name="accordion-radio" hidden>
-  <label class="accordion-header">
+  </label>
+  <div class="accordion-body">
+    <!-- Accordions content -->
+  </div>
+</div>
+
+<!-- mutually exclusive Accordions example (with same input names) -->
+<div class="accordion">
+  <input type="radio" id="accordion-1" name="accordion-radio" hidden>
+  <label class="accordion-header">
     Title
-  </label>
-  <div class="accordion-body">
-    <!-- Accordions content -->
-  </div>
-</div>
+  </label>
+  <div class="accordion-body">
+    <!-- Accordions content -->
+  </div>
+</div>
 
    
-
-        
    
-          
    Alternatively, you can use details and summary instead of input radio or checkbox trick. Add the open attribute to details to expand it. Microsoft Edge support is in development.
    
-        
    
-
-
-
    <!-- details and summary Accordions example -->
-<details class="accordion" open>
-  <summary class="accordion-header">
-    <i class="icon icon-arrow-right mr-1"></i>
+            
    Alternatively, you can use details and summary instead of input radio or checkbox trick.
+              Add the open attribute to details to expand it.
+              Microsoft Edge support is under consideration.
+            
    
+            
    <!-- details and summary Accordions example -->
+<details class="accordion" open>
+  <summary class="accordion-header">
+    <i class="icon icon-arrow-right mr-1"></i>
     Title
-  </summary>
-  <div class="accordion-body">
-    <!-- Accordions content -->
-  </div>
-</details>
-
    
-
-      
    
-
-      
    
-        
    
-          
-        
    
-      
    
-
-      
    
-        
    Avatars
    
-        
    
-          
    Avatars are user profile pictures. 
    
-        
    
-        
    
-          
    
-            
    
-              Avatar XL
-            
    
-            
    
-              Avatar LG
-            
    
-            
    
-              Avatar
-            
    
-            
    
-              Avatar SM
-            
    
-            
    
-              Avatar XS
-            
    
-          
    
-          
    
-            
    
-            
    
-            
    
-            
    
-            
    
-          
    
-        
    
-        
    
-          
    Add the avatar class to <img> element. There are 4 additional sizes available, including avatar-xl (64px), avatar-lg (48px), avatar-sm (24px), and avatar-xs (16px). By default, the avatar size is 32px.
    
-          
    For users who don't have profile pictures, you may use their initials for avatars. Add the avatar class and avatar size class to <div> element. The data-initial attribute is the name appear inside the avatar.
    
-        
    
-        
    
-          
    
-            
    
-              Avatar
-              Avatar
-            
    
-            
    
-              Avatar
-              Avatar
-            
    
-            
    
-              Avatar
-              Avatar
-            
    
-            
    
-              Avatar
-              Avatar
-            
    
-            
    
-              Avatar
-              Avatar
-            
    
-          
    
-        
    
-
-
-
    <!-- Basic avatar examples -->
-<figure class="avatar avatar-xl">
-  <img src="img/avatar-1.png" alt="...">
-</figure>
-
-<figure class="avatar avatar-xl">
-  <img src="img/avatar-1.png" alt="...">
-  <img src="img/avatar-5.png" class="avatar-icon" alt="...">
-</figure>
-
-<figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5755d9;"></figure>
-
-<!-- Show initals when avatar image is unavailable or not fully loaded -->
-<figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5755d9;">
-  <img src="img/avatar-1.png" alt="...">
-</figure>
-
    
-
-        
    
-          
    
-            
    
-              
-            
    
-            
    
-              
-            
    
-            
    
-              
-            
    
-            
    
-              
-            
    
-            
    
-              
-            
    
-          
    
-        
    
-        
    
-          
    Avatars support presence indicators. You can add an i element with the avatar-presence class, and add online, busy or away class for different status colors. The default is gray which means offline. 
    
-        
    
-
-
-
    <figure class="avatar avatar-xl">
-  <img src="img/avatar-1.png" alt="...">
-  <i class="avatar-presence online"></i>
-</figure>
-
    
-
-      
    
-
-      
    
-        
    Badges
    
-        
    
-          
    Badges are often used as unread number indicators.
    
-        
    
-        
    
-          
    
-            
-              Notifications
-            
-          
    
-          
    
-            
-              Notifications
-            
-          
    
-          
    
-            
-              Notifications
-            
-          
    
-          
    
-            
-              Notifications
-            
-          
    
-        
    
-        
    
-          
    Add the badge class to non self closing elements. And add the data-badge attribute to define the content of a badge. The badge will appear in the top-right direction of the element. 
    
-          
    If there is no data-badge or the attribute is not specified, the badge will appear as a dot.
    
-        
    
-        
    
-          
    
-            
-            
-          
    
-          
    
-            
-            
-          
    
-          
    
-            
    
-              YZ
-            
    
-            
    
-              YZ
-            
    
-            
    
-              YZ
-            
    
-          
    
-        
    
-        
    
-          
    Badges support button and avatars elements as well. 
    
-        
    
-
-
-
    <span class="badge">
-  Notifications
-</span>
-
-<span class="badge" data-badge="8">
-  Notifications
-</span>
-
-<button class="btn badge" data-badge="8">
-  Button
-</button>
-
-<figure class="avatar badge" data-badge="8" data-initial="YZ">
-  <img src="img/avatar-3.png" alt="YZ">
-</figure>
-
    
-
-      
    
-
-      
    
-        
    Bars
    
-        
    
-          
    Bars represent the progress of a task or the value within the known range. Bars are custom components for displaying HTML5 progress, meter and input range elements.
    
-        
    
-        
    
-          
    
-            
    
-              
    
-            
    
-          
    
-        
    
-        
    
-          
    
-            
    
-              
    
+  </summary>
+  <div class="accordion-body">
+    <!-- Accordions content -->
+  </div>
+</details>
    
+          
    
+          
    
+            
    Avatars
    
+            
    Avatars are user profile pictures. 
    
+            
    
+              
    
+                
    Avatar XL
    
+                
    Avatar LG
    
+                
    Avatar
    
+                
    Avatar SM
    
+                
    Avatar XS
    
+              
    
+              
    
+                
    
+                
    
+                
    
+                
    
+                
    
+              
    
             
    
-          
    
-        
    
-        
    
-          
    
-            
    
-              
    25%
    
-              
    15%
    
-              
    10%
    
-              
    15%
    
+            
    Add the avatar class to <img> element.
+              There are 4 additional sizes available, including avatar-xl(64px), avatar-lg(48px), avatar-sm(24px), and avatar-xs(16px).
+              By default, the avatar size is 32px.
+            
    
+            
    
+              For users who don't have profile pictures, you may use their initials for avatars.
+              Add the avatar class and avatar size class to <div>  element.
+              The data-initial attribute is the name appear inside the avatar.
+            
    
+            
    
+              
    
+                
    AvatarAvatar
    
+                
    AvatarAvatar
    
+                
    AvatarAvatar
    
+                
    AvatarAvatar
    
+                
    AvatarAvatar
    
+              
    
             
    
-          
    
-        
    
-        
    
-          
    Add a container element with the bar class. And add child elements with the bar-item class. The width percentage value is needed for every bar-item.
    
-          
    There is the bar-sm class for thinner Bars. Also, you could use Tooltips for any bar-item.
    
-        
    
-
-
-
    <div class="bar bar-sm">
-  <div class="bar-item" role="progressbar" style="width:25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
-</div>
-
-<!-- multi-bars -->
-<div class="bar">
-  <div class="bar-item tooltip" data-tooltip="25%" style="width:25%;">25%</div>
-  <div class="bar-item" style="width:15%;background:#818bd5;">15%</div>
-</div>
-
    
-
-        
    Slider bars
    
-        
    
-          
    
-            
    
-              
    
-                
+            
    <!-- Basic avatar examples -->
+<figure class="avatar avatar-xl">
+  <img src="img/avatar-1.png" alt="...">
+</figure>
+
+<figure class="avatar avatar-xl">
+  <img src="img/avatar-1.png" alt="...">
+  <img src="img/avatar-5.png" class="avatar-icon" alt="...">
+</figure>
+
+<figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5755d9;"></figure>
+
+<!-- Show initals when avatar image is unavailable or not fully loaded -->
+<figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5755d9;">
+  <img src="img/avatar-1.png" alt="...">
+</figure>
+  
    
+            
    
+              
    
+                
    
+                
    
+                
    
+                
    
+                
    
               
    
             
    
-          
    
-        
    
-        
    
-          
    
-            
    
-              
    
-                
+            
    
+              Avatars support presence indicators.
+              You can add an <i> element with the avatar-presence class, and add online, busy or away class for different status colors.
+              The default is gray which means offline.
+            
    
+            
    <figure class="avatar avatar-xl">
+  <img src="img/avatar-1.png" alt="...">
+  <i class="avatar-presence online"></i>
+</figure>
    
+          
    
+          
    
+            
    Badges
    
+            
    Badges are often used as unread number indicators.
    
+            
    
+              
    Notifications
    
+              
    Notifications
    
+              
    Notifications
    
+              
    Notifications
    
+            
    
+            
    Add the badge class to non self closing elements.
+              And add the data-badge attribute to define the content of a badge.
+              The badge will appear in the top-right direction of the element.
+            
    
+            
    If there is no data-badge or the attribute is not specified, the badge will appear as a dot.
    
+            
    
+              
    
+                
+                
               
    
-              
    
-                
+              
    
+                
+                
               
    
-            
    
-          
    
-        
    
-
-        
    
-          
    You can add the bar-slider class to the Bars container. And add child elements with the bar-item class and bar-slider-btn inside bar-item. You need to set the bar-item width manually to have the slider point.
    
-          
    If there are two bar-item divs in one bar-slider, you will have a range slider.
    
-        
    
-
-
-
    <!-- slider -->
-<div class="bar bar-slider">
-  <div class="bar-item" role="progressbar" style="width:25%;">
-    <button class="bar-slider-btn btn" role="slider"></button>
-  </div>
-</div>
-
-<!-- range slider -->
-<div class="bar bar-slider">
-  <div class="bar-item" role="progressbar" style="width:15%;">
-    <button class="bar-slider-btn btn" role="slider"></button>
-  </div>
-  <div class="bar-item" role="progressbar" style="width:65%;">
-    <button class="bar-slider-btn btn" role="slider"></button>
-  </div>
-</div>
-
    
-
-      
    
-
-      
+<span class="badge" data-badge="8">
+  Notifications
+</span>
 
-      
    
-        
    Cards
    
-        
    
-          
    Cards are flexible content containers.
    
-        
    
-        
    
-          
    
-            
    
-              
    
-                OS X El Capitan
-              
    
-              
    
-                
    Microsoft
    
-                
    Software and hardware
    
-              
    
-              
    
-                Empower every person and every organization on the planet to achieve more.
-              
    
-              
    
-                Do
+<button class="btn badge" data-badge="8">
+  Button
+</button>
+
+<figure class="avatar badge" data-badge="8" data-initial="YZ">
+  <img src="img/avatar-3.png" alt="YZ">
+</figure>
    
+          
    
+          
    
+            
    Bars
    
+            
    
+              Bars represent the progress of a task or the value within the known range.
+              Bars are custom components for displaying HTML5 <progress>, <meter> and input range elements.
+            
    
+            
    
+              
    
+                
    
+                  
    
+                
    
               
    
             
    
-          
    
-          
    
-            
    
-              
    
-                
    Apple
    
-                
    Hardware and software
    
-              
    
-              
    
-                OS X Yosemite
-              
    
-              
    
-                To make a contribution to the world by making tools for the mind that advance humankind.
-              
    
-              
    
-                
    
-                  
-                  
-                  
+            
    
+              
    
+                
    
+                  
    
                 
    
               
    
             
    
-          
    
-          
    
-            
    
-              
    
-                macOS Sierra
+            
    
+              
    
+                
    
+                  
    25%
    
+                  
    15%
    
+                  
    10%
    
+                  
    15%
    
+                
    
               
    
-              
    
-                
-                
    Google I/O
    
-                
    Software and hardware
    
+            
    
+            
    Add a container element with the bar class.
+              And add child elements with the bar-item class.
+              The width percentage value is needed for every bar-item.
+            
    
+            
    There is the bar-sm class for thinner Bars.
+              Also, you could use Tooltips for any bar-item.
+            
    
+            
    <div class="bar bar-sm">
+  <div class="bar-item" role="progressbar" style="width:25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+
+<!-- multi-bars -->
+<div class="bar">
+  <div class="bar-item tooltip" data-tooltip="25%" style="width:25%;">25%</div>
+  <div class="bar-item" style="width:15%;background:#818bd5;">15%</div>
+</div>
+
    
+            
    Slider bars
    
+            
    
+              
    
+                
    
+                  
    
+                    
+                  
    
+                
    
               
    
-              
    
-                An immersive, three-day experience focused on exploring the next generation of technology, mobile and beyond.
+            
    
+            
    
+              
    
+                
    
+                  
    
+                    
+                  
    
+                  
    
+                    
+                  
    
+                
    
               
    
             
    
-          
    
-          
    
-            
    
-              
    
-                OS X El Capitan
+            
    You can add the bar-slider class to the Bars container.
+              And add child elements with the bar-item class and bar-slider-btn inside bar-item.
+              You need to set the bar-item width manually to have the slider point.
+            
    
+            
    If there are two bar-item divs in one bar-slider, you will have a range slider.
    
+            
    <!-- slider -->
+<div class="bar bar-slider">
+  <div class="bar-item" role="progressbar" style="width:25%;">
+    <button class="bar-slider-btn btn" role="slider"></button>
+  </div>
+</div>
+
+<!-- range slider -->
+<div class="bar bar-slider">
+  <div class="bar-item" role="progressbar" style="width:15%;">
+    <button class="bar-slider-btn btn" role="slider"></button>
+  </div>
+  <div class="bar-item" role="progressbar" style="width:65%;">
+    <button class="bar-slider-btn btn" role="slider"></button>
+  </div>
+</div>
    
+          
    
+          
    
+          
    
+          
    
+            
    Chips
    
+            
    Chips are complex entities in small blocks. 
    
+            
    
+              
    CrimeDramaBiographyMystery
    
+              
    
+                
    
+                  
    Tony Stark
+                
    
+                
    Thor OdinsonThor Odinson
    
+                
    Steve RogersSteve Rogers
    
+              
    
             
    
-          
    
-        
    
-        
    
-          
    Add a container element with the chip class. And add child text element, buttons or avatars with the avatar class.
    
-        
    
+            
    Add a container element with the chip class.
+              And add child text element, buttons or avatars with the avatar class.
+            
    
+            
    <span class="chip">Crime</span>
 
-
-
    <span class="chip">Crime</span>
-  
-<span class="chip">
+<span class="chip">
   Biography
-  <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a>
-</span>
+  <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a>
+</span>
 
-<div class="chip">
-  <img src="img/avatar-1.png" class="avatar avatar-sm">
+<div class="chip">
+  <img src="img/avatar-1.png" class="avatar avatar-sm">
   Yan Zhu
-  <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a>
-</div>
-
    
-
-      
    
-
-      
    
-        
    Empty states
    
-        
    
-          
    Empty states/blank slates are commonly used as placeholders for first time use, empty data and error screens.
    
-        
    
-        
    
-          
    
-            
    
-              
    
-                
+  <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a>
+</div>
    
+          
    
+          
    
+            
    Empty states
    
+            
    Empty states/blank slates are commonly used as placeholders for first time use, empty data and error screens.
    
+            
    
+              
    
+                
    
+                  
    
+                  
    You have no new messages
    
+                  
    Click the button to start a conversation
    
+                  
    
+                    
+                  
    
+                
    
               
    
-              
    You have no new messages
    
-              
    Click the button to start a conversation
    
-              
    
-                
+              
    
+                
    
+                  
    
+                  
    You've successfully signed up
    
+                  
    Click the button to invite your friends
    
+                  
    
+                    
+                  
    
+                  
    
+                    
+                  
    
+                
    
               
    
-            
    
-          
    
-          
    
-            
    
-              
    
-                
-              
    
-              
    You've successfully signed up
    
-              
    Click the button to invite your friends
    
-              
    
-                
-              
    
-              
    
-                
+              
    
+                
    
+                  
    
+                  
    You are not following anyone
    
+                  
    Start to meet new friends
    
+                  
    
+                    
+                    
+                  
    
+                
    
               
    
             
    
-          
    
-          
    
-            
    
-              
    
-                
+            
    
+              An empty state component can include icons, messages (title and subtitle messages) and action buttons or any combination of those elements.
+              Add empty-icon, empty-title, empty-subtitle or empty-action to the elements.
+              HTML structure is exampled below.
+            
    
+            
    <div class="empty">
+  <div class="empty-icon">
+    <i class="icon icon-people"></i>
+  </div>
+  <p class="empty-title h5">You have no new messages</p>
+  <p class="empty-subtitle">Click the button to start a conversation.</p>
+  <div class="empty-action">
+    <button class="btn btn-primary">Send a message</button>
+  </div>
+</div>
    
+          
    
+          
-
-        
    
-          
    An empty state component can include icons, messages (title and subtitle messages) and action buttons or any combination of those elements. Add empty-icon, empty-title, empty-subtitle or empty-action to the elements. HTML structure is exampled below. 
    
-        
    
-
-
-
    <div class="empty">
-  <div class="empty-icon">
-    <i class="icon icon-people"></i>
-  </div>
-  <p class="empty-title h5">You have no new messages</p>
-  <p class="empty-subtitle">Click the button to start a conversation.</p>
-  <div class="empty-action">
-    <button class="btn btn-primary">Send a message</button>
-  </div>
-</div>
-
    
-
-      
    
-
-
    +
    +
    +

    Modals

    +

    Modals are flexible dialog prompts.

    +
    +
    Open Modal + -
    - - Close -
    -
    -
    -
    -

    Add a container element with the modal class. And add a real container modal-container and overlay modal-overlay inside it. You can add child elements with the modal-header, modal-body and modal-footer - any or all of them.

    -

    Spectre.css does not include JavaScript code, you will need to implement your JS to interact with modals. To make a modal appear, add the active class to the modal container.

    -
    - - -
    <div class="modal active" id="modal-id">
-  <a href="#close" class="modal-overlay" aria-label="Close"></a>
-  <div class="modal-container">
-    <div class="modal-header">
-      <a href="#close" class="btn btn-clear float-right" aria-label="Close"></a>
-      <div class="modal-title h5">Modal title</div>
-    </div>
-    <div class="modal-body">
-      <div class="content">
-        <!-- content here -->
-      </div>
-    </div>
-    <div class="modal-footer">
+            
    Add a container element with the modal class.
+              And add a real container modal-container and overlay modal-overlay inside it.
+              You can add child elements with the modal-header, modal-body and modal-footer - any or all of them.
+            
    
+            
    
+              Spectre.css does not include JavaScript code, you will need to implement your JS to interact with modals.
+              To make a modal appear, add the active class to the modal container.
+            
    
+            
    <div class="modal active" id="modal-id">
+  <a href="#close" class="modal-overlay" aria-label="Close"></a>
+  <div class="modal-container">
+    <div class="modal-header">
+      <a href="#close" class="btn btn-clear float-right" aria-label="Close"></a>
+      <div class="modal-title h5">Modal title</div>
+    </div>
+    <div class="modal-body">
+      <div class="content">
+        <!-- content here -->
+      </div>
+    </div>
+    <div class="modal-footer">
       ...
-    </div>
-  </div>
-</div>
+    </div>
+  </div>
+</div>
 
    
-
-        
    Modal sizes
    
-        
    
-          
    
-            Open small size Modal
-
    -
    - -

    Calendars sizes

    -
    -
    -
    -
    - -
    March 2017
    - -
    -
    -
    -
    Sun
    -
    Mon
    -
    Tue
    -
    Wed
    -
    Thu
    -
    Fri
    -
    Sat
    -
    -
    -
    -
    - -
    - Zhonghe Festival -
    +
    +

    Calendars

    +

    Calendars are designed for date or date range picker and events display. It is made with flex layout.

    +
    +
    +
    +
    + +
    March 2017
    +
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - -
    - Product launch event - International Women's Day +
    +
    +
    Sun
    +
    Mon
    +
    Tue
    +
    Wed
    +
    Thu
    +
    Fri
    +
    Sat
    -
    -
    -
    -
    -
    - -
    - Arbor Day +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    -
    -
    -
    -
    -
    -
    -
    -
    - -
    - Spring Equinox -
    +
    +
    +
    +

    Calendars sizes

    +
    +
    +
    +
    + +
    March 2017
    +
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - -
    - April Fools' Day +
    +
    +
    Sun
    +
    Mon
    +
    Tue
    +
    Wed
    +
    Thu
    +
    Fri
    +
    Sat
    +
    +
    +
    + +
    +
    + +
    Zhonghe Festival
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    Product launch eventInternational Women's Day
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    Arbor Day
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    Spring Equinox
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    April Fools' Day
    +
    -
    -
    - -
    -

    Carousels

    -
    -

    Carousels are slideshows for cycling images. It is built in pure CSS.

    -
    -
    -
    -
    - - - - -
    -
    - - - macOS Yosemite Wallpaper -
    - -
    - - - macOS Yosemite Wallpaper -
    - -
    - - - macOS Yosemite Wallpaper -
    - -
    - - - macOS Yosemite Wallpaper -
    -
    -
    - - - - +
    +

    Carousels

    +

    Carousels are slideshows for cycling images. It is built in pure CSS.

    +
    +
    +
    + + + + +
    +
    + + macOS Yosemite Wallpaper +
    +
    + + macOS Yosemite Wallpaper +
    +
    + + macOS Yosemite Wallpaper +
    +
    + + macOS Yosemite Wallpaper +
    +
    +
    + + + + +
    +
    -
    - - -
    <div class="carousel">
-  <input type="radio" id="slide-1" class="carousel-locator" name="carousel-radio" hidden checked>
-  <input type="radio" id="slide-2" class="carousel-locator" name="carousel-radio" hidden>
-  <input type="radio" id="slide-3" class="carousel-locator" name="carousel-radio" hidden>
-  <input type="radio" id="slide-4" class="carousel-locator" name="carousel-radio" hidden>
-  
-  <div class="carousel-container">
-    <figure class="carousel-item">
-      <label class="item-prev btn btn-action btn-lg" for="slide-4">
-        <i class="icon icon-arrow-left"></i>
-      </label>
-      <label class="item-next btn btn-action btn-lg" for="slide-2">
-        <i class="icon icon-arrow-right"></i>
-      </label>
-      <img src="img/osx-el-capitan.jpg" class="img-responsive rounded" ...>
-    </figure>
-
-    <figure class="carousel-item">
-      <label class="item-prev btn btn-action btn-lg" for="slide-1">
-        <i class="icon icon-arrow-left"></i>
-      </label>
-      <label class="item-next btn btn-action btn-lg" for="slide-3">
-        <i class="icon icon-arrow-right"></i>
-      </label>
-      <img src="img/osx-el-capitan.jpg" class="img-responsive rounded" ...>
-    </figure>
-
-    <figure class="carousel-item">
-      <label class="item-prev btn btn-action btn-lg" for="slide-2">
-        <i class="icon icon-arrow-left"></i>
-      </label>
-      <label class="item-next btn btn-action btn-lg" for="slide-4">
-        <i class="icon icon-arrow-right"></i>
-      </label>
-      <img src="img/osx-el-capitan.jpg" class="img-responsive rounded" ...>
-    </figure>
-
-    <figure class="carousel-item">
-      <label class="item-prev btn btn-action btn-lg" for="slide-3">
-        <i class="icon icon-arrow-left"></i>
-      </label>
-      <label class="item-next btn btn-action btn-lg" for="slide-1">
-        <i class="icon icon-arrow-right"></i>
-      </label>
-      <img src="img/osx-el-capitan.jpg" class="img-responsive rounded" ...>
-    </figure>
-  </div>
-
-  <div class="carousel-nav">
-    <label class="nav-item text-hide c-hand" for="slide-1">1</label>
-    <label class="nav-item text-hide c-hand" for="slide-2">2</label>
-    <label class="nav-item text-hide c-hand" for="slide-3">3</label>
-    <label class="nav-item text-hide c-hand" for="slide-4">4</label>
-  </div>
-</div>
-
    - -
    - -
    -

    Comparison Sliders

    -
    -

    Comparison Sliders are sliders for comparing two images. It is built in pure CSS.

    -
    -
    -
    -
    -
    - macOS Sierra Wallpaper -
    Before
    -
    -
    - macOS Sierra Wallpaper -
    After
    - -
    +
    +

    Comparison sliders

    +

    Comparison Sliders are sliders for comparing two images. It is built in pure CSS.

    +
    +
    +
    +
    macOS Sierra Wallpaper +
    Before
    +
    +
    macOS Sierra Wallpaper +
    After
    + +
    +
    +
    + 
    <div class="comparison-slider">
+  <figure class="comparison-before">
+    <!-- image (before) -->
+    <div class="comparison-label">Before</div>
+  </figure>
+
+  <figure class="comparison-after">
+    <!-- image (after) -->
+    <div class="comparison-label">After</div>
+    <textarea class="comparison-resizer" readonly></textarea>
+  </figure>
+</div>
    -
    - - -
    <div class="comparison-slider">
-  <figure class="comparison-before">
-    <!-- image (before) -->
-    <div class="comparison-label">Before</div>
-  </figure>
-
-  <figure class="comparison-after">
-    <!-- image (after) -->
-    <div class="comparison-label">After</div>
-    <textarea class="comparison-resizer" readonly></textarea>
-  </figure>
-</div>
-
    - -
    - -
    -

    Filters

    -
    -

    Filters are CSS only content filters.

    -
    -
    -
    -
    - - - - - - -
    - - - - - -
    -
    -
    -
    -
    -
    Fallout 4
    -
    Roleplaying
    -
    +
    +

    Filters

    +

    Filters are CSS only content filters.

    +
    +
    +
    + + + + + +
    + + + + +
    -
    -
    -
    -
    -
    Halo 5
    -
    Shooter
    +
    +
    +
    +
    +
    Fallout 4
    +
    Roleplaying
    +
    +
    -
    -
    -
    -
    -
    -
    Quantum Break
    -
    Action
    +
    +
    +
    +
    Halo 5
    +
    Shooter
    +
    +
    -
    -
    -
    -
    -
    -
    Forza Horizon 3
    -
    Sports
    +
    +
    +
    +
    Quantum Break
    +
    Action
    +
    +
    -
    -
    -
    -
    -
    -
    Final Fantasy XV
    -
    Roleplaying
    +
    +
    +
    +
    Forza Horizon 3
    +
    Sports
    +
    +
    -
    -
    -
    -
    -
    -
    NBA 2K17
    -
    Sports
    +
    +
    +
    +
    Final Fantasy XV
    +
    Roleplaying
    +
    +
    -
    -
    -
    -
    -
    -
    Battlefield 1
    -
    Shooter
    +
    +
    +
    +
    NBA 2K17
    +
    Sports
    +
    +
    -
    -
    -
    -
    -
    -
    GTA V
    -
    Action
    +
    +
    +
    +
    Battlefield 1
    +
    Shooter
    +
    +
    -
    -
    -
    -
    -
    -
    FIFA 17
    -
    Sports
    +
    +
    +
    +
    GTA V
    +
    Action
    +
    +
    -
    -
    -
    -
    -
    -
    Overwatch
    -
    Shooter
    +
    +
    +
    +
    FIFA 17
    +
    Sports
    +
    +
    -
    -
    -
    -
    -
    -
    Titanfall 2
    -
    Shooter
    +
    +
    +
    +
    Overwatch
    +
    Shooter
    +
    +
    -
    -
    -
    -
    -
    -
    Gears of Wars 4
    -
    Shooter
    +
    +
    +
    +
    Titanfall 2
    +
    Shooter
    +
    +
    +
    +
    +
    +
    +
    Gears of Wars 4
    +
    Shooter
    +
    +
    +

    Filters use tag-1 to tag-8 to flag different tags. + tag-0 is reserved for clearing filter (or showing all). + You can overwrite $filter-number in _filters.scss to have more filters. +

    + 
    <div class="filter">
+  <input type="radio" id="tag-0" class="filter-tag" name="filter-radio" hidden checked>
+  <input type="radio" id="tag-1" class="filter-tag" name="filter-radio" hidden>
+  <input type="radio" id="tag-2" class="filter-tag" name="filter-radio" hidden>
+
+  <div class="filter-nav">
+    <label class="chip" for="tag-0">All</label>
+    <label class="chip" for="tag-1">Action</label>
+    <label class="chip" for="tag-2">Roleplaying</label>
+  </div>
+
+  <div class="filter-body">
+    <div class="filter-item card" data-tag="tag-1">
+      <!-- Filter item content -->
+    </div>
+    <div class="filter-item card" data-tag="tag-2">
+      <!-- Filter item content -->
+    </div>
+    <!-- Filter items -->
+  </div>
+</div>
    -
    -
    -

    Filters use tag-1 to tag-8 to flag different tags. tag-0 is reserved for clearing filter (or showing all). You can overwrite $filter-number in _filters.scss to have more filters.

    -
    - - -
    <div class="filter">
-  <input type="radio" id="tag-0" class="filter-tag" name="filter-radio" hidden checked>
-  <input type="radio" id="tag-1" class="filter-tag" name="filter-radio" hidden>
-  <input type="radio" id="tag-2" class="filter-tag" name="filter-radio" hidden>
-
-  <div class="filter-nav">
-    <label class="chip" for="tag-0">All</label>
-    <label class="chip" for="tag-1">Action</label>
-    <label class="chip" for="tag-2">Roleplaying</label>
-  </div>
-
-  <div class="filter-body">
-    <div class="filter-item card" data-tag="tag-1">
-      <!-- Filter item content -->
-    </div>
-    <div class="filter-item card" data-tag="tag-2">
-      <!-- Filter item content -->
-    </div>
-    <!-- Filter items -->
-  </div>
-</div>
-
    - -
    - -
    -

    Meters

    -
    -

    Meters represent the value within the known range.

    -
    -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    -
    -

    -
    - - -
    <!-- Meter is green when low < value < high -->
-<meter class="meter" value="20" min="0" max="100"></meter>
-<meter class="meter" value="60" min="0" max="100" low="30" high="80"></meter>
-<!-- Meter is yellow when value < low  or high < value -->
-<meter class="meter" value="85" min="0" max="100" low="30" high="80"></meter>
-<!-- Meter is red when value < low < high < optimum or optimum < low < high < value -->
-<meter class="meter" value="20" optimum="90" min="0" max="100" low="30" high="80"></meter>
-
    - -
    - -
    -

    Off-canvas

    -
    -

    The Off-canvas is a navigation layout that the sidebar can slide in and out of the viewport. It is built in pure CSS.

    -

    By default, the off-canvas menu is collapsed whenever the window width is. But you can add the off-canvas-sidebar-show class to the off-canvas to make the sidebar expanded when the window width is larger than or equal to 960px.

    -
    -
    -
    -
    - - - - - -
    -

    Parallax

    -
    -

    The Parallax acts like Apple TV/tvOS hover parallax effect. It is built in pure CSS.

    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -

    tvOS parallax demo

    -
    -
    - macOS Yosemite Wallpaper +
    +

    Off-canvas

    +

    The Off-canvas is a navigation layout that the sidebar can slide in and out of the viewport. It is built in pure CSS.

    +

    + By default, the off-canvas menu is collapsed whenever the window width is. + But you can add the off-canvas-sidebar-show class to the off-canvas to make the sidebar expanded when the window width is larger than or equal to 960px. +

    +
    +
    +
    + +
    +
    +

    Lorem ipsum

    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.

    +

    Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.

    +
    +
    +

    You can open the sidebar by adding the class active to off-canvas-sidebar. + And remove the active to close it. +

    + 
    <div class="off-canvas">
+  <!-- off-screen toggle button -->
+  <a class="off-canvas-toggle btn btn-primary btn-action" href="#sidebar-id">
+    <i class="icon icon-menu"></i>
+  </a>
+
+  <div id="sidebar-id" class="off-canvas-sidebar">
+    <!-- off-screen sidebar -->
+  </div>
+
+  <a class="off-canvas-overlay" href="#close"></a>
+
+  <div class="off-canvas-content">
+    <!-- off-screen content -->
+  </div>
+</div>
    -
    - - -
    <div class="parallax">
-  <div class="parallax-top-left" tabindex="1"></div>
-  <div class="parallax-top-right" tabindex="2"></div>
-  <div class="parallax-bottom-left" tabindex="3"></div>
-  <div class="parallax-bottom-right" tabindex="4"></div>
-  <div class="parallax-content">
-    <div class="parallax-front">
-      <h2>tvOS parallax demo</h2>
-    </div>
-    <div class="parallax-back">
-      <img src="img/osx-el-capitan.jpg" class="img-responsive rounded" ...>
-    </div>
-  </div>
-</div>
-
    - -
    - -
    -

    Progress

    -
    -

    The Progress indicates the progress completion of a task.

    -
    -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - - -
    <progress class="progress" value="25" max="100"></progress>
-<progress class="progress" max="100"></progress>
-
    - -
    - -
    -

    Sliders

    -
    -

    Sliders are for selecting values from ranges.

    -

    You can add the class tooltip to have tooltip labels. If no data-tooltip is set, the value will be used instead.

    -
    -
    -
    - -
    -
    - -
    -
    - - -
    <!-- Sliders -->
-<input class="slider" type="range" min="0" max="100" value="50">
-<!-- Sliders with tooltips -->
-<input class="slider tooltip" type="range" min="0" max="100" value="50" oninput="this.setAttribute('value', this.value);">
-
    - -
    - -
    -

    Timelines

    -
    -

    Timelines are ordered sequences of activities.

    -
    -
    -
    -
    -
    -
    - -
    -
    -
    -
    -

    March 2016

    -

    Initial commit

    +
    +

    Parallax

    +

    The Parallax acts like Apple TV/tvOS hover parallax effect. It is built in pure CSS.

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    tvOS parallax demo

    +
    macOS Yosemite Wallpaper
    -
    -
    - - - -
    -
    -
    -
    -

    February 2017

    -

    New Documents experience

    -

    Bars: represent the progress of a task

    -

    Steps: progress indicators of a sequence of task steps

    -

    Tiles: repeatable or embeddable information blocks

    -
    -
    - +
    + 
    <div class="parallax">
+  <div class="parallax-top-left" tabindex="1"></div>
+  <div class="parallax-top-right" tabindex="2"></div>
+  <div class="parallax-bottom-left" tabindex="3"></div>
+  <div class="parallax-bottom-right" tabindex="4"></div>
+  <div class="parallax-content">
+    <div class="parallax-front">
+      <h2>tvOS parallax demo</h2>
+    </div>
+    <div class="parallax-back">
+      <img src="img/osx-el-capitan.jpg" class="img-responsive rounded" ...>
+    </div>
+  </div>
+</div>
+
    +
    +
    +

    Progress

    +

    The Progress indicates the progress completion of a task.

    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + 
    <progress class="progress" value="25" max="100"></progress>
+<progress class="progress" max="100"></progress>
    +
    +
    +

    Sliders

    +

    Sliders are for selecting values from ranges.

    +

    You can add the class tooltip to have tooltip labels. + If no data-tooltip is set, the value will be used instead. +

    +
    +
    + +
    +
    + +
    +
    + 
    <!-- Sliders -->
+<input class="slider" type="range" min="0" max="100" value="50">
+<!-- Sliders with tooltips -->
+<input class="slider tooltip" type="range" min="0" max="100" value="50" oninput="this.setAttribute('value', this.value);">
    +
    +
    +

    Timelines

    +

    Timelines are ordered sequences of activities.

    +
    +
    +
    +
    +
    +
    +
    +
    +

    March 2016

    +

    Initial commit

    +
    +
    -
    -
    -
    -
    - - - -
    -
    -
    -
    -

    March 2017

    -

    Icons: single-element, responsive and pure CSS icons

    -

    Popovers: small overlay content containers

    -

    Calendars: date or date range picker and events display

    -

    Carousels: slideshows for cycling images

    +
    +
    +
    +
    +
    +

    February 2017

    +

    New Documents experience

    +

    Bars: represent the progress of a task

    +

    Steps: progress indicators of a sequence of task steps

    +

    Tiles: repeatable or embeddable information blocks

    +
    +
    + +
    +
    -
    - +
    +
    +
    +
    +
    +
    +

    March 2017

    +

    Icons: single-element, responsive and pure CSS icons

    +

    Popovers: small overlay content containers

    +

    Calendars: date or date range picker and events display

    +

    Carousels: slideshows for cycling images

    +
    +
    + +
    +
    + 
    <div class="timeline">
+  <div class="timeline-item" id="timeline-example-1">
+    <div class="timeline-left">
+      <a class="timeline-icon" href="#timeline-example-1"></a>
+    </div>
+    <div class="timeline-content">
+      <!-- tiles structure -->
+    </div>
+  </div>
+
+  <div class="timeline-item" id="timeline-example-2">
+    <div class="timeline-left">
+      <a class="timeline-icon icon-lg" href="#timeline-example-2">
+        <i class="icon icon-check"></i>
+      </a>
+    </div>
+    <div class="timeline-content">
+      <!-- tiles structure -->
+    </div>
+  </div>
+  ...
+</div>
    - - -
    <div class="timeline">
-  <div class="timeline-item" id="timeline-example-1">
-    <div class="timeline-left">
-      <a class="timeline-icon" href="#timeline-example-1"></a>
-    </div>
-    <div class="timeline-content">
-      <!-- tiles structure -->
-    </div>
-  </div>
-
-  <div class="timeline-item" id="timeline-example-2">
-    <div class="timeline-left">
-      <a class="timeline-icon icon-lg" href="#timeline-example-2">
-        <i class="icon icon-check"></i>
-      </a>
-    </div>
-    <div class="timeline-content">
-      <!-- tiles structure -->
-    </div>
-  </div>
-  ...
-</div>
-
    -
    - - -
    -
    - - - - + + + \ No newline at end of file diff --git a/docs/getting-started.html b/docs/getting-started.html index 2665d0c..216684e 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -75,9 +75,9 @@
  • Cards
  • Chips
  • Empty states
    • -
  • Menus
    • +
  • Menu
  • Modals
    • -
  • Navs
    • +
  • Nav
  • Pagination
  • Panels
  • Popovers
    • diff --git a/docs/layout.html b/docs/layout.html index 95f95f2..65d8008 100644 --- a/docs/layout.html +++ b/docs/layout.html @@ -75,9 +75,9 @@
  • Cards
  • Chips
  • Empty states
    • -
  • Menus
    • +
  • Menu
  • Modals
    • -
  • Navs
    • +
  • Nav
  • Pagination
  • Panels
  • Popovers
    • diff --git a/docs/src/_docs-layout.pug b/docs/src/_docs-layout.pug index ae2da02..864e458 100644 --- a/docs/src/_docs-layout.pug +++ b/docs/src/_docs-layout.pug @@ -53,9 +53,9 @@ block content {url: '#cards', name: 'Cards'}, {url: '#chips', name: 'Chips'}, {url: '#empty', name: 'Empty states'}, - {url: '#menus', name: 'Menus'}, + {url: '#menu', name: 'Menu'}, {url: '#modals', name: 'Modals'}, - {url: '#navs', name: 'Navs'}, + {url: '#nav', name: 'Nav'}, {url: '#pagination', name: 'Pagination'}, {url: '#panels', name: 'Panels'}, {url: '#popovers', name: 'Popovers'}, diff --git a/docs/src/components.pug b/docs/src/components.pug new file mode 100644 index 0000000..87e39ca --- /dev/null +++ b/docs/src/components.pug @@ -0,0 +1,83 @@ +extends _docs-layout.pug + +block variables + - var title = 'Components - Spectre.css CSS Framework' + - var description = '' + - var current = 'components' + +block docs-content + //- Accordions + +docs-heading('accordions', 'Accordions') + include contents/accordions.pug + + //- Avatars + +docs-heading('avatars', 'Avatars') + include contents/avatars.pug + + //- Badges + +docs-heading('badges', 'Badges') + include contents/badges.pug + + //- Bars + +docs-heading('bars', 'Bars') + include contents/bars.pug + + //- Breadcrumbs + +docs-heading('breadcrumbs', 'Breadcrumbs') + include contents/breadcrumbs.pug + + //- Cards + +docs-heading('cards', 'Cards') + include contents/cards.pug + + //- Chips + +docs-heading('chips', 'Chips') + include contents/chips.pug + + //- Empty states + +docs-heading('empty', 'Empty states') + include contents/empty.pug + + //- Menu + +docs-heading('menu', 'Menu') + include contents/menu.pug + + //- Modals + +docs-heading('modals', 'Modals') + include contents/modals.pug + + //- Nav + +docs-heading('nav', 'Nav') + include contents/nav.pug + + //- Pagination + +docs-heading('pagination', 'Pagination') + include contents/pagination.pug + + //- Panels + +docs-heading('panels', 'Panels') + include contents/panels.pug + + //- Popovers + +docs-heading('popovers', 'Popovers') + include contents/popovers.pug + + //- Steps + +docs-heading('steps', 'Steps') + include contents/steps.pug + + //- Tabs + +docs-heading('tabs', 'Tabs') + include contents/tabs.pug + + //- Tiles + +docs-heading('tiles', 'Tiles') + include contents/tiles.pug + + //- Toasts + +docs-heading('toasts', 'Toasts') + include contents/toasts.pug + + //- Tooltips + +docs-heading('tooltips', 'Tooltips') + include contents/tooltips.pug \ No newline at end of file diff --git a/docs/src/contents/accordions.pug b/docs/src/contents/accordions.pug new file mode 100644 index 0000000..8914516 --- /dev/null +++ b/docs/src/contents/accordions.pug @@ -0,0 +1,113 @@ +p Accordions are used to toggle sections of content. + +.columns + .column.col-6.col-md-12 + .accordion + input#accordion-1(type="radio" name="accordion-radio" hidden="" checked="") + label.accordion-header.c-hand(for="accordion-1") + i.icon.icon-arrow-right.mr-1 + | Elements + .accordion-body + ul.menu.menu-nav + li.menu-item + a(href="#accordions") Element 1 + li.menu-item + a(href="#accordions") Element 2 + .accordion + input#accordion-2(type="radio" name="accordion-radio" hidden="") + label.accordion-header.c-hand(for="accordion-2") + i.icon.icon-arrow-right.mr-1 + | Layout + .accordion-body + ul.menu.menu-nav + li.menu-item + a(href="#accordions") Layout 1 + li.menu-item + a(href="#accordions") Layout 2 + .accordion + input#accordion-3(type="radio" name="accordion-radio" hidden="") + label.accordion-header.c-hand(for="accordion-3") + i.icon.icon-arrow-right.mr-1 + | Components + .accordion-body + ul.menu.menu-nav + li.menu-item + a(href="#accordions") Component 1 + li.menu-item + a(href="#accordions") Component 2 + .column.col-6.col-md-12 + .accordion + input#accordion-4(type="checkbox" name="accordion-checkbox" hidden="" checked="") + label.accordion-header.c-hand(for="accordion-4") + | Elements + .accordion-body + ul.menu.menu-nav + li.menu-item + a(href="#accordions") Element 1 + li.menu-item + a(href="#accordions") Element 2 + .accordion + input#accordion-5(type="checkbox" name="accordion-checkbox" hidden="") + label.accordion-header.c-hand(for="accordion-5") + | Layout + .accordion-body + ul.menu.menu-nav + li.menu-item + a(href="#accordions") Layout 1 + li.menu-item + a(href="#accordions") Layout 2 + .accordion + input#accordion-6(type="checkbox" name="accordion-checkbox" hidden="") + label.accordion-header.c-hand(for="accordion-6") + | Components + .accordion-body + ul.menu.menu-nav + li.menu-item + a(href="#accordions") Component 1 + li.menu-item + a(href="#accordions") Component 2 + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + +
    + + +
    + +
    +
    + + +
    + + +
    + +
    +
    + +p + | Alternatively, you can use #[code details] and #[code summary] instead of #[code input] radio or checkbox trick. + | Add the #[code open] attribute to #[code details] to expand it. + | Microsoft Edge support is #[a(href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/detailssummary/" target="_blank") under consideration]. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + +
    + + + Title + +
    + +
    +
    \ No newline at end of file diff --git a/docs/src/contents/autocomplete.pug b/docs/src/contents/autocomplete.pug new file mode 100644 index 0000000..ca93c8a --- /dev/null +++ b/docs/src/contents/autocomplete.pug @@ -0,0 +1,119 @@ +p + | Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input. + +.columns + .column.col-9.col-xs-12 + .form-group + .form-autocomplete + .form-autocomplete-input.form-input + span.chip + | Bruce Banner + .chip + img.avatar.avatar-sm(src="img/avatar-1.png" alt="Avatar") + | Thor Odinson + .chip + img.avatar.avatar-sm(src="img/avatar-4.png" alt="Avatar") + | Steve Rogers + .chip + figure.avatar.avatar-sm(data-initial="TS" style="background-color: #5755d9;") + | Tony Stark + span.chip.active + | Natasha Romanoff + input.form-input(type="text" placeholder="") + .column.col-9.col-xs-12 + .form-group + .form-autocomplete + .form-autocomplete-input.form-input.is-focused + span.chip + | Bruce Banner + a.btn.btn-clear(href="#" aria-label="Close" role="button") + span.chip + img.avatar.avatar-sm(src="img/avatar-1.png" alt="Thor Odinson") + | Thor Odinson + a.btn.btn-clear(href="#" aria-label="Close" role="button") + .has-icon-left + input.form-input(type="text" placeholder="" value="S") + i.form-icon.loading + ul.menu + li.menu-item + a(href="#autocomplete") + .tile.tile-centered + .tile-icon + img.avatar.avatar-sm(src="img/avatar-4.png" alt="Steve Rogers") + .tile-content + mark S + | teve Roger + mark s + li.menu-item + a(href="#autocomplete") + .tile.tile-centered + .tile-icon + figure.avatar.avatar-sm(data-initial="TS" style="background-color: #5755d9;") + .tile-content + | Tony + mark S + | tark + +p + | Add a container element with the #[code form-autocomplete] class. + | There are 2 parts of it, one is #[code form-autocomplete-input], another is #[code menu] component. + | You may add the #[code is-focused] class to #[code form-autocomplete-input] to make it appear as focus state. +p + | Spectre.css does NOT include JavaScript code, you will need to implement your JS to interact with the autocomplete. + | The autocomplete HTML structure is exampled below. + +.columns + .column.col-9.col-xs-12 + .form-group + .form-autocomplete.autocomplete-oneline + .form-autocomplete-input.form-input + span.chip + | Bruce Banner + .chip + img.avatar.avatar-sm(src="img/avatar-1.png" alt="Avatar") + | Thor Odinson + .chip + img.avatar.avatar-sm(src="img/avatar-4.png" alt="Avatar") + | Steve Rogers + .chip + figure.avatar.avatar-sm(data-initial="TS" style="background-color: #5755d9;") + | Tony Stark + span.chip.active + | Natasha Romanoff + input.form-input(type="text" placeholder="") + +pre.code(data-lang='HTML') + code + :highlight(lang="html") +
    + +
    + + +
    + Thor Odinson + Thor Odinson + +
    + + + +
    + + + +
    \ No newline at end of file diff --git a/docs/src/contents/avatars.pug b/docs/src/contents/avatars.pug new file mode 100644 index 0000000..ff8f6c6 --- /dev/null +++ b/docs/src/contents/avatars.pug @@ -0,0 +1,93 @@ +p Avatars are user profile pictures. + +.columns + .column.col-6.col-xs-12 + figure.avatar.avatar-xl + img(src="img/avatar-1.png" alt="Avatar XL") + figure.avatar.avatar-lg + img(src="img/avatar-2.png" alt="Avatar LG") + figure.avatar + img(src="img/avatar-3.png" alt="Avatar") + figure.avatar.avatar-sm + img(src="img/avatar-4.png" alt="Avatar SM") + figure.avatar.avatar-xs + img(src="img/avatar-5.png" alt="Avatar XS") + .column.col-6.col-xs-12 + figure.avatar.avatar-xl(data-initial="YZ") + figure.avatar.avatar-lg(data-initial="YZ") + figure.avatar(data-initial="YZ") + figure.avatar.avatar-sm(data-initial="YZ") + figure.avatar.avatar-xs(data-initial="YZ") + +p + | Add the #[code avatar] class to #{''} element. + | There are 4 additional sizes available, including #[code avatar-xl](64px), #[code avatar-lg](48px), #[code avatar-sm](24px), and #[code avatar-xs](16px). + | By default, the avatar size is 32px. +p + | For users who don't have profile pictures, you may use their initials for avatars. + | Add the #[code avatar] class and avatar size class to #{'
    '} element. + | The #[code data-initial] attribute is the name appear inside the avatar. + +.columns + .column.col-6.col-xs-12 + figure.avatar.avatar-xl + img(src="img/avatar-1.png" alt="Avatar") + img.avatar-icon(src="img/avatar-2.png" alt="Avatar") + figure.avatar.avatar-lg + img(src="img/avatar-2.png" alt="Avatar") + img.avatar-icon(src="img/avatar-3.png" alt="Avatar") + figure.avatar + img(src="img/avatar-3.png" alt="Avatar") + img.avatar-icon(src="img/avatar-4.png" alt="Avatar") + figure.avatar.avatar-sm + img(src="img/avatar-4.png" alt="Avatar") + img.avatar-icon(src="img/avatar-5.png" alt="Avatar") + figure.avatar.avatar-xs + img(src="img/avatar-5.png" alt="Avatar") + img.avatar-icon(src="img/avatar-1.png" alt="Avatar") + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + +
    + ... +
    + +
    + ... + ... +
    + +
    + + +
    + ... +
    + +.columns + .column.col-6.col-xs-12 + figure.avatar.avatar-xl(data-initial="YZ") + i.avatar-presence.online + figure.avatar.avatar-lg(data-initial="YZ") + i.avatar-presence.busy + figure.avatar(data-initial="YZ") + i.avatar-presence.away + figure.avatar.avatar-sm(data-initial="YZ") + i.avatar-presence.offline + figure.avatar.avatar-xs(data-initial="YZ") + i.avatar-presence.online + +p + | Avatars support presence indicators. + | You can add an #{''} element with the #[code avatar-presence] class, and add #[code online], #[code busy] or #[code away] class for different status colors. + | The default is gray which means offline. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") +
    + ... + +
    \ No newline at end of file diff --git a/docs/src/contents/badges.pug b/docs/src/contents/badges.pug new file mode 100644 index 0000000..250fb39 --- /dev/null +++ b/docs/src/contents/badges.pug @@ -0,0 +1,59 @@ +p Badges are often used as unread number indicators. + +.columns + .column.col-3.col-xs-6 + span.badge(data-badge="") + | Notifications + .column.col-3.col-xs-6 + span.badge(data-badge="8") + | Notifications + .column.col-3.col-xs-6 + span.badge(data-badge="88") + | Notifications + .column.col-3.col-xs-6 + span.badge(data-badge="888") + | Notifications + +p + | Add the #[code badge] class to non self closing elements. + | And add the #[code data-badge] attribute to define the content of a badge. + | The badge will appear in the top-right direction of the element. +p + | If there is no #[code data-badge] or the attribute is not specified, the badge will appear as a dot. + +.columns + .column.col-sm-12 + button.btn.badge(data-badge="") Button + button.btn.badge(data-badge="8") Button + .column.col-sm-12 + button.btn.btn-primary.badge(data-badge="") Button + button.btn.btn-primary.badge(data-badge="8") Button + .column.col-sm-12 + figure.avatar.avatar-xl.badge(data-badge="8" data-initial="YZ") + img(src="img/avatar-1.png" alt="YZ") + figure.avatar.avatar-lg.badge(data-badge="8" data-initial="YZ") + img(src="img/avatar-2.png" alt="YZ") + figure.avatar.badge(data-badge="8" data-initial="YZ") + img(src="img/avatar-3.png" alt="YZ") + +p + | Badges support #[code button] and #[code avatars] elements as well. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + + Notifications + + + + Notifications + + + + +
    + YZ +
    \ No newline at end of file diff --git a/docs/src/contents/bars.pug b/docs/src/contents/bars.pug new file mode 100644 index 0000000..58d7f3c --- /dev/null +++ b/docs/src/contents/bars.pug @@ -0,0 +1,84 @@ +p + | Bars represent the progress of a task or the value within the known range. + | Bars are custom components for displaying HTML5 #{''}, #{''} and input range elements. + +.columns + .column.col-8.col-xs-12 + .bar.bar-sm + .bar-item.tooltip(data-tooltip="25%" role="progressbar" style="width:25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100") +.columns + .column.col-8.col-xs-12 + .bar + .bar-item.tooltip(data-tooltip="50%" role="progressbar" style="width:50%;") +.columns + .column.col-8.col-xs-12 + .bar + .bar-item.tooltip(data-tooltip="25%" role="progressbar" style="width:25%;") 25% + .bar-item.tooltip(data-tooltip="15%" role="progressbar" style="width:15%;background:#817fe3;") 15% + .bar-item.tooltip(data-tooltip="10%" role="progressbar" style="width:10%;background:#aaa9eb;") 10% + .bar-item.tooltip(data-tooltip="15%" role="progressbar" style="width:15%;") 15% + +p + | Add a container element with the #[code bar] class. + | And add child elements with the #[code bar-item] class. + | The width percentage value is needed for every #[code bar-item]. + +p + | There is the #[code bar-sm] class for thinner Bars. + | Also, you could use #[a(href="#tooltips") Tooltips] for any #[code bar-item]. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") +
    +
    +
    + + +
    +
    25%
    +
    15%
    +
    + ++docs-subheading('bars-slider', 'Slider bars') + +.columns + .column.col-8.col-xs-12 + .bar.bar-slider + .bar-item(role="progressbar" style="width:50%;") + button.bar-slider-btn.btn.tooltip(data-tooltip="50%" role="slider") +.columns + .column.col-8.col-xs-12 + .bar.bar-slider + .bar-item(role="progressbar" style="width:15%;") + button.bar-slider-btn.btn.tooltip(data-tooltip="25%" role="slider") + .bar-item(role="progressbar" style="width:65%;") + button.bar-slider-btn.btn.tooltip(data-tooltip="65%" role="slider") + +p + | You can add the #[code bar-slider] class to the Bars container. + | And add child elements with the #[code bar-item] class and #[code bar-slider-btn] inside bar-item. + | You need to set the #[code bar-item] width manually to have the slider point. + +p + | If there are two #[code bar-item] divs in one bar-slider, you will have a range slider. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + +
    +
    + +
    +
    + + +
    +
    + +
    +
    + +
    +
    \ No newline at end of file diff --git a/docs/src/contents/breadcrumbs.pug b/docs/src/contents/breadcrumbs.pug new file mode 100644 index 0000000..b1b66c5 --- /dev/null +++ b/docs/src/contents/breadcrumbs.pug @@ -0,0 +1,45 @@ +p Breadcrumbs are used as navigational hierarchies to indicate current location. + +.columns + .column.col-12 + ul.breadcrumb + li.breadcrumb-item + a.tooltip(href="#breadcrumbs" data-tooltip="Home") Home + li.breadcrumb-item + a.tooltip(href="#breadcrumbs" data-tooltip="Settings") Settings + .column.col-12 + ul.breadcrumb + li.breadcrumb-item + a.tooltip(href="#breadcrumbs" data-tooltip="Home") Home + li.breadcrumb-item + a.tooltip(href="#breadcrumbs" data-tooltip="Settings") Settings + li.breadcrumb-item + a.tooltip(href="#breadcrumbs" data-tooltip="Change avatar") Change avatar + .column.col-12 + ul.breadcrumb + li.breadcrumb-item + a.tooltip(href="#breadcrumbs" data-tooltip="Home") Home + li.breadcrumb-item + a.tooltip(href="#breadcrumbs" data-tooltip="Settings") Settings + li.breadcrumb-item + | Search result: + a.tooltip(href="#breadcrumbs" data-tooltip="Search result: Spectre") Spectre + +p + | Add a container element with the #[code breadcrumb] class. + | And add child elements with the #[code breadcrumb-item] class. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + \ No newline at end of file diff --git a/docs/src/contents/calendars.pug b/docs/src/contents/calendars.pug new file mode 100644 index 0000000..0806844 --- /dev/null +++ b/docs/src/contents/calendars.pug @@ -0,0 +1,195 @@ +p + | Calendars are designed for date or date range picker and events display. It is made with flex layout. + +.columns + .column.col-4.col-md-12 + .calendar + .calendar-nav.navbar + button.btn.btn-action.btn-link.btn-lg + i.icon.icon-arrow-left + .navbar-primary March 2017 + button.btn.btn-action.btn-link.btn-lg + i.icon.icon-arrow-right + .calendar-container + .calendar-header + .calendar-date Sun + .calendar-date Mon + .calendar-date Tue + .calendar-date Wed + .calendar-date Thu + .calendar-date Fri + .calendar-date Sat + .calendar-body + .calendar-date.prev-month.disabled + button.date-item 26 + .calendar-date.prev-month.disabled + button.date-item 27 + .calendar-date.prev-month.disabled + button.date-item 28 + .calendar-date.current-month + button.date-item 1 + .calendar-date.current-month + button.date-item 2 + .calendar-date.current-month + button.date-item 3 + .calendar-date.current-month.tooltip(data-tooltip="Today") + button.date-item.date-today 4 + .calendar-date.current-month.tooltip(data-tooltip="Not available") + button.date-item(disabled="") 5 + .calendar-date.current-month + button.date-item 6 + .calendar-date.current-month + button.date-item 7 + .calendar-date.current-month.tooltip(data-tooltip="You have appointments") + button.date-item.badge 8 + .calendar-date.current-month + button.date-item 9 + .calendar-date.current-month + button.date-item 10 + .calendar-date.current-month + button.date-item 11 + .calendar-date.current-month + button.date-item 12 + .calendar-date.current-month + button.date-item 13 + .calendar-date.current-month + button.date-item 14 + .calendar-date.current-month + button.date-item 15 + .calendar-date.current-month.calendar-range.range-start + button.date-item.active 16 + .calendar-date.current-month.calendar-range + button.date-item 17 + .calendar-date.current-month.calendar-range + button.date-item 18 + .calendar-date.current-month.calendar-range + button.date-item 19 + .calendar-date.current-month.calendar-range.range-end + button.date-item.active 20 + .calendar-date.current-month + button.date-item 21 + .calendar-date.current-month + button.date-item 22 + .calendar-date.current-month + button.date-item 23 + .calendar-date.current-month + button.date-item 24 + .calendar-date.current-month + button.date-item 25 + .calendar-date.current-month + button.date-item 26 + .calendar-date.current-month + button.date-item 27 + .calendar-date.current-month + button.date-item 28 + .calendar-date.current-month + button.date-item 29 + .calendar-date.current-month + button.date-item 30 + .calendar-date.current-month + button.date-item 31 + .calendar-date.next-month.disabled + button.date-item 1 + ++docs-subheading('calendars-sizes', 'Calendars sizes') + +.columns + .column.col-12 + .calendar.calendar-lg + .calendar-nav.navbar + button.btn.btn-action.btn-link.btn-lg + i.icon.icon-arrow-left + .navbar-primary March 2017 + button.btn.btn-action.btn-link.btn-lg + i.icon.icon-arrow-right + .calendar-container + .calendar-header + .calendar-date Sun + .calendar-date Mon + .calendar-date Tue + .calendar-date Wed + .calendar-date Thu + .calendar-date Fri + .calendar-date Sat + .calendar-body + .calendar-date.prev-month.disabled + button.date-item 26 + .calendar-date.prev-month.disabled + button.date-item 27 + .calendar-events + a.calendar-event.bg-error.text-light(href="#calendars") Zhonghe Festival + .calendar-date.prev-month.disabled + button.date-item 28 + .calendar-date.current-month + button.date-item 1 + .calendar-date.current-month + button.date-item 2 + .calendar-date.current-month + button.date-item 3 + .calendar-date.current-month.tooltip(data-tooltip="Today") + button.date-item.date-today 4 + .calendar-date.current-month + button.date-item(disabled="") 5 + .calendar-date.current-month + button.date-item 6 + .calendar-date.current-month + button.date-item 7 + .calendar-date.current-month.tooltip(data-tooltip="You have appointments") + button.date-item.badge 8 + .calendar-events + a.calendar-event.bg-primary.text-light(href="#calendars") Product launch event + a.calendar-event.bg-error.text-light(href="#calendars") International Women's Day + .calendar-date.current-month + button.date-item 9 + .calendar-date.current-month + button.date-item 10 + .calendar-date.current-month + button.date-item 11 + .calendar-date.current-month + button.date-item 12 + .calendar-events + a.calendar-event.bg-error.text-light(href="#calendars") Arbor Day + .calendar-date.current-month + button.date-item 13 + .calendar-date.current-month + button.date-item 14 + .calendar-date.current-month + button.date-item 15 + .calendar-date.current-month.calendar-range.range-start + button.date-item.active 16 + .calendar-date.current-month.calendar-range + button.date-item 17 + .calendar-date.current-month.calendar-range + button.date-item 18 + .calendar-date.current-month.calendar-range + button.date-item 19 + .calendar-date.current-month.calendar-range.range-end + button.date-item.active 20 + .calendar-events + a.calendar-event.bg-success.text-light(href="#calendars") Spring Equinox + .calendar-date.current-month + button.date-item 21 + .calendar-date.current-month + button.date-item 22 + .calendar-date.current-month + button.date-item 23 + .calendar-date.current-month + button.date-item 24 + .calendar-date.current-month + button.date-item 25 + .calendar-date.current-month + button.date-item 26 + .calendar-date.current-month + button.date-item 27 + .calendar-date.current-month + button.date-item 28 + .calendar-date.current-month + button.date-item 29 + .calendar-date.current-month + button.date-item 30 + .calendar-date.current-month + button.date-item 31 + .calendar-date.next-month.disabled + button.date-item 1 + .calendar-events + a.calendar-event.bg-error.text-light(href="#calendars") April Fools' Day \ No newline at end of file diff --git a/docs/src/contents/cards.pug b/docs/src/contents/cards.pug new file mode 100644 index 0000000..4fb3671 --- /dev/null +++ b/docs/src/contents/cards.pug @@ -0,0 +1,94 @@ +p Cards are flexible content containers. + +.columns + .column.col-6.col-xs-12 + .card + .card-image + img.img-responsive(src="img/osx-el-capitan.jpg" alt="OS X El Capitan") + .card-header + .card-title.h5 Microsoft + .card-subtitle.text-gray Software and hardware + .card-body + | Empower every person and every organization on the planet to achieve more. + .card-footer + a.btn.btn-primary(href="#cards") Do + .column.col-6.col-xs-12 + .card + .card-header + .card-title.h5 Apple + .card-subtitle.text-gray Hardware and software + .card-image + img.img-responsive(src="img/osx-yosemite.jpg" alt="OS X Yosemite") + .card-body + | To make a contribution to the world by making tools for the mind that advance humankind. + .card-footer + .btn-group.btn-group-block + button.btn.btn-primary Buy + button.btn Buy + button.btn Buy + .column.col-6.col-xs-12 + .card + .card-image + img.img-responsive(src="img/macos-sierra-2.jpg" alt="macOS Sierra") + .card-header + button.btn.btn-primary.float-right + i.icon.icon-plus + .card-title.h5 Google I/O + .card-subtitle.text-gray Software and hardware + .card-body + | An immersive, three-day experience focused on exploring the next generation of technology, mobile and beyond. + .column.col-6.col-xs-12 + .card + .card-image + img.img-responsive(src="img/osx-el-capitan-2.jpg" alt="OS X El Capitan") + .card-footer + a.btn.btn-primary(href="#cards") Buy + a.btn.btn-link(href="#cards") Share + .card-body + strong Surface Studio + | . Turn your desk into a Studio. Surface Studio is designed for the creative process. + .column.col-6.col-xs-12 + .card + .card-header + .card-title.h5 Apple + .card-subtitle.text-gray Hardware and software + .card-body + | To make a contribution to the world by making tools for the mind that advance humankind. + .card-image + img.img-responsive(src="img/macos-sierra.jpg" alt="macOS Sierra") + .column.col-6.col-xs-12 + .card + .card-header + .card-title.h5 Google + .card-subtitle.text-gray Software and hardware + .card-body + | Organize the world’s information and make it universally accessible and useful. + .card-image + img.img-responsive(src="img/osx-yosemite-2.jpg" alt="OS X Yosemite") + .card-footer + a.btn.btn-primary(href="#cards") Search + a.btn.btn-link(href="#cards") Share + +p + | Add a container element with the #[code card] class. + | And add child elements with the #[code card-image], #[code card-header], #[code card-body] and/or #[code card-footer] classes. + | The #[code card-image] can be placed in any position. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") +
    +
    + +
    +
    +
    Microsoft
    +
    Software and hardware
    +
    +
    + Empower every person and every organization on the planet to achieve more. +
    +
    + +
    +
    \ No newline at end of file diff --git a/docs/src/contents/carousels.pug b/docs/src/contents/carousels.pug new file mode 100644 index 0000000..5ce41fa --- /dev/null +++ b/docs/src/contents/carousels.pug @@ -0,0 +1,39 @@ +p Carousels are slideshows for cycling images. It is built in pure CSS. + +.columns + .column.col-12 + .carousel + input#slide-1.carousel-locator(type="radio" name="carousel-radio" hidden="" checked="") + input#slide-2.carousel-locator(type="radio" name="carousel-radio" hidden="") + input#slide-3.carousel-locator(type="radio" name="carousel-radio" hidden="") + input#slide-4.carousel-locator(type="radio" name="carousel-radio" hidden="") + .carousel-container + figure.carousel-item + label.item-prev.btn.btn-action.btn-lg(for="slide-4") + i.icon.icon-arrow-left + label.item-next.btn.btn-action.btn-lg(for="slide-2") + i.icon.icon-arrow-right + img.img-responsive.rounded(src="img/osx-yosemite.jpg" alt="macOS Yosemite Wallpaper") + figure.carousel-item + label.item-prev.btn.btn-action.btn-lg(for="slide-1") + i.icon.icon-arrow-left + label.item-next.btn.btn-action.btn-lg(for="slide-3") + i.icon.icon-arrow-right + img.img-responsive.rounded(src="img/osx-yosemite-2.jpg" alt="macOS Yosemite Wallpaper") + figure.carousel-item + label.item-prev.btn.btn-action.btn-lg(for="slide-2") + i.icon.icon-arrow-left + label.item-next.btn.btn-action.btn-lg(for="slide-4") + i.icon.icon-arrow-right + img.img-responsive.rounded(src="img/osx-el-capitan.jpg" alt="macOS Yosemite Wallpaper") + figure.carousel-item + label.item-prev.btn.btn-action.btn-lg(for="slide-3") + i.icon.icon-arrow-left + label.item-next.btn.btn-action.btn-lg(for="slide-1") + i.icon.icon-arrow-right + img.img-responsive.rounded(src="img/osx-el-capitan-2.jpg" alt="macOS Yosemite Wallpaper") + .carousel-nav + label.nav-item.text-hide.c-hand(for="slide-1") 1 + label.nav-item.text-hide.c-hand(for="slide-2") 2 + label.nav-item.text-hide.c-hand(for="slide-3") 3 + label.nav-item.text-hide.c-hand(for="slide-4") 4 \ No newline at end of file diff --git a/docs/src/contents/chips.pug b/docs/src/contents/chips.pug new file mode 100644 index 0000000..ff02780 --- /dev/null +++ b/docs/src/contents/chips.pug @@ -0,0 +1,44 @@ +p Chips are complex entities in small blocks. + +.columns + .column.col-12 + span.chip + | Crime + span.chip + | Drama + span.chip + | Biography + a.btn.btn-clear(href="#" aria-label="Close" role="button") + span.chip + | Mystery + a.btn.btn-clear(href="#" aria-label="Close" role="button") + .column.col-12 + .chip + figure.avatar.avatar-sm(data-initial="TS" style="background-color: #5755d9;") + | Tony Stark + .chip + img.avatar.avatar-sm(src="img/avatar-1.png" alt="Thor Odinson") + | Thor Odinson + .chip + img.avatar.avatar-sm(src="img/avatar-4.png" alt="Steve Rogers") + | Steve Rogers + +p + | Add a container element with the #[code chip] class. + | And add child text element, buttons or avatars with the #[code avatar] class. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + Crime + + + Biography + + + +
    + + Yan Zhu + +
    \ No newline at end of file diff --git a/docs/src/contents/colors.pug b/docs/src/contents/colors.pug new file mode 100644 index 0000000..84a86be --- /dev/null +++ b/docs/src/contents/colors.pug @@ -0,0 +1,89 @@ +p Color utilities are used for changing colors for text, link and background. + ++docs-subheading('colors-text', 'Text colors') + +.columns + .column.col-12 + p + span.text-primary primary color + p + span.text-secondary secondary color + p + span.text-gray gray color + p + span.text-light.bg-dark.p-1.rounded light color + p + span.text-success success color + p + span.text-warning warning color + p + span.text-error error color + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + primary color + secondary color + gray color + light color + success color + warning color + error color + +.columns + .column.col-12 + p + a.text-primary.p-1(href="#colors") primary link + p + a.text-secondary.p-1(href="#colors") secondary link + p + a.text-gray.p-1(href="#colors") gray link + p + a.text-light.bg-dark.p-1.rounded(href="#colors") light link + p + a.text-success.p-1(href="#colors") success link + p + a.text-warning.p-1(href="#colors") warning link + p + a.text-error.p-1(href="#colors") error link + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + primary color + secondary color + gray color + light color + success color + warning color + error color + ++docs-subheading('colors-background', 'Background colors') + +.columns + .column.col-12 + p + span.bg-primary.p-1.rounded primary bg + p + span.bg-secondary.text-primary.p-1.rounded secondary bg + p + span.bg-dark.p-1.rounded dark bg + p + span.bg-gray.p-1.rounded gray bg + p + span.bg-success.p-1.rounded success bg + p + span.bg-warning.p-1.rounded warning bg + p + span.bg-error.p-1.rounded error bg + +pre.code(data-lang='HTML') + code + :highlight(lang="html") +
    primary bg
    +
    secondary bg
    +
    dark bg
    +
    gray bg
    +
    success bg
    +
    warning bg
    +
    error bg
    \ No newline at end of file diff --git a/docs/src/contents/comparison.pug b/docs/src/contents/comparison.pug new file mode 100644 index 0000000..5f6ce38 --- /dev/null +++ b/docs/src/contents/comparison.pug @@ -0,0 +1,29 @@ +p + | Comparison Sliders are sliders for comparing two images. It is built in pure CSS. + +.columns + .column.col-12 + .comparison-slider + figure.comparison-before + img.rounded(src="img/macos-sierra-2.jpg" alt="macOS Sierra Wallpaper") + .comparison-label Before + figure.comparison-after + img.filter-grayscale.rounded(src="img/macos-sierra-2.jpg" alt="macOS Sierra Wallpaper") + .comparison-label After + textarea.comparison-resizer(readonly="") + +pre.code(data-lang='HTML') + code + :highlight(lang="html") +
    +
    + +
    Before
    +
    + +
    + +
    After
    + +
    +
    \ No newline at end of file diff --git a/docs/src/contents/cursor.pug b/docs/src/contents/cursor.pug new file mode 100644 index 0000000..df92600 --- /dev/null +++ b/docs/src/contents/cursor.pug @@ -0,0 +1,31 @@ +p Cursor utilities specify which mouse cursor to display when mouseover. + +.columns + .column.col-4 + .bg-gray.docs-block.c-hand c-hand + .column.col-4 + .bg-gray.docs-block.c-move c-move + .column.col-4 + .bg-gray.docs-block.c-zoom-in c-zoom-in + .column.col-4 + .bg-gray.docs-block.c-zoom-out c-zoom-out + .column.col-4 + .bg-gray.docs-block.c-not-allowed c-not-allowed + .column.col-4 + .bg-gray.docs-block.c-auto c-auto + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + +
    + +
    + +
    + +
    + +
    + +
    \ No newline at end of file diff --git a/docs/src/contents/display.pug b/docs/src/contents/display.pug new file mode 100644 index 0000000..bb3a0a3 --- /dev/null +++ b/docs/src/contents/display.pug @@ -0,0 +1,26 @@ +p Display utilities are used for display and hidden things. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + +
    + +
    + +
    + +
    + +
    + +
    +
    + +
    + +
    + +
    + +
    \ No newline at end of file diff --git a/docs/src/contents/divider.pug b/docs/src/contents/divider.pug new file mode 100644 index 0000000..e84ff11 --- /dev/null +++ b/docs/src/contents/divider.pug @@ -0,0 +1,54 @@ +p A Divider is used for separating elements. + +.columns + .column + .divider +.columns + .column + | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. + .divider.text-center(data-content="OR") + | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. +.columns + .column + form + .form-group + label.form-label(for="input-example-1") Email + input#input-example-1.form-input(type="text" placeholder="Email") + .form-group + label.form-label(for="input-example-2") Password + input#input-example-2.form-input(type="password" placeholder="Password") + .form-group + label.form-checkbox + input(type="checkbox") + i.form-icon + | Remember me + .form-group + button.btn.btn-primary Sign in + .divider-vert(data-content="OR") + .column + form + .form-group + label.form-label(for="input-example-3") Email + input#input-example-3.form-input(type="text" placeholder="Email") + .form-group + button.btn.btn-primary.btn-block Sign up + button.btn.btn-link.btn-block Learn more + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + +
    + +
    + + +
    +
    + +
    +
    +
    + +
    +
    \ No newline at end of file diff --git a/docs/src/contents/empty.pug b/docs/src/contents/empty.pug new file mode 100644 index 0000000..0ac70dc --- /dev/null +++ b/docs/src/contents/empty.pug @@ -0,0 +1,50 @@ +p + | Empty states/blank slates are commonly used as placeholders for first time use, empty data and error screens. + +.columns + .column.col-12 + .empty + .empty-icon + i.icon.icon-3x.icon-mail + p.empty-title.h5 You have no new messages + p.empty-subtitle Click the button to start a conversation + .empty-action + button.btn.btn-primary Send a message + .column.col-12 + .empty + .empty-icon + i.icon.icon-3x.icon-mail + p.empty-title.h5 You've successfully signed up + p.empty-subtitle Click the button to invite your friends + .empty-action + button.btn.btn-primary Invite your friends + .empty-action + button.btn.btn-link Skip + .column.col-12 + .empty + .empty-icon + i.icon.icon-3x.icon-people + p.empty-title.h5 You are not following anyone + p.empty-subtitle Start to meet new friends + .empty-action.input-group.input-inline + input.form-input(type="text" placeholder="") + button.btn.btn-primary.input-group-btn Search + +p + | An empty state component can include icons, messages (title and subtitle messages) and action buttons or any combination of those elements. + | Add #[code empty-icon], #[code empty-title], #[code empty-subtitle] or #[code empty-action] to the elements. + | HTML structure is exampled below. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") +
    +
    + +
    +

    You have no new messages

    +

    Click the button to start a conversation.

    +
    + +
    +
    \ No newline at end of file diff --git a/docs/src/contents/experimentals.pug b/docs/src/contents/experimentals.pug new file mode 100644 index 0000000..cec5b41 --- /dev/null +++ b/docs/src/contents/experimentals.pug @@ -0,0 +1,4 @@ +p + | The Experimentals include experimental elements and features, mostly are not yet ready for wide use. + | These elements and components are limited inside #[code spectre-exp.scss] before browsers fully support them. + | Sometimes, there are some specific browsers targeted components. \ No newline at end of file diff --git a/docs/src/contents/filters.pug b/docs/src/contents/filters.pug new file mode 100644 index 0000000..0c61640 --- /dev/null +++ b/docs/src/contents/filters.pug @@ -0,0 +1,107 @@ +p Filters are CSS only content filters. + +.columns + .column.col-12 + .filter + input#tag-0.filter-tag(type="radio" name="filter-radio" hidden="" checked="") + input#tag-1.filter-tag(type="radio" name="filter-radio" hidden="") + input#tag-2.filter-tag(type="radio" name="filter-radio" hidden="") + input#tag-3.filter-tag(type="radio" name="filter-radio" hidden="") + input#tag-4.filter-tag(type="radio" name="filter-radio" hidden="") + .filter-nav + label.chip(for="tag-0") All + label.chip(for="tag-1") Action + label.chip(for="tag-2") Roleplaying + label.chip(for="tag-3") Shooter + label.chip(for="tag-4") Sports + .filter-body.columns + .column.col-4.filter-item(data-tag="tag-2") + .card + .card-header + .card-title Fallout 4 + .card-subtitle Roleplaying + .column.col-4.filter-item(data-tag="tag-3") + .card + .card-header + .card-title Halo 5 + .card-subtitle Shooter + .column.col-4.filter-item(data-tag="tag-1") + .card + .card-header + .card-title Quantum Break + .card-subtitle Action + .column.col-4.filter-item(data-tag="tag-4") + .card + .card-header + .card-title Forza Horizon 3 + .card-subtitle Sports + .column.col-4.filter-item(data-tag="tag-2") + .card + .card-header + .card-title Final Fantasy XV + .card-subtitle Roleplaying + .column.col-4.filter-item(data-tag="tag-4") + .card + .card-header + .card-title NBA 2K17 + .card-subtitle Sports + .column.col-4.filter-item(data-tag="tag-3") + .card + .card-header + .card-title Battlefield 1 + .card-subtitle Shooter + .column.col-4.filter-item(data-tag="tag-1") + .card + .card-header + .card-title GTA V + .card-subtitle Action + .column.col-4.filter-item(data-tag="tag-4") + .card + .card-header + .card-title FIFA 17 + .card-subtitle Sports + .column.col-4.filter-item(data-tag="tag-3") + .card + .card-header + .card-title Overwatch + .card-subtitle Shooter + .column.col-4.filter-item(data-tag="tag-3") + .card + .card-header + .card-title Titanfall 2 + .card-subtitle Shooter + .column.col-4.filter-item(data-tag="tag-3") + .card + .card-header + .card-title Gears of Wars 4 + .card-subtitle Shooter + +p + | Filters use #[code tag-1] to #[code tag-8] to flag different tags. + | #[code tag-0] is reserved for clearing filter (or showing all). + | You can overwrite #[code $filter-number] in #[code _filters.scss] to have more filters. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") +
    + + + + +
    + + + +
    + +
    +
    + +
    +
    + +
    + +
    +
    \ No newline at end of file diff --git a/docs/src/contents/loading.pug b/docs/src/contents/loading.pug new file mode 100644 index 0000000..c7643b2 --- /dev/null +++ b/docs/src/contents/loading.pug @@ -0,0 +1,21 @@ +p + | Loading indicator is used for loading or updating. + | You can add the #[code loading] class to a container for loading status. + +.columns + .column.col-12.text-center + .loading + +p + | Add the #[code loading-lg] class for large size. + +.columns + .column.col-12.text-center + .loading.loading-lg + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + +
    +
    \ No newline at end of file diff --git a/docs/src/contents/menu.pug b/docs/src/contents/menu.pug new file mode 100644 index 0000000..fe7825b --- /dev/null +++ b/docs/src/contents/menu.pug @@ -0,0 +1,184 @@ +p Menus are vertical list of links or buttons for actions and navigation. + +.columns + .column.col-4.col-xs-12 + ul.menu + li.menu-item + .tile.tile-centered + .tile-icon + img.avatar(src="img/avatar-4.png" alt="Avatar") + .tile-content + | Steve Rogers + li.divider + li.menu-item + .menu-badge + label.label.label-primary 2 + a.active(href="#menus") + | My profile + li.menu-item + a(href="#menus") + | Settings + li.menu-item + a(href="#menus") + | Logout + .column.col-4.col-xs-12 + ul.menu + li.divider(data-content="LINKS") + li.menu-item + a(href="#menus") Slack + li.menu-item + a(href="#menus") Hipchat + li.menu-item + a(href="#menus") Skype + .column.col-4.col-xs-12 + ul.menu + li.menu-item + label.form-checkbox + input(type="checkbox" checked="") + i.form-icon + | form-checkbox + li.menu-item + label.form-radio + input(type="radio" checked="") + i.form-icon + | form-radio + li.menu-item + label.form-switch + input(type="checkbox" checked="") + i.form-icon + | form-switch + +p + | Add a container element with the #[code menu] class. + | And add child elements with the #[code menu-item] class. + | You can separate menu items with a #[code divider]. + | Spectre.css does not include JavaScript code, you will need to implement your JS to interact with the menus. +p + | Menus also have #[a(href="elements.html#forms" target="_blank") Form controls] (checkbox, radio and checkbox) support. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + + ++docs-subheading('menu-dropdown', 'Dropdown menu') + +p The dropdown is a combination of buttons and menus. + +.columns + .column.col-xs-12 + .dropdown + .btn-group + a.btn.btn-primary dropdown button + a.btn.btn-primary.dropdown-toggle(tabindex="0") + i.icon.icon-caret + ul.menu + li.menu-item + a(href="#dropdowns") + | Slack + li.menu-item + a(href="#dropdowns") + | Hipchat + li.menu-item + a(href="#dropdowns") + | Skype + .column.col-xs-12 + .dropdown + a.btn.btn-link.dropdown-toggle(tabindex="0") + | dropdown button + i.icon.icon-caret + ul.menu + li.menu-item + a(href="#dropdowns") + | Slack + li.menu-item + a(href="#dropdowns") + | Hipchat + li.menu-item + a(href="#dropdowns") + | Skype + +p + | Dropdown menus component is built entirely in CSS. It is triggered by #[code :focus] event. +p + | Add a container element with the #[code dropdown] class. + | And add a focusable element with the #[code dropdown-toggle] class for the button and a #[code menu] component right next to it. + | You also need to add #[code tabindex] to make the buttons focusable. +p + | If the dropdown is close to the right edge of the browser, you can add the #[code dropdown-right] class to the container to prevent it appearing off screen. + +.columns + .column.col-xs-12.text-right + .dropdown.dropdown-right + a.btn.btn-primary.dropdown-toggle(tabindex="0") + | dropdown button + i.icon.icon-caret + ul.menu.text-left + li.menu-item + a(href="#dropdowns") Slack + li.menu-item + a(href="#dropdowns") Hipchat + li.menu-item + a(href="#dropdowns") Skype + +p + | Also, you can implement your JS to interact with the dropdown menus by adding the #[code active] class to the #[code dropdown] container. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + +
    + + dropdown menu + + +
      + ... +
    +
    + + +
    +
    + + dropdown button + + + + + + +
      + ... +
    +
    +
    \ No newline at end of file diff --git a/docs/src/contents/meters.pug b/docs/src/contents/meters.pug new file mode 100644 index 0000000..dd6899c --- /dev/null +++ b/docs/src/contents/meters.pug @@ -0,0 +1,22 @@ +p Meters represent the value within the known range. + +.columns + .column.col-3.col-xs-12 + meter.meter(value="20" min="0" max="100") + .column.col-3.col-xs-12 + meter.meter(value="60" min="0" low="30" optimum="60" high="80" max="100") + .column.col-3.col-xs-12 + meter.meter(value="85" min="0" low="30" high="80" max="100") + .column.col-3.col-xs-12 + meter.meter(value="20" min="0" low="30" optimum="90" high="80" max="100") + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + + + + + + + \ No newline at end of file diff --git a/docs/src/contents/modals.pug b/docs/src/contents/modals.pug new file mode 100644 index 0000000..29580c9 --- /dev/null +++ b/docs/src/contents/modals.pug @@ -0,0 +1,141 @@ +p Modals are flexible dialog prompts. + +.columns + .column + a.btn.btn-primary(href="#example-modal-1") Open Modal + #example-modal-1.modal + a.modal-overlay(href="#modals" aria-label="Close") + .modal-container(role="document") + .modal-header + a.btn.btn-clear.float-right(href="#modals" aria-label="Close") + .modal-title.h5 Modal title + .modal-body + .content + p This is the content inside the modal. + h4 Lorem ipsum + p + | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat. + p + | Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs. + h4 Cupcake ipsum + p + | Jelly-o sesame snaps halvah croissant oat cake cookie. Cheesecake bear claw topping. Chupa chups apple pie carrot cake chocolate cake caramels. + p + | De braaaiiiins apocalypsi gorger omero prefrontal cortex undead survivor fornix dictum mauris. Hi brains mindless mortuis limbic cortex soulless creaturas optic nerve. + h4 Candy ipsum + p + | Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar. + p + | Caerphilly swiss fromage frais. Brie cheese and wine fromage frais chalk and cheese danish fontina smelly cheese who moved my cheese cow. + .modal-footer + button.btn.btn-primary Share + a.btn.btn-link(href="#modals") Close + +p + | Add a container element with the #[code modal] class. + | And add a real container #[code modal-container] and overlay #[code modal-overlay] inside it. + | You can add child elements with the #[code modal-header], #[code modal-body] and #[code modal-footer] - any or all of them. +p + | Spectre.css does not include JavaScript code, you will need to implement your JS to interact with modals. + | To make a modal appear, add the #[code active] class to the #[code modal] container. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + + ++docs-subheading('modals-sizes', 'Modal sizes') + +.columns + .column.col-6.col-xs-12 + a.btn.btn-primary(href="#example-modal-2") Open small size Modal + #example-modal-2.modal.modal-sm + a.modal-overlay(href="#modals-sizes" aria-label="Close") + .modal-container(role="document") + .modal-header + a.btn.btn-clear.float-right(href="#modals-sizes" aria-label="Close") + .modal-title.h5 Modal title + .modal-body + .content + form + .form-group + label.form-label(for="input-example-7") Name + input#input-example-7.form-input(type="text" placeholder="Name") + .form-group + label.form-label Gender + label.form-radio + input(type="radio" name="gender") + i.form-icon + | Male + label.form-radio + input(type="radio" name="gender" checked="") + i.form-icon + | Female + .modal-footer + button.btn.btn-primary Submit + a.btn.btn-link(href="#modals-sizes" aria-label="Close") Close + +p + | Use the #[code modal-sm] class for a smaller modal dialog. + | The container max width is #[code 320px]. + +.columns + .column + a.btn.btn-primary(href="#example-modal-3") Open large size Modal + #example-modal-3.modal.modal-lg + a.modal-overlay(href="#modals-sizes" aria-label="Close") + .modal-container(role="document") + .modal-header + a.btn.btn-clear.float-right(href="#modals-sizes" aria-label="Close") + .modal-title.h5 Modal title + .modal-body + .content + p This is the content inside the modal. + h4 Lorem ipsum + p + | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat. + p + | Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs. + h4 Cupcake ipsum + p + | Jelly-o sesame snaps halvah croissant oat cake cookie. Cheesecake bear claw topping. Chupa chups apple pie carrot cake chocolate cake caramels. + p + | De braaaiiiins apocalypsi gorger omero prefrontal cortex undead survivor fornix dictum mauris. Hi brains mindless mortuis limbic cortex soulless creaturas optic nerve. + h4 Candy ipsum + p + | Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar. + p + | Caerphilly swiss fromage frais. Brie cheese and wine fromage frais chalk and cheese danish fontina smelly cheese who moved my cheese cow. + .modal-footer + button.btn.btn-primary Share + a.btn.btn-link(href="#modals-sizes") Close + +p + | Use the #[code modal-lg] class for a full size modal. + | The container max width is #[code 960px]. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") +
    + +
    + +
    +
    \ No newline at end of file diff --git a/docs/src/contents/nav.pug b/docs/src/contents/nav.pug new file mode 100644 index 0000000..537b6d2 --- /dev/null +++ b/docs/src/contents/nav.pug @@ -0,0 +1,57 @@ +.columns + .column.col-6.col-xs-12 + ul.nav + li.nav-item + a(href="#nav") Elements + li.nav-item.active + a(href="#nav") Layout + ul.nav + li.nav-item + a(href="#nav") Flexbox grid + li.nav-item + a(href="#nav") Responsive + li.nav-item + a(href="#nav") Navbar + li.nav-item + a(href="#nav") Empty states + li.nav-item + a(href="#nav") Components + li.nav-item + a(href="#nav") Utilities + +p + | Add a container element with the #[code nav] class. + | And add child elements with the #[code nav-item] class. + | The #[code nav-item] with the #[code active] class will be highlighted. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + \ No newline at end of file diff --git a/docs/src/contents/off-canvas.pug b/docs/src/contents/off-canvas.pug new file mode 100644 index 0000000..7e45132 --- /dev/null +++ b/docs/src/contents/off-canvas.pug @@ -0,0 +1,45 @@ +p + | The Off-canvas is a navigation layout that the sidebar can slide in and out of the viewport. It is built in pure CSS. +p + | By default, the off-canvas menu is collapsed whenever the window width is. + | But you can add the #[code off-canvas-sidebar-show] class to the #[code off-canvas] to make the sidebar expanded when the window width is larger than or equal to #[strong 960px]. + +.columns + .column + .off-canvas.off-canvas-sidebar-show + a.off-canvas-toggle.btn.btn-primary.btn-action(href="#sidebar-demo") + i.icon.icon-menu + #sidebar-demo.off-canvas-sidebar.flex-centered + span Sidebar + a.off-canvas-overlay(href="#close") + .off-canvas-content + .content + h4 Lorem ipsum + p + | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat. + p + | Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs. + +p + | You can open the sidebar by adding the class #[code active] to #[code off-canvas-sidebar]. + | And remove the #[code active] to close it. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") +
    + + + + + + + + + +
    + +
    +
    \ No newline at end of file diff --git a/docs/src/contents/pagination.pug b/docs/src/contents/pagination.pug new file mode 100644 index 0000000..83a3f92 --- /dev/null +++ b/docs/src/contents/pagination.pug @@ -0,0 +1,102 @@ +.columns + .column.col-xs-12 + ul.pagination + li.page-item + a(href="#pagination") Prev + li.page-item + a(href="#pagination") 1 + li.page-item + span ... + li.page-item + a(href="#pagination") 4 + li.page-item.active + a(href="#pagination") 5 + li.page-item + a(href="#pagination") 6 + li.page-item + span ... + li.page-item + a(href="#pagination") 9 + li.page-item + a(href="#pagination") Next + .column.col-xs-12 + ul.pagination + li.page-item.disabled + a(href="#pagination" tabindex="-1") Prev + li.page-item.active + a(href="#pagination") 1 + li.page-item + a(href="#pagination") 2 + li.page-item + a(href="#pagination") 3 + li.page-item + span ... + li.page-item + a(href="#pagination") 9 + li.page-item + a(href="#pagination") Next + +p + | Add a container element with the #[code pagination] class. + | And add child elements with the #[code page-item] class. + | The #[code page-item] with the #[code active] class will be highlighted. + | You can add the #[code disabled] class to the #[code page-item] to have unclickable page links. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + + +.columns + .column.col-12 + ul.pagination + li.page-item.page-prev + a(href="#pagination") + .page-item-subtitle Previous + .page-item-title.h5 Getting started + li.page-item.page-next + a(href="#pagination") + .page-item-subtitle Next + .page-item-title.h5 Layout + +p You could use previous and next pagination to navigate. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + \ No newline at end of file diff --git a/docs/src/contents/panels.pug b/docs/src/contents/panels.pug new file mode 100644 index 0000000..3651c81 --- /dev/null +++ b/docs/src/contents/panels.pug @@ -0,0 +1,114 @@ +p Panels are flexible view container with auto-expand content section. + +.columns + .column.col-6.col-xs-12 + .panel + .panel-header.text-center + figure.avatar.avatar-lg + img(src="img/avatar-2.png" alt="Avatar") + .panel-title.h5.mt-10 Bruce Banner + .panel-subtitle THE HULK + nav.panel-nav + ul.tab.tab-block + li.tab-item.active + a(href="#panels") + | Profile + li.tab-item + a(href="#panels") + | Files + li.tab-item + a(href="#panels") + | Tasks + .panel-body + .tile.tile-centered + .tile-content + .tile-title E-mail + .tile-subtitle bruce.banner@hulk.com + .tile-action + button.btn.btn-link.btn-action.btn-lg + i.icon.icon-edit + .tile.tile-centered + .tile-content + .tile-title Skype + .tile-subtitle bruce.banner + .tile-action + button.btn.btn-link.btn-action.btn-lg + i.icon.icon-edit + .tile.tile-centered + .tile-content + .tile-title Location + .tile-subtitle Dayton, Ohio + .tile-action + button.btn.btn-link.btn-action.btn-lg + i.icon.icon-edit + .panel-footer + button.btn.btn-primary.btn-block Save + .column.col-6.col-xs-12 + .panel + .panel-header + .panel-title.h6 Comments + .panel-body + .tile + .tile-icon + figure.avatar + img(src="img/avatar-1.png" alt="Avatar") + .tile-content + p.tile-title Thor Odinson + p.tile-subtitle + | Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle... + .tile + .tile-icon + figure.avatar + img(src="img/avatar-2.png" alt="Avatar") + .tile-content + p.tile-title Bruce Banner + p.tile-subtitle The Strategic Homeland Intervention, Enforcement, and Logistics Division... + .tile + .tile-icon + figure.avatar(data-initial="TS") + .tile-content + p.tile-title Tony Stark + p.tile-subtitle + | Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle... + .tile + .tile-icon + figure.avatar + img(src="img/avatar-4.png" alt="Avatar") + .tile-content + p.tile-title Steve Rogers + p.tile-subtitle The Strategic Homeland Intervention, Enforcement, and Logistics Division... + .tile + .tile-icon + figure.avatar + img(src="img/avatar-3.png" alt="Avatar") + .tile-content + p.tile-title Natasha Romanoff + p.tile-subtitle + | Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle... + .panel-footer + .input-group + input.form-input(type="text" placeholder="Hello") + button.btn.btn-primary.input-group-btn Send + +p + | Add a container element with the #[code panel] class. + | And add child elements with the #[code panel-header], #[code panel-nav], #[code panel-body] and/or #[code panel-footer] classes. + | The #[code panel-body] can be auto expanded and vertically scrollable. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") +
    +
    +
    Comments
    +
    +
    + +
    +
    + +
    +
    + +
    +
    \ No newline at end of file diff --git a/docs/src/contents/parallax.pug b/docs/src/contents/parallax.pug new file mode 100644 index 0000000..88d2c17 --- /dev/null +++ b/docs/src/contents/parallax.pug @@ -0,0 +1,34 @@ +p + | The Parallax acts like Apple TV/tvOS hover parallax effect. It is built in pure CSS. + +.columns + .column.col-sm-12.col-8.col-mx-auto + .parallax + .parallax-top-left(tabindex="1") + .parallax-top-right(tabindex="2") + .parallax-bottom-left(tabindex="3") + .parallax-bottom-right(tabindex="4") + .parallax-content + .parallax-front + h2 tvOS parallax demo + .parallax-back + img.img-responsive.rounded(src="img/osx-yosemite-2.jpg" alt="macOS Yosemite Wallpaper") + +pre.code(data-lang='HTML') + code + :highlight(lang="html") +
    +
    +
    +
    +
    +
    +
    +

    tvOS parallax demo

    +
    +
    + +
    +
    +
    + \ No newline at end of file diff --git a/docs/src/contents/popovers.pug b/docs/src/contents/popovers.pug new file mode 100644 index 0000000..ca81e54 --- /dev/null +++ b/docs/src/contents/popovers.pug @@ -0,0 +1,82 @@ +p Popovers are small overlay content containers. Popovers component is built entirely in CSS. +.columns + .column.col-3.col-sm-6 + .popover + a.btn.btn-primary(href="#popovers") + | top popover + .popover-container + .card + .card-header + .card-title.h5 Apple + .card-subtitle.text-gray Software and hardware + .card-body + | To make a contribution to the world by making tools for the mind that advance humankind. + .card-footer + button.btn.btn-primary Buy + .column.col-3.col-sm-6 + .popover.popover-right + a.btn.btn-primary(href="#popovers") + | right popover + .popover-container + .card + .card-header + .card-title.h5 Apple + .card-subtitle.text-gray Software and hardware + .card-body + | To make a contribution to the world by making tools for the mind that advance humankind. + .card-footer + button.btn.btn-primary Buy + .column.col-3.col-sm-6 + .popover.popover-bottom + a.btn.btn-primary(href="#popovers") + | bottom popover + .popover-container + .card + .card-header + .card-title.h5 Apple + .card-subtitle.text-gray Software and hardware + .card-body + | To make a contribution to the world by making tools for the mind that advance humankind. + .card-footer + button.btn.btn-primary Buy + .column.col-3.col-sm-6 + .popover.popover-left + a.btn.btn-primary(href="#popovers") + | left popover + .popover-container + .card + .card-header + .card-title.h5 Apple + .card-subtitle.text-gray Software and hardware + .card-body + | To make a contribution to the world by making tools for the mind that advance humankind. + .card-footer + button.btn.btn-primary Buy + +p + | Wrap an element by a container with the #[code popover] class. + | And add a container with the #[code popover-container] next to the element. + | You can use #[a(href="#cards") Cards] component inside the #[code popover-container]. +p + | Also, you can add the #[code popover-right], #[code popover-bottom] or #[code popover-left] class to define the position. + | By default, the popovers appear above the element. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") +
    + +
    +
    +
    + ... +
    +
    + ... +
    +
    + ... +
    +
    +
    +
    \ No newline at end of file diff --git a/docs/src/contents/position.pug b/docs/src/contents/position.pug new file mode 100644 index 0000000..4e73fed --- /dev/null +++ b/docs/src/contents/position.pug @@ -0,0 +1,40 @@ +p + | Position utilities are used for useful layout and position things, including clearfix, float, position and margin/padding utilities. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + +
    + +
    +
    + +
    +
    +
    + +
    + + +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    \ No newline at end of file diff --git a/docs/src/contents/progress.pug b/docs/src/contents/progress.pug new file mode 100644 index 0000000..22a09c1 --- /dev/null +++ b/docs/src/contents/progress.pug @@ -0,0 +1,17 @@ +p The Progress indicates the progress completion of a task. + +.columns + .column.col-3.col-xs-12 + progress.progress(value="75" max="100") + .column.col-3.col-xs-12 + progress.progress(value="50" max="100") + .column.col-3.col-xs-12 + progress.progress(value="25" max="100") + .column.col-3.col-xs-12 + progress.progress(max="100") + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + + \ No newline at end of file diff --git a/docs/src/contents/shapes.pug b/docs/src/contents/shapes.pug new file mode 100644 index 0000000..fc07d4d --- /dev/null +++ b/docs/src/contents/shapes.pug @@ -0,0 +1,17 @@ +p Shape utilities are used for change element shapes. + +.columns + .column.col-6.text-center + .bg-primary.text-light.docs-shape.rounded.centered + | rounded + .column.col-6.text-center + .bg-primary.text-light.docs-shape.circle.centered + | circle + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + +
    + +
    \ No newline at end of file diff --git a/docs/src/contents/sliders.pug b/docs/src/contents/sliders.pug new file mode 100644 index 0000000..de3597b --- /dev/null +++ b/docs/src/contents/sliders.pug @@ -0,0 +1,18 @@ +p Sliders are for selecting values from ranges. +p + | You can add the class #[code tooltip] to have tooltip labels. + | If no #[code data-tooltip] is set, the #[code value] will be used instead. + +.columns + .column.col-6.col-xs-12 + input.slider.tooltip(type="range" min="0" max="100" value="50" oninput="this.setAttribute('value', this.value);") + .column.col-6.col-xs-12 + input.slider(type="range" min="0" max="100" value="50" disabled="") + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + + + + \ No newline at end of file diff --git a/docs/src/contents/steps.pug b/docs/src/contents/steps.pug new file mode 100644 index 0000000..5cf8b84 --- /dev/null +++ b/docs/src/contents/steps.pug @@ -0,0 +1,47 @@ +p Steps are progress indicators of a sequence of task steps. + +.columns + .column.col-12 + ul.step + li.step-item + a.tooltip(href="#steps" data-tooltip="Step 1 Tooltip") + li.step-item.active + a.tooltip(href="#steps" data-tooltip="Step 2 Tooltip") + li.step-item + a.tooltip(href="#steps" data-tooltip="Step 3 Tooltip") + li.step-item + a.tooltip(href="#steps" data-tooltip="Step 4 Tooltip") + .column.col-12 + ul.step + li.step-item + a.tooltip(href="#steps" data-tooltip="Step 1 Tooltip") Step 1 + li.step-item + a.tooltip(href="#steps" data-tooltip="Step 2 Tooltip") Step 2 + li.step-item.active + a.tooltip(href="#steps" data-tooltip="Step 3 Tooltip") Step 3 + li.step-item + a.tooltip(href="#steps" data-tooltip="Step 4 Tooltip") Step 4 + +p + | Add a container element with the #[code step] class. + | And add child elements with the #[code step-item] class. + | The #[code step-item] with the #[code active] class will be highlighted and indicate the current state of progress. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + + diff --git a/docs/src/contents/tabs.pug b/docs/src/contents/tabs.pug new file mode 100644 index 0000000..f89005d --- /dev/null +++ b/docs/src/contents/tabs.pug @@ -0,0 +1,132 @@ +p Tabs enable quick switch between different views. + +.columns + .column.col-6.col-sm-12 + ul.tab + li.tab-item.active + a(href="#tabs") + | Music + li.tab-item + a(href="#tabs") + | Playlists + li.tab-item + a(href="#tabs") + | Radio + li.tab-item + a(href="#tabs") + | Store + .column.col-6.col-sm-12 + ul.tab.tab-block + li.tab-item.active + a(href="#tabs") + | Music + li.tab-item + a(href="#tabs") + | Playlists + li.tab-item + a(href="#tabs") + | Radio + +p + | Add a container element with the #[code tab] class. + | And add child elements with the #[code tab-item] class. + | You can add the #[code tab-block] class for a full-width tab. + | The #[code tab-item] or its child #{''} with the #[code active] class will be highlighted. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + + +.columns + .column.col-sm-12 + ul.tab + li.tab-item.active + a.badge(href="#tabs" data-badge="999") + | Music + li.tab-item + a(href="#tabs") + | Playlists + li.tab-item + a(href="#tabs") + | Radio + .column.col-sm-12 + ul.tab.tab-block + li.tab-item.active + a.badge(href="#tabs" data-badge="9") + | Music + li.tab-item + a.badge(href="#tabs" data-badge="99") + | Playlists + li.tab-item + a(href="#tabs") + | Radio + +p + | If you need #[code badges] on tabs, you can add badge class to the element within #[code tab-item]. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + + +.columns + .column.col-12 + ul.tab + li.tab-item.active + a(href="#tabs") + | Music + span.btn.btn-clear + li.tab-item + a(href="#tabs") + | Playlists + li.tab-item + a(href="#tabs") + | Radio + li.tab-item + a(href="#tabs") + | Store + li.tab-item.tab-action + .input-group.input-inline + input.form-input.input-sm(type="text" placeholder="search") + button.btn.btn-primary.btn-sm.input-group-btn Search + +p + | You could add a search box or buttons inside a tab. + | Add the #[code tab-action] class to the #[code tab-item]. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + \ No newline at end of file diff --git a/docs/src/contents/text.pug b/docs/src/contents/text.pug new file mode 100644 index 0000000..a6a733b --- /dev/null +++ b/docs/src/contents/text.pug @@ -0,0 +1,36 @@ +p Text utilities are used for text alignment, styles and overflow things. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + +
    + +
    + +
    + +
    + + +
    + +
    + +
    + + +
    + +
    + +
    + +
    + + +
    + +
    + +
    \ No newline at end of file diff --git a/docs/src/contents/tiles.pug b/docs/src/contents/tiles.pug new file mode 100644 index 0000000..e1e7379 --- /dev/null +++ b/docs/src/contents/tiles.pug @@ -0,0 +1,92 @@ +p Tiles are repeatable or embeddable information blocks. + +.columns + .column.col-9.col-sm-12 + .tile + .tile-icon + figure.avatar.avatar-lg + img(src="img/avatar-3.png" alt="Avatar") + .tile-content + p.tile-title The Avengers + p.tile-subtitle.text-gray + | Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle... + .tile-action + button.btn.btn-primary Join + button.btn Contact + .column.col-9.col-sm-12 + .tile + .tile-icon + figure.avatar.avatar-lg + img(src="img/avatar-2.png" alt="Avatar") + .tile-content + p.tile-title The S.H.I.E.L.D. + p.tile-subtitle.text-gray The Strategic Homeland Intervention, Enforcement, and Logistics Division... + p + button.btn.btn-primary.btn-sm Join + button.btn.btn-sm Contact + +p + | Add a container with the #[code tile] class. + | And add child elements with the #[code tile-icon], #[code tile-content] or/and #[code tile-action] classes. + | The #[code tile-icon] and #[code tile-action] are optional. +p + | There are #[code tile-title] and #[code tile-subtitle] classes for title and subtitle text styles. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") +
    +
    +
    + +
    +
    +
    +

    The Avengers

    +

    Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...

    +
    +
    + +
    +
    + ++docs-subheading('tiles-compact', 'Compact tiles') + +p + | There is compact version of Tiles component, which is often used as contact and file info blocks. +p + | Add the #[code tile-centered] class to the container #[code tile]. + | The #[code tile-icon], #[code tile-content] and #[code tile-action] will be vertically centered. + +.columns + .column.col-6.col-md-9.col-xs-12 + .tile.tile-centered + .tile-icon + .example-tile-icon + i.icon.icon-mail.centered + .tile-content + .tile-title spectre-docs.pdf + .tile-subtitle.text-gray 14MB · Public · 1 Jan, 2017 + .tile-action + button.btn.btn-link.btn-action + i.icon.icon-more-vert + +pre.code(data-lang='HTML') + code + :highlight(lang="html") +
    +
    +
    + +
    +
    +
    +
    spectre-docs.pdf
    +
    14MB · Public · 1 Jan, 2017
    +
    +
    + +
    +
    \ No newline at end of file diff --git a/docs/src/contents/timelines.pug b/docs/src/contents/timelines.pug new file mode 100644 index 0000000..1badfdf --- /dev/null +++ b/docs/src/contents/timelines.pug @@ -0,0 +1,81 @@ +p Timelines are ordered sequences of activities. + +.columns + .column.col-9.col-sm-12 + .timeline + #timeline-example-1.timeline-item + .timeline-left + a.timeline-icon.tooltip(href="#timeline-example-1" data-tooltip="March 2016") + .timeline-content + .tile + .tile-content + p.tile-subtitle March 2016 + p.tile-title Initial commit + #timeline-example-2.timeline-item + .timeline-left + a.timeline-icon.icon-lg.tooltip(href="#timeline-example-2" data-tooltip="February 2017") + i.icon.icon-check + .timeline-content + .tile + .tile-content + p.tile-subtitle February 2017 + p.tile-title New Documents experience + p.tile-title + a(href="components.html#bars") Bars + | : represent the progress of a task + p.tile-title + a(href="components.html#steps") Steps + | : progress indicators of a sequence of task steps + p.tile-title + a(href="components.html#tiles") Tiles + | : repeatable or embeddable information blocks + .tile-action + button.btn View + #timeline-example-3.timeline-item + .timeline-left + a.timeline-icon.icon-lg.tooltip(href="#timeline-example-3" data-tooltip="March 2017") + i.icon.icon-check + .timeline-content + .tile + .tile-content + p.tile-subtitle March 2017 + p.tile-title + a(href="elements.html#icons") Icons + | : single-element, responsive and pure CSS icons + p.tile-title + a(href="components.html#popovers") Popovers + | : small overlay content containers + p.tile-title + a(href="experimentals.html#calendars") Calendars + | : date or date range picker and events display + p.tile-title + a(href="experimentals.html#carousels") Carousels + | : slideshows for cycling images + .tile-action + button.btn View + +pre.code(data-lang='HTML') + code + :highlight(lang="html") +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + + + +
    +
    + +
    +
    + ... +
    \ No newline at end of file diff --git a/docs/src/contents/toasts.pug b/docs/src/contents/toasts.pug new file mode 100644 index 0000000..cf4c31a --- /dev/null +++ b/docs/src/contents/toasts.pug @@ -0,0 +1,49 @@ +p Toasts are used to show alert or information to users. + +.columns + .column.col-9.col-sm-12 + .toast + button.btn.btn-clear.float-right + h6 Toast Title + | Lorem ipsum dolor sit amet, consectetur adipiscing elit. + .column.col-9.col-sm-12 + .toast.toast-primary + button.btn.btn-clear.float-right + | Lorem ipsum dolor sit amet, consectetur adipiscing elit. + +p + | Add a container element with the #[code toast] class. + | You can add any text within the container, and even icons. + | You may also add a close button with the #[code btn-clear] class if you need. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") +
    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. +
    + +.columns + .column.col-sm-12 + .toast.toast-success + button.btn.btn-clear.float-right + | Toast success + .column.col-sm-12 + .toast.toast-warning + button.btn.btn-clear.float-right + | Toast warning + .column.col-sm-12 + .toast.toast-error + button.btn.btn-clear.float-right + | Toast error + +p + | And you can add the #[code toast-primary], #[code toast-success], #[code toast-warning] or #[code toast-error] class for additional toast colors. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") +
    + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. +
    \ No newline at end of file diff --git a/docs/src/contents/tooltips.pug b/docs/src/contents/tooltips.pug new file mode 100644 index 0000000..bda259a --- /dev/null +++ b/docs/src/contents/tooltips.pug @@ -0,0 +1,24 @@ +p Tooltips provide context information labels that appear on hover and focus. + +.columns.text-center + .column.col-xs-12 + button.btn.btn-primary.tooltip(data-tooltip="Top Tooltip Text") top tooltip + .column.col-xs-12 + button.btn.btn-primary.tooltip.tooltip-right(data-tooltip="Right Tooltip Text") right tooltip + .column.col-xs-12 + button.btn.btn-primary.tooltip.tooltip-bottom(data-tooltip="Bottom Tooltip Text") bottom tooltip + .column.col-xs-12 + button.btn.btn-primary.tooltip.tooltip-left(data-tooltip="Left Tooltip Text") left tooltip + +p Tooltips component is built entirely in CSS. +p + | Add the #[code tooltip] class and the #[code data-tooltip] attribute, which contains the tooltip content, to non self closing elements. +p + | And add the #[code tooltip-right], #[code tooltip-bottom] or #[code tooltip-left] class to define the position of a tooltip. + | By default, the tooltip appears above the element. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + + \ No newline at end of file diff --git a/docs/src/experimentals.pug b/docs/src/experimentals.pug new file mode 100644 index 0000000..770f19b --- /dev/null +++ b/docs/src/experimentals.pug @@ -0,0 +1,55 @@ +extends _docs-layout.pug + +block variables + - var title = 'Experimentals - Spectre.css CSS Framework' + - var description = '' + - var current = 'experimentals' + +block docs-content + //- Experimentals + +docs-heading('experimentals', 'Experimentals') + include contents/experimentals.pug + + //- Autocomplete + +docs-heading('autocomplete', 'Autocomplete') + include contents/autocomplete.pug + + //- Calendars + +docs-heading('calendars', 'Calendars') + include contents/calendars.pug + + //- Carousels + +docs-heading('carousels', 'Carousels') + include contents/carousels.pug + + //- Comparison sliders + +docs-heading('comparison', 'Comparison sliders') + include contents/comparison.pug + + //- Filters + +docs-heading('filters', 'Filters') + include contents/filters.pug + + //- Meters + +docs-heading('meters', 'Meters') + include contents/meters.pug + + //- Off-canvas + +docs-heading('off-canvas', 'Off-canvas') + include contents/off-canvas.pug + + //- Parallax + +docs-heading('parallax', 'Parallax') + include contents/parallax.pug + + //- Progress + +docs-heading('progress', 'Progress') + include contents/progress.pug + + //- Sliders + +docs-heading('sliders', 'Sliders') + include contents/sliders.pug + + //- Timelines + +docs-heading('timelines', 'Timelines') + include contents/timelines.pug \ No newline at end of file diff --git a/docs/src/utilities.pug b/docs/src/utilities.pug new file mode 100644 index 0000000..e516576 --- /dev/null +++ b/docs/src/utilities.pug @@ -0,0 +1,39 @@ +extends _docs-layout.pug + +block variables + - var title = 'Utilities - Spectre.css CSS Framework' + - var description = '' + - var current = 'utilities' + +block docs-content + //- Colors + +docs-heading('colors', 'Color utilities') + include contents/colors.pug + + //- Cursor + +docs-heading('cursor', 'Cursor utilities') + include contents/cursor.pug + + //- Display + +docs-heading('display', 'Display utilities') + include contents/display.pug + + //- Divider + +docs-heading('divider', 'Divider') + include contents/divider.pug + + //- Loading + +docs-heading('loading', 'Loading') + include contents/loading.pug + + //- Position + +docs-heading('position', 'Position utilities') + include contents/position.pug + + //- Shapes + +docs-heading('shapes', 'Shape utilities') + include contents/shapes.pug + + //- Text + +docs-heading('text', 'Text utilities') + include contents/text.pug \ No newline at end of file diff --git a/docs/utilities.html b/docs/utilities.html index 5a2256a..5032ec7 100644 --- a/docs/utilities.html +++ b/docs/utilities.html @@ -1,678 +1,442 @@ - - - - - - - Utilities - Spectre.css CSS Framework - - - - - - - - -
    -
    - - - - GitHub -
    - -