From 68acb1f4738c23598ffdaa78661e7b0f56adf705 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Tue, 8 Aug 2017 17:41:40 -0400 Subject: [PATCH] Split website up --- build.js | 73 +- dist/shoelace.css | 4 +- dist/shoelace.js | 4 +- docs/alerts.html | 105 ++ docs/attribution.html | 100 + docs/badges.html | 118 ++ docs/browser-support.html | 99 + docs/buttons.html | 161 ++ docs/content.html | 226 +++ docs/customizing.html | 111 ++ docs/dropdowns.html | 199 ++ docs/forms.html | 398 ++++ docs/grid-system.html | 93 + docs/icons.html | 93 + docs/installing.html | 111 ++ docs/loaders.html | 112 ++ docs/switches.html | 146 ++ docs/tables.html | 169 ++ docs/tabs.html | 219 +++ docs/utilities.html | 214 +++ index.html | 1785 +----------------- package-lock.json | 2994 +++++++++++++++++++++++++++++- package.json | 7 +- docs.css => source/css/_docs.css | 117 +- source/css/_homepage.css | 35 + source/docs/alerts.md | 25 + source/docs/attribution.md | 16 + source/docs/badges.md | 41 + source/docs/browser-support.md | 19 + source/docs/buttons.md | 90 + source/docs/content.md | 152 ++ source/docs/customizing.md | 41 + source/docs/dropdowns.md | 129 ++ source/docs/forms.md | 343 ++++ source/docs/grid-system.md | 11 + source/docs/icons.md | 11 + source/docs/installing.md | 49 + source/docs/loaders.md | 34 + source/docs/switches.md | 69 + source/docs/tables.md | 101 + source/docs/tabs.md | 150 ++ source/docs/utilities.md | 156 ++ source/layouts/default.html | 90 + 43 files changed, 7406 insertions(+), 1814 deletions(-) create mode 100644 docs/alerts.html create mode 100644 docs/attribution.html create mode 100644 docs/badges.html create mode 100644 docs/browser-support.html create mode 100644 docs/buttons.html create mode 100644 docs/content.html create mode 100644 docs/customizing.html create mode 100644 docs/dropdowns.html create mode 100644 docs/forms.html create mode 100644 docs/grid-system.html create mode 100644 docs/icons.html create mode 100644 docs/installing.html create mode 100644 docs/loaders.html create mode 100644 docs/switches.html create mode 100644 docs/tables.html create mode 100644 docs/tabs.html create mode 100644 docs/utilities.html rename docs.css => source/css/_docs.css (61%) create mode 100644 source/css/_homepage.css create mode 100644 source/docs/alerts.md create mode 100644 source/docs/attribution.md create mode 100644 source/docs/badges.md create mode 100644 source/docs/browser-support.md create mode 100644 source/docs/buttons.md create mode 100644 source/docs/content.md create mode 100644 source/docs/customizing.md create mode 100644 source/docs/dropdowns.md create mode 100644 source/docs/forms.md create mode 100644 source/docs/grid-system.md create mode 100644 source/docs/icons.md create mode 100644 source/docs/installing.md create mode 100644 source/docs/loaders.md create mode 100644 source/docs/switches.md create mode 100644 source/docs/tables.md create mode 100644 source/docs/tabs.md create mode 100644 source/docs/utilities.md create mode 100644 source/layouts/default.html diff --git a/build.js b/build.js index 7852506e2..42445cb95 100644 --- a/build.js +++ b/build.js @@ -9,11 +9,16 @@ const Chalk = require('chalk'); const CSSnano = require('cssnano'); const Del = require('del'); const FS = require('fs'); +const Layouts = require('metalsmith-layouts'); +const Markdown = require('metalsmith-markdown'); +const Metalsmith = require('metalsmith'); const Path = require('path'); const PostCSS = require('postcss'); const Program = require('commander'); const UglifyJS = require('uglify-js'); +let stats; + // Initialize CLI Program .version(__version) @@ -69,12 +74,12 @@ if(Program.build) { let shoelaceCSS = Path.join(__dirname, 'dist/shoelace.css'); // Remember stats - let stats = { + stats = { originalSize: (output.stats.originalSize / 1024).toFixed(1) + 'KB', minifiedSize: (output.stats.minifiedSize / 1024).toFixed(1) + 'KB' }; - // Update placeholders in CSS + // Update {placeholders} in CSS output.styles = output.styles .replace(/\{version\}/g, __version) .replace(/\{originalSize\}/, stats.originalSize) @@ -88,29 +93,6 @@ if(Program.build) { } console.log(Chalk.green('CSS Minified: %s! đź’Ş'), Path.relative(__dirname, shoelaceCSS)); - resolve(stats); - }); - })) - - // Update docs - .then((stats) => new Promise((resolve, reject) => { - let docs = Path.join(__dirname, 'index.html'); - let content = FS.readFileSync(docs, 'utf8'); - - // Update placeholders - content = content - .replace(/(.*?)<\/span>/g, '' + __version + '') - .replace(/(.*?)<\/span>/g, '' + stats.originalSize + '') - .replace(/(.*?)<\/span>/g, '' + stats.minifiedSize + ''); - - // Write docs file - FS.writeFile(docs, content, 'utf8', (err) => { - if(err) { - reject(err); - return; - } - console.log(Chalk.green('Docs have been updated! đź“š')); - resolve(); }); })) @@ -139,7 +121,7 @@ if(Program.build) { .then((output) => new Promise((resolve, reject) => { let shoelaceJS = Path.join(__dirname, 'dist/shoelace.js'); - // Update placeholders in JS + // Update {placeholders} in JS output.code = output.code.replace(/\{version\}/g, __version); // Write output file @@ -154,6 +136,45 @@ if(Program.build) { }); })) + // Generate the docs + .then(() => new Promise((resolve, reject) => { + Metalsmith(__dirname) + .source('./source/docs') + .destination('./docs') + .clean(true) + .use(Markdown()) + .use(Layouts({ + engine: 'handlebars', + directory: './source/layouts', + rename: false + })) + // Update {placeholders} in content + .use((files, metalsmith, done) => { + Object.keys(files).forEach((key) => { + let file = files[key]; + + file.contents = new Buffer( + file.contents + .toString() + .replace(/\{version\}/g, __version) + .replace(/\{minifiedSize\}/g, stats.minifiedSize) + .replace(/\{originalSize\}/g, stats.originalSize) + ); + }); + + done(); + }) + .build((err) => { + if(err) { + reject(err); + return; + } + console.log(Chalk.green('Docs have been generated! đź“š')); + + resolve(); + }); + })) + // Exit with success .then(() => process.exit(1)) diff --git a/dist/shoelace.css b/dist/shoelace.css index eacfcab6c..14d502f42 100644 --- a/dist/shoelace.css +++ b/dist/shoelace.css @@ -1,5 +1,5 @@ /*! - Shoelace.css 1.0.0-beta9 + Shoelace.css 1.0.0-beta10 (c) A Beautiful Site, LLC Released under the MIT license @@ -10,7 +10,7 @@ /*! Variables */:root{--font-sans-serif:sans-serif;--font-serif:serif;--font-system:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;--font-monospace:Menlo,Consolas,"DejaVu Sans Mono",monospace;--color-primary:tomato;--color-white:#fff;--color-navy:#001f3f;--color-blue:#0074d9;--color-aqua:#7fdbff;--color-teal:#39cccc;--color-olive:#3d9970;--color-green:#2ecc40;--color-lime:#01ff70;--color-yellow:#ffdc00;--color-orange:#ff851b;--color-red:#ff4136;--color-maroon:#85144b;--color-fuchsia:#f012be;--color-purple:#b10dc9;--color-black:#111;--color-gray:#aaa;--color-silver:#ddd;--state-success:var(--color-green);--state-info:var(--color-aqua);--state-warning:var(--color-orange);--state-danger:var(--color-red);--state-inverse:var(--color-black);--component-bg-color:#f2f2f2;--component-border-color:#ddd;--component-border-radius:.25rem;--component-border-width:1px;--component-spacing:1rem;--component-spacing-big:2rem;--component-spacing-small:.5rem;--body-bg-color:var(--color-white);--body-color:var(--color-black);--font-family:var(--font-system);--font-size:1rem;--font-size-big:1.25rem;--font-size-small:.875rem;--font-weight-light:300;--font-weight:400;--font-weight-bold:700;--line-height:1.5;--text-muted:var(--color-gray);--code-font-size:90%;--code-color:var(--color-black);--code-border-radius:var(--component-border-radius);--code-bg-color:var(--component-bg-color);--code-spacing-x:calc(var(--font-size) * .4);--code-spacing-y:calc(var(--font-size) * .2);--headings-font-family:var(--font-system);--headings-font-weight:var(--font-weight-light);--headings-line-height:1.1;--headings-margin-bottom:.5rem;--headings-color:inherit;--headings-font-size-h1:2.5rem;--headings-font-size-h2:2rem;--headings-font-size-h3:1.75rem;--headings-font-size-h4:1.5rem;--headings-font-size-h5:1.25rem;--headings-font-size-h6:1rem;--hr-border-width:1px;--hr-border-color:var(--component-border-color);--hr-spacing:var(--component-spacing-big);--kbd-font-size:90%;--kbd-color:var(--color-white);--kbd-border-radius:var(--component-border-radius);--kbd-bg-color:var(--color-black);--kbd-spacing-x:calc(var(--font-size) * .4);--kbd-spacing-y:calc(var(--font-size) * .2);--link-color:var(--color-primary);--link-text-decoration:none;--link-color-hover:var(--link-color);--link-text-decoration-hover:underline;--mark-color:inherit;--mark-bg-color:var(--color-yellow);--mark-spacing-x:calc(var(--font-size) * .4);--mark-spacing-y:calc(var(--font-size) * .2);--placeholder-color:var(--text-muted);--pre-color:var(--code-color);--pre-border-radius:var(--component-border-radius);--pre-bg-color:var(--code-bg-color);--pre-max-height:none;--selection-color:var(--color-white);--selection-bg-color:var(--color-primary);--alert-color:var(--color-white);--alert-border-radius:var(--component-border-radius);--alert-bg-color-primary:var(--color-primary);--alert-bg-color-success:var(--state-success);--alert-bg-color-info:var(--state-info);--alert-bg-color-warning:var(--state-warning);--alert-bg-color-danger:var(--state-danger);--alert-bg-color-inverse:var(--state-inverse);--alert-spacing-x:var(--component-spacing);--alert-spacing-y:var(--component-spacing);--badge-font-size:.8em;--badge-font-weight:var(--font-weight-bold);--badge-color:var(--color-white);--badge-border-radius:1em;--badge-bg-color-primary:var(--color-primary);--badge-bg-color-success:var(--state-success);--badge-bg-color-info:var(--state-info);--badge-bg-color-warning:var(--state-warning);--badge-bg-color-danger:var(--state-danger);--badge-bg-color-inverse:var(--state-inverse);--badge-spacing-x:calc(var(--component-spacing) * .5);--badge-spacing-y:calc(var(--component-spacing) * .15);--button-font-family:inherit;--button-font-weight:inherit;--button-font-size:var(--font-size);--button-color:var(--color-white);--button-border-radius:var(--component-border-radius);--button-box-shadow:inset 0 2px 0 hsla(0,0%,100%,.1),inset 0 -2px 0 rgba(0,0,0,.1);--button-box-shadow-hover:inset 0 2px 5rem rgba(0,0,0,.1),inset 0 -2px 0 rgba(0,0,0,.1);--button-box-shadow-active:inset 0 2px 5rem rgba(0,0,0,.1),inset 0 2px 0 rgba(0,0,0,.1);--button-bg-color-primary:var(--color-primary);--button-bg-color-success:var(--state-success);--button-bg-color-info:var(--state-info);--button-bg-color-warning:var(--state-warning);--button-bg-color-danger:var(--state-danger);--button-bg-color-inverse:var(--state-inverse);--dropdown-min-width:10rem;--dropdown-max-width:25rem;--dropdown-max-height:none;--dropdown-offset-x:0;--dropdown-offset-y:1px;--dropdown-border-color:var(--component-border-color);--dropdown-border-radius:var(--component-border-radius);--dropdown-border-width:var(--component-border-width);--dropdown-color:var(--body-color);--dropdown-color-hover:var(--color-white);--dropdown-bg-color:var(--color-white);--dropdown-bg-color-hover:var(--color-primary);--dropdown-box-shadow:0 1px 0 rgba(0,0,0,.05);--dropdown-divider-border-color:var(--component-border-color);--dropdown-divider-border-width:var(--component-border-width);--dropdown-spacing-x:var(--component-spacing);--dropdown-spacing-y:calc(var(--dropdown-spacing-x) / 4);--dropdown-z-index:100;--fieldset-border-color:var(--component-border-color);--fieldset-border-width:var(--component-border-width);--fieldset-border-radius:var(--component-border-radius);--fieldset-spacing-x:var(--component-spacing);--fieldset-spacing-y:var(--component-spacing);--input-font-family:inherit;--input-font-size:var(--font-size);--input-font-size-small:.8rem;--input-font-size-big:1.2rem;--input-font-weight:inherit;--input-height:2rem;--input-height-big:2.75rem;--input-height-small:1.25rem;--input-color:var(--body-color);--input-border-color:var(--component-border-color);--input-border-color-focus:var(--color-primary);--input-border-width:1px;--input-border-radius:var(--component-border-radius);--input-bg-color:var(--color-white);--input-box-shadow:inset 0 1px 0 rgba(0,0,0,.05);--input-readonly-bg-color:var(--component-bg-color);--input-range-track-color:var(--component-bg-color);--input-range-track-box-shadow:inset 0 1px 0 rgba(0,0,0,.05);--input-range-thumb-color:var(--color-primary);--input-range-thumb-height:2rem;--input-invalid-color:var(--state-danger);--input-invalid-border-color:var(--state-danger);--input-valid-color:var(--state-success);--input-valid-border-color:var(--state-success);--loader-bg-color:var(--component-bg-color);--loader-border-color:var(--color-primary);--loader-border-width:.25rem;--loader-size:2rem;--loader-speed:750ms;--loader-spacing-x:var(--component-spacing-small);--loader-spacing-y:0;--spacing-small:var(--component-spacing);--spacing-medium:calc(var(--component-spacing) * 2);--spacing-big:calc(var(--component-spacing) * 4);--switch-font-size:var(--input-font-size);--switch-font-size-small:var(--input-font-size-small);--switch-font-size-big:var(--input-font-size-big);--switch-bg-color:var(--component-border-color);--switch-bg-color-checked:var(--color-primary);--switch-border-radius:var(--switch-size);--switch-size:2rem;--switch-size-small:1rem;--switch-size-big:3rem;--switch-thumb-bg-color:#fff;--switch-thumb-border-radius:50%;--switch-thumb-spacing:2px;--switch-speed:.2s;--tab-bg-color:var(--body-bg);--tab-bg-color-hover:var(--body-bg);--tab-bg-color-active:var(--link-color);--tab-bg-color-disabled:var(--body-bg);--tab-border-radius:var(--component-border-radius);--tab-color:var(--link-color);--tab-color-hover:var(--link-color-hover);--tab-color-active:var(--color-white);--tab-color-disabled:var(--text-muted);--tab-spacing-x:var(--component-spacing);--tab-spacing-y:calc(var(--component-spacing) / 2);--tab-pane-border-color:var(--component-border-color);--tab-pane-border-radius:var(--component-border-radius);--tab-pane-border-width:var(--component-border-width);--tab-pane-spacing-x:var(--component-spacing);--tab-pane-spacing-y:var(--component-spacing);--table-border-color:var(--component-border-color);--table-border-width:var(--component-border-width);--table-header-bg-color:transparent;--table-stripe-bg-color:var(--component-bg-color);--table-hover-color:var(--color-white);--table-hover-bg-color:var(--color-primary);--table-spacing-x:calc(var(--component-spacing-small) * 1.5);--table-spacing-y:var(--component-spacing-small)} -/*! Content */html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}body{background:var(--body-bg-color);font-family:var(--font-family);font-weight:var(--font-weight);font-size:var(--font-size);color:var(--body-color);line-height:var(--line-height)}a{color:var(--link-color);text-decoration:var(--link-text-decoration)}a:hover{color:var(--link-color-hover);text-decoration:var(--link-text-decoration-hover)}abbr[title]{text-decoration:none;border-bottom:2px dashed currentcolor}b,strong{font-weight:var(--font-weight-bold)}big,blockquote{font-size:var(--font-size-big)}blockquote{border-left:solid .4rem var(--component-border-color);padding:.5rem .5rem .5rem 1rem;margin-bottom:1rem;margin-left:0}code{font-family:var(--font-monospace);font-size:var(--code-font-size);color:var(--code-color);background-color:var(--code-bg-color);border-radius:var(--code-border-radius);padding:var(--code-spacing-y) var(--code-spacing-x)}del{color:var(--color-red)}figure{margin-top:0;margin-bottom:1rem}h1,h2,h3,h4,h5,h6{font-family:var(--headings-font-family);font-weight:var(--headings-font-weight);line-height:var(--headings-line-height);color:var(--headings-color);margin-top:0;margin-bottom:var(--headings-margin-bottom)}h1{font-size:var(--headings-font-size-h1)}h2{font-size:var(--headings-font-size-h2)}h3{font-size:var(--headings-font-size-h3)}h4{font-size:var(--headings-font-size-h4)}h5{font-size:var(--headings-font-size-h5)}h6{font-size:var(--headings-font-size-h6)}hr{border:none;border-top:solid var(--hr-border-width) var(--hr-border-color);margin:var(--hr-spacing) 0}img{height:auto;max-width:100%;vertical-align:middle}ins{color:var(--color-green)}kbd{font-family:var(--font-monospace);font-size:var(--kbd-font-size);color:var(--kbd-color);background-color:var(--kbd-bg-color);border-radius:var(--kbd-border-radius);padding:var(--kbd-spacing-y) var(--kbd-spacing-x)}mark{color:var(--mark-color);background-color:var(--mark-bg-color);padding:var(--mark-spacing-y) var(--mark-spacing-x)}p,pre{margin-top:0;margin-bottom:1rem}pre{max-height:var(--pre-max-height);overflow-y:auto;font-family:var(--font-monospace);color:var(--pre-color);background-color:var(--pre-bg-color);border-radius:var(--pre-border-radius);padding:1rem}small{font-size:var(--font-size-small)}dl{margin-bottom:1rem}dt{font-weight:var(--font-weight-bold)}dd{margin-left:0}dd,ol,ul{margin-bottom:1rem}ol,ul{line-height:var(--line-height);margin-top:0}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}::-webkit-input-placeholder{color:var(--placeholder-color)}::-moz-placeholder{color:var(--placeholder-color)}:-ms-input-placeholder{color:var(--placeholder-color)}:-moz-placeholder{color:var(--placeholder-color)}::-moz-selection{background-color:var(--selection-bg-color);color:var(--selection-color);text-shadow:none!important}::selection{background-color:var(--selection-bg-color);color:var(--selection-color);text-shadow:none!important} +/*! Content */html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}body{background:var(--body-bg-color);font-family:var(--font-family);font-weight:var(--font-weight);font-size:var(--font-size);color:var(--body-color);line-height:var(--line-height)}a{color:var(--link-color);text-decoration:var(--link-text-decoration)}a:hover{color:var(--link-color-hover);text-decoration:var(--link-text-decoration-hover)}abbr[title]{text-decoration:none;border-bottom:2px dashed currentcolor}b,strong{font-weight:var(--font-weight-bold)}big,blockquote{font-size:var(--font-size-big)}blockquote{border-left:solid .4rem var(--component-border-color);padding:.5rem .5rem .5rem 1rem;margin-bottom:1rem;margin-left:0}blockquote :last-child{margin-bottom:0}code{font-family:var(--font-monospace);font-size:var(--code-font-size);color:var(--code-color);background-color:var(--code-bg-color);border-radius:var(--code-border-radius);padding:var(--code-spacing-y) var(--code-spacing-x)}del{color:var(--color-red)}figure{margin-top:0;margin-bottom:1rem}h1,h2,h3,h4,h5,h6{font-family:var(--headings-font-family);font-weight:var(--headings-font-weight);line-height:var(--headings-line-height);color:var(--headings-color);margin-top:0;margin-bottom:var(--headings-margin-bottom)}h1{font-size:var(--headings-font-size-h1)}h2{font-size:var(--headings-font-size-h2)}h3{font-size:var(--headings-font-size-h3)}h4{font-size:var(--headings-font-size-h4)}h5{font-size:var(--headings-font-size-h5)}h6{font-size:var(--headings-font-size-h6)}hr{border:none;border-top:solid var(--hr-border-width) var(--hr-border-color);margin:var(--hr-spacing) 0}img{height:auto;max-width:100%;vertical-align:middle}ins{color:var(--color-green)}kbd{font-family:var(--font-monospace);font-size:var(--kbd-font-size);color:var(--kbd-color);background-color:var(--kbd-bg-color);border-radius:var(--kbd-border-radius);padding:var(--kbd-spacing-y) var(--kbd-spacing-x)}mark{color:var(--mark-color);background-color:var(--mark-bg-color);padding:var(--mark-spacing-y) var(--mark-spacing-x)}p,pre{margin-top:0;margin-bottom:1rem}pre{max-height:var(--pre-max-height);overflow-y:auto;font-family:var(--font-monospace);color:var(--pre-color);background-color:var(--pre-bg-color);border-radius:var(--pre-border-radius);padding:1rem}small{font-size:var(--font-size-small)}dl{margin-bottom:1rem}dt{font-weight:var(--font-weight-bold)}dd{margin-left:0}dd,ol,ul{margin-bottom:1rem}ol,ul{line-height:var(--line-height);margin-top:0}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}::-webkit-input-placeholder{color:var(--placeholder-color)}::-moz-placeholder{color:var(--placeholder-color)}:-ms-input-placeholder{color:var(--placeholder-color)}:-moz-placeholder{color:var(--placeholder-color)}::-moz-selection{background-color:var(--selection-bg-color);color:var(--selection-color);text-shadow:none!important}::selection{background-color:var(--selection-bg-color);color:var(--selection-color);text-shadow:none!important} /*! Alerts */.alert{color:var(--alert-color);background-color:var(--alert-bg-color-primary);border-radius:var(--alert-border-radius);padding:var(--alert-spacing-y) var(--alert-spacing-x);margin-top:0;margin-bottom:1rem}.alert:empty{display:none}.alert-success{background-color:var(--alert-bg-color-success)}.alert-info{background-color:var(--alert-bg-color-info)}.alert-warning{background-color:var(--alert-bg-color-warning)}.alert-danger{background-color:var(--alert-bg-color-danger)}.alert-inverse{background-color:var(--alert-bg-color-inverse)}.alert a{color:inherit;text-decoration:underline}.alert :last-child{margin-bottom:0} diff --git a/dist/shoelace.js b/dist/shoelace.js index e9da0c18b..6b6aab4d0 100644 --- a/dist/shoelace.js +++ b/dist/shoelace.js @@ -1,12 +1,12 @@ /*! - Shoelace.css dropdowns 1.0.0-beta9 + Shoelace.css dropdowns 1.0.0-beta10 (c) A Beautiful Site, LLC Released under the MIT license Source: https://github.com/claviska/shoelace-css */ !function(){"use strict";if("undefined"==typeof jQuery&&"undefined"==typeof Zepto)throw new Error("Shoelace dropdowns require either jQuery or Zepto.");("function"==typeof jQuery?jQuery:Zepto)(function(e){e(document).on("click",function(t){var i,o,r;if(e(t.target).is(".dropdown-trigger")){if(i=e(t.target).closest(".dropdown"),r=t.target,e(".dropdown.active").not(i).removeClass("active").trigger("hide"),e(r).is(".disabled, :disabled"))return;e(i).toggleClass("active").trigger(e(i).is(".active")?"show":"hide")}else e(t.target).closest(".dropdown-menu").length&&(i=e(t.target).closest(".dropdown"),(o=e(t.target).closest("a").get(0))&&!e(o).is(".disabled")&&e(i).trigger("select",o),t.preventDefault()),e(".dropdown.active").removeClass("active").trigger("hide")}).on("keydown",function(t){27===t.keyCode&&e(".dropdown.active").removeClass("active").trigger("hide")})})}(),/*! - Shoelace.css tabs 1.0.0-beta9 + Shoelace.css tabs 1.0.0-beta10 (c) A Beautiful Site, LLC Released under the MIT license diff --git a/docs/alerts.html b/docs/alerts.html new file mode 100644 index 000000000..a3d86e691 --- /dev/null +++ b/docs/alerts.html @@ -0,0 +1,105 @@ + + + + + + + + + + + + Alerts + + + +
+

+ + Shoelace logo + +

+

+ A back to the basics CSS starter kit. For when you don’t need the whole boot. +

+
+ +
+ + +
+

Alerts

+

Create an alert by applying the alert class to an element such as a <div>. You can change an alert’s appearance using the alert-* modifier.

+
<div class="alert">Default</div>
+<div class="alert alert-success">Success</div>
+<div class="alert alert-info">Info</span>
+<div class="alert alert-warning">Warning</div>
+<div class="alert alert-danger">Danger</div>
+<div class="alert alert-inverse">Inverse</div>
+
+
This is a default alert with link
+
This is a success alert with link
+
This is an info alert with link
+
This is a warning alert with link
+
This is a danger alert with link
+
This is an inverse alert with link
+ +
+
+ + + + + + + + + + + diff --git a/docs/attribution.html b/docs/attribution.html new file mode 100644 index 000000000..87a4d8702 --- /dev/null +++ b/docs/attribution.html @@ -0,0 +1,100 @@ + + + + + + + + + + + + Attribution + + + +
+

+ + Shoelace logo + +

+

+ A back to the basics CSS starter kit. For when you don’t need the whole boot. +

+
+ +
+ + +
+

Attribution

+

Special thanks to the following individuals and organizations for their contributions to Shoelace.css.

+
    +
  • Cory LaViska – for creating this project
    • +
  • Adam K Olson – for designing the logo with a single shoelaces
    • +
  • Bootstrap – for inspiration
    • +
  • cdnjs.com – for providing an awesome CDN service
    • +
  • GitHub – for hosting this and many other open source projects
    • +
  • Surreal CMS – for sponsoring development
    • +
+ +
+
+ + + + + + + + + + + diff --git a/docs/badges.html b/docs/badges.html new file mode 100644 index 000000000..a7ae46449 --- /dev/null +++ b/docs/badges.html @@ -0,0 +1,118 @@ + + + + + + + + + + + + Badges + + + +
+

+ + Shoelace logo + +

+

+ A back to the basics CSS starter kit. For when you don’t need the whole boot. +

+
+ +
+ + +
+

Badges

+

Create a badge by applying the badge class to an element such as a <span>. You can change a badge’s appearance using the badge-* modifier.

+
<span class="badge">Default</span>
+<span class="badge badge-success">Success</span>
+<span class="badge badge-info">Info</span>
+<span class="badge badge-warning">Warning</span>
+<span class="badge badge-danger">Danger</span>
+<span class="badge badge-inverse">Inverse</span>
+
+

+ Default + Success + Info + Warning + Danger + Inverse +

+ +

By default, badges are sized relative to their parent element.

+
<h1>Heading 1 <span class="badge">Badge</span></h1>
+<h2>Heading 2 <span class="badge">Badge</span></h2>
+<h3>Heading 3 <span class="badge">Badge</span></h3>
+<p>Paragraph <span class="badge">Badge</span></p>
+
+

Heading 1 Badge

+

Heading 2 Badge

+

Heading 3 Badge

+

Paragraph Badge

+ +
+
+ + + + + + + + + + + diff --git a/docs/browser-support.html b/docs/browser-support.html new file mode 100644 index 000000000..285ce1cab --- /dev/null +++ b/docs/browser-support.html @@ -0,0 +1,99 @@ + + + + + + + + + + + + Browser Support + + + +
+

+ + Shoelace logo + +

+

+ A back to the basics CSS starter kit. For when you don’t need the whole boot. +

+
+ +
+ + +
+

Browser Support

+
+

TL;DR — you can use Shoelace today if you don’t care about Internet Explorer and older browsers (Edge is fine). If you need to support older browsers, just make sure to use a grid system and Myth as a polyfill.

+
+

Browser support for CSS variables is pretty good, but if you need to support Internet Explorer, consider using Myth as a polyfill. Myth lets you write standards-compliant CSS and “fixes” it for unsupportive browsers.

+

Browser support for the CSS Grid is very good, but if you need to support older browsers you can use a grid system instead.

+

Browser support for calc is excellent. Shoelace uses this internally for relative calculations. You can use it along with CSS variables too.

+

Browser support for color modifiers is non-existent. There is a draft, so hopefully that will change soon. Shoelace doesn’t use this feature, but it will when support improves.

+

Browser support for custom media queries is non-existent. There is a draft, so hopefully that will change soon. Shoelace doesn’t use this feature, but it will when support improves.

+ +
+
+ + + + + + + + + + + diff --git a/docs/buttons.html b/docs/buttons.html new file mode 100644 index 000000000..f13cfa42c --- /dev/null +++ b/docs/buttons.html @@ -0,0 +1,161 @@ + + + + + + + + + + + + Buttons + + + +
+

+ + Shoelace logo + +

+

+ A back to the basics CSS starter kit. For when you don’t need the whole boot. +

+
+ +
+ + +
+

Buttons

+

To create a button, use the <button> element or apply the button class to another element such as an <a>. You can change a button’s appearance using the button-* modifier.

+
<button type="button">Default</button>
+<button type="button" class="button-success">Success</button>
+<button type="button" class="button-info">Info</button>
+<button type="button" class="button-warning">Warning</button>
+<button type="button" class="button-danger">Danger</button>
+<button type="button" class="button-inverse">Inverse</button>
+<button type="button" class="button button-link">Link</button>
+
+
+ + + + + + + +
+ +

Use the button-small and button-big modifiers to change the size of a button.

+
+ + + +
+ +

Use the button-block modifier to make the button span the entire width of its parent element. You can also mix and match modifiers as needed.

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

Disabled buttons look like this. Set the disabled property on <button> elements to achieve this effect. For all other elements, apply class="disabled" instead.

+
+ + + + + + +
+ +

You can force buttons to have an active state by applying the active class.

+
+ + + + + + +
+ +

File Buttons

+

File inputs are notoriously hard to style properly in every browser. Shoelace offers file buttons as an alternative. These are much easier to style consistently, but come with the caveat that the name (or number) of files selected will not be automatically shown to the user. This aspect of a file button’s UX can be handled effectively with JavaScript, but this is left as an exercise for the user.

+

File buttons are simply <label> elements with the button class and a nested file input.

+
<label class="button">
+  Select File
+  <input type="file">
+</label>
+
+
+ +
+ +
+
+ + + + + + + + + + + diff --git a/docs/content.html b/docs/content.html new file mode 100644 index 000000000..f632d3530 --- /dev/null +++ b/docs/content.html @@ -0,0 +1,226 @@ + + + + + + + + + + + + Content + + + +
+

+ + Shoelace logo + +

+

+ A back to the basics CSS starter kit. For when you don’t need the whole boot. +

+
+ +
+ + +
+

Content

+

Shoelace gives you an easy way to customize most HTML elements with variables. You don’t need to apply any classes to achieve these styles — just use the appropriate tags.

+

For easy spacing, Shoelace removes top margins and applies a bottom margin to block elements. By default, text sizing and spacing is measured in rem units.

+

Headings <h1> – <h6>

+

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+

Heading 5

+
Heading 6
+ +

Paragraphs <p>

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat excepturi repellendus nostrum dolorum dignissimos quis non, minus debitis laborum vero cupiditate sequi neque, magnam dolore nemo possimus, soluta ducimus eaque.

+

Blanditiis ea qui, veritatis animi recusandae praesentium magnam. Commodi placeat, laboriosam accusamus laudantium quasi eveniet soluta illo ducimus quis doloremque mollitia, officia pariatur deleniti reprehenderit, maxime, dicta libero vero cum.

+

Ordered Lists <ol>

+
    +
  1. List item 1
    2. +
  2. List item 2
      +
    1. Nested item 1
      2. +
    2. Nested item 2
      3. +
    3. Nested item 3
      4. +
    +
    3. +
  3. List item 3
    4. +
+

Unordered Lists <ul>

+
    +
  • List item 1
    • +
  • List item 2
      +
    • Nested item 1
      • +
    • Nested item 2
      • +
    • Nested item 3
      • +
    +
    • +
  • List item 3
    • +
+

Definition Lists <dl>

+
+
Term 1
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum autem perferendis + exercitationem asperiores fuga incidunt, nam dicta amet. Dolor eligendi nisi praesentium + placeat officiis esse corporis molestiae. Doloremque accusamus, vel! +
+
Term 2
+
+ Veritatis repellendus porro ipsam beatae temporibus natus id adipisci nobis accusantium + quidem eum fugit cupiditate deleniti nisi nesciunt dicta officia, enim, atque corporis neque + error. Unde saepe molestiae hic voluptatibus? +
+
+ +

Blockquotes <blockquote>

+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia ipsam enim reprehenderit placeat ab voluptate totam suscipit voluptas, culpa pariatur eos quas, sequi unde perferendis officiis! Officiis eligendi eaque facilis. +
+ +

Preformatted Text <pre>

+
CLS
+SCREEN 13
+PRINT "SHOELACE IS AWESOME"
+

Text Formats

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ElementExample
<strong>This is strong text
<em>This is emphasized text
<u>This is underlined text
<s>This is strikethrough text
<a>This is link text
<small>This is small text
<sup>This is superscript text
<sub>This is subscript text
<code>This is code text
<samp>This is sample text
<var>This is variable text
<kbd>This is keyboard text
<abbr>This is abbreviation text
<del>This is deleted text
<ins>This is inserted text
<mark>This is marked text
+ +
+
+ + + + + + + + + + + diff --git a/docs/customizing.html b/docs/customizing.html new file mode 100644 index 000000000..2a972dd70 --- /dev/null +++ b/docs/customizing.html @@ -0,0 +1,111 @@ + + + + + + + + + + + + Customizing + + + +
+

+ + Shoelace logo + +

+

+ A back to the basics CSS starter kit. For when you don’t need the whole boot. +

+
+ +
+ + +
+

Customizing

+

You can customize Shoelace without editing core files or using a preprocessor. To add customizations, simply override one or more of the variables found in [variables.css](source/css/variables.css) in your own stylesheet.

+

For example, you can customize the default text color and background like this:

+
:root {
+  --body-color: white;
+  --body-bg-color: black;
+}
+
+

Using Variables

+

You can use any of Shoelace’s variables in your stylesheet. This makes it easy to reuse values without hardcoding them. It also provides a foundation for extending Shoelace with your own custom components.

+

.your-selector { + color: var(--state-danger); +} +```

+

Refer to [variables.css](source/css/variables.css) for a complete list of variables in Shoelace. If you’re not familiar with CSS variables, this article will bring you up to speed. There’s also an interactive demo if you want to try it out.

+

Custom Components

+

You can create custom components to extend Shoelace’s functionality. Here are some best practices to keep things consistent and easy for others to understand.

+

Familiarize yourself with Shoelace’s naming conventions. A custom accordion component, for example, would have a class name such as accordion, modifier classes such as accordion-open, and variable names that look like --accordion-bg-color. Try to follow similar patterns as much as possible.

+

Define new variables when it makes sense to. Take a look at [variables.css](source/css/variables.css) to see how existing components are defined. Many use core variables instead of hardcoded properties as default values. This makes it easy for users to customize things quickly, but still provides enough flexibility to style individual components.

+

Semantic markup is strongly encouraged. Custom components should use the most appropriate elements and the minimal amount of markup required.

+

Keep everything together. During development, each component should be in its own folder along with its stylesheets, scripts, and documentation. Components shouldn’t depend on other components’ styles or scripts. This makes it easier to add or remove components from your app without affecting others. Of course, it’s perfectly fine to bundle components for optimization purposes in production.

+ +
+
+ + + + + + + + + + + diff --git a/docs/dropdowns.html b/docs/dropdowns.html new file mode 100644 index 000000000..b5c8e1d58 --- /dev/null +++ b/docs/dropdowns.html @@ -0,0 +1,199 @@ + + + + + + + + + + + + Dropdowns + + + +
+

+ + Shoelace logo + +

+

+ A back to the basics CSS starter kit. For when you don’t need the whole boot. +

+
+ +
+ + +
+ +

Dropdowns can be created using the markup below. You can use a <button> or an <a> as a trigger. Dropdown indicators (i.e. carets) are added for you. Menu items are simply <a> elements. Dividers are simply <hr> elements.

+

Note the class names used for the main container, the trigger, and the menu. Additionally, menu items can be disabled by adding the disabled class. Menu items can also be given a checked state using the checked class.

+

To disable a dropdown entirely, add the disabled property to the dropdown trigger if it’s a button. If it’s a link, add the disabled class instead.

+
<div class="dropdown">
+  <button type="button" class="dropdown-trigger">Dropdown</button>
+  <div class="dropdown-menu">
+    <a href="#">Item 1</a>
+    <a href="#">Item 2</a>
+    <a href="#">Item 3</a>
+    <a href="#" class="checked">Checked</a>
+    <a href="#" class="disabled">Disabled</a>
+    <hr>
+    <a href="#">More...</a>
+  </div>
+</div>
+
+
+
+ +
+ Item 1 + Item 2 + Item 3 + Checked + Disabled +
+ More... +
+
+
+ +

Use the dropdown-top and dropdown-left modifiers to change the positioning of the menu. You can combine these modifiers as needed.

+
<div class="dropdown dropdown-left">
+  ...
+</div>
+
+<div class="dropdown dropdown-top">
+  ...
+</div>
+
+<div class="dropdown dropdown-top dropdown-left">
+  ...
+</div>
+
+
+
+ +
+ Item 1 + Item 2 + Item 3 +
+
+ +
+ +
+ Item 1 + Item 2 + Item 3 +
+
+ +
+ +
+ Item 1 + Item 2 + Item 3 +
+
+
+ +

Dropdowns with button triggers can be used inside input groups.

+
+ $ + +
+ +
+ USD + AUD + CAD + GBP +
+
+
+ +

Events

+

Dropdowns require shoelace.js to make them interactive. You don’t need to initialize them. Simply include the script and everything “just works.”

+

There is no JavaScript API. Shoelace’s philosophy believes that custom components should act like native components as much as possible. You can, however, listen for various events:

+
    +
  • show – Fires when a dropdown is shown.
    • +
  • hide – Fires when a dropdown is hidden.
    • +
  • select – Fires when a dropdown menu item is selected. The second callback argument is a reference to the respective menu item.
    • +
+

This example will log all three events for a dropdown with an id of my-dropdown.

+
$('#my-dropdown')
+  .on('show', function(event) {
+    console.log('show', event.target);
+  })
+  .on('hide', function(event) {
+    console.log('hide', event.target);
+  })
+  .on('select', function(event, item) {
+    console.log('select', event.target, item);
+  });
+
+ +
+
+ + + + + + + + + + + diff --git a/docs/forms.html b/docs/forms.html new file mode 100644 index 000000000..11b3af673 --- /dev/null +++ b/docs/forms.html @@ -0,0 +1,398 @@ + + + + + + + + + + + + Forms + + + +
+

+ + Shoelace logo + +

+

+ A back to the basics CSS starter kit. For when you don’t need the whole boot. +

+
+ +
+ + +
+

Forms

+

Shoelace gives you beautiful forms without hassle. Most form controls don’t need a special class for styling.

+

Form Controls

+

Form controls are styled at 100% of the width of their parent element.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Input TypeExample
<input type="checkbox"> +
+ +
<input type="color">
<input type="date">
<input type="email">
+ <input type="file"> +
+ + File inputs aren’t supported. Use a file button instead. + + 		+ +
<input type="number">
<input type="password">
<input type="radio"> +
+ +
<input type="range">
<input type="search">
<input type="text">
<input type="time">
<progress></progress>
<select> + +
<textarea>
+ +

You can change the size of most form controls with the input-small and input-big modifiers.

+
<input type="text" class="input-small" placeholder="Small">
+<input type="text" placeholder="Default">
+<input type="text" class="input-big" placeholder="Big">
+
+<select class="input-small"><option>Item</option></select>
+<select><option>Item</option></select>
+<select class="input-big"><option>Item</option></select>
+
+
+

+

+

+

+

+

+
+ +

Disabled form controls look like this:

+
+ +
+ +
+ + +
+ +

Read-only form controls look like this:

+
+ +
+ +

Form Control Spacing

+

For proper spacing of individual form controls, wrap them in input-single containers.

+
<div class="input-single">
+  <label>Name</label>
+  <input type="text">
+</div>
+
+<div class="input-single">
+  <label>Password</label>
+  <input type="password">
+</div>
+
+<div class="input-single">
+  <label><input type="checkbox"> Remember me</label>
+</div>
+
+
+ + +
+ +
+ + +
+ +
+ +
+ +

Input Groups

+

Form controls and buttons can be grouped by wrapping them in input-group containers.

+
<div class="input-group">
+  <input type="text">
+  <button type="button" class="button">Submit</button>
+</div>
+
+<div class="input-group">
+  <button type="button" class="button">Submit</button>
+  <input type="text">
+</div>
+
+<div class="input-group">
+  <input type="text" placeholder="First">
+  <input type="text" placeholder="Middle">
+  <input type="text" placeholder="Last">
+  <button type="button" class="button">Submit</button>
+</div>
+
+<div class="input-group">
+  <button type="button" class="button">Option 1</button>
+  <button type="button" class="button">Option 2</button>
+  <button type="button" class="button">Option 3</button>
+</div>
+
+
+
+ + +
+
+ +
+
+ + +
+
+ +
+
+ + + + +
+
+ +
+
+ + + +
+
+ +

Input Addons

+

To create an input addon, use <span class="input-addon">. Addons can appear anywhere inside an input group. Use the input-addon-small and input-addon-big modifiers to change the size to match adjacent form controls.

+
<div class="input-group">
+  <span class="input-addon input-addon-small">$</span>
+  <input type="text" class="input-small">
+  <span class="input-addon input-addon-small">.00</span>
+</div>
+
+<div class="input-group">
+  <span class="input-addon">$</span>
+  <input type="text">
+  <span class="input-addon">.00</span>
+</div>
+
+<div class="input-group">
+  <span class="input-addon input-addon-big">$</span>
+  <input type="text" class="input-big">
+  <span class="input-addon input-addon-big">.00</span>
+</div>
+
+
+
+ $ + + .00 +
+
+ +
+
+ $ + + .00 +
+
+ +
+
+ $ + + .00 +
+
+ +

Form Groups

+

Related form controls can be grouped in a <fieldset>. An optional <legend> can be used to display a name for the group.

+
<fieldset>
+  <legend>User</legend>
+  ...
+</fieldset>
+
+
+ Login +
+ + +
+
+ + +
+
+ +
+
+ +
+
+ +

Validation

+

Form controls can be made valid or invalid using the input-valid and input-invalid modifiers. It’s better to apply modifiers to the surrounding input-single so labels will be styled as well, but modifiers can be applied directly to form controls as needed.

+
<div class="input-single input-valid">
+  <label>Valid</label>
+  <input type="text">
+</div>
+
+<div class="input-single input-invalid">
+  <label>Invalid</label>
+  <input type="text">
+</div>
+
+
+
+ + +
+ +
+ + +
+
+ +
+
+ + + + + + + + + + + diff --git a/docs/grid-system.html b/docs/grid-system.html new file mode 100644 index 000000000..cbc9e3c15 --- /dev/null +++ b/docs/grid-system.html @@ -0,0 +1,93 @@ + + + + + + + + + + + + Grid System + + + +
+

+ + Shoelace logo + +

+

+ A back to the basics CSS starter kit. For when you don’t need the whole boot. +

+
+ +
+ + +
+

Grid System

+

Shoelace doesn’t ship with a grid system because you don’t need one. You should use the CSS Grid Layout instead.

+

If you have an obligation to support older browsers, consider using the Bootstrap grid without any extras in combination with Shoelace.

+ +
+
+ + + + + + + + + + + diff --git a/docs/icons.html b/docs/icons.html new file mode 100644 index 000000000..708cac7ae --- /dev/null +++ b/docs/icons.html @@ -0,0 +1,93 @@ + + + + + + + + + + + + Icons + + + +
+

+ + Shoelace logo + +

+

+ A back to the basics CSS starter kit. For when you don’t need the whole boot. +

+
+ +
+ + +
+

Icons

+

Shoelace doesn’t bundle its own icons, but you can easily include your favorite library such as Font Awesome. They work superbly together.

+

This keeps Shoelace light and makes it more customizable.

+ +
+
+ + + + + + + + + + + diff --git a/docs/installing.html b/docs/installing.html new file mode 100644 index 000000000..19b819dfb --- /dev/null +++ b/docs/installing.html @@ -0,0 +1,111 @@ + + + + + + + + + + + + Installing + + + +
+

+ + Shoelace logo + +

+

+ A back to the basics CSS starter kit. For when you don’t need the whole boot. +

+
+ +
+ + +
+

Installing

+

Shoelace is incredibly easy to use. To get started, simply link to shoelace.css in your project. You can use the CDN version or download the source manually.

+

To make certain components interactive (e.g. dropdowns and tabs), you’ll need to load jQuery or Zepto along with shoelace.js.

+

CDN

+

The easiest way to use Shoelace is via CDN. Just add this to the <head>:

+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/shoelace-css/1.0.0-beta10/shoelace.css">
+
+

And this before </body> but after jQuery/Zepto:

+
<script src="https://cdnjs.cloudflare.com/ajax/libs/shoelace-css/1.0.0-beta10/shoelace.js"></script>
+
+

This service is provided free, courtesy of CDNJS. New releases can take up to 12 hours to appear on the CDN.

+

Download

+

Alternatively, you can download the source and link to shoelace.css from your own server. Just add this stylesheet to your <head>:

+
<link rel="stylesheet" href="dist/shoelace.css">
+
+

And this before </body> but after jQuery/Zepto:

+
<script src="dist/shoelace.js"></script>
+
+

NPM

+

If you’re using NPM, you can install Shoelace by running:

+
npm install --save-dev shoelace-css
+
+
+
+ + + + + + + + + + + diff --git a/docs/loaders.html b/docs/loaders.html new file mode 100644 index 000000000..743674974 --- /dev/null +++ b/docs/loaders.html @@ -0,0 +1,112 @@ + + + + + + + + + + + + Loaders + + + +
+

+ + Shoelace logo + +

+

+ A back to the basics CSS starter kit. For when you don’t need the whole boot. +

+
+ +
+ + +
+

Loaders

+

Create a pure CSS loader by applying the loader class to an empty <span> element. You can use the loader-small and loader-big modifiers to change the size.

+
<span class="loader loader-small"></span>
+<span class="loader"></span>
+<span class="loader loader-big"></span>
+
+
+ + + +
+ +

You can simulate a background loader using loader-bg. This is achieved using position: relative on the container and the ::after pseudo-element. You can use the loader-bg-small and loader-bg-big modifiers to change the size.

+
<div class="loader-bg loader-bg-small"></div>
+<div class="loader-bg"></div>
+<div class="loader-bg loader-bg-big"></div>
+
+
+
+
+
+
+ +
+
+ + + + + + + + + + + diff --git a/docs/switches.html b/docs/switches.html new file mode 100644 index 000000000..46101ff58 --- /dev/null +++ b/docs/switches.html @@ -0,0 +1,146 @@ + + + + + + + + + + + + Switches + + + +
+

+ + Shoelace logo + +

+

+ A back to the basics CSS starter kit. For when you don’t need the whole boot. +

+
+ +
+ + +
+

Switches

+

Switches provide an alternative to standard checkboxes. Many people find them more intuitive and easier to use, especially on mobile devices. Shoelace provides a way to create beautiful, animated switches with pure CSS.

+

Because this is a pure CSS solution, there are a couple important things to remember:

+
    +
  • Each switch must have a unique id
    • +
  • The <label> must have a for attribute that references the switch id
    • +
  • The <label> must come after the checkbox, otherwise the control won’t render
    • +
+

The markup for a switch looks like this:

+
<span class="switch">
+  <input type="checkbox" class="switch" id="switch-1">
+  <label for="switch-1">Option 1</label>
+</span>
+
+<span class="switch">
+  <input type="checkbox" class="switch" id="switch-2" checked>
+  <label for="switch-2">Option 2</label>
+</span>
+
+
+ + + + + + + + + +
+ +

Use the switch-small and switch-big modifiers to change the size of a switch.

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

Disabled switches are dimmed out. To disable a switch, add the disabled attribute to the checkbox (not the wrapper).

+
+ + + + +
+ +
+
+ + + + + + + + + + + diff --git a/docs/tables.html b/docs/tables.html new file mode 100644 index 000000000..59f6e5b0e --- /dev/null +++ b/docs/tables.html @@ -0,0 +1,169 @@ + + + + + + + + + + + + Tables + + + +
+

+ + Shoelace logo + +

+

+ A back to the basics CSS starter kit. For when you don’t need the whole boot. +

+
+ +
+ + +
+

Tables

+

Tables are styled for you automatically — no special classes required.

+
<table>
+  <thead>
+    <tr><th>Item</th><th>Price</th></tr>
+  </thead>
+  <tbody>
+    <tr><td>Shoe Freshener</td><td>$4.79</td></tr>
+    <tr><td>Shoe Glue</td><td>$2.50</td></tr>
+    <tr><td>Shoe Polish</td><td>$5.25</td></tr>
+    <tr><td>Shoelaces</td><td>$3.99</td></tr>
+  </tbody>
+</table>
+
+ + + + + + + + + + +
ItemPrice
Shoe Freshener$4.79
Shoe Glue$2.50
Shoe Polish$5.25
Shoelaces$3.99
+ +

Striped Tables

+

Use the table-striped modifier to add stripes to alternating rows.

+
<table class="table-striped">
+  ...
+</table>
+
+ + + + + + + + + + +
ItemPrice
Shoe Freshener$4.79
Shoe Glue$2.50
Shoe Polish$5.25
Shoelaces$3.99
+ +

Bordered Tables

+

Use the table-bordered modifier to add a border to the table.

+
<table class="table-bordered">
+  ...
+</table>
+
+ + + + + + + + + + +
ItemPrice
Shoe Freshener$4.79
Shoe Glue$2.50
Shoe Polish$5.25
Shoelaces$3.99
+ +

Hoverable Rows

+

Use the table-hoverable modifier to enable the hover state on table rows.

+
<table class="table-hoverable">
+  ...
+</table>
+
+ + + + + + + + + + +
ItemPrice
Shoe Freshener$4.79
Shoe Glue$2.50
Shoe Polish$5.25
Shoelaces$3.99
+ +
+
+ + + + + + + + + + + diff --git a/docs/tabs.html b/docs/tabs.html new file mode 100644 index 000000000..f50c53540 --- /dev/null +++ b/docs/tabs.html @@ -0,0 +1,219 @@ + + + + + + + + + + + + Tabs + + + +
+

+ + Shoelace logo + +

+

+ A back to the basics CSS starter kit. For when you don’t need the whole boot. +

+
+ +
+ + +
+

Tabs

+

Tab sets can be created using the markup below. By default, Shoelace renders tabs as pills because they respond better than traditional tabs when rendered on smaller screens.

+

Note the class names used for the main container, the tab navs, and the tab panes. Also note that each tab links to its respective tab pane’s id.

+

To disable a tab, add disabled to the appropriate tab nav.

+
<div class="tabs">
+  <nav class="tabs-nav">
+    <a href="#tab-1" class="active">Tab 1</a>
+    <a href="#tab-2">Tab 2</a>
+    <a href="#tab-3">Tab 3</a>
+    <a href="#" class="disabled">Disabled</a>
+  </nav>
+
+  <div class="tabs-pane active" id="tab-1">
+    ...
+  </div>
+
+  <div class="tabs-pane" id="tab-2">
+    ...
+  </div>
+
+  <div class="tabs-pane" id="tab-3">
+    ...
+  </div>
+</div>
+
+
+ + +
+

Tab 1

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui repellat ea magni magnam + assumenda voluptas accusantium nemo. Iusto beatae illum mollitia aut quasi odit facilis + officiis, laudantium debitis! Excepturi, quis! +

+
+ +
+

Tab 2

+

+ Atque eius voluptatibus ipsa ex totam odit, quidem illo distinctio sit! Quod quae minus, + aut itaque. Mollitia, dolore! Facere molestiae necessitatibus sint recusandae incidunt + pariatur labore iste vel, velit odit. +

+
+ +
+

Tab 3

+

+ Aperiam asperiores optio iusto qui nisi, perspiciatis, ipsum, tenetur explicabo earum et + laboriosam odit magni maxime quos molestias aspernatur laudantium harum placeat tempora + quae necessitatibus, aut dignissimos totam non! Quod. +

+
+
+ +

Vertical Tabs

+

Tabs can be made vertical by adding custom CSS rules. Shoelace doesn’t include these styles by default because of the many ways tabs can be positioned, customized, and made responsive.

+

Here’s an example of vertical tabs that uses the CSS grid. The markup is exactly the same as the previous example, except the tabs container has a custom class and the following custom styles.

+
.tabs-vertical-example {
+  display: grid;
+  grid-template-columns: 30% 70%;
+}
+
+.tabs-vertical-example .tabs-nav {
+  padding-right: 2rem;
+}
+
+.tabs-vertical-example .tabs-nav a {
+  display: block;
+}
+
+
+ + +
+

Tab 1

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui repellat ea magni magnam + assumenda voluptas accusantium nemo. Iusto beatae illum mollitia aut quasi odit facilis + officiis, laudantium debitis! Excepturi, quis! +

+
+ +
+

Tab 2

+

+ Atque eius voluptatibus ipsa ex totam odit, quidem illo distinctio sit! Quod quae minus, + aut itaque. Mollitia, dolore! Facere molestiae necessitatibus sint recusandae incidunt + pariatur labore iste vel, velit odit. +

+
+ +
+

Tab 3

+

+ Aperiam asperiores optio iusto qui nisi, perspiciatis, ipsum, tenetur explicabo earum et + laboriosam odit magni maxime quos molestias aspernatur laudantium harum placeat tempora + quae necessitatibus, aut dignissimos totam non! Quod. +

+
+
+ +

Events

+

Tabs require shoelace.js to make them interactive. You don’t need to initialize them. Simply include the script and everything “just works.”

+

There is no JavaScript API. Shoelace’s philosophy believes that custom components should act like native components as much as possible. You can, however, listen for various events:

+
    +
  • show – Fires when a tab is shown. The second callback argument is a reference to the respective tab pane.
    • +
  • hide – Fires when a tab is hidden. The second callback argument is a reference to the respective tab pane.
    • +
+

This example will log both events for the tab set with an id of my-tabs.

+
$('#my-tabs')
+  .on('show', function(event, tabPane) {
+    console.log('show', event.target, tabPane);
+  })
+  .on('hide', function(event, tabPane) {
+    console.log('hide', event.target, tabPane);
+  });
+
+ +
+
+ + + + + + + + + + + diff --git a/docs/utilities.html b/docs/utilities.html new file mode 100644 index 000000000..5aaee5e3e --- /dev/null +++ b/docs/utilities.html @@ -0,0 +1,214 @@ + + + + + + + + + + + + Utilities + + + +
+

+ + Shoelace logo + +

+

+ A back to the basics CSS starter kit. For when you don’t need the whole boot. +

+
+ +
+ + +
+

Utilities

+

Shoelace provides a number of helpful utility classes that make prototyping easier.

+

Text Utilities

+

Text utilities are classes that can be applied to just about any element. The text inside will be +formatted appropriately.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ClassExample
text-successThis is success text
text-infoThis is info text
text-warningThis is warning text
text-dangerThis is danger text
text-mutedThis is muted text
text-smallThis is small text
text-boldThis is bold text
text-italicThis is italic text
text-leftThis is left-aligned text
text-centerThis is centered text
text-rightThis is right-aligned text
text-justifyThis is justified text
text-nowrapThis is text that won’t wrap
text-lowercaseThis is lowercase text
text-uppercaseThis is uppercase text
text-capitalizeThis is capitalized text
+ +

Float Utilities

+

Float utilities are provided to easily float elements to the left or right. Just apply the float-left or float-right class to an element to float it left or right.

+

A clearfix utility is also available to clear floated elements. Just apply the clearfix class to the appropriate element.

+

Sizing Utilities

+

Sizing utilities can be used to set a relative width or height on any element. Just apply a width-* or height-* class and the appropriate element will be sized accordingly. Sizes are available as percentages from 0 – 100 in multiples of five.

+
<div class="width-25">25%</div>
+<div class="width-50">50%</div>
+<div class="width-75">75%</div>
+<div class="width-100">100%</div>
+
+<div class="height-25">25%</div>
+<div class="height-50">50%</div>
+<div class="height-75">75%</div>
+<div class="height-100">100%</div>
+
+
+
25%
+
50%
+
75%
+
100%
+
+ +
+
25%
+
50%
+
75%
+
100%
+
+ +

Spacing Utilities

+

Spacing utilities can be used to add or remove paddings and margins to any element. Just apply the desired class and the appropriate element will receive the respective padding/margin.

+

Class names are prefixed with padding- or margin- for padding and margin, respectively. To apply spacing to all sides of an element, use the following classes:

+
padding-[none|small|medium|big]
+margin-[none|small|medium|big]
+

Example:

+
<div class="padding-none margin-big">
+
+

To apply spacing to a specific side of an element, use one or more of the following classes:

+
padding-[top|right|bottom|left|x|y]-[none|small|medium|big]
+margin-[top|right|bottom|left|x|y]-[none|small|medium|big]
+

Example:

+
<div class="padding-left-medium margin-bottom-none">
+
+

You can also use margin-[x|y|xy]-auto to set automatic margins horizontally and/or vertically.

+ +
+
+ + + + + + + + + + + diff --git a/index.html b/index.html index 3c5befebe..7bc7eeded 100644 --- a/index.html +++ b/index.html @@ -5,39 +5,36 @@ - - - - Shoelace.css: a back to the basics CSS starter kit + + + + + Shoelace.css – a back to the basics CSS starter kit -
-
-

Shoelace logo

-

- A back to the basics CSS starter kit. For when you don’t need the whole boot. +

+

Shoelace logo

+ +

+ A back to the basics CSS starter kit. For when you don’t need the whole boot. +

+
+ +
+
+

+ Shoelace.css is a starter kit, not a framework. Think of it as a CSS reset sprinkled with + helpful components. Bootstrap users will find it familiar, yet refreshing.

-
- +

+ Shoelace is highly customizable through CSS variables. It doesn’t require Less, Sass, or any + preprocessing at all. Just link to shoelace.css and add customizations directly + to your stylesheet. +

-

- Shoelace.css is a starter kit, not a framework. Think of it as a CSS reset sprinkled with - helpful components. Bootstrap users will find it familiar, yet refreshing. -

-

- Shoelace is highly customizable through CSS variables. It doesn’t require Less, Sass, or any - preprocessing at all. The minified version is only - 35.3KB and much smaller when gzipped. -

-

- Just link to shoelace.css and add customizations to your stylesheet. -

-
-<link rel="stylesheet" href="shoelace.css">
+
<link rel="stylesheet" href="shoelace.css">
 
 <style>
   :root {
@@ -45,1728 +42,32 @@
     --body-bg-color: black;
     --color-primary: #09d;
   }
-</style>
-

-    

-      Shoelace was created by @claviska for
-      Surreal CMS. It’s available under the MIT license.
-    

-    

-      Fork
-      Download
-      Report a Bug
-      Star
-      Follow
-      Donate
-    

-    

-      Version 1.0.0-beta9
-    

+</style>
- - -

- # - Documentation -

- - - - - -

- # - Installing -

- -

- Shoelace is incredibly easy to use. To get started, simply link to shoelace.css - in your project. You can use the CDN version or download the source manually. -

-

- To make certain components interactive (e.g. dropdowns and tabs), you’ll need to load - jQuery or - Zepto along with shoelace.js. -

- -

CDN

-

- The easiest way to use Shoelace is via CDN. Just add this to the <head>: -

-
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/shoelace-css/1.0.0-beta9/shoelace.css">
-
-

- And this before </body> but after jQuery/Zepto: -

-
-<script src="https://cdnjs.cloudflare.com/ajax/libs/shoelace-css/1.0.0-beta9/shoelace.js"></script>
-
-

- This service is provided free, courtesy of CDNJS. New - releases can take up to 12 hours to appear on the CDN. -

- -

Download

-

- Alternatively, you can download - the source and link to shoelace.css from your own server. Just add this - stylesheet to your <head>: -

-
-<link rel="stylesheet" href="dist/shoelace.css">
-
-

- And this before </body> but after jQuery/Zepto: -

-
-<script src="dist/shoelace.js"></script>
-
- -

NPM

-

- If you’re using NPM, you can install Shoelace by running: -

-
-npm install --save-dev shoelace-css
-
- - - -

- # - Customizing -

- -

- You can customize Shoelace without editing core files or using a preprocessor. To add - customizations, simply override one or more of the variables found in - variables.css in your own stylesheet. -

-

- For example, you can customize the default text color and background like this: -

-
-:root {
-  --body-color: white;
-  --body-bg-color: black;
-}
-
- -

Using Variables

-

- You can use any of Shoelace’s variables in your stylesheet. This makes it easy to reuse values - without hardcoding them. It also provides a foundation for extending Shoelace with your own - custom components. -

-
-.your-selector {
-  color: var(--state-danger);
-}
-
-

- Refer to variables.css for a complete - list of variables in Shoelace. If you’re not familiar with CSS variables, - this article - will bring you up to speed. There’s also an - interactive demo if you want - to try it out. -

- -

Custom Components

-

- You can create custom components to extend Shoelace’s functionality. Here are some best - practices to keep things consistent and easy for others to understand. -

-

- Familiarize yourself with Shoelace’s naming conventions. A custom accordion - component, for example, would have a class name such as accordion, modifier - classes such as accordion-open, and variable names that look like - --accordion-bg-color. Try to follow similar patterns as much as possible. -

-

- Define new variables when it makes sense to. Take a look at - variables.css to see how existing - components are defined. Many use core variables instead of hardcoded properties as default - values. This makes it easy for users to customize things quickly, but still provides enough - flexibility to style individual components. -

-

- Semantic markup is strongly encouraged. Custom components should use the most - appropriate elements and the minimal amount of markup required. -

-

- Keep everything together. During development, each component should be in its - own folder along with its stylesheets, scripts, and documentation. Components shouldn’t depend - on other components’ styles or scripts. This makes it easier to add or remove components from - your app without affecting others. Of course, it’s perfectly fine to bundle components for - optimization purposes in production. -

- - - -

- # - Content -

- -

- Shoelace gives you an easy way to customize most HTML elements with variables. You don’t need - to apply any classes to achieve these styles — just use the appropriate tags. -

-

- For easy spacing, Shoelace removes top margins and applies a bottom margin to block elements. - By default, text sizing and spacing is measured in rem units. -

- -

Headings <h1> – <h6>

-

Heading 1

-

Heading 2

-

Heading 3

-

Heading 4

-
Heading 5
-
Heading 6
- -

Paragraphs <p>

-

- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat excepturi repellendus - nostrum dolorum dignissimos quis non, minus debitis laborum vero cupiditate sequi neque, - magnam dolore nemo possimus, soluta ducimus eaque. -

-

- Blanditiis ea qui, veritatis animi recusandae praesentium magnam. Commodi placeat, laboriosam - accusamus laudantium quasi eveniet soluta illo ducimus quis doloremque mollitia, officia - pariatur deleniti reprehenderit, maxime, dicta libero vero cum. -

- -

Ordered Lists <ol>

-
    -
  1. List item 1
    2. -
  2. List item 2 -
      -
    1. Nested item 1
      2. -
    2. Nested item 2
      3. -
    3. Nested item 3
      4. -
    -
    3. -
  3. List item 3
    4. -
- -

Unordered Lists <ul>

-
    -
  • List item 1
    • -
  • List item 2 -
      -
    • Nested item 1
      • -
    • Nested item 2
      • -
    • Nested item 3
      • -
    -
    • -
  • List item 3
    • -
- -

Definition Lists <dl>

-
-
Term 1
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum autem perferendis - exercitationem asperiores fuga incidunt, nam dicta amet. Dolor eligendi nisi praesentium - placeat officiis esse corporis molestiae. Doloremque accusamus, vel! -
-
Term 2
-
- Veritatis repellendus porro ipsam beatae temporibus natus id adipisci nobis accusantium - quidem eum fugit cupiditate deleniti nisi nesciunt dicta officia, enim, atque corporis neque - error. Unde saepe molestiae hic voluptatibus? -
-
- -

Blockquotes <blockquote>

-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia ipsam enim reprehenderit - placeat ab voluptate totam suscipit voluptas, culpa pariatur eos quas, sequi unde perferendis - officiis! Officiis eligendi eaque facilis. -
- -

Preformatted Text <pre>

-
-CLS
-SCREEN 13
-PRINT "SHOELACE IS AWESOME"
-
- -

Text Formats

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ElementExample
<strong>This is strong text
<em>This is emphasized text
<u>This is underlined text
<s>This is strikethrough text
<a>This is link text
<small>This is small text
<sup>This is superscript text
<sub>This is subscript text
<code>This is code text
<samp>This is sample text
<var>This is variable text
<kbd>This is keyboard text
<abbr>This is abbreviation text
<del>This is deleted text
<ins>This is inserted text
<mark>This is marked text
- - - -

- # - Alerts -

- -

- Create an alert by applying the alert class to an element such as a - <div>. You can change an alert’s appearance using the - alert-* modifier. -

-
-<div class="alert">Default</div>
-<div class="alert alert-success">Success</div>
-<div class="alert alert-info">Info</span>
-<div class="alert alert-warning">Warning</div>
-<div class="alert alert-danger">Danger</div>
-<div class="alert alert-inverse">Inverse</div>
-
-
This is a default alert with link
-
This is a success alert with link
-
This is an info alert with link
-
This is a warning alert with link
-
This is a danger alert with link
-
This is an inverse alert with link
- - - -

- # - Badges -

- -

- Create a badge by applying the badge class to an element such as a - <span>. You can change a badge’s appearance using the badge-* - modifier. -

-
-<span class="badge">Default</span>
-<span class="badge badge-success">Success</span>
-<span class="badge badge-info">Info</span>
-<span class="badge badge-warning">Warning</span>
-<span class="badge badge-danger">Danger</span>
-<span class="badge badge-inverse">Inverse</span>
-
-

- Default - Success - Info - Warning - Danger - Inverse -

- -

- Badges are sized relative to their parent element. -

-
-<h1>Heading 1 <span class="badge">Badge</span></h1>
-<h2>Heading 2 <span class="badge">Badge</span></h2>
-<h3>Heading 3 <span class="badge">Badge</span></h3>
-<p>Paragraph <span class="badge">Badge</span></p>
-
-

Heading 1 Badge

-

Heading 2 Badge

-

Heading 3 Badge

-

Paragraph Badge

- - - -

- # - Buttons -

- -

- To create a button, use the <button> element or apply the - button class to another element such as an <a>. You can change - a button’s appearance using the button-* modifier. -

-
-<button type="button">Default</button>
-<button type="button" class="button-success">Success</button>
-<button type="button" class="button-info">Info</button>
-<button type="button" class="button-warning">Warning</button>
-<button type="button" class="button-danger">Danger</button>
-<button type="button" class="button-inverse">Inverse</button>
-<button type="button" class="button button-link">Link</button>
-
-

- - - - - - - -

-

- Use the button-small and button-big modifiers to change the size of - a button. -

-

- - - -

-

- Use the button-block modifier to make the button span the entire width of its - parent element. You can also mix and match modifiers as needed. -

-
- -
-
- -
-
- -
-

- Disabled buttons look like this. Set the disabled property on - <button> elements to achieve this effect. For all other elements, apply - class="disabled" instead. -

-

- - - - - - -

-

- You can force buttons to have an active state by applying the active class. -

-

- - - - - - -

- -

File Buttons

-

- File inputs are notoriously hard to style properly in every browser. Shoelace offers file - buttons as an alternative. These are much easier to style consistently, but come with the - caveat that the name (or number) of files selected will not be automatically shown to the - user. This aspect of a file button’s UX can be handled effectively with JavaScript, but this - is left as an exercise - for the user. -

-

- File buttons are simply <label> elements with the button class - and a nested file input. -

-
-<label class="button">
-  Select File
-  <input type="file">
-</label>
-
-

- -

- - - - - -

- Dropdowns can be created using the markup below. You can use a <button> or - an <a> as a trigger. Dropdown indicators (i.e. carets) are added for you. - Menu items are simply <a> elements. Dividers are simply - <hr> elements. -

-

- Note the class names used for the main container, the trigger, and the menu. Additionally, - menu items can be disabled by adding the disabled class. Menu items can also be - given a checked state using the checked class. -

-

- To disable a dropdown entirely, add the disabled property to the dropdown trigger - if it’s a button. If it’s a link, add the disabled class instead. -

-
-<div class="dropdown">
-  <button type="button" class="dropdown-trigger">Dropdown</button>
-  <div class="dropdown-menu">
-    <a href="#">Item 1</a>
-    <a href="#">Item 2</a>
-    <a href="#">Item 3</a>
-    <a href="#" class="checked">Checked</a>
-    <a href="#" class="disabled">Disabled</a>
-    <hr>
-    <a href="#">More...</a>
-  </div>
-</div>
-
-
-
- -
- Item 1 - Item 2 - Item 3 - Checked - Disabled -
- More... -
-
-
-

- Use the dropdown-top and dropdown-left modifiers to change the - positioning of the menu. You can combine these modifiers as needed. -

-
-<div class="dropdown dropdown-left">
-  ...
-</div>
-
-<div class="dropdown dropdown-top">
-  ...
-</div>
-
-<div class="dropdown dropdown-top dropdown-left">
-  ...
-</div>
-
- -
-
- -
- Item 1 - Item 2 - Item 3 -
-
- -
- -
- Item 1 - Item 2 - Item 3 -
-
- -
- -
- Item 1 - Item 2 - Item 3 -
-
-
- -

- Dropdowns with button triggers can be used inside input groups. -

- -
- $ - -
- -
- USD - AUD - CAD - GBP -
-
-
- - -

- Dropdowns require shoelace.js to make them interactive. You don’t need to - initialize them — simply include the script and everything “just works.” -

-

- There is no JavaScript API. Shoelace’s philosophy believes that custom components should act - like native components as much as possible. You can, however, listen for various events: -

-
    -
  • - show – Fires when a dropdown is shown. -
    • -
  • - hide – Fires when a dropdown is hidden. -
    • -
  • - select – Fires when a dropdown menu item is selected. The second callback - argument is a reference to the respective menu item. -
    • -
-

- This example will log all three events for a dropdown with an id of my-dropdown. -

-
-$('#my-dropdown')
-  .on('show', function(event) {
-    console.log('show', event.target);
-  })
-  .on('hide', function(event) {
-    console.log('hide', event.target);
-  })
-  .on('select', function(event, item) {
-    console.log('select', event.target, item);
-  });
-
- - - -

- # - Forms -

- -

- Shoelace gives you beautiful forms without hassle. Most form controls don’t need a special - class for styling. -

- -

Form Controls

-

- Form controls are styled at 100% of the width of their parent element. -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Input TypeExample
<input type="checkbox"> -
- -
<input type="color">
<input type="date">
<input type="email">
- <input type="file"> -
- - File inputs aren’t supported. Use a file button instead. - - 		- -
<input type="number">
<input type="password">
<input type="radio"> -
- -
<input type="range">
<input type="search">
<input type="text">
<input type="time">
<progress></progress>
<select> - -
<textarea>
-

- You can change the size of most form controls with the input-small and - input-big modifiers. -

-
-<input type="text" class="input-small" placeholder="Small">
-<input type="text" placeholder="Default">
-<input type="text" class="input-big" placeholder="Big">
-
-<select class="input-small"><option>Item</option></select>
-<select><option>Item</option></select>
-<select class="input-big"><option>Item</option></select>
-
- -
-

-

-

-

-

-

-
-

- Disabled form controls look like this: -

-
- -
-
- - -
-

- Read-only form controls look like this: -

-
- -
- -

Form Control Spacing

-

- For proper spacing of individual form controls, wrap them in input-single - containers. -

-
-<div class="input-single">
-  <label>Name</label>
-  <input type="text">
-</div>
-
-<div class="input-single">
-  <label>Password</label>
-  <input type="password">
-</div>
-
-<div class="input-single">
-  <label><input type="checkbox"> Remember me</label>
-</div>
-
-
- - -
-
- - -
-
- -
- -

Input Groups

-

- Form controls and buttons can be grouped by wrapping them in input-group - containers. -

-
-<div class="input-group">
-  <input type="text">
-  <button type="button" class="button">Submit</button>
-</div>
-
-<div class="input-group">
-  <button type="button" class="button">Submit</button>
-  <input type="text">
-</div>
-
-<div class="input-group">
-  <input type="text" placeholder="First">
-  <input type="text" placeholder="Middle">
-  <input type="text" placeholder="Last">
-  <button type="button" class="button">Submit</button>
-</div>
-
-<div class="input-group">
-  <button type="button" class="button">Option 1</button>
-  <button type="button" class="button">Option 2</button>
-  <button type="button" class="button">Option 3</button>
-</div>
-
-
-
- - -
-
- -
-
- - -
-
- -
-
- - - - -
-
- -
-
- - - -
-
- -

Input Addons

-

- To create an input addon, use <span class="input-addon">. Addons - can appear anywhere inside an input group. Use the input-addon-small and - input-addon-big modifiers to change the size to match adjacent form controls. -

-
-<div class="input-group">
-  <span class="input-addon input-addon-small">$</span>
-  <input type="text" class="input-small">
-  <span class="input-addon input-addon-small">.00</span>
-</div>
-
-<div class="input-group">
-  <span class="input-addon">$</span>
-  <input type="text">
-  <span class="input-addon">.00</span>
-</div>
-
-<div class="input-group">
-  <span class="input-addon input-addon-big">$</span>
-  <input type="text" class="input-big">
-  <span class="input-addon input-addon-big">.00</span>
-</div>
-
- -
-
- $ - - .00 -
-
- -
-
- $ - - .00 -
-
- -
-
- $ - - .00 -
-
- -

Form Groups

-

- Related form controls can be grouped in a <fieldset>. An optional - <legend> can be used to display a name for the group. -

-
-<fieldset>
-  <legend>User</legend>
-  ...
-</fieldset>
-
-
- Login -
- - -
-
- - -
-
- -
-
- -
-
- -

Validation

-

- Form controls can be made valid or invalid using the input-valid and - input-invalid modifiers. It’s better to apply modifiers to the surrounding - input-single so labels will be styled as well, but modifiers can be applied - directly to form controls as needed. -

-
-<div class="input-single input-valid">
-  <label>Valid</label>
-  <input type="text">
-</div>
-
-<div class="input-single input-invalid">
-  <label>Invalid</label>
-  <input type="text">
-</div>
-
-
-
- - -
- -
- - -
-
- - - -

- # - Loaders -

- -

- Create a pure CSS loader by applying the loader class to an empty - <span> element. You can use the loader-small and - loader-big modifiers to change the size. -

-
-<span class="loader loader-small"></span>
-<span class="loader"></span>
-<span class="loader loader-big"></span>
-
-

- - - -

- -

- You can simulate a background loader using loader-bg. This is achieved using - position: relative on the container and the ::after pseudo-element. - You can use the loader-bg-small and loader-bg-big modifiers to - change the size. -

-
-<div class="loader-bg loader-bg-small"></div>
-<div class="loader-bg"></div>
-<div class="loader-bg loader-bg-big"></div>
-
-
-
-
-
-
- - - - -

- # - Switches -

- -

- Switches provide an alternative to standard checkboxes. Many people find them more intuitive - and easier to use, especially on mobile devices. Shoelace provides a way to create beautiful, - animated switches with pure CSS. -

-

- Because this is a pure CSS solution, there are a couple important things to remember: -

-
    -
  • - Each switch must have a unique id -
    • -
  • - The <label> must have a for attribute that references the switch id -
    • -
  • - The <label> must come after the checkbox, otherwise the - control won’t render -
    • -
-

- The markup for a switch looks like this: -

-
-<span class="switch">
-  <input type="checkbox" class="switch" id="switch-1">
-  <label for="switch-1">Option 1</label>
-</span>
-
-<span class="switch">
-  <input type="checkbox" class="switch" id="switch-2" checked>
-  <label for="switch-2">Option 2</label>
-</span>
-
-
- - - - - - - - - -
-

- Use the switch-small and switch-big modifiers to change the size of - a switch. -

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

- Disabled switches are dimmed out. To disable a switch, add the disabled attribute - to the checkbox (not the wrapper). -

-
- - - - -
- - - -

- # - Tabs -

- -

- Tab sets can be created using the markup below. By default, Shoelace renders tabs as pills - because they respond better than traditional tabs when rendered on smaller screens. -

-

- Note the class names used for the main container, the tab navs, and the tab panes. Also note - that each tab links to its respective tab pane’s id. -

-

- To disable a tab, add disabled to the appropriate tab nav. -

-
-<div class="tabs">
-  <nav class="tabs-nav">
-    <a href="#tab-1" class="active">Tab 1</a>
-    <a href="#tab-2">Tab 2</a>
-    <a href="#tab-3">Tab 3</a>
-    <a href="#" class="disabled">Disabled</a>
-  </nav>
-
-  <div class="tabs-pane active" id="tab-1">
-    ...
-  </div>
-
-  <div class="tabs-pane" id="tab-2">
-    ...
-  </div>
-
-  <div class="tabs-pane" id="tab-3">
-    ...
-  </div>
-</div>
-
- -
- - -
-

Tab 1

-

- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui repellat ea magni magnam - assumenda voluptas accusantium nemo. Iusto beatae illum mollitia aut quasi odit facilis - officiis, laudantium debitis! Excepturi, quis! -

-
- -
-

Tab 2

-

- Atque eius voluptatibus ipsa ex totam odit, quidem illo distinctio sit! Quod quae minus, - aut itaque. Mollitia, dolore! Facere molestiae necessitatibus sint recusandae incidunt - pariatur labore iste vel, velit odit. -

-
- -
-

Tab 3

-

- Aperiam asperiores optio iusto qui nisi, perspiciatis, ipsum, tenetur explicabo earum et - laboriosam odit magni maxime quos molestias aspernatur laudantium harum placeat tempora - quae necessitatibus, aut dignissimos totam non! Quod. -

-
-
- -

Vertical Tabs

-

-

- Tabs can be made vertical by adding custom CSS rules. Shoelace doesn’t include these styles by - default because of the many ways tabs can be positioned, customized, and made responsive. -

-

- Here’s an example of vertical tabs that uses the CSS grid. The markup is exactly the same as - the previous example, except the tabs container has a custom class and the following custom - styles. -

-
-.tabs-vertical-example {
-  display: grid;
-  grid-template-columns: 30% 70%;
-}
-
-.tabs-vertical-example .tabs-nav {
-  padding-right: 2rem;
-}
-
-.tabs-vertical-example .tabs-nav a {
-  display: block;
-}
-
-
- - -
-

Tab 1

-

- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui repellat ea magni magnam - assumenda voluptas accusantium nemo. Iusto beatae illum mollitia aut quasi odit facilis - officiis, laudantium debitis! Excepturi, quis! -

-
- -
-

Tab 2

-

- Atque eius voluptatibus ipsa ex totam odit, quidem illo distinctio sit! Quod quae minus, - aut itaque. Mollitia, dolore! Facere molestiae necessitatibus sint recusandae incidunt - pariatur labore iste vel, velit odit. -

-
- -
-

Tab 3

-

- Aperiam asperiores optio iusto qui nisi, perspiciatis, ipsum, tenetur explicabo earum et - laboriosam odit magni maxime quos molestias aspernatur laudantium harum placeat tempora - quae necessitatibus, aut dignissimos totam non! Quod. -

-
-
- -

Events

-

- Tabs require shoelace.js to make them interactive. You don’t need to initialize - them — simply include the script and everything “just works.” -

-

- There is no JavaScript API. Shoelace’s philosophy believes that custom components should act - like native components as much as possible. You can, however, listen for various events: -

-
    -
  • - show – Fires when a tab is shown. The second callback argument is the - respective tab pane. -
    • -
  • - hide – Fires when a tab is hidden. The second callback argument is the - respective tab pane. -
    • -
-

- This example will log both events for tabs with an id of my-tabs. -

-
-$('#my-tabs')
-  .on('show', function(event, tabPane) {
-    console.log('show', event.target, tabPane);
-  })
-  .on('hide', function(event, tabPane) {
-    console.log('hide', event.target, tabPane);
-  });
-
- - - -

- # - Tables -

- -

- Tables are styled for you automatically. -

-
-<table>
-  <thead>
-    <tr><th>Item</th><th>Price</th></tr>
-  </thead>
-  <tbody>
-    <tr><td>Shoe Freshener</td><td>$4.79</td></tr>
-    <tr><td>Shoe Glue</td><td>$2.50</td></tr>
-    <tr><td>Shoe Polish</td><td>$5.25</td></tr>
-    <tr><td>Shoelaces</td><td>$3.99</td></tr>
-  </tbody>
-</table>
-
- - - - - - - - - - -
ItemPrice
Shoe Freshener$4.79
Shoe Glue$2.50
Shoe Polish$5.25
Shoelaces$3.99
- -

Striped Tables

-

- Use the table-striped modifier to add stripes to alternating rows. -

-
-<table class="table-striped">
-  ...
-</table>
-
- - - - - - - - - - -
ItemPrice
Shoe Freshener$4.79
Shoe Glue$2.50
Shoe Polish$5.25
Shoelaces$3.99
- -

Bordered Tables

-

- Use the table-bordered modifier to add a border to the table. -

-
-<table class="table-bordered">
-  ...
-</table>
-
- - - - - - - - - - -
ItemPrice
Shoe Freshener$4.79
Shoe Glue$2.50
Shoe Polish$5.25
Shoelaces$3.99
- -

Hoverable Rows

-

- Use the table-hoverable modifier to enable the hover state on table rows within a - <tbody>. -

-
-<table class="table-hoverable">
-  ...
-</table>
-
- - - - - - - - - - -
ItemPrice
Shoe Freshener$4.79
Shoe Glue$2.50
Shoe Polish$5.25
Shoelaces$3.99
- - - -

- # - Utilities -

- -

- Shoelace provides a number of helpful utility classes that make prototyping easier. -

- -

Text Utilities

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ClassExample
text-successThis is success text
text-infoThis is info text
text-warningThis is warning text
text-dangerThis is danger text
text-mutedThis is muted text
text-smallThis is small text
text-boldThis is bold text
text-italicThis is italic text
text-leftThis is left-aligned text
text-centerThis is centered text
text-rightThis is right-aligned text
text-justifyThis is justified text
text-nowrapThis is text that won’t wrap
text-lowercaseThis is lowercase text
text-uppercaseThis is uppercase text
text-capitalizeThis is capitalized text
- -

Float Utilities

-

- Float utilities are provided to easily float elements to the left or right. Just apply the - float-left or float-right class to an element to float it - left or right. -

-

- A clearfix utility is also available to clear floated elements. Just apply the - clearfix class to the appropriate element. -

- -

Sizing Utilities

-

- Sizing utilities can be used to set a relative width or height on any element. Just apply - a width-* or height-* class and the appropriate element will be - sized accordingly. Sizes are available as percentages from 0 – 100 in multiples of five. -

-
-<div class="width-25">25%</div>
-<div class="width-50">50%</div>
-<div class="width-75">75%</div>
-<div class="width-100">100%</div>
-
-<div class="height-25">25%</div>
-<div class="height-50">50%</div>
-<div class="height-75">75%</div>
-<div class="height-100">100%</div>
-
-
-
25%
-
50%
-
75%
-
100%
-
- -
-
25%
-
50%
-
75%
-
100%
-
- -

Spacing Utilities

-

- Spacing utilities can be used to add or remove paddings and margins to any element. Just apply - the desired class and the appropriate element will receive the respective padding/margin. -

-

- Class names are prefixed with padding- or margin- for padding and - margin, respectively. To apply spacing to all sides of an element, use the following classes: -

-
-padding-[none|small|medium|big]
-margin-[none|small|medium|big]
-
-Example: <div class="padding-none margin-big">
-
-

- To apply spacing to a specific side of an element, use one or more of the following classes: -

-
-padding-[top|right|bottom|left|x|y]-[none|small|medium|big]
-margin-[top|right|bottom|left|x|y]-[none|small|medium|big]
-
-Example: <div class="padding-left-medium margin-bottom-none">
-
-

- You can also use margin-[x|y|xy]-auto to set automatic margins horizontally - and/or vertically. -

- - - -

- # - Grid System -

- -

- Shoelace doesn’t ship with a grid system because - - you don’t need one. You should use the CSS Grid - Layout instead. -

-

- If you have an obligation to support older browsers, consider using the Bootstrap grid - without any extras. -

- - - -

- # - Icons -

- -

- Shoelace doesn’t bundle its own icons, but you can easily include your favorite library such - as Font Awesome. They work superbly together. -

-

- This decision was intentional. It keeps Shoelace light and makes it more customizable. -

- - - -

- # - Browser Support -

- -

- TL;DR — you can use Shoelace as-is if you don’t care about Internet Explorer and older - browsers (Edge is fine). If you need to support older browsers, just make sure to use a - grid system and Myth as a - polyfill. -

-

- Browser support for CSS variables is pretty - good, but if you need to support Internet Explorer, consider using - Myth as a polyfill. Myth lets you write standards-compliant - CSS and “fixes” it for unsupportive browsers. -

-

- Browser support for the CSS Grid is very good, - but if you need to support older browsers you can use a grid system - instead. -

-

- Browser support for calc is - excellent. Shoelace uses this internally for - relative calculations. You can use it along with CSS variables too. -

-

- Browser support for color modifiers is non-existent. - There is a draft, so - hopefully that will change soon. Shoelace doesn’t use this feature, but it will when support - improves. -

-

- Browser support for custom media queries is non-existent. - There is a draft, so - hopefully that will change soon. Shoelace doesn’t use this feature, but it will when support - improves. -

- - - -

- # - Attribution -

-

- Special thanks to the following individuals and organizations for their contributions to - Shoelace.css. Listed in no particular order. -

-
    -
  • - Cory LaViska – for creating this project -
    • -
  • - Adam K Olson – for designing an awesome logo -
    • -
  • - Bootstrap – for inspiration -
    • -
  • - cdnjs.com – for providing a CDN -
    • -
  • - GitHub – for hosting this and many other open source repos -
    • -
  • - Surreal CMS – for sponsoring this project -
    • -
- - - +
- - - + diff --git a/package-lock.json b/package-lock.json index 011857089..843765443 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,15 +1,47 @@ { "name": "shoelace-css", - "version": "1.0.0-beta9", + "version": "1.0.0-beta10", "lockfileVersion": 1, "requires": true, "dependencies": { + "absolute": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/absolute/-/absolute-0.0.1.tgz", + "integrity": "sha1-wigi+H4ck59XmIdQTZwQnEFzgp0=", + "dev": true + }, + "align-text": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/align-text/-/align-text-0.1.4.tgz", + "integrity": "sha1-DNkKVhCT810KmSVsIrcGlDP60Rc=", + "dev": true, + "requires": { + "kind-of": "3.2.2", + "longest": "1.0.1", + "repeat-string": "1.6.1" + } + }, "alphanum-sort": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/alphanum-sort/-/alphanum-sort-1.0.2.tgz", "integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=", "dev": true }, + "amdefine": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz", + "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=", + "dev": true + }, + "ansi-red": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/ansi-red/-/ansi-red-0.1.1.tgz", + "integrity": "sha1-jGOPnRCAgAo1PJwoyKgcpHBdlGw=", + "dev": true, + "requires": { + "ansi-wrap": "0.1.0" + } + }, "ansi-regex": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", @@ -25,6 +57,23 @@ "color-convert": "1.9.0" } }, + "ansi-wrap": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/ansi-wrap/-/ansi-wrap-0.1.0.tgz", + "integrity": "sha1-qCJQ3bABXponyoLoLqYDu/pF768=", + "dev": true + }, + "anymatch": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-1.3.2.tgz", + "integrity": "sha512-0XNayC8lTHQ2OI8aljNCN3sSx6hsr/1+rlcDAotXJR7C1oZZHCNsfpbKwMjRA3Uqb5tF1Rae2oloTr4xpq+WjA==", + "dev": true, + "optional": true, + "requires": { + "micromatch": "2.3.11", + "normalize-path": "2.1.1" + } + }, "argparse": { "version": "1.0.9", "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.9.tgz", @@ -34,6 +83,29 @@ "sprintf-js": "1.0.3" } }, + "arr-diff": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-2.0.0.tgz", + "integrity": "sha1-jzuCf5Vai9ZpaX5KQlasPOrjVs8=", + "dev": true, + "optional": 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, + "optional": 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-union": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz", @@ -49,6 +121,38 @@ "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, + "optional": true + }, + "arrify": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz", + "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=", + "dev": true + }, + "asap": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz", + "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=", + "dev": true + }, + "async": { + "version": "1.5.2", + "resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz", + "integrity": "sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=", + "dev": true + }, + "async-each": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/async-each/-/async-each-1.0.1.tgz", + "integrity": "sha1-GdOGodntxufByF04iu28xW0zYC0=", + "dev": true, + "optional": true + }, "autoprefixer": { "version": "7.1.2", "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-7.1.2.tgz", @@ -75,12 +179,745 @@ } } }, + "babel-cli": { + "version": "6.24.1", + "resolved": "https://registry.npmjs.org/babel-cli/-/babel-cli-6.24.1.tgz", + "integrity": "sha1-IHzXBbumFImy6kG1MSNBz2rKIoM=", + "dev": true, + "requires": { + "babel-core": "6.25.0", + "babel-polyfill": "6.23.0", + "babel-register": "6.24.1", + "babel-runtime": "6.25.0", + "chokidar": "1.7.0", + "commander": "2.11.0", + "convert-source-map": "1.5.0", + "fs-readdir-recursive": "1.0.0", + "glob": "7.1.2", + "lodash": "4.17.4", + "output-file-sync": "1.1.2", + "path-is-absolute": "1.0.1", + "slash": "1.0.0", + "source-map": "0.5.6", + "v8flags": "2.1.1" + } + }, + "babel-code-frame": { + "version": "6.22.0", + "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.22.0.tgz", + "integrity": "sha1-AnYgvuVnqIwyVhV05/0IAdMxGOQ=", + "dev": true, + "requires": { + "chalk": "1.1.3", + "esutils": "2.0.2", + "js-tokens": "3.0.2" + }, + "dependencies": { + "ansi-styles": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz", + "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=", + "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" + } + }, + "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 + } + } + }, + "babel-core": { + "version": "6.25.0", + "resolved": "https://registry.npmjs.org/babel-core/-/babel-core-6.25.0.tgz", + "integrity": "sha1-fdQrBGPHQunVKW3rPsZ6kyLa1yk=", + "dev": true, + "requires": { + "babel-code-frame": "6.22.0", + "babel-generator": "6.25.0", + "babel-helpers": "6.24.1", + "babel-messages": "6.23.0", + "babel-register": "6.24.1", + "babel-runtime": "6.25.0", + "babel-template": "6.25.0", + "babel-traverse": "6.25.0", + "babel-types": "6.25.0", + "babylon": "6.17.4", + "convert-source-map": "1.5.0", + "debug": "2.6.8", + "json5": "0.5.1", + "lodash": "4.17.4", + "minimatch": "3.0.4", + "path-is-absolute": "1.0.1", + "private": "0.1.7", + "slash": "1.0.0", + "source-map": "0.5.6" + }, + "dependencies": { + "debug": { + "version": "2.6.8", + "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.8.tgz", + "integrity": "sha1-5zFTHKLt4n0YgiJCfaF4IdaP9Pw=", + "dev": true, + "requires": { + "ms": "2.0.0" + } + } + } + }, + "babel-generator": { + "version": "6.25.0", + "resolved": "https://registry.npmjs.org/babel-generator/-/babel-generator-6.25.0.tgz", + "integrity": "sha1-M6GvcNXyiQrrRlpKd5PB32qeqfw=", + "dev": true, + "requires": { + "babel-messages": "6.23.0", + "babel-runtime": "6.25.0", + "babel-types": "6.25.0", + "detect-indent": "4.0.0", + "jsesc": "1.3.0", + "lodash": "4.17.4", + "source-map": "0.5.6", + "trim-right": "1.0.1" + } + }, + "babel-helper-builder-binary-assignment-operator-visitor": { + "version": "6.24.1", + "resolved": "https://registry.npmjs.org/babel-helper-builder-binary-assignment-operator-visitor/-/babel-helper-builder-binary-assignment-operator-visitor-6.24.1.tgz", + "integrity": "sha1-zORReto1b0IgvK6KAsKzRvmlZmQ=", + "dev": true, + "requires": { + "babel-helper-explode-assignable-expression": "6.24.1", + "babel-runtime": "6.25.0", + "babel-types": "6.25.0" + } + }, + "babel-helper-call-delegate": { + "version": "6.24.1", + "resolved": "https://registry.npmjs.org/babel-helper-call-delegate/-/babel-helper-call-delegate-6.24.1.tgz", + "integrity": "sha1-7Oaqzdx25Bw0YfiL/Fdb0Nqi340=", + "dev": true, + "requires": { + "babel-helper-hoist-variables": "6.24.1", + "babel-runtime": "6.25.0", + "babel-traverse": "6.25.0", + "babel-types": "6.25.0" + } + }, + "babel-helper-define-map": { + "version": "6.24.1", + "resolved": "https://registry.npmjs.org/babel-helper-define-map/-/babel-helper-define-map-6.24.1.tgz", + "integrity": "sha1-epdH8ljYlH0y1RX2qhx70CIEoIA=", + "dev": true, + "requires": { + "babel-helper-function-name": "6.24.1", + "babel-runtime": "6.25.0", + "babel-types": "6.25.0", + "lodash": "4.17.4" + } + }, + "babel-helper-explode-assignable-expression": { + "version": "6.24.1", + "resolved": "https://registry.npmjs.org/babel-helper-explode-assignable-expression/-/babel-helper-explode-assignable-expression-6.24.1.tgz", + "integrity": "sha1-8luCz33BBDPFX3BZLVdGQArCLKo=", + "dev": true, + "requires": { + "babel-runtime": "6.25.0", + "babel-traverse": "6.25.0", + "babel-types": "6.25.0" + } + }, + "babel-helper-function-name": { + "version": "6.24.1", + "resolved": "https://registry.npmjs.org/babel-helper-function-name/-/babel-helper-function-name-6.24.1.tgz", + "integrity": "sha1-00dbjAPtmCQqJbSDUasYOZ01gKk=", + "dev": true, + "requires": { + "babel-helper-get-function-arity": "6.24.1", + "babel-runtime": "6.25.0", + "babel-template": "6.25.0", + "babel-traverse": "6.25.0", + "babel-types": "6.25.0" + } + }, + "babel-helper-get-function-arity": { + "version": "6.24.1", + "resolved": "https://registry.npmjs.org/babel-helper-get-function-arity/-/babel-helper-get-function-arity-6.24.1.tgz", + "integrity": "sha1-j3eCqpNAfEHTqlCQj4mwMbG2hT0=", + "dev": true, + "requires": { + "babel-runtime": "6.25.0", + "babel-types": "6.25.0" + } + }, + "babel-helper-hoist-variables": { + "version": "6.24.1", + "resolved": "https://registry.npmjs.org/babel-helper-hoist-variables/-/babel-helper-hoist-variables-6.24.1.tgz", + "integrity": "sha1-HssnaJydJVE+rbyZFKc/VAi+enY=", + "dev": true, + "requires": { + "babel-runtime": "6.25.0", + "babel-types": "6.25.0" + } + }, + "babel-helper-optimise-call-expression": { + "version": "6.24.1", + "resolved": "https://registry.npmjs.org/babel-helper-optimise-call-expression/-/babel-helper-optimise-call-expression-6.24.1.tgz", + "integrity": "sha1-96E0J7qfc/j0+pk8VKl4gtEkQlc=", + "dev": true, + "requires": { + "babel-runtime": "6.25.0", + "babel-types": "6.25.0" + } + }, + "babel-helper-regex": { + "version": "6.24.1", + "resolved": "https://registry.npmjs.org/babel-helper-regex/-/babel-helper-regex-6.24.1.tgz", + "integrity": "sha1-024i+rEAjXnYhkjjIRaGgShFbOg=", + "dev": true, + "requires": { + "babel-runtime": "6.25.0", + "babel-types": "6.25.0", + "lodash": "4.17.4" + } + }, + "babel-helper-remap-async-to-generator": { + "version": "6.24.1", + "resolved": "https://registry.npmjs.org/babel-helper-remap-async-to-generator/-/babel-helper-remap-async-to-generator-6.24.1.tgz", + "integrity": "sha1-XsWBgnrXI/7N04HxySg5BnbkVRs=", + "dev": true, + "requires": { + "babel-helper-function-name": "6.24.1", + "babel-runtime": "6.25.0", + "babel-template": "6.25.0", + "babel-traverse": "6.25.0", + "babel-types": "6.25.0" + } + }, + "babel-helper-replace-supers": { + "version": "6.24.1", + "resolved": "https://registry.npmjs.org/babel-helper-replace-supers/-/babel-helper-replace-supers-6.24.1.tgz", + "integrity": "sha1-v22/5Dk40XNpohPKiov3S2qQqxo=", + "dev": true, + "requires": { + "babel-helper-optimise-call-expression": "6.24.1", + "babel-messages": "6.23.0", + "babel-runtime": "6.25.0", + "babel-template": "6.25.0", + "babel-traverse": "6.25.0", + "babel-types": "6.25.0" + } + }, + "babel-helpers": { + "version": "6.24.1", + "resolved": "https://registry.npmjs.org/babel-helpers/-/babel-helpers-6.24.1.tgz", + "integrity": "sha1-NHHenK7DiOXIUOWX5Yom3fN2ArI=", + "dev": true, + "requires": { + "babel-runtime": "6.25.0", + "babel-template": "6.25.0" + } + }, + "babel-messages": { + "version": "6.23.0", + "resolved": "https://registry.npmjs.org/babel-messages/-/babel-messages-6.23.0.tgz", + "integrity": "sha1-8830cDhYA1sqKVHG7F7fbGLyYw4=", + "dev": true, + "requires": { + "babel-runtime": "6.25.0" + } + }, + "babel-plugin-check-es2015-constants": { + "version": "6.22.0", + "resolved": "https://registry.npmjs.org/babel-plugin-check-es2015-constants/-/babel-plugin-check-es2015-constants-6.22.0.tgz", + "integrity": "sha1-NRV7EBQm/S/9PaP3XH0ekYNbv4o=", + "dev": true, + "requires": { + "babel-runtime": "6.25.0" + } + }, + "babel-plugin-syntax-async-functions": { + "version": "6.13.0", + "resolved": "https://registry.npmjs.org/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz", + "integrity": "sha1-ytnK0RkbWtY0vzCuCHI5HgZHvpU=", + "dev": true + }, + "babel-plugin-syntax-exponentiation-operator": { + "version": "6.13.0", + "resolved": "https://registry.npmjs.org/babel-plugin-syntax-exponentiation-operator/-/babel-plugin-syntax-exponentiation-operator-6.13.0.tgz", + "integrity": "sha1-nufoM3KQ2pUoggGmpX9BcDF4MN4=", + "dev": true + }, + "babel-plugin-syntax-trailing-function-commas": { + "version": "6.22.0", + "resolved": "https://registry.npmjs.org/babel-plugin-syntax-trailing-function-commas/-/babel-plugin-syntax-trailing-function-commas-6.22.0.tgz", + "integrity": "sha1-ugNgk3+NBuQBgKQ/4NVhb/9TLPM=", + "dev": true + }, + "babel-plugin-transform-async-to-generator": { + "version": "6.24.1", + "resolved": "https://registry.npmjs.org/babel-plugin-transform-async-to-generator/-/babel-plugin-transform-async-to-generator-6.24.1.tgz", + "integrity": "sha1-ZTbjeK/2yx1VF6wOQOs+n8jQh2E=", + "dev": true, + "requires": { + "babel-helper-remap-async-to-generator": "6.24.1", + "babel-plugin-syntax-async-functions": "6.13.0", + "babel-runtime": "6.25.0" + } + }, + "babel-plugin-transform-es2015-arrow-functions": { + "version": "6.22.0", + "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-arrow-functions/-/babel-plugin-transform-es2015-arrow-functions-6.22.0.tgz", + "integrity": "sha1-RSaSy3EdX3ncf4XkQM5BufJE0iE=", + "dev": true, + "requires": { + "babel-runtime": "6.25.0" + } + }, + "babel-plugin-transform-es2015-block-scoped-functions": { + "version": "6.22.0", + "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-block-scoped-functions/-/babel-plugin-transform-es2015-block-scoped-functions-6.22.0.tgz", + "integrity": "sha1-u8UbSflk1wy42OC5ToICRs46YUE=", + "dev": true, + "requires": { + "babel-runtime": "6.25.0" + } + }, + "babel-plugin-transform-es2015-block-scoping": { + "version": "6.24.1", + "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-block-scoping/-/babel-plugin-transform-es2015-block-scoping-6.24.1.tgz", + "integrity": "sha1-dsKV3DpHQbFmWt/TFnIV3P8ypXY=", + "dev": true, + "requires": { + "babel-runtime": "6.25.0", + "babel-template": "6.25.0", + "babel-traverse": "6.25.0", + "babel-types": "6.25.0", + "lodash": "4.17.4" + } + }, + "babel-plugin-transform-es2015-classes": { + "version": "6.24.1", + "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-classes/-/babel-plugin-transform-es2015-classes-6.24.1.tgz", + "integrity": "sha1-WkxYpQyclGHlZLSyo7+ryXolhNs=", + "dev": true, + "requires": { + "babel-helper-define-map": "6.24.1", + "babel-helper-function-name": "6.24.1", + "babel-helper-optimise-call-expression": "6.24.1", + "babel-helper-replace-supers": "6.24.1", + "babel-messages": "6.23.0", + "babel-runtime": "6.25.0", + "babel-template": "6.25.0", + "babel-traverse": "6.25.0", + "babel-types": "6.25.0" + } + }, + "babel-plugin-transform-es2015-computed-properties": { + "version": "6.24.1", + "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-computed-properties/-/babel-plugin-transform-es2015-computed-properties-6.24.1.tgz", + "integrity": "sha1-b+Ko0WiV1WNPTNmZttNICjCBWbM=", + "dev": true, + "requires": { + "babel-runtime": "6.25.0", + "babel-template": "6.25.0" + } + }, + "babel-plugin-transform-es2015-destructuring": { + "version": "6.23.0", + "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-destructuring/-/babel-plugin-transform-es2015-destructuring-6.23.0.tgz", + "integrity": "sha1-mXux8auWf2gtKwh2/jWNYOdlxW0=", + "dev": true, + "requires": { + "babel-runtime": "6.25.0" + } + }, + "babel-plugin-transform-es2015-duplicate-keys": { + "version": "6.24.1", + "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-duplicate-keys/-/babel-plugin-transform-es2015-duplicate-keys-6.24.1.tgz", + "integrity": "sha1-c+s9MQypaePvnskcU3QabxV2Qj4=", + "dev": true, + "requires": { + "babel-runtime": "6.25.0", + "babel-types": "6.25.0" + } + }, + "babel-plugin-transform-es2015-for-of": { + "version": "6.23.0", + "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-for-of/-/babel-plugin-transform-es2015-for-of-6.23.0.tgz", + "integrity": "sha1-9HyVsrYT3x0+zC/bdXNiPHUkhpE=", + "dev": true, + "requires": { + "babel-runtime": "6.25.0" + } + }, + "babel-plugin-transform-es2015-function-name": { + "version": "6.24.1", + "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-function-name/-/babel-plugin-transform-es2015-function-name-6.24.1.tgz", + "integrity": "sha1-g0yJhTvDaxrw86TF26qU/Y6sqos=", + "dev": true, + "requires": { + "babel-helper-function-name": "6.24.1", + "babel-runtime": "6.25.0", + "babel-types": "6.25.0" + } + }, + "babel-plugin-transform-es2015-literals": { + "version": "6.22.0", + "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-literals/-/babel-plugin-transform-es2015-literals-6.22.0.tgz", + "integrity": "sha1-T1SgLWzWbPkVKAAZox0xklN3yi4=", + "dev": true, + "requires": { + "babel-runtime": "6.25.0" + } + }, + "babel-plugin-transform-es2015-modules-amd": { + "version": "6.24.1", + "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-modules-amd/-/babel-plugin-transform-es2015-modules-amd-6.24.1.tgz", + "integrity": "sha1-Oz5UAXI5hC1tGcMBHEvS8AoA0VQ=", + "dev": true, + "requires": { + "babel-plugin-transform-es2015-modules-commonjs": "6.24.1", + "babel-runtime": "6.25.0", + "babel-template": "6.25.0" + } + }, + "babel-plugin-transform-es2015-modules-commonjs": { + "version": "6.24.1", + "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-modules-commonjs/-/babel-plugin-transform-es2015-modules-commonjs-6.24.1.tgz", + "integrity": "sha1-0+MQtA72ZKNmIiAAl8bUQCmPK/4=", + "dev": true, + "requires": { + "babel-plugin-transform-strict-mode": "6.24.1", + "babel-runtime": "6.25.0", + "babel-template": "6.25.0", + "babel-types": "6.25.0" + } + }, + "babel-plugin-transform-es2015-modules-systemjs": { + "version": "6.24.1", + "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-modules-systemjs/-/babel-plugin-transform-es2015-modules-systemjs-6.24.1.tgz", + "integrity": "sha1-/4mhQrkRmpBhlfXxBuzzBdlAfSM=", + "dev": true, + "requires": { + "babel-helper-hoist-variables": "6.24.1", + "babel-runtime": "6.25.0", + "babel-template": "6.25.0" + } + }, + "babel-plugin-transform-es2015-modules-umd": { + "version": "6.24.1", + "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-modules-umd/-/babel-plugin-transform-es2015-modules-umd-6.24.1.tgz", + "integrity": "sha1-rJl+YoXNGO1hdq22B9YCNErThGg=", + "dev": true, + "requires": { + "babel-plugin-transform-es2015-modules-amd": "6.24.1", + "babel-runtime": "6.25.0", + "babel-template": "6.25.0" + } + }, + "babel-plugin-transform-es2015-object-super": { + "version": "6.24.1", + "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-object-super/-/babel-plugin-transform-es2015-object-super-6.24.1.tgz", + "integrity": "sha1-JM72muIcuDp/hgPa0CH1cusnj40=", + "dev": true, + "requires": { + "babel-helper-replace-supers": "6.24.1", + "babel-runtime": "6.25.0" + } + }, + "babel-plugin-transform-es2015-parameters": { + "version": "6.24.1", + "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-parameters/-/babel-plugin-transform-es2015-parameters-6.24.1.tgz", + "integrity": "sha1-V6w1GrScrxSpfNE7CfZv3wpiXys=", + "dev": true, + "requires": { + "babel-helper-call-delegate": "6.24.1", + "babel-helper-get-function-arity": "6.24.1", + "babel-runtime": "6.25.0", + "babel-template": "6.25.0", + "babel-traverse": "6.25.0", + "babel-types": "6.25.0" + } + }, + "babel-plugin-transform-es2015-shorthand-properties": { + "version": "6.24.1", + "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-shorthand-properties/-/babel-plugin-transform-es2015-shorthand-properties-6.24.1.tgz", + "integrity": "sha1-JPh11nIch2YbvZmkYi5R8U3jiqA=", + "dev": true, + "requires": { + "babel-runtime": "6.25.0", + "babel-types": "6.25.0" + } + }, + "babel-plugin-transform-es2015-spread": { + "version": "6.22.0", + "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-spread/-/babel-plugin-transform-es2015-spread-6.22.0.tgz", + "integrity": "sha1-1taKmfia7cRTbIGlQujdnxdG+NE=", + "dev": true, + "requires": { + "babel-runtime": "6.25.0" + } + }, + "babel-plugin-transform-es2015-sticky-regex": { + "version": "6.24.1", + "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-sticky-regex/-/babel-plugin-transform-es2015-sticky-regex-6.24.1.tgz", + "integrity": "sha1-AMHNsaynERLN8M9hJsLta0V8zbw=", + "dev": true, + "requires": { + "babel-helper-regex": "6.24.1", + "babel-runtime": "6.25.0", + "babel-types": "6.25.0" + } + }, + "babel-plugin-transform-es2015-template-literals": { + "version": "6.22.0", + "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-template-literals/-/babel-plugin-transform-es2015-template-literals-6.22.0.tgz", + "integrity": "sha1-qEs0UPfp+PH2g51taH2oS7EjbY0=", + "dev": true, + "requires": { + "babel-runtime": "6.25.0" + } + }, + "babel-plugin-transform-es2015-typeof-symbol": { + "version": "6.23.0", + "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-typeof-symbol/-/babel-plugin-transform-es2015-typeof-symbol-6.23.0.tgz", + "integrity": "sha1-3sCfHN3/lLUqxz1QXITfWdzOs3I=", + "dev": true, + "requires": { + "babel-runtime": "6.25.0" + } + }, + "babel-plugin-transform-es2015-unicode-regex": { + "version": "6.24.1", + "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-unicode-regex/-/babel-plugin-transform-es2015-unicode-regex-6.24.1.tgz", + "integrity": "sha1-04sS9C6nMj9yk4fxinxa4frrNek=", + "dev": true, + "requires": { + "babel-helper-regex": "6.24.1", + "babel-runtime": "6.25.0", + "regexpu-core": "2.0.0" + } + }, + "babel-plugin-transform-exponentiation-operator": { + "version": "6.24.1", + "resolved": "https://registry.npmjs.org/babel-plugin-transform-exponentiation-operator/-/babel-plugin-transform-exponentiation-operator-6.24.1.tgz", + "integrity": "sha1-KrDJx/MJj6SJB3cruBP+QejeOg4=", + "dev": true, + "requires": { + "babel-helper-builder-binary-assignment-operator-visitor": "6.24.1", + "babel-plugin-syntax-exponentiation-operator": "6.13.0", + "babel-runtime": "6.25.0" + } + }, + "babel-plugin-transform-regenerator": { + "version": "6.24.1", + "resolved": "https://registry.npmjs.org/babel-plugin-transform-regenerator/-/babel-plugin-transform-regenerator-6.24.1.tgz", + "integrity": "sha1-uNowWtQ8PJm0hI5P5AN7dw0jxBg=", + "dev": true, + "requires": { + "regenerator-transform": "0.9.11" + } + }, + "babel-plugin-transform-strict-mode": { + "version": "6.24.1", + "resolved": "https://registry.npmjs.org/babel-plugin-transform-strict-mode/-/babel-plugin-transform-strict-mode-6.24.1.tgz", + "integrity": "sha1-1fr3qleKZbvlkc9e2uBKDGcCB1g=", + "dev": true, + "requires": { + "babel-runtime": "6.25.0", + "babel-types": "6.25.0" + } + }, + "babel-polyfill": { + "version": "6.23.0", + "resolved": "https://registry.npmjs.org/babel-polyfill/-/babel-polyfill-6.23.0.tgz", + "integrity": "sha1-g2TKYt+Or7gwSZ9pkXdGbDsDSZ0=", + "dev": true, + "requires": { + "babel-runtime": "6.25.0", + "core-js": "2.5.0", + "regenerator-runtime": "0.10.5" + } + }, + "babel-preset-env": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/babel-preset-env/-/babel-preset-env-1.6.0.tgz", + "integrity": "sha512-OVgtQRuOZKckrILgMA5rvctvFZPv72Gua9Rt006AiPoB0DJKGN07UmaQA+qRrYgK71MVct8fFhT0EyNWYorVew==", + "dev": true, + "requires": { + "babel-plugin-check-es2015-constants": "6.22.0", + "babel-plugin-syntax-trailing-function-commas": "6.22.0", + "babel-plugin-transform-async-to-generator": "6.24.1", + "babel-plugin-transform-es2015-arrow-functions": "6.22.0", + "babel-plugin-transform-es2015-block-scoped-functions": "6.22.0", + "babel-plugin-transform-es2015-block-scoping": "6.24.1", + "babel-plugin-transform-es2015-classes": "6.24.1", + "babel-plugin-transform-es2015-computed-properties": "6.24.1", + "babel-plugin-transform-es2015-destructuring": "6.23.0", + "babel-plugin-transform-es2015-duplicate-keys": "6.24.1", + "babel-plugin-transform-es2015-for-of": "6.23.0", + "babel-plugin-transform-es2015-function-name": "6.24.1", + "babel-plugin-transform-es2015-literals": "6.22.0", + "babel-plugin-transform-es2015-modules-amd": "6.24.1", + "babel-plugin-transform-es2015-modules-commonjs": "6.24.1", + "babel-plugin-transform-es2015-modules-systemjs": "6.24.1", + "babel-plugin-transform-es2015-modules-umd": "6.24.1", + "babel-plugin-transform-es2015-object-super": "6.24.1", + "babel-plugin-transform-es2015-parameters": "6.24.1", + "babel-plugin-transform-es2015-shorthand-properties": "6.24.1", + "babel-plugin-transform-es2015-spread": "6.22.0", + "babel-plugin-transform-es2015-sticky-regex": "6.24.1", + "babel-plugin-transform-es2015-template-literals": "6.22.0", + "babel-plugin-transform-es2015-typeof-symbol": "6.23.0", + "babel-plugin-transform-es2015-unicode-regex": "6.24.1", + "babel-plugin-transform-exponentiation-operator": "6.24.1", + "babel-plugin-transform-regenerator": "6.24.1", + "browserslist": "2.3.0", + "invariant": "2.2.2", + "semver": "5.4.1" + }, + "dependencies": { + "browserslist": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-2.3.0.tgz", + "integrity": "sha512-jDr9Mea+n+FwI+kR0ce7rXCFBoM7hbL80G/th7oPxuNSK4V5J3LPMHB5vykjeI2h7fgSihBbSdoJPmzUC0606Q==", + "dev": true, + "requires": { + "caniuse-lite": "1.0.30000712", + "electron-to-chromium": "1.3.17" + } + }, + "caniuse-lite": { + "version": "1.0.30000712", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000712.tgz", + "integrity": "sha1-tHMt7yRZIk8/eMapuhA6v8xwVnA=", + "dev": true + }, + "electron-to-chromium": { + "version": "1.3.17", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.17.tgz", + "integrity": "sha1-QcE0V8xxZsXBXnZ65h2GqMrN7l0=", + "dev": true + } + } + }, + "babel-register": { + "version": "6.24.1", + "resolved": "https://registry.npmjs.org/babel-register/-/babel-register-6.24.1.tgz", + "integrity": "sha1-fhDhOi9xBlvfrVoXh7pFvKbe118=", + "dev": true, + "requires": { + "babel-core": "6.25.0", + "babel-runtime": "6.25.0", + "core-js": "2.5.0", + "home-or-tmp": "2.0.0", + "lodash": "4.17.4", + "mkdirp": "0.5.1", + "source-map-support": "0.4.15" + } + }, + "babel-runtime": { + "version": "6.25.0", + "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.25.0.tgz", + "integrity": "sha1-M7mOql1IK7AajRqmtDetKwGuxBw=", + "dev": true, + "requires": { + "core-js": "2.5.0", + "regenerator-runtime": "0.10.5" + } + }, + "babel-template": { + "version": "6.25.0", + "resolved": "https://registry.npmjs.org/babel-template/-/babel-template-6.25.0.tgz", + "integrity": "sha1-ZlJBFmt8KqTGGdceGSlpVSsQwHE=", + "dev": true, + "requires": { + "babel-runtime": "6.25.0", + "babel-traverse": "6.25.0", + "babel-types": "6.25.0", + "babylon": "6.17.4", + "lodash": "4.17.4" + } + }, + "babel-traverse": { + "version": "6.25.0", + "resolved": "https://registry.npmjs.org/babel-traverse/-/babel-traverse-6.25.0.tgz", + "integrity": "sha1-IldJfi/NGbie3BPEyROB+VEklvE=", + "dev": true, + "requires": { + "babel-code-frame": "6.22.0", + "babel-messages": "6.23.0", + "babel-runtime": "6.25.0", + "babel-types": "6.25.0", + "babylon": "6.17.4", + "debug": "2.6.8", + "globals": "9.18.0", + "invariant": "2.2.2", + "lodash": "4.17.4" + }, + "dependencies": { + "debug": { + "version": "2.6.8", + "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.8.tgz", + "integrity": "sha1-5zFTHKLt4n0YgiJCfaF4IdaP9Pw=", + "dev": true, + "requires": { + "ms": "2.0.0" + } + } + } + }, + "babel-types": { + "version": "6.25.0", + "resolved": "https://registry.npmjs.org/babel-types/-/babel-types-6.25.0.tgz", + "integrity": "sha1-cK+ySNVmDl0Y+BHZHIMDtUE0oY4=", + "dev": true, + "requires": { + "babel-runtime": "6.25.0", + "esutils": "2.0.2", + "lodash": "4.17.4", + "to-fast-properties": "1.0.3" + } + }, + "babylon": { + "version": "6.17.4", + "resolved": "https://registry.npmjs.org/babylon/-/babylon-6.17.4.tgz", + "integrity": "sha512-kChlV+0SXkjE0vUn9OZ7pBMWRFd8uq3mZe8x1K6jhuNcAFAtEnjchFAqB+dYEXKyd+JpT6eppRR78QAr5gTsUw==", + "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 }, + "binary-extensions": { + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-1.9.0.tgz", + "integrity": "sha1-ZlBsFs5vTWkopbPNajPKQelB43s=", + "dev": true, + "optional": true + }, + "bluebird": { + "version": "3.5.0", + "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.5.0.tgz", + "integrity": "sha1-eRQg1/VR7qKJdFOop3ZT+WYG1nw=", + "dev": true + }, "brace-expansion": { "version": "1.1.8", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.8.tgz", @@ -91,6 +928,18 @@ "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, + "optional": true, + "requires": { + "expand-range": "1.8.2", + "preserve": "0.2.0", + "repeat-element": "1.1.2" + } + }, "browserslist": { "version": "1.7.7", "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-1.7.7.tgz", @@ -101,6 +950,13 @@ "electron-to-chromium": "1.3.16" } }, + "camelcase": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.2.1.tgz", + "integrity": "sha1-m7UwTS4LVmmLLHWLCKPqqdqlijk=", + "dev": true, + "optional": true + }, "caniuse-api": { "version": "1.6.1", "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-1.6.1.tgz", @@ -125,6 +981,17 @@ "integrity": "sha1-cdvziMV/N5sbtmyJqJDtwEwlCbY=", "dev": true }, + "center-align": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/center-align/-/center-align-0.1.3.tgz", + "integrity": "sha1-qg0yYptu6XIgBBHL1EYckHvCt60=", + "dev": true, + "optional": true, + "requires": { + "align-text": "0.1.4", + "lazy-cache": "1.0.4" + } + }, "chalk": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.1.0.tgz", @@ -136,6 +1003,24 @@ "supports-color": "4.2.1" } }, + "chokidar": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-1.7.0.tgz", + "integrity": "sha1-eY5ol3gVHIB2tLNg5e3SjNortGg=", + "dev": true, + "optional": true, + "requires": { + "anymatch": "1.3.2", + "async-each": "1.0.1", + "fsevents": "1.1.2", + "glob-parent": "2.0.0", + "inherits": "2.0.3", + "is-binary-path": "1.0.1", + "is-glob": "2.0.1", + "path-is-absolute": "1.0.1", + "readdirp": "2.1.0" + } + }, "clap": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/clap/-/clap-1.2.0.tgz", @@ -172,12 +1057,65 @@ } } }, + "cliui": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/cliui/-/cliui-2.1.0.tgz", + "integrity": "sha1-S0dXYP+AJkx2LDoXGQMukcf+oNE=", + "dev": true, + "optional": true, + "requires": { + "center-align": "0.1.3", + "right-align": "0.1.3", + "wordwrap": "0.0.2" + }, + "dependencies": { + "wordwrap": { + "version": "0.0.2", + "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.2.tgz", + "integrity": "sha1-t5Zpu0LstAn4PVg8rVLKF+qhZD8=", + "dev": true, + "optional": true + } + } + }, "clone": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.2.tgz", "integrity": "sha1-Jgt6meux7f4kdTgXX3gyQ8sZ0Uk=", "dev": true }, + "co": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/co/-/co-3.1.0.tgz", + "integrity": "sha1-TqVOpaCJOBUxheFSEMaNkJK8G3g=", + "dev": true + }, + "co-from-stream": { + "version": "0.0.0", + "resolved": "https://registry.npmjs.org/co-from-stream/-/co-from-stream-0.0.0.tgz", + "integrity": "sha1-GlzYztdyY5RglPo58kmaYyl7yvk=", + "dev": true, + "requires": { + "co-read": "0.0.1" + } + }, + "co-fs-extra": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/co-fs-extra/-/co-fs-extra-1.2.1.tgz", + "integrity": "sha1-O2rXfPJhRTD2d7HPYmZPW6dWtyI=", + "dev": true, + "requires": { + "co-from-stream": "0.0.0", + "fs-extra": "0.26.7", + "thunkify-wrap": "1.0.4" + } + }, + "co-read": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/co-read/-/co-read-0.0.1.tgz", + "integrity": "sha1-+Bs+uKhmdf7FHj2IOn9WToc8k4k=", + "dev": true + }, "coa": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/coa/-/coa-1.0.4.tgz", @@ -187,6 +1125,12 @@ "q": "1.5.0" } }, + "coffee-script": { + "version": "1.12.7", + "resolved": "https://registry.npmjs.org/coffee-script/-/coffee-script-1.12.7.tgz", + "integrity": "sha512-fLeEhqwymYat/MpTPUjSKHVYYl0ec2mOyALEMLmzr5i1isuG+6jfI2j2d5oBO3VIzgUXgBVIcOT9uH1TFxBckw==", + "dev": true + }, "color": { "version": "0.11.4", "resolved": "https://registry.npmjs.org/color/-/color-0.11.4.tgz", @@ -251,6 +1195,34 @@ "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", "dev": true }, + "consolidate": { + "version": "0.14.5", + "resolved": "https://registry.npmjs.org/consolidate/-/consolidate-0.14.5.tgz", + "integrity": "sha1-WiUEe8dvcwcmZ8jLUsmJiI9JTGM=", + "dev": true, + "requires": { + "bluebird": "3.5.0" + } + }, + "convert-source-map": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.5.0.tgz", + "integrity": "sha1-ms1whRxtXf3ZPZKC5e35SgP/RrU=", + "dev": true + }, + "core-js": { + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.0.tgz", + "integrity": "sha1-VpwFCRi+ZIazg3VSAorgRmtxcIY=", + "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, + "optional": true + }, "css-color-names": { "version": "0.0.4", "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz", @@ -377,6 +1349,12 @@ "source-map": "0.5.6" } }, + "debug": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/debug/-/debug-0.7.4.tgz", + "integrity": "sha1-BuHqgILCyxTjmAbiLi9vdX+Srzk=", + "dev": true + }, "decamelize": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz", @@ -403,12 +1381,27 @@ "rimraf": "2.2.8" } }, + "detect-indent": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-4.0.0.tgz", + "integrity": "sha1-920GQ1LN9Docts5hnE7jqUdd4gg=", + "dev": true, + "requires": { + "repeating": "2.0.1" + } + }, "electron-to-chromium": { "version": "1.3.16", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.16.tgz", "integrity": "sha1-0OAmc1dUdwkBrjAaIWZMukXZL30=", "dev": true }, + "enable": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/enable/-/enable-1.3.2.tgz", + "integrity": "sha1-nrpoN9FtCYK1n4fYib91REPVKTE=", + "dev": true + }, "escape-string-regexp": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", @@ -421,24 +1414,1031 @@ "integrity": "sha1-luO3DVd59q1JzQMmc9HDEnZ7pYE=", "dev": true }, + "esutils": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.2.tgz", + "integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=", + "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, + "optional": 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, + "optional": true, + "requires": { + "fill-range": "2.2.3" + } + }, + "extend": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.1.tgz", + "integrity": "sha1-p1Xqe8Gt/MWjHOfnYtuq3F5jZEQ=", + "dev": true + }, + "extend-shallow": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz", + "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=", + "dev": true, + "requires": { + "is-extendable": "0.1.1" + } + }, + "extglob": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/extglob/-/extglob-0.3.2.tgz", + "integrity": "sha1-Lhj/PS9JqydlzskCPwEdqo2DSaE=", + "dev": true, + "optional": true, + "requires": { + "is-extglob": "1.0.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, + "optional": 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, + "optional": 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" + } + }, "flatten": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/flatten/-/flatten-1.0.2.tgz", "integrity": "sha1-2uRqnXj74lKSJYzB54CkHZXAN4I=", "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, + "optional": 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, + "optional": true, + "requires": { + "for-in": "1.0.2" + } + }, "fs": { "version": "0.0.1-security", "resolved": "https://registry.npmjs.org/fs/-/fs-0.0.1-security.tgz", "integrity": "sha1-invTcYa23d84E/I4WLV+yq9eQdQ=", "dev": true }, + "fs-extra": { + "version": "0.26.7", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-0.26.7.tgz", + "integrity": "sha1-muH92UiXeY7at20JGM9C0MMYT6k=", + "dev": true, + "requires": { + "graceful-fs": "4.1.11", + "jsonfile": "2.4.0", + "klaw": "1.3.1", + "path-is-absolute": "1.0.1", + "rimraf": "2.2.8" + } + }, + "fs-readdir-recursive": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/fs-readdir-recursive/-/fs-readdir-recursive-1.0.0.tgz", + "integrity": "sha1-jNF0XItPiinIyuw5JHaSG6GV9WA=", + "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 }, + "fsevents": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.1.2.tgz", + "integrity": "sha512-Sn44E5wQW4bTHXvQmvSHwqbuiXtduD6Rrjm2ZtUEGbyrig+nUH3t/QD4M4/ZXViY556TBpRgZkHLDx3JxPwxiw==", + "dev": true, + "optional": true, + "requires": { + "nan": "2.6.2", + "node-pre-gyp": "0.6.36" + }, + "dependencies": { + "abbrev": { + "version": "1.1.0", + "bundled": true, + "dev": true, + "optional": true + }, + "ajv": { + "version": "4.11.8", + "bundled": true, + "dev": true, + "optional": true, + "requires": { + "co": "4.6.0", + "json-stable-stringify": "1.0.1" + } + }, + "ansi-regex": { + "version": "2.1.1", + "bundled": true, + "dev": true + }, + "aproba": { + "version": "1.1.1", + "bundled": true, + "dev": true, + "optional": true + }, + "are-we-there-yet": { + "version": "1.1.4", + "bundled": true, + "dev": true, + "optional": true, + "requires": { + "delegates": "1.0.0", + "readable-stream": "2.2.9" + } + }, + "asn1": { + "version": "0.2.3", + "bundled": true, + "dev": true, + "optional": true + }, + "assert-plus": { + "version": "0.2.0", + "bundled": true, + "dev": true, + "optional": true + }, + "asynckit": { + "version": "0.4.0", + "bundled": true, + "dev": true, + "optional": true + }, + "aws-sign2": { + "version": "0.6.0", + "bundled": true, + "dev": true, + "optional": true + }, + "aws4": { + "version": "1.6.0", + "bundled": true, + "dev": true, + "optional": true + }, + "balanced-match": { + "version": "0.4.2", + "bundled": true, + "dev": true + }, + "bcrypt-pbkdf": { + "version": "1.0.1", + "bundled": true, + "dev": true, + "optional": true, + "requires": { + "tweetnacl": "0.14.5" + } + }, + "block-stream": { + "version": "0.0.9", + "bundled": true, + "dev": true, + "requires": { + "inherits": "2.0.3" + } + }, + "boom": { + "version": "2.10.1", + "bundled": true, + "dev": true, + "requires": { + "hoek": "2.16.3" + } + }, + "brace-expansion": { + "version": "1.1.7", + "bundled": true, + "dev": true, + "requires": { + "balanced-match": "0.4.2", + "concat-map": "0.0.1" + } + }, + "buffer-shims": { + "version": "1.0.0", + "bundled": true, + "dev": true + }, + "caseless": { + "version": "0.12.0", + "bundled": true, + "dev": true, + "optional": true + }, + "co": { + "version": "4.6.0", + "bundled": true, + "dev": true, + "optional": true + }, + "code-point-at": { + "version": "1.1.0", + "bundled": true, + "dev": true + }, + "combined-stream": { + "version": "1.0.5", + "bundled": true, + "dev": true, + "requires": { + "delayed-stream": "1.0.0" + } + }, + "concat-map": { + "version": "0.0.1", + "bundled": true, + "dev": true + }, + "console-control-strings": { + "version": "1.1.0", + "bundled": true, + "dev": true + }, + "core-util-is": { + "version": "1.0.2", + "bundled": true, + "dev": true + }, + "cryptiles": { + "version": "2.0.5", + "bundled": true, + "dev": true, + "optional": true, + "requires": { + "boom": "2.10.1" + } + }, + "dashdash": { + "version": "1.14.1", + "bundled": true, + "dev": true, + "optional": true, + "requires": { + "assert-plus": "1.0.0" + }, + "dependencies": { + "assert-plus": { + "version": "1.0.0", + "bundled": true, + "dev": true, + "optional": true + } + } + }, + "debug": { + "version": "2.6.8", + "bundled": true, + "dev": true, + "optional": true, + "requires": { + "ms": "2.0.0" + } + }, + "deep-extend": { + "version": "0.4.2", + "bundled": true, + "dev": true, + "optional": true + }, + "delayed-stream": { + "version": "1.0.0", + "bundled": true, + "dev": true + }, + "delegates": { + "version": "1.0.0", + "bundled": true, + "dev": true, + "optional": true + }, + "ecc-jsbn": { + "version": "0.1.1", + "bundled": true, + "dev": true, + "optional": true, + "requires": { + "jsbn": "0.1.1" + } + }, + "extend": { + "version": "3.0.1", + "bundled": true, + "dev": true, + "optional": true + }, + "extsprintf": { + "version": "1.0.2", + "bundled": true, + "dev": true + }, + "forever-agent": { + "version": "0.6.1", + "bundled": true, + "dev": true, + "optional": true + }, + "form-data": { + "version": "2.1.4", + "bundled": true, + "dev": true, + "optional": true, + "requires": { + "asynckit": "0.4.0", + "combined-stream": "1.0.5", + "mime-types": "2.1.15" + } + }, + "fs.realpath": { + "version": "1.0.0", + "bundled": true, + "dev": true + }, + "fstream": { + "version": "1.0.11", + "bundled": true, + "dev": true, + "requires": { + "graceful-fs": "4.1.11", + "inherits": "2.0.3", + "mkdirp": "0.5.1", + "rimraf": "2.6.1" + } + }, + "fstream-ignore": { + "version": "1.0.5", + "bundled": true, + "dev": true, + "optional": true, + "requires": { + "fstream": "1.0.11", + "inherits": "2.0.3", + "minimatch": "3.0.4" + } + }, + "gauge": { + "version": "2.7.4", + "bundled": true, + "dev": true, + "optional": true, + "requires": { + "aproba": "1.1.1", + "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" + } + }, + "getpass": { + "version": "0.1.7", + "bundled": true, + "dev": true, + "optional": true, + "requires": { + "assert-plus": "1.0.0" + }, + "dependencies": { + "assert-plus": { + "version": "1.0.0", + "bundled": true, + "dev": true, + "optional": true + } + } + }, + "glob": { + "version": "7.1.2", + "bundled": true, + "dev": true, + "requires": { + "fs.realpath": "1.0.0", + "inflight": "1.0.6", + "inherits": "2.0.3", + "minimatch": "3.0.4", + "once": "1.4.0", + "path-is-absolute": "1.0.1" + } + }, + "graceful-fs": { + "version": "4.1.11", + "bundled": true, + "dev": true + }, + "har-schema": { + "version": "1.0.5", + "bundled": true, + "dev": true, + "optional": true + }, + "har-validator": { + "version": "4.2.1", + "bundled": true, + "dev": true, + "optional": true, + "requires": { + "ajv": "4.11.8", + "har-schema": "1.0.5" + } + }, + "has-unicode": { + "version": "2.0.1", + "bundled": true, + "dev": true, + "optional": true + }, + "hawk": { + "version": "3.1.3", + "bundled": true, + "dev": true, + "optional": true, + "requires": { + "boom": "2.10.1", + "cryptiles": "2.0.5", + "hoek": "2.16.3", + "sntp": "1.0.9" + } + }, + "hoek": { + "version": "2.16.3", + "bundled": true, + "dev": true + }, + "http-signature": { + "version": "1.1.1", + "bundled": true, + "dev": true, + "optional": true, + "requires": { + "assert-plus": "0.2.0", + "jsprim": "1.4.0", + "sshpk": "1.13.0" + } + }, + "inflight": { + "version": "1.0.6", + "bundled": true, + "dev": true, + "requires": { + "once": "1.4.0", + "wrappy": "1.0.2" + } + }, + "inherits": { + "version": "2.0.3", + "bundled": true, + "dev": true + }, + "ini": { + "version": "1.3.4", + "bundled": true, + "dev": true, + "optional": true + }, + "is-fullwidth-code-point": { + "version": "1.0.0", + "bundled": true, + "dev": true, + "requires": { + "number-is-nan": "1.0.1" + } + }, + "is-typedarray": { + "version": "1.0.0", + "bundled": true, + "dev": true, + "optional": true + }, + "isarray": { + "version": "1.0.0", + "bundled": true, + "dev": true + }, + "isstream": { + "version": "0.1.2", + "bundled": true, + "dev": true, + "optional": true + }, + "jodid25519": { + "version": "1.0.2", + "bundled": true, + "dev": true, + "optional": true, + "requires": { + "jsbn": "0.1.1" + } + }, + "jsbn": { + "version": "0.1.1", + "bundled": true, + "dev": true, + "optional": true + }, + "json-schema": { + "version": "0.2.3", + "bundled": true, + "dev": true, + "optional": true + }, + "json-stable-stringify": { + "version": "1.0.1", + "bundled": true, + "dev": true, + "optional": true, + "requires": { + "jsonify": "0.0.0" + } + }, + "json-stringify-safe": { + "version": "5.0.1", + "bundled": true, + "dev": true, + "optional": true + }, + "jsonify": { + "version": "0.0.0", + "bundled": true, + "dev": true, + "optional": true + }, + "jsprim": { + "version": "1.4.0", + "bundled": true, + "dev": true, + "optional": true, + "requires": { + "assert-plus": "1.0.0", + "extsprintf": "1.0.2", + "json-schema": "0.2.3", + "verror": "1.3.6" + }, + "dependencies": { + "assert-plus": { + "version": "1.0.0", + "bundled": true, + "dev": true, + "optional": true + } + } + }, + "mime-db": { + "version": "1.27.0", + "bundled": true, + "dev": true + }, + "mime-types": { + "version": "2.1.15", + "bundled": true, + "dev": true, + "requires": { + "mime-db": "1.27.0" + } + }, + "minimatch": { + "version": "3.0.4", + "bundled": true, + "dev": true, + "requires": { + "brace-expansion": "1.1.7" + } + }, + "minimist": { + "version": "0.0.8", + "bundled": true, + "dev": true + }, + "mkdirp": { + "version": "0.5.1", + "bundled": true, + "dev": true, + "requires": { + "minimist": "0.0.8" + } + }, + "ms": { + "version": "2.0.0", + "bundled": true, + "dev": true, + "optional": true + }, + "node-pre-gyp": { + "version": "0.6.36", + "bundled": true, + "dev": true, + "optional": true, + "requires": { + "mkdirp": "0.5.1", + "nopt": "4.0.1", + "npmlog": "4.1.0", + "rc": "1.2.1", + "request": "2.81.0", + "rimraf": "2.6.1", + "semver": "5.3.0", + "tar": "2.2.1", + "tar-pack": "3.4.0" + } + }, + "nopt": { + "version": "4.0.1", + "bundled": true, + "dev": true, + "optional": true, + "requires": { + "abbrev": "1.1.0", + "osenv": "0.1.4" + } + }, + "npmlog": { + "version": "4.1.0", + "bundled": true, + "dev": true, + "optional": true, + "requires": { + "are-we-there-yet": "1.1.4", + "console-control-strings": "1.1.0", + "gauge": "2.7.4", + "set-blocking": "2.0.0" + } + }, + "number-is-nan": { + "version": "1.0.1", + "bundled": true, + "dev": true + }, + "oauth-sign": { + "version": "0.8.2", + "bundled": true, + "dev": true, + "optional": true + }, + "object-assign": { + "version": "4.1.1", + "bundled": true, + "dev": true, + "optional": true + }, + "once": { + "version": "1.4.0", + "bundled": true, + "dev": true, + "requires": { + "wrappy": "1.0.2" + } + }, + "os-homedir": { + "version": "1.0.2", + "bundled": true, + "dev": true, + "optional": true + }, + "os-tmpdir": { + "version": "1.0.2", + "bundled": true, + "dev": true, + "optional": true + }, + "osenv": { + "version": "0.1.4", + "bundled": true, + "dev": true, + "optional": true, + "requires": { + "os-homedir": "1.0.2", + "os-tmpdir": "1.0.2" + } + }, + "path-is-absolute": { + "version": "1.0.1", + "bundled": true, + "dev": true + }, + "performance-now": { + "version": "0.2.0", + "bundled": true, + "dev": true, + "optional": true + }, + "process-nextick-args": { + "version": "1.0.7", + "bundled": true, + "dev": true + }, + "punycode": { + "version": "1.4.1", + "bundled": true, + "dev": true, + "optional": true + }, + "qs": { + "version": "6.4.0", + "bundled": true, + "dev": true, + "optional": true + }, + "rc": { + "version": "1.2.1", + "bundled": true, + "dev": true, + "optional": true, + "requires": { + "deep-extend": "0.4.2", + "ini": "1.3.4", + "minimist": "1.2.0", + "strip-json-comments": "2.0.1" + }, + "dependencies": { + "minimist": { + "version": "1.2.0", + "bundled": true, + "dev": true, + "optional": true + } + } + }, + "readable-stream": { + "version": "2.2.9", + "bundled": true, + "dev": true, + "requires": { + "buffer-shims": "1.0.0", + "core-util-is": "1.0.2", + "inherits": "2.0.3", + "isarray": "1.0.0", + "process-nextick-args": "1.0.7", + "string_decoder": "1.0.1", + "util-deprecate": "1.0.2" + } + }, + "request": { + "version": "2.81.0", + "bundled": true, + "dev": true, + "optional": 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.15", + "oauth-sign": "0.8.2", + "performance-now": "0.2.0", + "qs": "6.4.0", + "safe-buffer": "5.0.1", + "stringstream": "0.0.5", + "tough-cookie": "2.3.2", + "tunnel-agent": "0.6.0", + "uuid": "3.0.1" + } + }, + "rimraf": { + "version": "2.6.1", + "bundled": true, + "dev": true, + "requires": { + "glob": "7.1.2" + } + }, + "safe-buffer": { + "version": "5.0.1", + "bundled": true, + "dev": true + }, + "semver": { + "version": "5.3.0", + "bundled": true, + "dev": true, + "optional": true + }, + "set-blocking": { + "version": "2.0.0", + "bundled": true, + "dev": true, + "optional": true + }, + "signal-exit": { + "version": "3.0.2", + "bundled": true, + "dev": true, + "optional": true + }, + "sntp": { + "version": "1.0.9", + "bundled": true, + "dev": true, + "optional": true, + "requires": { + "hoek": "2.16.3" + } + }, + "sshpk": { + "version": "1.13.0", + "bundled": true, + "dev": true, + "optional": 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", + "jodid25519": "1.0.2", + "jsbn": "0.1.1", + "tweetnacl": "0.14.5" + }, + "dependencies": { + "assert-plus": { + "version": "1.0.0", + "bundled": true, + "dev": true, + "optional": true + } + } + }, + "string_decoder": { + "version": "1.0.1", + "bundled": true, + "dev": true, + "requires": { + "safe-buffer": "5.0.1" + } + }, + "string-width": { + "version": "1.0.2", + "bundled": true, + "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", + "bundled": true, + "dev": true, + "optional": true + }, + "strip-ansi": { + "version": "3.0.1", + "bundled": true, + "dev": true, + "requires": { + "ansi-regex": "2.1.1" + } + }, + "strip-json-comments": { + "version": "2.0.1", + "bundled": true, + "dev": true, + "optional": true + }, + "tar": { + "version": "2.2.1", + "bundled": true, + "dev": true, + "requires": { + "block-stream": "0.0.9", + "fstream": "1.0.11", + "inherits": "2.0.3" + } + }, + "tar-pack": { + "version": "3.4.0", + "bundled": true, + "dev": true, + "optional": true, + "requires": { + "debug": "2.6.8", + "fstream": "1.0.11", + "fstream-ignore": "1.0.5", + "once": "1.4.0", + "readable-stream": "2.2.9", + "rimraf": "2.6.1", + "tar": "2.2.1", + "uid-number": "0.0.6" + } + }, + "tough-cookie": { + "version": "2.3.2", + "bundled": true, + "dev": true, + "optional": true, + "requires": { + "punycode": "1.4.1" + } + }, + "tunnel-agent": { + "version": "0.6.0", + "bundled": true, + "dev": true, + "optional": true, + "requires": { + "safe-buffer": "5.0.1" + } + }, + "tweetnacl": { + "version": "0.14.5", + "bundled": true, + "dev": true, + "optional": true + }, + "uid-number": { + "version": "0.0.6", + "bundled": true, + "dev": true, + "optional": true + }, + "util-deprecate": { + "version": "1.0.2", + "bundled": true, + "dev": true + }, + "uuid": { + "version": "3.0.1", + "bundled": true, + "dev": true, + "optional": true + }, + "verror": { + "version": "1.3.6", + "bundled": true, + "dev": true, + "optional": true, + "requires": { + "extsprintf": "1.0.2" + } + }, + "wide-align": { + "version": "1.1.2", + "bundled": true, + "dev": true, + "optional": true, + "requires": { + "string-width": "1.0.2" + } + }, + "wrappy": { + "version": "1.0.2", + "bundled": true, + "dev": true + } + } + }, "function-bind": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.0.tgz", @@ -459,6 +2459,32 @@ "path-is-absolute": "1.0.1" } }, + "glob-base": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/glob-base/-/glob-base-0.3.0.tgz", + "integrity": "sha1-27Fk9iIbHAscz4Kuoyi0l98Oo8Q=", + "dev": true, + "optional": 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" + } + }, + "globals": { + "version": "9.18.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-9.18.0.tgz", + "integrity": "sha512-S0nG3CLEQiY/ILxqtztTWH/3iRRdyBLw6KMDxnKMchrtbj2OFmehVh0WUCfW3DUrIgx/qFrJPICrq4Z4sTR9UQ==", + "dev": true + }, "globby": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz", @@ -480,6 +2506,87 @@ } } }, + "graceful-fs": { + "version": "4.1.11", + "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz", + "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=", + "dev": true + }, + "gray-matter": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/gray-matter/-/gray-matter-2.1.1.tgz", + "integrity": "sha1-MELZrewqHe1qdwep7SOA+KF6Qw4=", + "dev": true, + "requires": { + "ansi-red": "0.1.1", + "coffee-script": "1.12.7", + "extend-shallow": "2.0.1", + "js-yaml": "3.9.1", + "toml": "2.3.2" + }, + "dependencies": { + "esprima": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.0.tgz", + "integrity": "sha512-oftTcaMu/EGrEIu904mWteKIv8vMuOgGYo7EhVJJN00R/EED9DCua/xxHRdYnKtcECzVg7xOWhflvJMnqcFZjw==", + "dev": true + }, + "js-yaml": { + "version": "3.9.1", + "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.9.1.tgz", + "integrity": "sha512-CbcG379L1e+mWBnLvHWWeLs8GyV/EMw862uLI3c+GxVyDHWZcjZinwuBd3iW2pgxgIlksW/1vNJa4to+RvDOww==", + "dev": true, + "requires": { + "argparse": "1.0.9", + "esprima": "4.0.0" + } + } + } + }, + "handlebars": { + "version": "4.0.10", + "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.0.10.tgz", + "integrity": "sha1-PTDHGLCaPZbyPqTMH0A8TTup/08=", + "dev": true, + "requires": { + "async": "1.5.2", + "optimist": "0.6.1", + "source-map": "0.4.4", + "uglify-js": "2.8.29" + }, + "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" + } + }, + "uglify-js": { + "version": "2.8.29", + "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-2.8.29.tgz", + "integrity": "sha1-KcVzMUgFe7Th913zW3qcty5qWd0=", + "dev": true, + "optional": true, + "requires": { + "source-map": "0.5.6", + "uglify-to-browserify": "1.0.2", + "yargs": "3.10.0" + }, + "dependencies": { + "source-map": { + "version": "0.5.6", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz", + "integrity": "sha1-dc449SvwczxafwwRjYEzSiu19BI=", + "dev": true, + "optional": true + } + } + } + } + }, "has": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/has/-/has-1.0.1.tgz", @@ -504,6 +2611,22 @@ "integrity": "sha1-6CB68cx7MNRGzHC3NLXovhj4jVE=", "dev": true }, + "has-generators": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/has-generators/-/has-generators-1.0.1.tgz", + "integrity": "sha1-pqLlVIYBGUBILhPiyTeRxEms9Ek=", + "dev": true + }, + "home-or-tmp": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/home-or-tmp/-/home-or-tmp-2.0.0.tgz", + "integrity": "sha1-42w/LSyufXRqhX440Y1fMqeILbg=", + "dev": true, + "requires": { + "os-homedir": "1.0.2", + "os-tmpdir": "1.0.2" + } + }, "html-comment-regex": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/html-comment-regex/-/html-comment-regex-1.1.1.tgz", @@ -532,12 +2655,109 @@ "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", "dev": true }, + "inputformat-to-jstransformer": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/inputformat-to-jstransformer/-/inputformat-to-jstransformer-1.2.1.tgz", + "integrity": "sha1-Tg88DJ/WGzBYAbJpRLECVtSnYOs=", + "dev": true, + "requires": { + "require-one": "1.0.3" + } + }, + "invariant": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.2.tgz", + "integrity": "sha1-nh9WrArNtr8wMwbzOL47IErmA2A=", + "dev": true, + "requires": { + "loose-envify": "1.3.1" + } + }, + "is": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/is/-/is-3.2.1.tgz", + "integrity": "sha1-0Kwq1V63sL7JJqUmb2xmKqqD3KU=", + "dev": true + }, "is-absolute-url": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/is-absolute-url/-/is-absolute-url-2.1.0.tgz", "integrity": "sha1-UFMN+4T8yap9vnhS6Do3uTufKqY=", "dev": true }, + "is-binary-path": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-1.0.1.tgz", + "integrity": "sha1-dfFmQrSA8YenEcgUFh/TpKdlWJg=", + "dev": true, + "optional": true, + "requires": { + "binary-extensions": "1.9.0" + } + }, + "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-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, + "optional": 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, + "optional": 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-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, + "optional": true, + "requires": { + "kind-of": "3.2.2" + } + }, "is-path-cwd": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-path-cwd/-/is-path-cwd-1.0.0.tgz", @@ -568,6 +2788,25 @@ "integrity": "sha1-caUMhCnfync8kqOQpKA7OfzVHT4=", "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, + "optional": 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-promise": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.1.0.tgz", + "integrity": "sha1-eaKp7OfwlugPNtKy87wWwf9L8/o=", + "dev": true + }, "is-svg": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/is-svg/-/is-svg-2.1.0.tgz", @@ -577,12 +2816,40 @@ "html-comment-regex": "1.1.1" } }, + "is-utf8": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.1.tgz", + "integrity": "sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=", + "dev": true + }, + "isarray": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", + "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=", + "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, + "optional": true, + "requires": { + "isarray": "1.0.0" + } + }, "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 }, + "js-tokens": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz", + "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=", + "dev": true + }, "js-yaml": { "version": "3.7.0", "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.7.0.tgz", @@ -593,30 +2860,253 @@ "esprima": "2.7.3" } }, + "jsesc": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-1.3.0.tgz", + "integrity": "sha1-RsP+yMGJKxKwgz25vHYiF226s0s=", + "dev": true + }, + "json5": { + "version": "0.5.1", + "resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz", + "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=", + "dev": true + }, + "jsonfile": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-2.4.0.tgz", + "integrity": "sha1-NzaitCi4e72gzIO1P6PWM6NcKug=", + "dev": true, + "requires": { + "graceful-fs": "4.1.11" + } + }, + "jstransformer": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/jstransformer/-/jstransformer-1.0.0.tgz", + "integrity": "sha1-7Yvwkh4vPx7U1cGkT2hwntJHIsM=", + "dev": true, + "requires": { + "is-promise": "2.1.0", + "promise": "7.3.1" + } + }, + "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" + } + }, + "klaw": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/klaw/-/klaw-1.3.1.tgz", + "integrity": "sha1-QIhDO0azsbolnXh4XY6W9zugJDk=", + "dev": true, + "requires": { + "graceful-fs": "4.1.11" + } + }, + "lazy-cache": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/lazy-cache/-/lazy-cache-1.0.4.tgz", + "integrity": "sha1-odePw6UEdMuAhF07O24dpJpEbo4=", + "dev": true, + "optional": true + }, + "lodash": { + "version": "4.17.4", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz", + "integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4=", + "dev": true + }, "lodash.memoize": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz", "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=", "dev": true }, + "lodash.omit": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/lodash.omit/-/lodash.omit-4.5.0.tgz", + "integrity": "sha1-brGa5aHuHdnfC5aeZs4Lf6MLXmA=", + "dev": true + }, "lodash.uniq": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz", "integrity": "sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=", "dev": true }, + "longest": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz", + "integrity": "sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=", + "dev": true + }, + "loose-envify": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.3.1.tgz", + "integrity": "sha1-0aitM/qc4OcT1l/dCsi3SNR4yEg=", + "dev": true, + "requires": { + "js-tokens": "3.0.2" + } + }, "macaddress": { "version": "0.2.8", "resolved": "https://registry.npmjs.org/macaddress/-/macaddress-0.2.8.tgz", "integrity": "sha1-WQTcU3w57G2+/q6QIycTX6hRHxI=", "dev": true }, + "marked": { + "version": "0.3.6", + "resolved": "https://registry.npmjs.org/marked/-/marked-0.3.6.tgz", + "integrity": "sha1-ssbGGPzOzk74bE/Gy4p8v1rtqNc=", + "dev": true + }, "math-expression-evaluator": { "version": "1.2.17", "resolved": "https://registry.npmjs.org/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz", "integrity": "sha1-3oGf282E3M2PrlnGrreWFbnSZqw=", "dev": true }, + "metalsmith": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/metalsmith/-/metalsmith-2.3.0.tgz", + "integrity": "sha1-gzr7taKmOF4tmuPZNeOeM+rqUjE=", + "dev": true, + "requires": { + "absolute": "0.0.1", + "chalk": "1.1.3", + "clone": "1.0.2", + "co-fs-extra": "1.2.1", + "commander": "2.11.0", + "gray-matter": "2.1.1", + "has-generators": "1.0.1", + "is": "3.2.1", + "is-utf8": "0.2.1", + "recursive-readdir": "2.2.1", + "rimraf": "2.2.8", + "stat-mode": "0.2.2", + "thunkify": "2.1.2", + "unyield": "0.0.1", + "ware": "1.3.0", + "win-fork": "1.1.1" + }, + "dependencies": { + "ansi-styles": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz", + "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=", + "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" + } + }, + "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 + } + } + }, + "metalsmith-engine-jstransformer": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/metalsmith-engine-jstransformer/-/metalsmith-engine-jstransformer-0.1.2.tgz", + "integrity": "sha512-zDl9q8wvvrk08d5C1Ql93Q/UakDgHuIN8RMRBupb/XuQ1Aj6SeCl4eXNS+sGnuqHa7b7v4ulYJYYLnQHRRFh3g==", + "dev": true, + "requires": { + "babel-cli": "6.24.1", + "babel-preset-env": "1.6.0", + "extend": "3.0.1", + "inputformat-to-jstransformer": "1.2.1", + "is-utf8": "0.2.1", + "jstransformer": "1.0.0" + } + }, + "metalsmith-in-place": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/metalsmith-in-place/-/metalsmith-in-place-3.0.1.tgz", + "integrity": "sha512-8bg+Sh+5z+iT0CknH8xnw5nWZ+M/h1nZEzgaGdih0vWE/wc+b18DVNRJYpxjbx5YmYvzVMu/jWWUz5c8XBzk7Q==", + "dev": true, + "requires": { + "metalsmith-engine-jstransformer": "0.1.2", + "multimatch": "2.1.0" + } + }, + "metalsmith-layouts": { + "version": "1.8.1", + "resolved": "https://registry.npmjs.org/metalsmith-layouts/-/metalsmith-layouts-1.8.1.tgz", + "integrity": "sha1-o2XTmTnZFGzf5R+t7n2HVXP8y9w=", + "dev": true, + "requires": { + "async": "1.5.2", + "consolidate": "0.14.5", + "debug": "2.6.8", + "extend": "3.0.1", + "fs-readdir-recursive": "1.0.0", + "is-utf8": "0.2.1", + "lodash.omit": "4.5.0", + "multimatch": "2.1.0" + }, + "dependencies": { + "debug": { + "version": "2.6.8", + "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.8.tgz", + "integrity": "sha1-5zFTHKLt4n0YgiJCfaF4IdaP9Pw=", + "dev": true, + "requires": { + "ms": "2.0.0" + } + } + } + }, + "metalsmith-markdown": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/metalsmith-markdown/-/metalsmith-markdown-0.2.1.tgz", + "integrity": "sha1-Gh/utsdtFUB7dScdqBUJ0Hky11M=", + "dev": true, + "requires": { + "debug": "0.7.4", + "marked": "0.3.6" + } + }, + "micromatch": { + "version": "2.3.11", + "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-2.3.11.tgz", + "integrity": "sha1-hmd8l9FyCzY0MdBNDRUpO9OMFWU=", + "dev": true, + "optional": 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" + } + }, "minimatch": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", @@ -641,6 +3131,40 @@ "minimist": "0.0.8" } }, + "ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=", + "dev": true + }, + "multimatch": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/multimatch/-/multimatch-2.1.0.tgz", + "integrity": "sha1-nHkGoi+0wCkZ4vX3UWG0zb1LKis=", + "dev": true, + "requires": { + "array-differ": "1.0.0", + "array-union": "1.0.2", + "arrify": "1.0.1", + "minimatch": "3.0.4" + } + }, + "nan": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/nan/-/nan-2.6.2.tgz", + "integrity": "sha1-5P805slf37WuzAjeZZb0NgWn20U=", + "dev": true, + "optional": true + }, + "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.0.2" + } + }, "normalize-range": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz", @@ -665,12 +3189,29 @@ "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 + }, "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 }, + "object.omit": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/object.omit/-/object.omit-2.0.1.tgz", + "integrity": "sha1-Gpx0SCnznbuFjHbKNXmuKlTr0fo=", + "dev": true, + "optional": true, + "requires": { + "for-own": "0.1.5", + "is-extendable": "0.1.1" + } + }, "once": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", @@ -680,12 +3221,58 @@ "wrappy": "1.0.2" } }, + "optimist": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/optimist/-/optimist-0.6.1.tgz", + "integrity": "sha1-2j6nRob6IaGaERwybpDrFaAZZoY=", + "dev": true, + "requires": { + "minimist": "0.0.8", + "wordwrap": "0.0.3" + } + }, + "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-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 + }, + "output-file-sync": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/output-file-sync/-/output-file-sync-1.1.2.tgz", + "integrity": "sha1-0KM+7+YaIF+suQCS6CZZjVJFznY=", + "dev": true, + "requires": { + "graceful-fs": "4.1.11", + "mkdirp": "0.5.1", + "object-assign": "4.1.1" + } + }, "p-map": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/p-map/-/p-map-1.1.1.tgz", "integrity": "sha1-BfXkrpegaDcbwqXMhr+9vBnErno=", "dev": true }, + "parse-glob": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/parse-glob/-/parse-glob-3.0.4.tgz", + "integrity": "sha1-ssN2z7EfNVE7rdFz7wu246OIORw=", + "dev": true, + "optional": true, + "requires": { + "glob-base": "0.3.0", + "is-dotfile": "1.0.3", + "is-extglob": "1.0.0", + "is-glob": "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", @@ -2439,6 +5026,35 @@ "integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=", "dev": true }, + "preserve": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/preserve/-/preserve-0.2.0.tgz", + "integrity": "sha1-gV7R9uvGWSb4ZbMQwHE7yzMVzks=", + "dev": true, + "optional": true + }, + "private": { + "version": "0.1.7", + "resolved": "https://registry.npmjs.org/private/-/private-0.1.7.tgz", + "integrity": "sha1-aM5eih7woju1cMwoU3tTMqumPvE=", + "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, + "optional": true + }, + "promise": { + "version": "7.3.1", + "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz", + "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==", + "dev": true, + "requires": { + "asap": "2.0.6" + } + }, "q": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/q/-/q-1.5.0.tgz", @@ -2455,6 +5071,51 @@ "strict-uri-encode": "1.1.0" } }, + "randomatic": { + "version": "1.1.7", + "resolved": "https://registry.npmjs.org/randomatic/-/randomatic-1.1.7.tgz", + "integrity": "sha512-D5JUjPyJbaJDkuAazpVnSfVkLlpeO3wDlPROTMLGKG1zMFNFRgrciKo1ltz/AzNTkqE0HzDx655QOL51N06how==", + "dev": true, + "optional": 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, + "optional": 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, + "optional": 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, + "optional": true, + "requires": { + "is-buffer": "1.1.5" + } + } + } + }, "read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -2472,6 +5133,55 @@ } } }, + "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, + "optional": 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" + } + }, + "readdirp": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-2.1.0.tgz", + "integrity": "sha1-TtCtBg3zBzMAxIRANz9y0cxkLXg=", + "dev": true, + "optional": true, + "requires": { + "graceful-fs": "4.1.11", + "minimatch": "3.0.4", + "readable-stream": "2.3.3", + "set-immediate-shim": "1.0.1" + } + }, + "recursive-readdir": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.1.tgz", + "integrity": "sha1-kO8jHQd4xc4JPJpI105cVCLROpk=", + "dev": true, + "requires": { + "minimatch": "3.0.3" + }, + "dependencies": { + "minimatch": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.3.tgz", + "integrity": "sha1-Kk5AkLlrLbBqnX3wEFWmKnfJt3Q=", + "dev": true, + "requires": { + "brace-expansion": "1.1.8" + } + } + } + }, "reduce-css-calc": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/reduce-css-calc/-/reduce-css-calc-1.3.0.tgz", @@ -2508,6 +5218,107 @@ } } }, + "regenerate": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.3.2.tgz", + "integrity": "sha1-0ZQcZ7rUN+G+dkM63Vs4X5WxkmA=", + "dev": true + }, + "regenerator-runtime": { + "version": "0.10.5", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz", + "integrity": "sha1-M2w+/BIgrc7dosn6tntaeVWjNlg=", + "dev": true + }, + "regenerator-transform": { + "version": "0.9.11", + "resolved": "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.9.11.tgz", + "integrity": "sha1-On0GdSDLe3F2dp61/4aGkb7+EoM=", + "dev": true, + "requires": { + "babel-runtime": "6.25.0", + "babel-types": "6.25.0", + "private": "0.1.7" + } + }, + "regex-cache": { + "version": "0.4.3", + "resolved": "https://registry.npmjs.org/regex-cache/-/regex-cache-0.4.3.tgz", + "integrity": "sha1-mxpsNdTQ3871cRrmUejp09cRQUU=", + "dev": true, + "optional": true, + "requires": { + "is-equal-shallow": "0.1.3", + "is-primitive": "2.0.0" + } + }, + "regexpu-core": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-2.0.0.tgz", + "integrity": "sha1-SdA4g3uNz4v6W5pCE5k45uoq4kA=", + "dev": true, + "requires": { + "regenerate": "1.3.2", + "regjsgen": "0.2.0", + "regjsparser": "0.1.5" + } + }, + "regjsgen": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.2.0.tgz", + "integrity": "sha1-bAFq3qxVT3WCP+N6wFuS1aTtsfc=", + "dev": true + }, + "regjsparser": { + "version": "0.1.5", + "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.1.5.tgz", + "integrity": "sha1-fuj4Tcb6eS0/0K4ijSS9lJ6tIFw=", + "dev": true, + "requires": { + "jsesc": "0.5.0" + }, + "dependencies": { + "jsesc": { + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz", + "integrity": "sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0=", + "dev": true + } + } + }, + "remove-trailing-separator": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.0.2.tgz", + "integrity": "sha1-abBi2XhyetFNxrVrpKt3L9jXBRE=", + "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" + } + }, + "require-one": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/require-one/-/require-one-1.0.3.tgz", + "integrity": "sha1-Dv68zpgP78PfhM4A8mnhnItvSZA=", + "dev": true + }, "resolve": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.4.0.tgz", @@ -2517,12 +5328,47 @@ "path-parse": "1.0.5" } }, + "right-align": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/right-align/-/right-align-0.1.3.tgz", + "integrity": "sha1-YTObci/mo1FWiSENJOFMlhSGE+8=", + "dev": true, + "optional": true, + "requires": { + "align-text": "0.1.4" + } + }, "rimraf": { "version": "2.2.8", "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.2.8.tgz", "integrity": "sha1-5Dm+Kq7jJzIZUnMPmaiSnk/FBYI=", "dev": true }, + "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 + }, + "semver": { + "version": "5.4.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.4.1.tgz", + "integrity": "sha512-WfG/X9+oATh81XtllIo/I8gOiY9EXRdv1cQdyykeXK17YcUW3EXUAi2To4pcH6nZtJPr7ZOpM5OMyWJZm+8Rsg==", + "dev": true + }, + "set-immediate-shim": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz", + "integrity": "sha1-SysbJ+uAip+NzEgaWOXlb1mfP2E=", + "dev": true, + "optional": true + }, + "slash": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/slash/-/slash-1.0.0.tgz", + "integrity": "sha1-xB8vbDn8FtHNF61LXYlhFK5HDVU=", + "dev": true + }, "sort-keys": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-1.1.2.tgz", @@ -2538,18 +5384,43 @@ "integrity": "sha1-dc449SvwczxafwwRjYEzSiu19BI=", "dev": true }, + "source-map-support": { + "version": "0.4.15", + "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.4.15.tgz", + "integrity": "sha1-AyAt9lwG0r2MfsI2KhkwVv7407E=", + "dev": true, + "requires": { + "source-map": "0.5.6" + } + }, "sprintf-js": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz", "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=", "dev": true }, + "stat-mode": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/stat-mode/-/stat-mode-0.2.2.tgz", + "integrity": "sha1-5sgLYjEj19gM8TLOU480YokHJQI=", + "dev": true + }, "strict-uri-encode": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz", "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=", "dev": true }, + "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, + "optional": true, + "requires": { + "safe-buffer": "5.1.1" + } + }, "strip-ansi": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", @@ -2591,6 +5462,39 @@ } } }, + "thunkify": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/thunkify/-/thunkify-2.1.2.tgz", + "integrity": "sha1-+qDp0jDFGsyVyhOjYawFyn4EVT0=", + "dev": true + }, + "thunkify-wrap": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/thunkify-wrap/-/thunkify-wrap-1.0.4.tgz", + "integrity": "sha1-tSvlSN3+/aIOALWMYJZ2K0PdaIA=", + "dev": true, + "requires": { + "enable": "1.3.2" + } + }, + "to-fast-properties": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-1.0.3.tgz", + "integrity": "sha1-uDVx+k2MJbguIxsG46MFXeTKGkc=", + "dev": true + }, + "toml": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/toml/-/toml-2.3.2.tgz", + "integrity": "sha1-Xt7VykKIeSSUn9BusOlVZWAB6DQ=", + "dev": true + }, + "trim-right": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/trim-right/-/trim-right-1.0.1.tgz", + "integrity": "sha1-yy4SAwZ+DI3h9hQJS5/kVwTqYAM=", + "dev": true + }, "uglify-js": { "version": "3.0.27", "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.0.27.tgz", @@ -2601,6 +5505,13 @@ "source-map": "0.5.6" } }, + "uglify-to-browserify": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz", + "integrity": "sha1-bgkk1r2mta/jSeOabWMoUKD4grc=", + "dev": true, + "optional": true + }, "uniq": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/uniq/-/uniq-1.0.1.tgz", @@ -2622,23 +5533,104 @@ "integrity": "sha1-/+3ks2slKQaW5uFl1KWe25mOawI=", "dev": true }, + "unyield": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/unyield/-/unyield-0.0.1.tgz", + "integrity": "sha1-FQ5l2kK/d0JEW5WKZOubhdHSsYA=", + "dev": true, + "requires": { + "co": "3.1.0" + } + }, + "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, + "optional": 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" + } + }, "vendors": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/vendors/-/vendors-1.0.1.tgz", "integrity": "sha1-N61zyO5Bf7PVgOeFMSMH0nSEfyI=", "dev": true }, + "ware": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/ware/-/ware-1.3.0.tgz", + "integrity": "sha1-0bFPOdLiy0q4xAmPdW/ksWTkc9Q=", + "dev": true, + "requires": { + "wrap-fn": "0.1.5" + } + }, "whet.extend": { "version": "0.9.9", "resolved": "https://registry.npmjs.org/whet.extend/-/whet.extend-0.9.9.tgz", "integrity": "sha1-+HfVv2SMl+WqVC+twW1qJZucEaE=", "dev": true }, + "win-fork": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/win-fork/-/win-fork-1.1.1.tgz", + "integrity": "sha1-j1jgZW/KAK3IyGoriePNLWotXl4=", + "dev": true + }, + "window-size": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/window-size/-/window-size-0.1.0.tgz", + "integrity": "sha1-VDjNLqk7IC76Ohn+iIeu58lPnJ0=", + "dev": true, + "optional": true + }, + "wordwrap": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz", + "integrity": "sha1-o9XabNXAvAAI03I0u68b7WMFkQc=", + "dev": true + }, + "wrap-fn": { + "version": "0.1.5", + "resolved": "https://registry.npmjs.org/wrap-fn/-/wrap-fn-0.1.5.tgz", + "integrity": "sha1-8htuQQFv9KfjFyDbxjoJAWvfmEU=", + "dev": true, + "requires": { + "co": "3.1.0" + } + }, "wrappy": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", "dev": true + }, + "yargs": { + "version": "3.10.0", + "resolved": "https://registry.npmjs.org/yargs/-/yargs-3.10.0.tgz", + "integrity": "sha1-9+572FfdfB0tOMDnTvvWgdFDH9E=", + "dev": true, + "optional": true, + "requires": { + "camelcase": "1.2.1", + "cliui": "2.1.0", + "decamelize": "1.2.0", + "window-size": "0.1.0" + } } } } diff --git a/package.json b/package.json index 40f0dc837..b379c55bf 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "shoelace-css", "description": "A back to the basics CSS starter kit.", - "version": "1.0.0-beta9", + "version": "1.0.0-beta10", "author": "Cory LaViska", "homepage": "https://shoelace.style/", "license": "MIT", @@ -16,6 +16,11 @@ "cssnano": "^3.10.0", "del": "^3.0.0", "fs": "0.0.1-security", + "handlebars": "^4.0.10", + "metalsmith": "^2.3.0", + "metalsmith-in-place": "^3.0.1", + "metalsmith-layouts": "^1.8.1", + "metalsmith-markdown": "^0.2.1", "postcss": "^6.0.8", "postcss-import": "^10.0.0", "uglify-js": "^3.0.27" diff --git a/docs.css b/source/css/_docs.css similarity index 61% rename from docs.css rename to source/css/_docs.css index 38c0eec31..e5a0eec90 100644 --- a/docs.css +++ b/source/css/_docs.css @@ -2,10 +2,78 @@ body { border-top: solid .3rem var(--color-aqua); } -main { - max-width: 45rem; - padding: 1rem; +#head { + margin: var(--component-spacing-big) 0; +} + +#head img { + width: 24rem; + vertical-align: middle; +} + +#wrap { + max-width: 60rem; + padding: 0 2rem; margin: 2rem auto; + display: grid; + grid-template-columns: 12rem calc(100% - 12rem); +} + +#nav { + text-align: right; + border-right: solid var(--component-border-width) var(--component-border-color); + padding-right: 1rem; + margin-right: 2rem; +} + +#nav a { + border-radius: var(--component-border-radius); + margin: .5rem 0; + display: block; +} + +#nav a.current { + color: var(--text-muted); + cursor: default; +} + +#nav a.current:hover { + +} + +#foot { + text-align: center; + margin: var(--component-spacing-big) 0; +} + +#foot img { + width: 14rem; + display: inline-block; + margin: .5rem 0; +} + +#homepage #wrap { + max-width: 48rem; + display: block; +} + +@media (max-width: 60rem) { + #wrap { + padding: 0 1rem; + display: block; + } + + #nav { + font-size: .9rem; + border: none; + text-align: center; + margin: 0 0 2rem 0; + } + + #nav a { + margin: .3rem; + display: inline-block; + } } h1[id]:not(:first-child), @@ -20,45 +88,14 @@ h4[id] { color: var(--color-gray); } -h1 img { - width: 24rem; - vertical-align: middle; +pre { + margin-bottom: 1rem !important; /* Prism overrides our bottom margin */ } -header { - border-bottom: solid var(--component-border-width) var(--component-border-color); - padding-bottom: var(--component-spacing); - margin-bottom: var(--component-spacing-big); -} - -footer { - border-top: solid var(--component-border-width) var(--component-border-color); - text-align: center; - padding-top: var(--component-spacing-big); - margin-top: var(--component-spacing-big); -} - -footer img { - width: 16rem; -} - -/* Main headings and bookmark links */ -h2[id] { - border-bottom: solid var(--component-border-width) var(--component-border-color); - padding-bottom: .25rem; - margin-bottom: 1rem; -} - -a.bookmark { - width: 1em; - text-align: right; - color: var(--color-silver); - margin-left: -1em; - display: inline-block; -} - -a.bookmark:hover { - text-decoration: none; +pre code { + white-space: pre; + padding: 0; + display: block; } @media (max-width: 45rem) { diff --git a/source/css/_homepage.css b/source/css/_homepage.css new file mode 100644 index 000000000..4241c3402 --- /dev/null +++ b/source/css/_homepage.css @@ -0,0 +1,35 @@ +body { + border-top: solid .3rem var(--color-aqua); +} + +#head { + margin: var(--component-spacing-big) 0; +} + +#head img { + width: 24rem; + vertical-align: middle; +} + +#wrap { + max-width: 48rem; + padding: 0 2rem; + margin: 2rem auto; +} + +pre { + margin-bottom: 1rem !important; /* Prism overrides our bottom margin */ +} + +pre code { + white-space: pre; + padding: 0; + display: block; +} + +@media (max-width: 60rem) { + #wrap { + padding: 0 1rem; + display: block; + } +} diff --git a/source/docs/alerts.md b/source/docs/alerts.md new file mode 100644 index 000000000..704a92352 --- /dev/null +++ b/source/docs/alerts.md @@ -0,0 +1,25 @@ +--- +layout: default.html +title: Alerts +description: Call attention in your app with alerts. +--- + +## Alerts + +Create an alert by applying the `alert` class to an element such as a `
`. You can change an alert’s appearance using the `alert-*` modifier. + +```html +
Default
+
Success
+
Info +
Warning
+
Danger
+
Inverse
+``` + +
This is a default alert with link
+
This is a success alert with link
+
This is an info alert with link
+
This is a warning alert with link
+
This is a danger alert with link
+
This is an inverse alert with link
diff --git a/source/docs/attribution.md b/source/docs/attribution.md new file mode 100644 index 000000000..8d73bc934 --- /dev/null +++ b/source/docs/attribution.md @@ -0,0 +1,16 @@ +--- +layout: default.html +title: Attribution +description: Meet the people and organizations that make Shoelace.css possible. +--- + +## Attribution + +Special thanks to the following individuals and organizations for their contributions to Shoelace.css. + +- [Cory LaViska](https://twitter.com/claviska) – for creating this project +- [Adam K Olson](https://twitter.com/adamkolson) – for designing the logo with a single shoelaces +- [Bootstrap](https://getbootstrap.com/) – for inspiration +- [cdnjs.com](https://cdnjs.com/) – for providing an awesome CDN service +- [GitHub](https://github.com/) – for hosting this and many other open source projects +- [Surreal CMS](https://www.surrealcms.com/) – for sponsoring development diff --git a/source/docs/badges.md b/source/docs/badges.md new file mode 100644 index 000000000..86b234e57 --- /dev/null +++ b/source/docs/badges.md @@ -0,0 +1,41 @@ +--- +layout: default.html +title: Badges +description: Add badges to your app with minimal effort. +--- + +## Badges + +Create a badge by applying the `badge` class to an element such as a ``. You can change a badge’s appearance using the `badge-*` modifier. + +```html +Default +Success +Info +Warning +Danger +Inverse +``` + +

+ Default + Success + Info + Warning + Danger + Inverse +

+ +By default, badges are sized relative to their parent element. + +```html +

Heading 1 Badge

+

Heading 2 Badge

+

Heading 3 Badge

+

Paragraph Badge

+``` + +

Heading 1 Badge

+

Heading 2 Badge

+

Heading 3 Badge

+

Paragraph Badge

diff --git a/source/docs/browser-support.md b/source/docs/browser-support.md new file mode 100644 index 000000000..8bcf85005 --- /dev/null +++ b/source/docs/browser-support.md @@ -0,0 +1,19 @@ +--- +layout: default.html +title: Browser Support +description: Learn about browser support and polyfills for older browsers. +--- + +## Browser Support + +> TL;DR — you can use Shoelace _today_ if you don’t care about Internet Explorer and older browsers (Edge is fine). If you need to support older browsers, just make sure to use a [grid system](#grid-system) and [Myth](http://www.myth.io/) as a polyfill. + +Browser support for CSS variables is [pretty good](http://caniuse.com/#feat=css-variables), but if you need to support Internet Explorer, consider using [Myth](http://www.myth.io/) as a polyfill. Myth lets you write standards-compliant CSS and “fixes” it for unsupportive browsers. + +Browser support for the CSS Grid is [very good](http://caniuse.com/#feat=css-grid), but if you need to support older browsers you can use a [grid system](#grid-system) instead. + +Browser support for `calc` is [excellent](http://caniuse.com/#feat=calc). Shoelace uses this internally for relative calculations. You can use it along with CSS variables too. + +Browser support for color modifiers is non-existent. [There is a draft](https://drafts.csswg.org/css-color/#modifying-colors), so hopefully that will change soon. Shoelace doesn’t use this feature, but it will when support improves. + +Browser support for custom media queries is non-existent. [There is a draft](https://drafts.csswg.org/mediaqueries-5/#custom-mq), so hopefully that will change soon. Shoelace doesn’t use this feature, but it will when support improves. diff --git a/source/docs/buttons.md b/source/docs/buttons.md new file mode 100644 index 000000000..c3eece64e --- /dev/null +++ b/source/docs/buttons.md @@ -0,0 +1,90 @@ +--- +layout: default.html +title: Buttons +description: Add styled buttons to your app with minimal effort. +--- + +## Buttons + +To create a button, use the ` + + + + + + +``` + +
+ + + + + + + +
+ +Use the `button-small` and `button-big` modifiers to change the size of a button. + +
+ + + +
+ +Use the `button-block` modifier to make the button span the entire width of its parent element. You can also mix and match modifiers as needed. + +
+ +
+ +
+ +
+ +
+ +
+ +Disabled buttons look like this. Set the `disabled` property on ` + + + + + +
+ +You can force buttons to have an active state by applying the `active` class. + +
+ + + + + + +
+ +### File Buttons + +File inputs are notoriously hard to style properly in every browser. Shoelace offers file buttons as an alternative. These are much easier to style consistently, but come with the caveat that the name (or number) of files selected will not be automatically shown to the user. This aspect of a file button’s UX can be handled effectively with JavaScript, but this is left as an [exercise for the user](https://stackoverflow.com/questions/2189615/how-to-get-file-name-when-user-select-a-file-via-input-type-file). + +File buttons are simply `
    ` + +1. List item 1 +2. List item 2 + 1. Nested item 1 + 2. Nested item 2 + 3. Nested item 3 +3. List item 3 + +### Unordered Lists `
+``` + +
+
+ +
+ Item 1 + Item 2 + Item 3 + Checked + Disabled +
+ More... +
+
+
+ +Use the `dropdown-top` and `dropdown-left` modifiers to change the positioning of the menu. You can combine these modifiers as needed. + +```html +
+ ... +
+ +
+ ... +
+ +
+ ... +
+``` + +
+
+ +
+ Item 1 + Item 2 + Item 3 +
+
+ +
+ +
+ Item 1 + Item 2 + Item 3 +
+
+ +
+ +
+ Item 1 + Item 2 + Item 3 +
+
+
+ +Dropdowns with button triggers can be used inside input groups. + +
+ $ + +
+ +
+ USD + AUD + CAD + GBP +
+
+
+ +### Events + +Dropdowns require `shoelace.js` to make them interactive. You don’t need to initialize them. Simply include the script and everything “just works.” + +There is no JavaScript API. Shoelace’s philosophy believes that custom components should act like native components as much as possible. You can, however, listen for various events: + +- `show` – Fires when a dropdown is shown. +- `hide` – Fires when a dropdown is hidden. +- `select` – Fires when a dropdown menu item is selected. The second callback argument is a reference to the respective menu item. + +This example will log all three events for a dropdown with an id of `my-dropdown`. + +```javascript +$('#my-dropdown') + .on('show', function(event) { + console.log('show', event.target); + }) + .on('hide', function(event) { + console.log('hide', event.target); + }) + .on('select', function(event, item) { + console.log('select', event.target, item); + }); +``` diff --git a/source/docs/forms.md b/source/docs/forms.md new file mode 100644 index 000000000..d0f25a6b5 --- /dev/null +++ b/source/docs/forms.md @@ -0,0 +1,343 @@ +--- +layout: default.html +title: Forms +description: Default form control styles. +--- + +## Forms + +Shoelace gives you beautiful forms without hassle. Most form controls don’t need a special class for styling. + +### Form Controls + +Form controls are styled at 100% of the width of their parent element. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Input TypeExample
<input type="checkbox"> +
+ +
<input type="color">
<input type="date">
<input type="email">
+ <input type="file"> +
+ + File inputs aren’t supported. Use a file button instead. + + 		+ +
<input type="number">
<input type="password">
<input type="radio"> +
+ +
<input type="range">
<input type="search">
<input type="text">
<input type="time">
<progress></progress>
<select> + +
<textarea>
+ +You can change the size of most form controls with the `input-small` and `input-big` modifiers. + +```html + + + + + + + +``` + +
+

+

+

+

+

+

+
+ +Disabled form controls look like this: + +
+ +
+ +
+ + +
+ +Read-only form controls look like this: + +
+ +
+ +### Form Control Spacing + +For proper spacing of individual form controls, wrap them in `input-single` containers. + +```html +
+ + +
+ +
+ + +
+ +
+ +
+``` + +
+ + +
+ +
+ + +
+ +
+ +
+ +### Input Groups + +Form controls and buttons can be grouped by wrapping them in `input-group` containers. + +```html +
+ + +
+ +
+ + +
+ +
+ + + + +
+ +
+ + + +
+``` + +
+
+ + +
+
+ +
+
+ + +
+
+ +
+
+ + + + +
+
+ +
+
+ + + +
+
+ +### Input Addons + +To create an input addon, use ``. Addons can appear anywhere inside an input group. Use the `input-addon-small` and `input-addon-big` modifiers to change the size to match adjacent form controls. + +```html +
+ $ + + .00 +
+ +
+ $ + + .00 +
+ +
+ $ + + .00 +
+``` + +
+
+ $ + + .00 +
+
+ +
+
+ $ + + .00 +
+
+ +
+
+ $ + + .00 +
+
+ +### Form Groups + +Related form controls can be grouped in a `
`. An optional `` can be used to display a name for the group. + +```html +
+ User + ... +
+``` + +
+ Login +
+ + +
+
+ + +
+
+ +
+
+ +
+
+ +### Validation + +Form controls can be made valid or invalid using the `input-valid` and `input-invalid` modifiers. It’s better to apply modifiers to the surrounding `input-single` so labels will be styled as well, but modifiers can be applied directly to form controls as needed. + +```html +
+ + +
+ +
+ + +
+``` + +
+
+ + +
+ +
+ + +
+
diff --git a/source/docs/grid-system.md b/source/docs/grid-system.md new file mode 100644 index 000000000..115cd3691 --- /dev/null +++ b/source/docs/grid-system.md @@ -0,0 +1,11 @@ +--- +layout: default.html +title: Grid System +description: Shoelace doesn’t ship with a grid system because you don’t need one! +--- + +## Grid System + +Shoelace doesn’t ship with a grid system because [you don’t need one](https://rachelandrew.co.uk/archives/2017/07/01/you-do-not-need-a-css-grid-based-grid-system/). You should use the [CSS Grid Layout](https://gridbyexample.com/) instead. + +If you have an obligation to support older browsers, consider using the Bootstrap grid [without any extras](https://github.com/zirafa/bootstrap-grid-only) in combination with Shoelace. diff --git a/source/docs/icons.md b/source/docs/icons.md new file mode 100644 index 000000000..b4ee9ac59 --- /dev/null +++ b/source/docs/icons.md @@ -0,0 +1,11 @@ +--- +layout: default.html +title: Icons +description: Shoelace doesn’t ship with icons, but you can easily add your own! +--- + +## Icons + +Shoelace doesn’t bundle its own icons, but you can easily include your favorite library such as [Font Awesome](http://fontawesome.io/). They work superbly together. + +This keeps Shoelace light and makes it more customizable. diff --git a/source/docs/installing.md b/source/docs/installing.md new file mode 100644 index 000000000..2026d08e7 --- /dev/null +++ b/source/docs/installing.md @@ -0,0 +1,49 @@ +--- +layout: default.html +title: Installing +description: How to install Shoelace.css. +--- + +## Installing + +Shoelace is incredibly easy to use. To get started, simply link to `shoelace.css` in your project. You can use the CDN version or download the source manually. + +To make certain components interactive (e.g. dropdowns and tabs), you’ll need to load [jQuery](https://cdnjs.com/libraries/jquery/) or [Zepto](https://cdnjs.com/libraries/zepto/) along with `shoelace.js`. + +### CDN + +The easiest way to use Shoelace is via CDN. Just add this to the ``: + +```html + +``` + +And this before `` but after jQuery/Zepto: + +```html + +``` + +This service is provided free, courtesy of [CDNJS](https://cdnjs.com/). New releases can take up to 12 hours to appear on the CDN. + +### Download + +Alternatively, you can [download the source](https://github.com/claviska/shoelace-css/releases) and link to `shoelace.css` from your own server. Just add this stylesheet to your ``: + +```html + +``` + +And this before `` but after jQuery/Zepto: + +```html + +``` + +### NPM + +If you’re using NPM, you can install Shoelace by running: + +``` +npm install --save-dev shoelace-css +``` diff --git a/source/docs/loaders.md b/source/docs/loaders.md new file mode 100644 index 000000000..c4644aef1 --- /dev/null +++ b/source/docs/loaders.md @@ -0,0 +1,34 @@ +--- +layout: default.html +title: Loaders +description: These pure CSS loaders are easy to use and look great. +--- + +## Loaders + +Create a pure CSS loader by applying the `loader` class to an empty `` element. You can use the `loader-small` and `loader-big` modifiers to change the size. + +```html + + + +``` +
+ + + +
+ +You can simulate a background loader using `loader-bg`. This is achieved using `position: relative` on the container and the `::after` pseudo-element. You can use the `loader-bg-small` and `loader-bg-big` modifiers to change the size. + +```html +
+
+
+``` + +
+
+
+
+
diff --git a/source/docs/switches.md b/source/docs/switches.md new file mode 100644 index 000000000..357840406 --- /dev/null +++ b/source/docs/switches.md @@ -0,0 +1,69 @@ +--- +layout: default.html +title: Switches +description: These pure CSS switches can be used as a checkbox replacement. +--- + +## Switches + +Switches provide an alternative to standard checkboxes. Many people find them more intuitive and easier to use, especially on mobile devices. Shoelace provides a way to create beautiful, animated switches with pure CSS. + +Because this is a pure CSS solution, there are a couple important things to remember: + +- Each switch must have a unique `id` +- The `