1.0.0-beta12

Fix file button link in docs

.env.example

@@ -1,6 +0,0 @@
-S3_BUCKET=
-S3_URL=
-S3_ACL=
-S3_REGION=
-S3_ACCESS_KEY=
-S3_SECRET_KEY=

.eslintrc

@@ -7,7 +7,6 @@
     "quotes": ["error", "single"],
     "linebreak-style": ["error", "unix"],
     "no-unused-vars": ["warn", { "vars": "all", "args": "after-used" }],
-    "prefer-arrow-callback": ["warn"],
     "semi": ["error", "always"]
   },
   "env": {

.github/CONTRIBUTING.md

@@ -0,0 +1,47 @@
+# Contributing to Shoelace.css
+
+I'm building Shoelace for the greater good. I want everyone to have a chance to participate in its development no matter their skill level, and nobody should feel out of place for asking a question, submitting their code, etc.
+
+That said, I have a few simple rules I'm asking everyone to follow:
+
+- Don't be mean.
+- Don't be a troll.
+- Don't be a keyboard warrior.
+
+People from all over the world participate here, and everyone is welcome. Please bear in mind that not all people share the same languages, skills, and beliefs as you. Many are here to learn, so please facilitate that.
+
+## Support
+
+**Please do not use the issue tracker for personal support requests.**
+
+Instead, post a question with the `shoelacecss` tag on [Stack Overflow](https://stackoverflow.com/tags/shoelacecss).
+
+## Bug Reports
+
+Bugs should be submitted to the issue tracker. Before creating a new issue, please search open and closed issues to make sure it hasn't already been addressed.
+
+For bug reports, please provide:
+
+- Step-by-step instructions to reproduce the bug.
+- A minimal test case to demonstrate the bug (if applicable).
+- Affected version of Shoelace (please try to test on the latest version)
+
+A good bug report will show us how to reproduce the problem quickly. A not-so-good bug report is likely to sit around waiting for additional feedback before anything can get fixed.
+
+## Feature Requests
+
+Feature requests may be submitted to the issue tracker as well. Before creating a new issue, please search open and close issues to make sure it hasn't already been requested.
+
+To vote for a specific feature, use GitHub reactions to 👍 or 👎. Remember that you can watch an issue to receive notifications anytime somebody comments.
+
+## Pull Requests
+
+Before embarking on a large, complex, or controversial feature, please open an issue so we can discuss it. Someone may be working on it already, it might not align with the project's roadmap, or we might be able to improve on your idea before you spend a lot of time working on it.
+
+If your PR doesn't get accepted, don't let it get you down. Many don't. It doesn't mean I don't value your idea or contribution, it just means that it doesn't align with my vision for the project. As the maintainer, I'll do my best to explain why every PR doesn't get accepted.
+
+### Code Quality
+
+Shoelace uses an `.editorconfig` file to enforce things like indentation, trailing whitespace, etc. Please make sure your editor supports [EditorConfig]((http://editorconfig.org/)) before submitting a PR.
+
+I'm quite picky about code quality. That doesn't mean I don't like your code, it means I prefer the code to stay consistent. If you follow the same conventions as the rest of the project's code, you'll be good to go.

.github/ISSUE_TEMPLATE.md

@@ -0,0 +1,18 @@
+### Summary
+
+Please summarize your issue here.
+
+### Steps to Reproduce
+
+1. Step one
+2. Step two
+3. ...
+
+### Additional info
+
+- Shoelace version:
+- Affected browsers:
+
+---
+
+Note: This issue tracker is ONLY for bug reports and feature requests. If this is a personal support issue, please ask on [Stack Overflow](https://stackoverflow.com/tags/shoelacecss).

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,9 @@
+### Pull Request Summary
+
+Please describe what your PR does here.
+
+---
+
+Before embarking on a large, complex, or controversial feature, please open an issue so we can discuss it. Someone may be working on it already, it might not align with the project's roadmap, or we might be able to improve on your idea before you spend a lot of time working on it.
+
+If your PR doesn't get accepted, don't let it get you down. Many don't. It doesn't mean I don't value your idea or contribution, it just means that it doesn't align with my vision for the project. As the maintainer, I'll do my best to explain why every PR doesn't get accepted.

.gitignore

@@ -1,3 +1,3 @@
 .DS_Store
-.env
+.htaccess
 node_modules/

README.md

@@ -12,16 +12,16 @@ A back to the basics CSS starter kit. For when you don’t need the whole boot.
 
 ## Developers
 
-Shoelace ships with a CLI that can be used to build a dist and optionally publish it to an S3 bucket. To build a dist, run:
+Shoelace ships with a CLI that can be used to build a release and generate documentation. To build a release, run:
 
 ```
-node shoelace.js --build
+node build.js --build
 ```
 
 To see all available flags, run:
 
 ```
-node shoelace.js --help
+node build.js --help
 ```
 
 ---

build.js

@@ -0,0 +1,293 @@
+/* eslint prefer-arrow-callback: "warn" */
+'use strict';
+
+global.__version = require('./package.json').version;
+
+const Promise = require('bluebird');
+const AtImport = require('postcss-import');
+const Autoprefixer = require('autoprefixer');
+const Chalk = require('chalk');
+const CSSnano = require('cssnano');
+const Del = require('del');
+const FS = Promise.promisifyAll(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');
+const Watch = require('watch');
+
+//
+// Builds all doc pages.
+//
+// Returns a promise.
+//
+function buildDocs() {
+  return Promise.resolve()
+    .then(() => new Promise((resolve, reject) => {
+      Metalsmith(__dirname)
+        .source('./source/docs')
+        .destination('./docs')
+        .clean(true)
+        .use(Markdown())
+        .metadata({
+          version: __version
+        })
+        .use(Layouts({
+          engine: 'handlebars',
+          directory: './source/layouts',
+          rename: false
+        }))
+        // Update {{version}} in content since it's not processed with Handlebars
+        .use((files, metalsmith, done) => {
+          Object.keys(files).forEach((key) => {
+            let file = files[key];
+
+            file.contents = new Buffer(
+              file.contents
+                .toString()
+                .replace(/\{\{version\}\}/g, __version)
+            );
+          });
+
+          done();
+        })
+        .build((err) => {
+          if(err) {
+            reject(err);
+            return;
+          }
+          console.log(Chalk.green('Docs have been generated! 📚'));
+
+          resolve();
+        });
+    }));
+}
+
+//
+// Builds all scripts.
+//
+// Returns a promise.
+//
+function buildScripts() {
+  return Promise.resolve()
+    // Create the dist folder if it doesn't exist
+    .then(() => {
+      if(!FS.existsSync(Path.join(__dirname, 'dist'))) {
+        return FS.mkdirAsync(Path.join(__dirname, 'dist'));
+      }
+    })
+
+    // Generate minified scripts
+    .then(() => new Promise((resolve, reject) => {
+      let scripts = {
+        'dropdowns.js': FS.readFileSync(Path.join(__dirname, 'source/js/dropdowns.js'), 'utf8'),
+        'tabs.js': FS.readFileSync(Path.join(__dirname, 'source/js/tabs.js'), 'utf8')
+      };
+
+      let result = UglifyJS.minify(scripts, {
+        output: {
+          comments: /^!/
+        }
+      });
+      if(result.error) {
+        reject(result.error);
+        return;
+      }
+
+      resolve(result.code);
+    }))
+
+    // Write minified scripts to dist
+    .then((scripts) => {
+      let shoelaceJS = Path.join(__dirname, 'dist/shoelace.js');
+
+      // Update {{version}} in JS since it's not processed with Handlebars
+      scripts = scripts.replace(/\{\{version\}\}/g, __version);
+
+      // Output a message
+      console.log(Chalk.green('JS Minified: %s! 💪'), Path.relative(__dirname, shoelaceJS));
+
+      // Write output file
+      return FS.writeFileAsync(shoelaceJS, scripts, 'utf8');
+    });
+}
+
+//
+// Builds all stylesheets.
+//
+// Returns a promise.
+//
+function buildStyles() {
+  return Promise.resolve()
+    // Create the dist folder if it doesn't exist
+    .then(() => {
+      if(!FS.existsSync(Path.join(__dirname, 'dist'))) {
+        return FS.mkdirAsync(Path.join(__dirname, 'dist'));
+      }
+    })
+
+    // Generate minified stylesheet
+    .then(() => new Promise((resolve, reject) => {
+      let shoelaceCSS = Path.join(__dirname, 'source/css/shoelace.css');
+      let css = FS.readFileSync(shoelaceCSS, 'utf8');
+
+      PostCSS([
+        AtImport,
+        Autoprefixer({ browsers: ['last 2 versions', '> 5%', 'ie >= 11', 'iOS >= 8'] }),
+        CSSnano({ safe: true })
+      ])
+        .process(css, { from: shoelaceCSS })
+        .then((result) => resolve(result.css))
+        .catch((err) => reject(err));
+    }))
+
+    // Write stylesheet to dist
+    .then((styles) => {
+      let shoelaceCSS = Path.join(__dirname, 'dist/shoelace.css');
+
+      // Update {{version}} in CSS since it's not processed with Handlebars
+      styles = styles.replace(/\{\{version\}\}/g, __version);
+
+      // Output a message
+      console.log(Chalk.green('CSS Minified: %s! 💪'), Path.relative(__dirname, shoelaceCSS));
+
+      // Write output file
+      return FS.writeFileAsync(shoelaceCSS, styles, 'utf8');
+    });
+}
+
+//
+// Watches a directory for changes
+//
+//  - options (object)
+//    - path (string) - the path of the directory to watch.
+//    - ready (function) - callback to execute after initializing.
+//    - change (function(event, file)) - callback to execute when a file is changed.
+//
+// No return value.
+//
+function watch(options) {
+  options = options || {};
+
+  Watch.watchTree(options.path, {
+    ignoreDotFiles: true,
+    interval: 1
+  }, (file, current, previous) => {
+    if(typeof file === 'object' && previous === null && current === null) {
+      if(typeof options.ready === 'function') options.ready();
+    } else if(previous === null) {
+      if(typeof options.change === 'function') options.change({ type: 'created' }, file);
+    } else if(current.nlink === 0) {
+      if(typeof options.change === 'function') options.change({ type: 'deleted' }, file);
+    } else {
+      if(typeof options.change === 'function') options.change({ type: 'modified' }, file);
+    }
+  });
+}
+
+// Initialize CLI
+Program
+  .version(__version)
+  .option('--build', 'Builds a release')
+  .option('--clean', 'Removes existing release')
+  .option('--watch', 'Watch for changes and build automatically')
+  .on('--help', () => {
+    console.log(Chalk.cyan('\n  Version %s\n'), __version);
+    process.exit(1);
+  })
+  .parse(process.argv);
+
+// Show help by default
+if(!process.argv.slice(2).length) {
+  Program.outputHelp();
+  process.exit(1);
+}
+
+// Build
+if(Program.build) {
+  Promise.resolve()
+    // Remove the dist folder
+    .then(() => Del(Path.join(__dirname, 'dist')))
+
+    // Build styles
+    .then(() => buildStyles())
+
+    // Minify scripts
+    .then(() => buildScripts())
+
+    // Generate docs
+    .then(() => buildDocs())
+
+    // Exit with success
+    .then(() => process.exit(1))
+
+    // Handle errors
+    .catch((err) => {
+      console.error(Chalk.red(err));
+      process.exit(-1);
+    });
+}
+
+// Clean
+if(Program.clean) {
+  Promise.resolve()
+    // Delete /dist
+    .then(() => Del(Path.join(__dirname, 'dist')))
+    .then(() => {
+      console.log(Chalk.green('/dist has been removed.'));
+    })
+
+    // Delete /docs
+    .then(() => Del(Path.join(__dirname, 'docs')))
+    .then(() => {
+      console.log(Chalk.green('/docs has been removed.'));
+    })
+
+    // Exit with success
+    .then(() => process.exit(1))
+
+    // Handle errors
+    .catch((err) => {
+      console.error(Chalk.red(err));
+      process.exit(-1);
+    });
+}
+
+// Watch
+if(Program.watch) {
+  // Watch styles
+  watch({
+    path: Path.join(__dirname, 'source/css'),
+    ready: () => console.log(Chalk.cyan('Watching for style changes...')),
+    change: (event) => {
+      if(event.type === 'created' || event.type === 'modified') {
+        buildStyles();
+      }
+    }
+  });
+
+  // Watch scripts
+  watch({
+    path: Path.join(__dirname, 'source/js'),
+    ready: () => console.log(Chalk.cyan('Watching for scripts changes...')),
+    change: (event) => {
+      if(event.type === 'created' || event.type === 'modified') {
+        buildScripts();
+      }
+    }
+  });
+
+  // Watch docs
+  watch({
+    path: Path.join(__dirname, 'source/docs'),
+    ready: () => console.log(Chalk.cyan('Watching for docs changes...')),
+    change: (event) => {
+      if(event.type === 'created' || event.type === 'modified') {
+        buildDocs();
+      }
+    }
+  });
+}

dist/shoelace.js

@@ -0,0 +1,15 @@
+/*!
+  Shoelace.css dropdowns 1.0.0-beta12
+  (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-beta12
+  (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 tabs require either jQuery or Zepto.");(window.jQuery||window.Zepto)(function(e){e(document).on("click",".tabs-nav a",function(t){var i=e(this).closest(".tabs"),o=this,r=e(i).find(o.hash).get(0);t.preventDefault(),o.hash&&!e(o).is(".disabled")&&(e(o).siblings().removeClass("active"),e(o).addClass("active"),e(i).find(".tabs-pane.active").not(r).each(function(){e(this).removeClass("active"),e(i).trigger("hide",this)}),r&&!e(r).is(".active")&&(e(r).addClass("active"),e(i).trigger("show",r)))})})}();

docs.css

@@ -1,141 +0,0 @@
-body {
-  border-top: solid .3rem #7fdbff;
-}
-
-main {
-  max-width: 45rem;
-  padding: 1rem;
-  margin: 2rem auto;
-}
-
-h1[id]:not(:first-child),
-h2[id]:not(:first-child),
-h3[id]:not(:first-child),
-h4[id]:not(:first-child) {
-  margin-top: 3rem;
-}
-
-h3[id],
-h4[id] {
-  color: var(--color-gray);
-}
-
-h1 img {
-  width: 24rem;
-  vertical-align: middle;
-}
-
-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;
-}
-
-@media (max-width: 45rem) {
-  a.bookmark {
-    width: auto;
-    margin-left: 0;
-  }
-}
-
-/* Column helpers */
-.two-column {
-  column-count: 2;
-  column-gap: 1rem;
-}
-
-@media (max-width: 50rem) {
-  .two-column {
-    column-count: 1;
-    column-gap: 0;
-  }
-}
-
-/* Sizing examples */
-.width-sizing-example {
-  border: solid 1px var(--component-border-color);
-  padding: 1rem;
-  margin-bottom: 1rem;
-}
-
-.width-sizing-example div {
-  background: var(--color-primary);
-  color: white;
-  text-align: center;
-  padding: .25rem;
-  margin-bottom: 1rem;
-}
-
-.width-sizing-example div:last-child {
-  margin-bottom: 0;
-}
-
-.height-sizing-example {
-  border: solid 1px var(--component-border-color);
-  height: 15rem;
-  padding: 1rem .5rem;
-  margin-bottom: 1rem;
-}
-
-.height-sizing-example div {
-  width: calc(25% - 1rem);
-  float: left;
-  background: var(--color-primary);
-  color: white;
-  text-align: center;
-  padding: .25rem;
-  margin: 0 .5rem;
-}
-
-/* Loader example */
-.loader-example div {
-  float: left;
-  width: 6rem;
-  height: 6rem;
-  border: dashed 1px var(--component-border-color);
-  margin-right: .5rem;
-}
-
-/* Tabs example */
-.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;
-}

docs/alerts.html

@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <meta name="description" content="Call attention in your app with alerts.">
+  <link rel="icon" href="../source/img/favicon.png">
+  <link rel="stylesheet" href="../dist/shoelace.css">
+  <link rel="stylesheet" href="../source/css/_docs.css">
+  <link rel="stylesheet" href="https://cdn.rawgit.com/AGMStudio/prism-theme-one-dark/f81fe477/prism-onedark.css">
+  <title>Alerts</title>
+</head>
+<body>
+
+  <header id="head" class="text-center">
+    <h1>
+      <a href="../index.html">
+        <img src="../source/img/wordmark.svg" alt="Shoelace logo">
+      </a>
+    </h1>
+    <p class="text-muted text-small">
+      A back to the basics CSS starter kit. For when you don’t need the whole boot.
+    </p>
+  </header>
+
+  <main id="wrap">
+    <nav id="nav">
+      <a href="installing.html">Installing</a>
+      <a href="customizing.html">Customizing</a>
+      <a href="content.html">Content</a>
+      <a href="alerts.html">Alerts</a>
+      <a href="badges.html">Badges</a>
+      <a href="buttons.html">Buttons</a>
+      <a href="dropdowns.html">Dropdowns</a>
+      <a href="forms.html">Forms</a>
+      <a href="loaders.html">Loaders</a>
+      <a href="progress-bars.html">Progress Bars</a>
+      <a href="switches.html">Switches</a>
+      <a href="tabs.html">Tabs</a>
+      <a href="tables.html">Tables</a>
+      <a href="utilities.html">Utilities</a>
+      <a href="grid-system.html">Grid System</a>
+      <a href="icons.html">Icons</a>
+      <a href="browser-support.html">Browser Support</a>
+      <a href="attribution.html">Attribution</a>
+    </nav>
+
+    <div id="content">
+      <h2 id="alerts">Alerts</h2>
+<p>Create an alert by applying the <code>alert</code> class to an element such as a <code>&lt;div&gt;</code>. You can change an alert’s appearance using the <code>alert-*</code> modifier.</p>
+<pre><code class="lang-html">&lt;div class=&quot;alert&quot;&gt;Default&lt;/div&gt;
+&lt;div class=&quot;alert alert-success&quot;&gt;Success&lt;/div&gt;
+&lt;div class=&quot;alert alert-info&quot;&gt;Info&lt;/span&gt;
+&lt;div class=&quot;alert alert-warning&quot;&gt;Warning&lt;/div&gt;
+&lt;div class=&quot;alert alert-danger&quot;&gt;Danger&lt;/div&gt;
+&lt;div class=&quot;alert alert-inverse&quot;&gt;Inverse&lt;/div&gt;
+</code></pre>
+<div class="alert">This is a default alert <a href="#">with link</a></div>
+<div class="alert alert-success">This is a success alert <a href="#">with link</a></div>
+<div class="alert alert-info">This is an info alert <a href="#">with link</a></div>
+<div class="alert alert-warning">This is a warning alert <a href="#">with link</a></div>
+<div class="alert alert-danger">This is a danger alert <a href="#">with link</a></div>
+<div class="alert alert-inverse">This is an inverse alert <a href="#">with link</a></div>
+
+    </div>
+  </main>
+
+  <footer id="foot">
+    <a href="../index.html">
+      <img src="../source/img/wordmark.svg" alt="Shoelace logo">
+    </a>
+    <p class="text-small text-muted">
+      Shoelace.css 1.0.0-beta12 &middot;
+      &copy; A Beautiful Site, LLC
+    </p>
+
+    <p class="margin-y-small text-center">
+      <a class="github-button" href="https://github.com/claviska/shoelace-css/fork" data-size="large" aria-label="Fork claviska/shoelace-css on GitHub">Fork</a>
+      <a class="github-button" href="https://github.com/claviska/shoelace-css/releases" data-icon="octicon-cloud-download" data-size="large" aria-label="Download claviska/shoelace-css on GitHub">Download</a>
+      <a class="github-button" href="https://github.com/claviska/shoelace-css/issues" data-icon="octicon-issue-opened" data-size="large" aria-label="Issue claviska/shoelace-css on GitHub">Report a Bug</a>
+      <a class="github-button" href="https://github.com/claviska/shoelace-css" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star claviska/shoelace-css on GitHub">Star</a>
+    </p>
+    <p>
+      <a href="https://twitter.com/shoelacecss" class="button button-info" style="margin-bottom: 1.2rem;">Follow</a>
+      <a href="https://paypal.me/claviska" class="button button-success" style="margin-bottom: 1.2rem;">Donate</a>
+    </p>
+  </footer>
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js"></script>
+  <script src="../dist/shoelace.js"></script>
+  <script>
+    $(function() {
+      // Highlight current nav item
+      $('#nav a').each(function() {
+        if(this.pathname === location.pathname) {
+          $(this).addClass('current');
+        }
+      });
+    });
+  </script>
+  <script async defer src="https://buttons.github.io/buttons.js"></script>
+</body>
+</html>

docs/attribution.html

@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <meta name="description" content="Meet the people and organizations that make Shoelace.css possible.">
+  <link rel="icon" href="../source/img/favicon.png">
+  <link rel="stylesheet" href="../dist/shoelace.css">
+  <link rel="stylesheet" href="../source/css/_docs.css">
+  <link rel="stylesheet" href="https://cdn.rawgit.com/AGMStudio/prism-theme-one-dark/f81fe477/prism-onedark.css">
+  <title>Attribution</title>
+</head>
+<body>
+
+  <header id="head" class="text-center">
+    <h1>
+      <a href="../index.html">
+        <img src="../source/img/wordmark.svg" alt="Shoelace logo">
+      </a>
+    </h1>
+    <p class="text-muted text-small">
+      A back to the basics CSS starter kit. For when you don’t need the whole boot.
+    </p>
+  </header>
+
+  <main id="wrap">
+    <nav id="nav">
+      <a href="installing.html">Installing</a>
+      <a href="customizing.html">Customizing</a>
+      <a href="content.html">Content</a>
+      <a href="alerts.html">Alerts</a>
+      <a href="badges.html">Badges</a>
+      <a href="buttons.html">Buttons</a>
+      <a href="dropdowns.html">Dropdowns</a>
+      <a href="forms.html">Forms</a>
+      <a href="loaders.html">Loaders</a>
+      <a href="progress-bars.html">Progress Bars</a>
+      <a href="switches.html">Switches</a>
+      <a href="tabs.html">Tabs</a>
+      <a href="tables.html">Tables</a>
+      <a href="utilities.html">Utilities</a>
+      <a href="grid-system.html">Grid System</a>
+      <a href="icons.html">Icons</a>
+      <a href="browser-support.html">Browser Support</a>
+      <a href="attribution.html">Attribution</a>
+    </nav>
+
+    <div id="content">
+      <h2 id="attribution">Attribution</h2>
+<p>Special thanks to the following individuals and organizations for their contributions to Shoelace.css.</p>
+<ul>
+<li><a href="https://twitter.com/claviska">Cory LaViska</a> – for creating this project</li>
+<li><a href="https://twitter.com/adamkolson">Adam K Olson</a> – for designing the logo with a single shoelaces</li>
+<li><a href="https://getbootstrap.com/">Bootstrap</a> – for inspiration</li>
+<li><a href="https://cdnjs.com/">cdnjs.com</a> – for providing an awesome CDN service</li>
+<li><a href="https://github.com/">GitHub</a> – for hosting this and many other open source projects</li>
+<li><a href="https://www.surrealcms.com/">Surreal CMS</a> – for sponsoring development</li>
+</ul>
+
+    </div>
+  </main>
+
+  <footer id="foot">
+    <a href="../index.html">
+      <img src="../source/img/wordmark.svg" alt="Shoelace logo">
+    </a>
+    <p class="text-small text-muted">
+      Shoelace.css 1.0.0-beta12 &middot;
+      &copy; A Beautiful Site, LLC
+    </p>
+
+    <p class="margin-y-small text-center">
+      <a class="github-button" href="https://github.com/claviska/shoelace-css/fork" data-size="large" aria-label="Fork claviska/shoelace-css on GitHub">Fork</a>
+      <a class="github-button" href="https://github.com/claviska/shoelace-css/releases" data-icon="octicon-cloud-download" data-size="large" aria-label="Download claviska/shoelace-css on GitHub">Download</a>
+      <a class="github-button" href="https://github.com/claviska/shoelace-css/issues" data-icon="octicon-issue-opened" data-size="large" aria-label="Issue claviska/shoelace-css on GitHub">Report a Bug</a>
+      <a class="github-button" href="https://github.com/claviska/shoelace-css" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star claviska/shoelace-css on GitHub">Star</a>
+    </p>
+    <p>
+      <a href="https://twitter.com/shoelacecss" class="button button-info" style="margin-bottom: 1.2rem;">Follow</a>
+      <a href="https://paypal.me/claviska" class="button button-success" style="margin-bottom: 1.2rem;">Donate</a>
+    </p>
+  </footer>
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js"></script>
+  <script src="../dist/shoelace.js"></script>
+  <script>
+    $(function() {
+      // Highlight current nav item
+      $('#nav a').each(function() {
+        if(this.pathname === location.pathname) {
+          $(this).addClass('current');
+        }
+      });
+    });
+  </script>
+  <script async defer src="https://buttons.github.io/buttons.js"></script>
+</body>
+</html>

docs/badges.html

@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <meta name="description" content="Add badges to your app with minimal effort.">
+  <link rel="icon" href="../source/img/favicon.png">
+  <link rel="stylesheet" href="../dist/shoelace.css">
+  <link rel="stylesheet" href="../source/css/_docs.css">
+  <link rel="stylesheet" href="https://cdn.rawgit.com/AGMStudio/prism-theme-one-dark/f81fe477/prism-onedark.css">
+  <title>Badges</title>
+</head>
+<body>
+
+  <header id="head" class="text-center">
+    <h1>
+      <a href="../index.html">
+        <img src="../source/img/wordmark.svg" alt="Shoelace logo">
+      </a>
+    </h1>
+    <p class="text-muted text-small">
+      A back to the basics CSS starter kit. For when you don’t need the whole boot.
+    </p>
+  </header>
+
+  <main id="wrap">
+    <nav id="nav">
+      <a href="installing.html">Installing</a>
+      <a href="customizing.html">Customizing</a>
+      <a href="content.html">Content</a>
+      <a href="alerts.html">Alerts</a>
+      <a href="badges.html">Badges</a>
+      <a href="buttons.html">Buttons</a>
+      <a href="dropdowns.html">Dropdowns</a>
+      <a href="forms.html">Forms</a>
+      <a href="loaders.html">Loaders</a>
+      <a href="progress-bars.html">Progress Bars</a>
+      <a href="switches.html">Switches</a>
+      <a href="tabs.html">Tabs</a>
+      <a href="tables.html">Tables</a>
+      <a href="utilities.html">Utilities</a>
+      <a href="grid-system.html">Grid System</a>
+      <a href="icons.html">Icons</a>
+      <a href="browser-support.html">Browser Support</a>
+      <a href="attribution.html">Attribution</a>
+    </nav>
+
+    <div id="content">
+      <h2 id="badges">Badges</h2>
+<p>Create a badge by applying the <code>badge</code> class to an element such as a <code>&lt;span&gt;</code>. You can change a badge’s appearance using the <code>badge-*</code> modifier.</p>
+<pre><code class="lang-html">&lt;span class=&quot;badge&quot;&gt;Default&lt;/span&gt;
+&lt;span class=&quot;badge badge-success&quot;&gt;Success&lt;/span&gt;
+&lt;span class=&quot;badge badge-info&quot;&gt;Info&lt;/span&gt;
+&lt;span class=&quot;badge badge-warning&quot;&gt;Warning&lt;/span&gt;
+&lt;span class=&quot;badge badge-danger&quot;&gt;Danger&lt;/span&gt;
+&lt;span class=&quot;badge badge-inverse&quot;&gt;Inverse&lt;/span&gt;
+</code></pre>
+<p>
+  <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>
+</p>
+
+<p>By default, badges are sized relative to their parent element.</p>
+<pre><code class="lang-html">&lt;h1&gt;Heading 1 &lt;span class=&quot;badge&quot;&gt;Badge&lt;/span&gt;&lt;/h1&gt;
+&lt;h2&gt;Heading 2 &lt;span class=&quot;badge&quot;&gt;Badge&lt;/span&gt;&lt;/h2&gt;
+&lt;h3&gt;Heading 3 &lt;span class=&quot;badge&quot;&gt;Badge&lt;/span&gt;&lt;/h3&gt;
+&lt;p&gt;Paragraph &lt;span class=&quot;badge&quot;&gt;Badge&lt;/span&gt;&lt;/p&gt;
+</code></pre>
+<p><h1>Heading 1 <span class="badge">Badge</span></h1></p>
+<p><h2>Heading 2 <span class="badge">Badge</span></h2></p>
+<p><h3>Heading 3 <span class="badge">Badge</span></h3></p>
+<p>Paragraph <span class="badge">Badge</span></p>
+
+    </div>
+  </main>
+
+  <footer id="foot">
+    <a href="../index.html">
+      <img src="../source/img/wordmark.svg" alt="Shoelace logo">
+    </a>
+    <p class="text-small text-muted">
+      Shoelace.css 1.0.0-beta12 &middot;
+      &copy; A Beautiful Site, LLC
+    </p>
+
+    <p class="margin-y-small text-center">
+      <a class="github-button" href="https://github.com/claviska/shoelace-css/fork" data-size="large" aria-label="Fork claviska/shoelace-css on GitHub">Fork</a>
+      <a class="github-button" href="https://github.com/claviska/shoelace-css/releases" data-icon="octicon-cloud-download" data-size="large" aria-label="Download claviska/shoelace-css on GitHub">Download</a>
+      <a class="github-button" href="https://github.com/claviska/shoelace-css/issues" data-icon="octicon-issue-opened" data-size="large" aria-label="Issue claviska/shoelace-css on GitHub">Report a Bug</a>
+      <a class="github-button" href="https://github.com/claviska/shoelace-css" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star claviska/shoelace-css on GitHub">Star</a>
+    </p>
+    <p>
+      <a href="https://twitter.com/shoelacecss" class="button button-info" style="margin-bottom: 1.2rem;">Follow</a>
+      <a href="https://paypal.me/claviska" class="button button-success" style="margin-bottom: 1.2rem;">Donate</a>
+    </p>
+  </footer>
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js"></script>
+  <script src="../dist/shoelace.js"></script>
+  <script>
+    $(function() {
+      // Highlight current nav item
+      $('#nav a').each(function() {
+        if(this.pathname === location.pathname) {
+          $(this).addClass('current');
+        }
+      });
+    });
+  </script>
+  <script async defer src="https://buttons.github.io/buttons.js"></script>
+</body>
+</html>

docs/browser-support.html

@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <meta name="description" content="Learn about browser support and polyfills for older browsers.">
+  <link rel="icon" href="../source/img/favicon.png">
+  <link rel="stylesheet" href="../dist/shoelace.css">
+  <link rel="stylesheet" href="../source/css/_docs.css">
+  <link rel="stylesheet" href="https://cdn.rawgit.com/AGMStudio/prism-theme-one-dark/f81fe477/prism-onedark.css">
+  <title>Browser Support</title>
+</head>
+<body>
+
+  <header id="head" class="text-center">
+    <h1>
+      <a href="../index.html">
+        <img src="../source/img/wordmark.svg" alt="Shoelace logo">
+      </a>
+    </h1>
+    <p class="text-muted text-small">
+      A back to the basics CSS starter kit. For when you don’t need the whole boot.
+    </p>
+  </header>
+
+  <main id="wrap">
+    <nav id="nav">
+      <a href="installing.html">Installing</a>
+      <a href="customizing.html">Customizing</a>
+      <a href="content.html">Content</a>
+      <a href="alerts.html">Alerts</a>
+      <a href="badges.html">Badges</a>
+      <a href="buttons.html">Buttons</a>
+      <a href="dropdowns.html">Dropdowns</a>
+      <a href="forms.html">Forms</a>
+      <a href="loaders.html">Loaders</a>
+      <a href="progress-bars.html">Progress Bars</a>
+      <a href="switches.html">Switches</a>
+      <a href="tabs.html">Tabs</a>
+      <a href="tables.html">Tables</a>
+      <a href="utilities.html">Utilities</a>
+      <a href="grid-system.html">Grid System</a>
+      <a href="icons.html">Icons</a>
+      <a href="browser-support.html">Browser Support</a>
+      <a href="attribution.html">Attribution</a>
+    </nav>
+
+    <div id="content">
+      <h2 id="browser-support">Browser Support</h2>
+<blockquote>
+<p>TL;DR — you can use Shoelace <em>today</em> if you don’t care about Internet Explorer (Edge is fine). If you need to support IE, just use a <a href="https://github.com/zirafa/bootstrap-grid-only">grid system</a> and a polyfill such as <a href="http://www.myth.io/">Myth</a> or <a href="http://cssnext.io/">cssnext</a>.</p>
+</blockquote>
+<p>Browser support for CSS variables is <a href="http://caniuse.com/#feat=css-variables">pretty good</a>, but if you need to support Internet Explorer, consider using <a href="http://www.myth.io/">Myth</a> or <a href="http://cssnext.io/">cssnext</a> as a polyfill. Both libraries let you write standards-compliant CSS and process it to work properly in unsupportive browsers.</p>
+<p>Unfortunately, it’s impossible for polyfills to support variable scoping. Because of this, Shoelace only uses CSS variables that are assigned at the <code>:root</code> level.</p>
+<p>Browser support for the CSS Grid is <a href="http://caniuse.com/#feat=css-grid">very good</a>, but if you need to support older browsers you can use a <a href="https://github.com/zirafa/bootstrap-grid-only">grid system</a> instead.</p>
+<p>Browser support for <code>calc</code> is <a href="http://caniuse.com/#feat=calc">excellent</a>. Shoelace uses this internally for relative calculations. You can use it along with CSS variables too.</p>
+<p>Browser support for color modifiers is non-existent. <a href="https://drafts.csswg.org/css-color/#modifying-colors">There is a draft</a>, so hopefully that will change soon. Shoelace doesn’t use this feature, but it will when support improves.</p>
+<p>Browser support for custom media queries is non-existent. <a href="https://drafts.csswg.org/mediaqueries-5/#custom-mq">There is a draft</a>, so hopefully that will change soon. Shoelace doesn’t use this feature, but it will when support improves.</p>
+
+    </div>
+  </main>
+
+  <footer id="foot">
+    <a href="../index.html">
+      <img src="../source/img/wordmark.svg" alt="Shoelace logo">
+    </a>
+    <p class="text-small text-muted">
+      Shoelace.css 1.0.0-beta12 &middot;
+      &copy; A Beautiful Site, LLC
+    </p>
+
+    <p class="margin-y-small text-center">
+      <a class="github-button" href="https://github.com/claviska/shoelace-css/fork" data-size="large" aria-label="Fork claviska/shoelace-css on GitHub">Fork</a>
+      <a class="github-button" href="https://github.com/claviska/shoelace-css/releases" data-icon="octicon-cloud-download" data-size="large" aria-label="Download claviska/shoelace-css on GitHub">Download</a>
+      <a class="github-button" href="https://github.com/claviska/shoelace-css/issues" data-icon="octicon-issue-opened" data-size="large" aria-label="Issue claviska/shoelace-css on GitHub">Report a Bug</a>
+      <a class="github-button" href="https://github.com/claviska/shoelace-css" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star claviska/shoelace-css on GitHub">Star</a>
+    </p>
+    <p>
+      <a href="https://twitter.com/shoelacecss" class="button button-info" style="margin-bottom: 1.2rem;">Follow</a>
+      <a href="https://paypal.me/claviska" class="button button-success" style="margin-bottom: 1.2rem;">Donate</a>
+    </p>
+  </footer>
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js"></script>
+  <script src="../dist/shoelace.js"></script>
+  <script>
+    $(function() {
+      // Highlight current nav item
+      $('#nav a').each(function() {
+        if(this.pathname === location.pathname) {
+          $(this).addClass('current');
+        }
+      });
+    });
+  </script>
+  <script async defer src="https://buttons.github.io/buttons.js"></script>
+</body>
+</html>

docs/buttons.html

@@ -0,0 +1,161 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <meta name="description" content="Add styled buttons to your app with minimal effort.">
+  <link rel="icon" href="../source/img/favicon.png">
+  <link rel="stylesheet" href="../dist/shoelace.css">
+  <link rel="stylesheet" href="../source/css/_docs.css">
+  <link rel="stylesheet" href="https://cdn.rawgit.com/AGMStudio/prism-theme-one-dark/f81fe477/prism-onedark.css">
+  <title>Buttons</title>
+</head>
+<body>
+
+  <header id="head" class="text-center">
+    <h1>
+      <a href="../index.html">
+        <img src="../source/img/wordmark.svg" alt="Shoelace logo">
+      </a>
+    </h1>
+    <p class="text-muted text-small">
+      A back to the basics CSS starter kit. For when you don’t need the whole boot.
+    </p>
+  </header>
+
+  <main id="wrap">
+    <nav id="nav">
+      <a href="installing.html">Installing</a>
+      <a href="customizing.html">Customizing</a>
+      <a href="content.html">Content</a>
+      <a href="alerts.html">Alerts</a>
+      <a href="badges.html">Badges</a>
+      <a href="buttons.html">Buttons</a>
+      <a href="dropdowns.html">Dropdowns</a>
+      <a href="forms.html">Forms</a>
+      <a href="loaders.html">Loaders</a>
+      <a href="progress-bars.html">Progress Bars</a>
+      <a href="switches.html">Switches</a>
+      <a href="tabs.html">Tabs</a>
+      <a href="tables.html">Tables</a>
+      <a href="utilities.html">Utilities</a>
+      <a href="grid-system.html">Grid System</a>
+      <a href="icons.html">Icons</a>
+      <a href="browser-support.html">Browser Support</a>
+      <a href="attribution.html">Attribution</a>
+    </nav>
+
+    <div id="content">
+      <h2 id="buttons">Buttons</h2>
+<p>To create a button, use the <code>&lt;button&gt;</code> element or apply the <code>button</code> class to another element such as an <code>&lt;a&gt;</code>. You can change a button’s appearance using the <code>button-*</code> modifier.</p>
+<pre><code class="lang-html">&lt;button type=&quot;button&quot;&gt;Default&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;button-success&quot;&gt;Success&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;button-info&quot;&gt;Info&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;button-warning&quot;&gt;Warning&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;button-danger&quot;&gt;Danger&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;button-inverse&quot;&gt;Inverse&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;button button-link&quot;&gt;Link&lt;/button&gt;
+</code></pre>
+<div class="input-single">
+  <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-link">Link</button>
+</div>
+
+<p>Use the <code>button-small</code> and <code>button-big</code> modifiers to change the size of a button.</p>
+<div class="input-single">
+  <button type="button" class="button-small">Small Button</button>
+  <button type="button">Normal Button</button>
+  <button type="button" class="button-big">Big Button</button>
+</div>
+
+<p>Use the <code>button-block</code> modifier to make the button span the entire width of its parent element. You can also mix and match modifiers as needed.</p>
+<div class="input-single">
+  <button type="button" class="button-block button-small">Small Block Button</button>
+</div>
+
+<div class="input-single">
+  <button type="button" class="button-block">Normal Block Button</button>
+</div>
+
+<div class="input-single">
+  <button type="button" class="button-block button-big">Big Block Button</button>
+</div>
+
+<p>Disabled buttons look like this. Set the <code>disabled</code> property on <code>&lt;button&gt;</code> elements to achieve this effect. For all other elements, apply <code>class=&quot;disabled&quot;</code> instead.</p>
+<div class="input-single">
+  <button type="button" disabled>Default</button>
+  <button type="button" class="button-success" disabled>Success</button>
+  <button type="button" class="button-info disabled">Info</button>
+  <button type="button" class="button-warning" disabled>Warning</button>
+  <button type="button" class="button-danger" disabled>Danger</button>
+  <button type="button" class="button-inverse" disabled>Inverse</button>
+</div>
+
+<p>You can force buttons to have an active state by applying the <code>active</code> class.</p>
+<div class="input-single">
+  <button type="button" class="active">Default</button>
+  <button type="button" class="button-success active">Success</button>
+  <button type="button" class="button-info active">Info</button>
+  <button type="button" class="button-warning active">Warning</button>
+  <button type="button" class="button-danger active">Danger</button>
+  <button type="button" class="button-inverse active">Inverse</button>
+</div>
+
+<h3 id="file-buttons">File Buttons</h3>
+<p>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 <a href="https://stackoverflow.com/questions/2189615/how-to-get-file-name-when-user-select-a-file-via-input-type-file">exercise for the user</a>.</p>
+<p>File buttons are simply <code>&lt;label&gt;</code> elements with the <code>button</code> class and a nested file input.</p>
+<pre><code class="lang-html">&lt;label class=&quot;button&quot;&gt;
+  Select File
+  &lt;input type=&quot;file&quot;&gt;
+&lt;/label&gt;
+</code></pre>
+<div class="input-single">
+  <label class="button">Select File <input type="file"></label>
+</div>
+
+    </div>
+  </main>
+
+  <footer id="foot">
+    <a href="../index.html">
+      <img src="../source/img/wordmark.svg" alt="Shoelace logo">
+    </a>
+    <p class="text-small text-muted">
+      Shoelace.css 1.0.0-beta12 &middot;
+      &copy; A Beautiful Site, LLC
+    </p>
+
+    <p class="margin-y-small text-center">
+      <a class="github-button" href="https://github.com/claviska/shoelace-css/fork" data-size="large" aria-label="Fork claviska/shoelace-css on GitHub">Fork</a>
+      <a class="github-button" href="https://github.com/claviska/shoelace-css/releases" data-icon="octicon-cloud-download" data-size="large" aria-label="Download claviska/shoelace-css on GitHub">Download</a>
+      <a class="github-button" href="https://github.com/claviska/shoelace-css/issues" data-icon="octicon-issue-opened" data-size="large" aria-label="Issue claviska/shoelace-css on GitHub">Report a Bug</a>
+      <a class="github-button" href="https://github.com/claviska/shoelace-css" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star claviska/shoelace-css on GitHub">Star</a>
+    </p>
+    <p>
+      <a href="https://twitter.com/shoelacecss" class="button button-info" style="margin-bottom: 1.2rem;">Follow</a>
+      <a href="https://paypal.me/claviska" class="button button-success" style="margin-bottom: 1.2rem;">Donate</a>
+    </p>
+  </footer>
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js"></script>
+  <script src="../dist/shoelace.js"></script>
+  <script>
+    $(function() {
+      // Highlight current nav item
+      $('#nav a').each(function() {
+        if(this.pathname === location.pathname) {
+          $(this).addClass('current');
+        }
+      });
+    });
+  </script>
+  <script async defer src="https://buttons.github.io/buttons.js"></script>
+</body>
+</html>

docs/content.html

@@ -0,0 +1,226 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <meta name="description" content="Default content styles.">
+  <link rel="icon" href="../source/img/favicon.png">
+  <link rel="stylesheet" href="../dist/shoelace.css">
+  <link rel="stylesheet" href="../source/css/_docs.css">
+  <link rel="stylesheet" href="https://cdn.rawgit.com/AGMStudio/prism-theme-one-dark/f81fe477/prism-onedark.css">
+  <title>Content</title>
+</head>
+<body>
+
+  <header id="head" class="text-center">
+    <h1>
+      <a href="../index.html">
+        <img src="../source/img/wordmark.svg" alt="Shoelace logo">
+      </a>
+    </h1>
+    <p class="text-muted text-small">
+      A back to the basics CSS starter kit. For when you don’t need the whole boot.
+    </p>
+  </header>
+
+  <main id="wrap">
+    <nav id="nav">
+      <a href="installing.html">Installing</a>
+      <a href="customizing.html">Customizing</a>
+      <a href="content.html">Content</a>
+      <a href="alerts.html">Alerts</a>
+      <a href="badges.html">Badges</a>
+      <a href="buttons.html">Buttons</a>
+      <a href="dropdowns.html">Dropdowns</a>
+      <a href="forms.html">Forms</a>
+      <a href="loaders.html">Loaders</a>
+      <a href="progress-bars.html">Progress Bars</a>
+      <a href="switches.html">Switches</a>
+      <a href="tabs.html">Tabs</a>
+      <a href="tables.html">Tables</a>
+      <a href="utilities.html">Utilities</a>
+      <a href="grid-system.html">Grid System</a>
+      <a href="icons.html">Icons</a>
+      <a href="browser-support.html">Browser Support</a>
+      <a href="attribution.html">Attribution</a>
+    </nav>
+
+    <div id="content">
+      <h2 id="content">Content</h2>
+<p>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.</p>
+<p>For easy spacing, Shoelace removes top margins and applies a bottom margin to block elements. By default, text sizing and spacing is measured in <code>rem</code> units.</p>
+<h3 id="headings-h1-h6-">Headings <code>&lt;h1&gt; – &lt;h6&gt;</code></h3>
+<p><h1>Heading 1</h1></p>
+<p><h2>Heading 2</h2></p>
+<p><h3>Heading 3</h3></p>
+<p><h4>Heading 4</h4></p>
+<p><h5>Heading 5</h5></p>
+<h6>Heading 6</h6>
+
+<h3 id="paragraphs-p-">Paragraphs <code>&lt;p&gt;</code></h3>
+<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.</p>
+<p>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.</p>
+<h3 id="ordered-lists-ol-">Ordered Lists <code>&lt;ol&gt;</code></h3>
+<ol>
+<li>List item 1</li>
+<li>List item 2<ol>
+<li>Nested item 1</li>
+<li>Nested item 2</li>
+<li>Nested item 3</li>
+</ol>
+</li>
+<li>List item 3</li>
+</ol>
+<h3 id="unordered-lists-ul-">Unordered Lists <code>&lt;ul&gt;</code></h3>
+<ul>
+<li>List item 1</li>
+<li>List item 2<ul>
+<li>Nested item 1</li>
+<li>Nested item 2</li>
+<li>Nested item 3</li>
+</ul>
+</li>
+<li>List item 3</li>
+</ul>
+<h3 id="definition-lists-dl-">Definition Lists <code>&lt;dl&gt;</code></h3>
+<dl>
+  <dt>Term 1</dt>
+  <dd>
+    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!
+  </dd>
+  <dt>Term 2</dt>
+  <dd>
+    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?
+  </dd>
+</dl>
+
+<h3 id="blockquotes-blockquote-">Blockquotes <code>&lt;blockquote&gt;</code></h3>
+<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.
+</blockquote>
+
+<h3 id="preformatted-text-pre-">Preformatted Text <code>&lt;pre&gt;</code></h3>
+<pre><code>CLS
+SCREEN 13
+PRINT &quot;SHOELACE IS AWESOME&quot;
+</code></pre><h3 id="text-formats">Text Formats</h3>
+<table class="table">
+  <thead>
+    <tr>
+      <th>Element</th>
+      <th>Example</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>&lt;strong&gt;</code></td>
+      <td><strong>This is strong text</strong></td>
+    </tr>
+    <tr>
+      <td><code>&lt;em&gt;</code></td>
+      <td><em>This is emphasized text</em></td>
+    </tr>
+    <tr>
+      <td><code>&lt;u&gt;</code></td>
+      <td><u>This is underlined text</u></td>
+    </tr>
+    <tr>
+      <td><code>&lt;s&gt;</code></td>
+      <td><s>This is strikethrough text</s></td>
+    </tr>
+    <tr>
+      <td><code>&lt;a&gt;</code></td>
+      <td><a href="#">This is link text</a></td>
+    </tr>
+    <tr>
+      <td><code>&lt;small&gt;</code></td>
+      <td><small>This is small text</small></td>
+    </tr>
+    <tr>
+      <td><code>&lt;sup&gt;</code></td>
+      <td><sup>This is superscript text</sup></td>
+    </tr>
+    <tr>
+      <td><code>&lt;sub&gt;</code></td>
+      <td><sub>This is subscript text</sub></td>
+    </tr>
+    <tr>
+      <td><code>&lt;code&gt;</code></td>
+      <td><code>This is code text</code></td>
+    </tr>
+    <tr>
+      <td><code>&lt;samp&gt;</code></td>
+      <td><samp>This is sample text</samp></td>
+    </tr>
+    <tr>
+      <td><code>&lt;var&gt;</code></td>
+      <td><var>This is variable text</var></td>
+    </tr>
+    <tr>
+      <td><code>&lt;kbd&gt;</code></td>
+      <td><kbd>This is keyboard text</kbd></td>
+    </tr>
+    <tr>
+      <td><code>&lt;abbr&gt;</code></td>
+      <td><abbr title="Abbreviation">This is abbreviation text</abbr></td>
+    </tr>
+    <tr>
+      <td><code>&lt;del&gt;</code></td>
+      <td><del>This is deleted text</del></td>
+    </tr>
+    <tr>
+      <td><code>&lt;ins&gt;</code></td>
+      <td><ins>This is inserted text</ins></td>
+    </tr>
+    <tr>
+      <td><code>&lt;mark&gt;</code></td>
+      <td><mark>This is marked text</mark></td>
+    </tr>
+  </tbody>
+</table>
+
+    </div>
+  </main>
+
+  <footer id="foot">
+    <a href="../index.html">
+      <img src="../source/img/wordmark.svg" alt="Shoelace logo">
+    </a>
+    <p class="text-small text-muted">
+      Shoelace.css 1.0.0-beta12 &middot;
+      &copy; A Beautiful Site, LLC
+    </p>
+
+    <p class="margin-y-small text-center">
+      <a class="github-button" href="https://github.com/claviska/shoelace-css/fork" data-size="large" aria-label="Fork claviska/shoelace-css on GitHub">Fork</a>
+      <a class="github-button" href="https://github.com/claviska/shoelace-css/releases" data-icon="octicon-cloud-download" data-size="large" aria-label="Download claviska/shoelace-css on GitHub">Download</a>
+      <a class="github-button" href="https://github.com/claviska/shoelace-css/issues" data-icon="octicon-issue-opened" data-size="large" aria-label="Issue claviska/shoelace-css on GitHub">Report a Bug</a>
+      <a class="github-button" href="https://github.com/claviska/shoelace-css" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star claviska/shoelace-css on GitHub">Star</a>
+    </p>
+    <p>
+      <a href="https://twitter.com/shoelacecss" class="button button-info" style="margin-bottom: 1.2rem;">Follow</a>
+      <a href="https://paypal.me/claviska" class="button button-success" style="margin-bottom: 1.2rem;">Donate</a>
+    </p>
+  </footer>
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js"></script>
+  <script src="../dist/shoelace.js"></script>
+  <script>
+    $(function() {
+      // Highlight current nav item
+      $('#nav a').each(function() {
+        if(this.pathname === location.pathname) {
+          $(this).addClass('current');
+        }
+      });
+    });
+  </script>
+  <script async defer src="https://buttons.github.io/buttons.js"></script>
+</body>
+</html>

docs/customizing.html

@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <meta name="description" content="Learn how to customize Shoelace.css with CSS variables.">
+  <link rel="icon" href="../source/img/favicon.png">
+  <link rel="stylesheet" href="../dist/shoelace.css">
+  <link rel="stylesheet" href="../source/css/_docs.css">
+  <link rel="stylesheet" href="https://cdn.rawgit.com/AGMStudio/prism-theme-one-dark/f81fe477/prism-onedark.css">
+  <title>Customizing</title>
+</head>
+<body>
+
+  <header id="head" class="text-center">
+    <h1>
+      <a href="../index.html">
+        <img src="../source/img/wordmark.svg" alt="Shoelace logo">
+      </a>
+    </h1>
+    <p class="text-muted text-small">
+      A back to the basics CSS starter kit. For when you don’t need the whole boot.
+    </p>
+  </header>
+
+  <main id="wrap">
+    <nav id="nav">
+      <a href="installing.html">Installing</a>
+      <a href="customizing.html">Customizing</a>
+      <a href="content.html">Content</a>
+      <a href="alerts.html">Alerts</a>
+      <a href="badges.html">Badges</a>
+      <a href="buttons.html">Buttons</a>
+      <a href="dropdowns.html">Dropdowns</a>
+      <a href="forms.html">Forms</a>
+      <a href="loaders.html">Loaders</a>
+      <a href="progress-bars.html">Progress Bars</a>
+      <a href="switches.html">Switches</a>
+      <a href="tabs.html">Tabs</a>
+      <a href="tables.html">Tables</a>
+      <a href="utilities.html">Utilities</a>
+      <a href="grid-system.html">Grid System</a>
+      <a href="icons.html">Icons</a>
+      <a href="browser-support.html">Browser Support</a>
+      <a href="attribution.html">Attribution</a>
+    </nav>
+
+    <div id="content">
+      <h2 id="customizing">Customizing</h2>
+<p>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 <a href="../source/css/variables.css"><code>variables.css</code></a> in your own stylesheet.</p>
+<p>For example, you can customize the default text color and background like this:</p>
+<pre><code class="lang-css">:root {
+  --body-color: white;
+  --body-bg-color: black;
+}
+</code></pre>
+<h3 id="using-variables">Using Variables</h3>
+<p>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 <a href="#custom-components">custom components</a>.</p>
+<pre><code class="lang-css">.your-selector {
+  color: var(--state-danger);
+}
+</code></pre>
+<p>Refer to <a href="../source/css/variables.css"><code>variables.css</code></a> for a complete list of variables in Shoelace. If you’re not familiar with CSS variables, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables">this article</a> will bring you up to speed. There’s also an <a href="https://codepen.io/claviska/pen/NvGVYM?editors=1100">interactive demo</a> if you want to experiment.</p>
+<h3 id="custom-components">Custom Components</h3>
+<p>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.</p>
+<p><strong>Familiarize yourself with Shoelace’s naming conventions.</strong> A custom accordion component, for example, would have a class name such as <code>accordion</code>, modifier classes such as <code>accordion-open</code>, and variable names that look like <code>--accordion-bg-color</code>. Try to follow similar patterns as much as possible.</p>
+<p><strong>Define new variables when it makes sense to.</strong> Take a look at <a href="../source/css/variables.css"><code>variables.css</code></a> 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.</p>
+<p><strong>Semantic markup is strongly encouraged.</strong> Custom components should use the most appropriate elements and the minimal amount of markup required.</p>
+<p><strong>Keep everything together.</strong> 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.</p>
+
+    </div>
+  </main>
+
+  <footer id="foot">
+    <a href="../index.html">
+      <img src="../source/img/wordmark.svg" alt="Shoelace logo">
+    </a>
+    <p class="text-small text-muted">
+      Shoelace.css 1.0.0-beta12 &middot;
+      &copy; A Beautiful Site, LLC
+    </p>
+
+    <p class="margin-y-small text-center">
+      <a class="github-button" href="https://github.com/claviska/shoelace-css/fork" data-size="large" aria-label="Fork claviska/shoelace-css on GitHub">Fork</a>
+      <a class="github-button" href="https://github.com/claviska/shoelace-css/releases" data-icon="octicon-cloud-download" data-size="large" aria-label="Download claviska/shoelace-css on GitHub">Download</a>
+      <a class="github-button" href="https://github.com/claviska/shoelace-css/issues" data-icon="octicon-issue-opened" data-size="large" aria-label="Issue claviska/shoelace-css on GitHub">Report a Bug</a>
+      <a class="github-button" href="https://github.com/claviska/shoelace-css" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star claviska/shoelace-css on GitHub">Star</a>
+    </p>
+    <p>
+      <a href="https://twitter.com/shoelacecss" class="button button-info" style="margin-bottom: 1.2rem;">Follow</a>
+      <a href="https://paypal.me/claviska" class="button button-success" style="margin-bottom: 1.2rem;">Donate</a>
+    </p>
+  </footer>
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js"></script>
+  <script src="../dist/shoelace.js"></script>
+  <script>
+    $(function() {
+      // Highlight current nav item
+      $('#nav a').each(function() {
+        if(this.pathname === location.pathname) {
+          $(this).addClass('current');
+        }
+      });
+    });
+  </script>
+  <script async defer src="https://buttons.github.io/buttons.js"></script>
+</body>
+</html>

docs/dropdowns.html

@@ -0,0 +1,199 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <meta name="description" content="Add beautiful menus to your app with dropdowns.">
+  <link rel="icon" href="../source/img/favicon.png">
+  <link rel="stylesheet" href="../dist/shoelace.css">
+  <link rel="stylesheet" href="../source/css/_docs.css">
+  <link rel="stylesheet" href="https://cdn.rawgit.com/AGMStudio/prism-theme-one-dark/f81fe477/prism-onedark.css">
+  <title>Dropdowns</title>
+</head>
+<body>
+
+  <header id="head" class="text-center">
+    <h1>
+      <a href="../index.html">
+        <img src="../source/img/wordmark.svg" alt="Shoelace logo">
+      </a>
+    </h1>
+    <p class="text-muted text-small">
+      A back to the basics CSS starter kit. For when you don’t need the whole boot.
+    </p>
+  </header>
+
+  <main id="wrap">
+    <nav id="nav">
+      <a href="installing.html">Installing</a>
+      <a href="customizing.html">Customizing</a>
+      <a href="content.html">Content</a>
+      <a href="alerts.html">Alerts</a>
+      <a href="badges.html">Badges</a>
+      <a href="buttons.html">Buttons</a>
+      <a href="dropdowns.html">Dropdowns</a>
+      <a href="forms.html">Forms</a>
+      <a href="loaders.html">Loaders</a>
+      <a href="progress-bars.html">Progress Bars</a>
+      <a href="switches.html">Switches</a>
+      <a href="tabs.html">Tabs</a>
+      <a href="tables.html">Tables</a>
+      <a href="utilities.html">Utilities</a>
+      <a href="grid-system.html">Grid System</a>
+      <a href="icons.html">Icons</a>
+      <a href="browser-support.html">Browser Support</a>
+      <a href="attribution.html">Attribution</a>
+    </nav>
+
+    <div id="content">
+      <h2 id="dropdowns">Dropdowns</h2>
+<p>Dropdowns can be created using the markup below. You can use a <code>&lt;button&gt;</code> or an <code>&lt;a&gt;</code> as a trigger. Dropdown indicators (i.e. carets) are added for you. Menu items are simply <code>&lt;a&gt;</code> elements. Dividers are simply <code>&lt;hr&gt;</code> elements.</p>
+<p>Note the class names used for the main container, the trigger, and the menu. Additionally, menu items can be disabled by adding the <code>disabled</code> class. Menu items can also be given a checked state using the <code>checked</code> class.</p>
+<p>To disable a dropdown entirely, add the <code>disabled</code> property to the dropdown trigger if it’s a button. If it’s a link, add the <code>disabled</code> class instead.</p>
+<pre><code class="lang-html">&lt;div class=&quot;dropdown&quot;&gt;
+  &lt;button type=&quot;button&quot; class=&quot;dropdown-trigger&quot;&gt;Dropdown&lt;/button&gt;
+  &lt;div class=&quot;dropdown-menu&quot;&gt;
+    &lt;a href=&quot;#&quot;&gt;Item 1&lt;/a&gt;
+    &lt;a href=&quot;#&quot;&gt;Item 2&lt;/a&gt;
+    &lt;a href=&quot;#&quot;&gt;Item 3&lt;/a&gt;
+    &lt;a href=&quot;#&quot; class=&quot;checked&quot;&gt;Checked&lt;/a&gt;
+    &lt;a href=&quot;#&quot; class=&quot;disabled&quot;&gt;Disabled&lt;/a&gt;
+    &lt;hr&gt;
+    &lt;a href=&quot;#&quot;&gt;More...&lt;/a&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</code></pre>
+<div class="input-single">
+  <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>
+</div>
+
+<p>Use the <code>dropdown-top</code> and <code>dropdown-left</code> modifiers to change the positioning of the menu. You can combine these modifiers as needed.</p>
+<pre><code class="lang-html">&lt;div class=&quot;dropdown dropdown-left&quot;&gt;
+  ...
+&lt;/div&gt;
+
+&lt;div class=&quot;dropdown dropdown-top&quot;&gt;
+  ...
+&lt;/div&gt;
+
+&lt;div class=&quot;dropdown dropdown-top dropdown-left&quot;&gt;
+  ...
+&lt;/div&gt;
+</code></pre>
+<div class="input-single">
+  <div class="dropdown dropdown-left">
+    <button type="button" class="dropdown-trigger">Left</button>
+    <div class="dropdown-menu">
+      <a href="#">Item 1</a>
+      <a href="#">Item 2</a>
+      <a href="#">Item 3</a>
+    </div>
+  </div>
+
+  <div class="dropdown dropdown-top">
+    <button type="button" class="dropdown-trigger">Top</button>
+    <div class="dropdown-menu">
+      <a href="#">Item 1</a>
+      <a href="#">Item 2</a>
+      <a href="#">Item 3</a>
+    </div>
+  </div>
+
+  <div class="dropdown dropdown-top dropdown-left">
+    <button type="button" class="dropdown-trigger">Top Left</button>
+    <div class="dropdown-menu">
+      <a href="#">Item 1</a>
+      <a href="#">Item 2</a>
+      <a href="#">Item 3</a>
+    </div>
+  </div>
+</div>
+
+<p>Dropdowns with button triggers can be used inside input groups.</p>
+<div class="input-group">
+  <span class="input-addon">$</span>
+  <input type="text" placeholder="10.00">
+  <div class="dropdown dropdown-left">
+    <button type="button" class="dropdown-trigger">Currency</button>
+    <div class="dropdown-menu">
+      <a href="#" class="checked">USD</a>
+      <a href="#">AUD</a>
+      <a href="#">CAD</a>
+      <a href="#">GBP</a>
+    </div>
+  </div>
+</div>
+
+<h3 id="events">Events</h3>
+<p>Dropdowns require <code>shoelace.js</code> to make them interactive. You don’t need to initialize them. Simply include the script and everything “just works.”</p>
+<p>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:</p>
+<ul>
+<li><code>show</code> – Fires when a dropdown is shown.</li>
+<li><code>hide</code> – Fires when a dropdown is hidden.</li>
+<li><code>select</code> – Fires when a dropdown menu item is selected. The second callback argument is a reference to the respective menu item.</li>
+</ul>
+<p>This example will log all three events for a dropdown with an id of <code>my-dropdown</code>.</p>
+<pre><code class="lang-javascript">$(&#39;#my-dropdown&#39;)
+  .on(&#39;show&#39;, function(event) {
+    console.log(&#39;show&#39;, event.target);
+  })
+  .on(&#39;hide&#39;, function(event) {
+    console.log(&#39;hide&#39;, event.target);
+  })
+  .on(&#39;select&#39;, function(event, item) {
+    console.log(&#39;select&#39;, event.target, item);
+  });
+</code></pre>
+
+    </div>
+  </main>
+
+  <footer id="foot">
+    <a href="../index.html">
+      <img src="../source/img/wordmark.svg" alt="Shoelace logo">
+    </a>
+    <p class="text-small text-muted">
+      Shoelace.css 1.0.0-beta12 &middot;
+      &copy; A Beautiful Site, LLC
+    </p>
+
+    <p class="margin-y-small text-center">
+      <a class="github-button" href="https://github.com/claviska/shoelace-css/fork" data-size="large" aria-label="Fork claviska/shoelace-css on GitHub">Fork</a>
+      <a class="github-button" href="https://github.com/claviska/shoelace-css/releases" data-icon="octicon-cloud-download" data-size="large" aria-label="Download claviska/shoelace-css on GitHub">Download</a>
+      <a class="github-button" href="https://github.com/claviska/shoelace-css/issues" data-icon="octicon-issue-opened" data-size="large" aria-label="Issue claviska/shoelace-css on GitHub">Report a Bug</a>
+      <a class="github-button" href="https://github.com/claviska/shoelace-css" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star claviska/shoelace-css on GitHub">Star</a>
+    </p>
+    <p>
+      <a href="https://twitter.com/shoelacecss" class="button button-info" style="margin-bottom: 1.2rem;">Follow</a>
+      <a href="https://paypal.me/claviska" class="button button-success" style="margin-bottom: 1.2rem;">Donate</a>
+    </p>
+  </footer>
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js"></script>
+  <script src="../dist/shoelace.js"></script>
+  <script>
+    $(function() {
+      // Highlight current nav item
+      $('#nav a').each(function() {
+        if(this.pathname === location.pathname) {
+          $(this).addClass('current');
+        }
+      });
+    });
+  </script>
+  <script async defer src="https://buttons.github.io/buttons.js"></script>
+</body>
+</html>

docs/forms.html

@@ -0,0 +1,394 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <meta name="description" content="Default form control styles.">
+  <link rel="icon" href="../source/img/favicon.png">
+  <link rel="stylesheet" href="../dist/shoelace.css">
+  <link rel="stylesheet" href="../source/css/_docs.css">
+  <link rel="stylesheet" href="https://cdn.rawgit.com/AGMStudio/prism-theme-one-dark/f81fe477/prism-onedark.css">
+  <title>Forms</title>
+</head>
+<body>
+
+  <header id="head" class="text-center">
+    <h1>
+      <a href="../index.html">
+        <img src="../source/img/wordmark.svg" alt="Shoelace logo">
+      </a>
+    </h1>
+    <p class="text-muted text-small">
+      A back to the basics CSS starter kit. For when you don’t need the whole boot.
+    </p>
+  </header>
+
+  <main id="wrap">
+    <nav id="nav">
+      <a href="installing.html">Installing</a>
+      <a href="customizing.html">Customizing</a>
+      <a href="content.html">Content</a>
+      <a href="alerts.html">Alerts</a>
+      <a href="badges.html">Badges</a>
+      <a href="buttons.html">Buttons</a>
+      <a href="dropdowns.html">Dropdowns</a>
+      <a href="forms.html">Forms</a>
+      <a href="loaders.html">Loaders</a>
+      <a href="progress-bars.html">Progress Bars</a>
+      <a href="switches.html">Switches</a>
+      <a href="tabs.html">Tabs</a>
+      <a href="tables.html">Tables</a>
+      <a href="utilities.html">Utilities</a>
+      <a href="grid-system.html">Grid System</a>
+      <a href="icons.html">Icons</a>
+      <a href="browser-support.html">Browser Support</a>
+      <a href="attribution.html">Attribution</a>
+    </nav>
+
+    <div id="content">
+      <h2 id="forms">Forms</h2>
+<p>Shoelace gives you beautiful forms without hassle. Most form controls don’t need a special class for styling.</p>
+<h3 id="form-controls">Form Controls</h3>
+<p>Form controls are styled at 100% of the width of their parent element.</p>
+<table class="table table-bordered">
+  <thead>
+    <tr>
+      <th>Input Type</th>
+      <th>Example</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>&lt;input type=&quot;checkbox&quot;&gt;</code></td>
+      <td>
+        <label><input type="checkbox" checked> Checkbox 1</label><br>
+        <label><input type="checkbox"> Checkbox 2</label>
+      </td>
+    </tr>
+    <tr>
+      <td><code>&lt;input type=&quot;color&quot;&gt;</code></td>
+      <td><input type="color" value="#0099dd"></td>
+    </tr>
+    <tr>
+      <td><code>&lt;input type=&quot;date&quot;&gt;</code></td>
+      <td><input type="date"></td>
+    </tr>
+    <tr>
+      <td><code>&lt;input type=&quot;email&quot;&gt;</code></td>
+      <td><input type="email"></td>
+    </tr>
+    <tr>
+      <td>
+        <code>&lt;input type=&quot;file&quot;&gt;</code>
+        <br>
+        <span class="text-small text-muted">
+          File inputs aren’t supported. Use a <a href="buttons.html#file-buttons">file button</a> instead.
+        </span>
+      </td>
+      <td>
+        <label class="button button-block">Select File <input type="file"></label>
+      </td>
+    </tr>
+    <tr>
+      <td><code>&lt;input type=&quot;number&quot;&gt;</code></td>
+      <td><input type="number"></td>
+    </tr>
+    <tr>
+      <td><code>&lt;input type=&quot;password&quot;&gt;</code></td>
+      <td><input type="password"></td>
+    </tr>
+    <tr>
+      <td><code>&lt;input type=&quot;radio&quot;&gt;</code></td>
+      <td>
+        <label><input type="Radio" name="radio" checked> Radio 1</label><br>
+        <label><input type="Radio" name="radio"> Radio 2</label>
+      </td>
+    </tr>
+    <tr>
+      <td><code>&lt;input type=&quot;range&quot;&gt;</code></td>
+      <td><input type="range"></td>
+    </tr>
+    <tr>
+      <td><code>&lt;input type=&quot;search&quot;&gt;</code></td>
+      <td><input type="search"></td>
+    </tr>
+    <tr>
+      <td><code>&lt;input type=&quot;text&quot;&gt;</code></td>
+      <td><input type="text"></td>
+    </tr>
+    <tr>
+      <td><code>&lt;input type=&quot;time&quot;&gt;</code></td>
+      <td><input type="time"></td>
+    </tr>
+    <tr>
+      <td><code>&lt;select&gt;</code></td>
+      <td>
+        <select>
+          <option>Item 1</option>
+          <option>Item 2</option>
+          <option>Item 3</option>
+        </select>
+      </td>
+    </tr>
+    <tr>
+      <td><code>&lt;textarea&gt;</code></td>
+      <td><textarea rows="4"></textarea></td>
+    </tr>
+  </tbody>
+</table>
+
+<p>You can change the size of most form controls with the <code>input-small</code> and <code>input-big</code> modifiers.</p>
+<pre><code class="lang-html">&lt;input type=&quot;text&quot; class=&quot;input-small&quot; placeholder=&quot;Small&quot;&gt;
+&lt;input type=&quot;text&quot; placeholder=&quot;Default&quot;&gt;
+&lt;input type=&quot;text&quot; class=&quot;input-big&quot; placeholder=&quot;Big&quot;&gt;
+
+&lt;select class=&quot;input-small&quot;&gt;&lt;option&gt;Item&lt;/option&gt;&lt;/select&gt;
+&lt;select&gt;&lt;option&gt;Item&lt;/option&gt;&lt;/select&gt;
+&lt;select class=&quot;input-big&quot;&gt;&lt;option&gt;Item&lt;/option&gt;&lt;/select&gt;
+</code></pre>
+<div class="two-column">
+  <p><input type="text" class="input-small" placeholder="Small"></p>
+  <p><input type="text" placeholder="Default"></p>
+  <p><input type="text" class="input-big" placeholder="Big"></p>
+  <p><select class="input-small"><option>Item</option></select></p>
+  <p><select><option>Item</option></select></p>
+  <p><select class="input-big"><option>Item</option></select></p>
+</div>
+
+<p>Disabled form controls look like this:</p>
+<div class="input-single">
+  <input type="text" placeholder="Input" disabled>
+</div>
+
+<div class="input-single">
+  <label><input type="checkbox" disabled> Checkbox</label>
+  <label><input type="radio" disabled> Radio</label>
+</div>
+
+<p>Read-only form controls look like this:</p>
+<div class="input-single">
+  <input type="text" readonly value="This is read-only">
+</div>
+
+<h3 id="form-control-spacing">Form Control Spacing</h3>
+<p>For proper spacing of individual form controls, wrap them in <code>input-single</code> containers.</p>
+<pre><code class="lang-html">&lt;div class=&quot;input-single&quot;&gt;
+  &lt;label&gt;Name&lt;/label&gt;
+  &lt;input type=&quot;text&quot;&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;input-single&quot;&gt;
+  &lt;label&gt;Password&lt;/label&gt;
+  &lt;input type=&quot;password&quot;&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;input-single&quot;&gt;
+  &lt;label&gt;&lt;input type=&quot;checkbox&quot;&gt; Remember me&lt;/label&gt;
+&lt;/div&gt;
+</code></pre>
+<div class="input-single">
+  <label>Username</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>
+
+<h3 id="input-groups">Input Groups</h3>
+<p>Form controls and buttons can be grouped by wrapping them in <code>input-group</code> containers.</p>
+<pre><code class="lang-html">&lt;div class=&quot;input-group&quot;&gt;
+  &lt;input type=&quot;text&quot;&gt;
+  &lt;button type=&quot;button&quot; class=&quot;button&quot;&gt;Submit&lt;/button&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;input-group&quot;&gt;
+  &lt;button type=&quot;button&quot; class=&quot;button&quot;&gt;Submit&lt;/button&gt;
+  &lt;input type=&quot;text&quot;&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;input-group&quot;&gt;
+  &lt;input type=&quot;text&quot; placeholder=&quot;First&quot;&gt;
+  &lt;input type=&quot;text&quot; placeholder=&quot;Middle&quot;&gt;
+  &lt;input type=&quot;text&quot; placeholder=&quot;Last&quot;&gt;
+  &lt;button type=&quot;button&quot; class=&quot;button&quot;&gt;Submit&lt;/button&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;input-group&quot;&gt;
+  &lt;button type=&quot;button&quot; class=&quot;button&quot;&gt;Option 1&lt;/button&gt;
+  &lt;button type=&quot;button&quot; class=&quot;button&quot;&gt;Option 2&lt;/button&gt;
+  &lt;button type=&quot;button&quot; class=&quot;button&quot;&gt;Option 3&lt;/button&gt;
+&lt;/div&gt;
+</code></pre>
+<div class="input-single">
+  <div class="input-group">
+    <input type="text">
+    <button type="button">Submit</button>
+  </div>
+</div>
+
+<div class="input-single">
+  <div class="input-group">
+    <button type="button">Submit</button>
+    <input type="text">
+  </div>
+</div>
+
+<div class="input-single">
+  <div class="input-group">
+    <input type="text" placeholder="First">
+    <input type="text" placeholder="Middle">
+    <input type="text" placeholder="Last">
+    <button type="button">Submit</button>
+  </div>
+</div>
+
+<div class="input-single">
+  <div class="input-group">
+    <button type="button">Option 1</button>
+    <button type="button">Option 2</button>
+    <button type="button">Option 3</button>
+  </div>
+</div>
+
+<h3 id="input-addons">Input Addons</h3>
+<p>To create an input addon, use <code>&lt;span class=&quot;input-addon&quot;&gt;</code>. Addons can appear anywhere inside an input group. Use the <code>input-addon-small</code> and <code>input-addon-big</code> modifiers to change the size to match adjacent form controls.</p>
+<pre><code class="lang-html">&lt;div class=&quot;input-group&quot;&gt;
+  &lt;span class=&quot;input-addon input-addon-small&quot;&gt;$&lt;/span&gt;
+  &lt;input type=&quot;text&quot; class=&quot;input-small&quot;&gt;
+  &lt;span class=&quot;input-addon input-addon-small&quot;&gt;.00&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;input-group&quot;&gt;
+  &lt;span class=&quot;input-addon&quot;&gt;$&lt;/span&gt;
+  &lt;input type=&quot;text&quot;&gt;
+  &lt;span class=&quot;input-addon&quot;&gt;.00&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;input-group&quot;&gt;
+  &lt;span class=&quot;input-addon input-addon-big&quot;&gt;$&lt;/span&gt;
+  &lt;input type=&quot;text&quot; class=&quot;input-big&quot;&gt;
+  &lt;span class=&quot;input-addon input-addon-big&quot;&gt;.00&lt;/span&gt;
+&lt;/div&gt;
+</code></pre>
+<div class="input-single">
+  <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>
+
+<div class="input-single">
+  <div class="input-group">
+    <span class="input-addon">$</span>
+    <input type="text">
+    <span class="input-addon">.00</span>
+  </div>
+</div>
+
+<div class="input-single">
+  <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>
+</div>
+
+<h3 id="form-groups">Form Groups</h3>
+<p>Related form controls can be grouped in a <code>&lt;fieldset&gt;</code>. An optional <code>&lt;legend&gt;</code> can be used to display a name for the group.</p>
+<pre><code class="lang-html">&lt;fieldset&gt;
+  &lt;legend&gt;User&lt;/legend&gt;
+  ...
+&lt;/fieldset&gt;
+</code></pre>
+<fieldset>
+  <legend>Login</legend>
+  <div class="input-single">
+    <label>Username</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>
+  <div class="input-single">
+    <button type="button">Login</button>
+  </div>
+</fieldset>
+
+<h3 id="validation">Validation</h3>
+<p>Form controls can be made valid or invalid using the <code>input-valid</code> and <code>input-invalid</code> modifiers. It’s better to apply modifiers to the surrounding <code>input-single</code> so labels will be styled as well, but modifiers can be applied directly to form controls as needed.</p>
+<pre><code class="lang-html">&lt;div class=&quot;input-single input-valid&quot;&gt;
+  &lt;label&gt;Valid&lt;/label&gt;
+  &lt;input type=&quot;text&quot;&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;input-single input-invalid&quot;&gt;
+  &lt;label&gt;Invalid&lt;/label&gt;
+  &lt;input type=&quot;text&quot;&gt;
+&lt;/div&gt;
+</code></pre>
+<div class="two-column">
+  <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>
+</div>
+
+    </div>
+  </main>
+
+  <footer id="foot">
+    <a href="../index.html">
+      <img src="../source/img/wordmark.svg" alt="Shoelace logo">
+    </a>
+    <p class="text-small text-muted">
+      Shoelace.css 1.0.0-beta12 &middot;
+      &copy; A Beautiful Site, LLC
+    </p>
+
+    <p class="margin-y-small text-center">
+      <a class="github-button" href="https://github.com/claviska/shoelace-css/fork" data-size="large" aria-label="Fork claviska/shoelace-css on GitHub">Fork</a>
+      <a class="github-button" href="https://github.com/claviska/shoelace-css/releases" data-icon="octicon-cloud-download" data-size="large" aria-label="Download claviska/shoelace-css on GitHub">Download</a>
+      <a class="github-button" href="https://github.com/claviska/shoelace-css/issues" data-icon="octicon-issue-opened" data-size="large" aria-label="Issue claviska/shoelace-css on GitHub">Report a Bug</a>
+      <a class="github-button" href="https://github.com/claviska/shoelace-css" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star claviska/shoelace-css on GitHub">Star</a>
+    </p>
+    <p>
+      <a href="https://twitter.com/shoelacecss" class="button button-info" style="margin-bottom: 1.2rem;">Follow</a>
+      <a href="https://paypal.me/claviska" class="button button-success" style="margin-bottom: 1.2rem;">Donate</a>
+    </p>
+  </footer>
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js"></script>
+  <script src="../dist/shoelace.js"></script>
+  <script>
+    $(function() {
+      // Highlight current nav item
+      $('#nav a').each(function() {
+        if(this.pathname === location.pathname) {
+          $(this).addClass('current');
+        }
+      });
+    });
+  </script>
+  <script async defer src="https://buttons.github.io/buttons.js"></script>
+</body>
+</html>

docs/grid-system.html

@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <meta name="description" content="Shoelace doesn’t ship with a grid system because you don’t need one!">
+  <link rel="icon" href="../source/img/favicon.png">
+  <link rel="stylesheet" href="../dist/shoelace.css">
+  <link rel="stylesheet" href="../source/css/_docs.css">
+  <link rel="stylesheet" href="https://cdn.rawgit.com/AGMStudio/prism-theme-one-dark/f81fe477/prism-onedark.css">
+  <title>Grid System</title>
+</head>
+<body>
+
+  <header id="head" class="text-center">
+    <h1>
+      <a href="../index.html">
+        <img src="../source/img/wordmark.svg" alt="Shoelace logo">
+      </a>
+    </h1>
+    <p class="text-muted text-small">
+      A back to the basics CSS starter kit. For when you don’t need the whole boot.
+    </p>
+  </header>
+
+  <main id="wrap">
+    <nav id="nav">
+      <a href="installing.html">Installing</a>
+      <a href="customizing.html">Customizing</a>
+      <a href="content.html">Content</a>
+      <a href="alerts.html">Alerts</a>
+      <a href="badges.html">Badges</a>
+      <a href="buttons.html">Buttons</a>
+      <a href="dropdowns.html">Dropdowns</a>
+      <a href="forms.html">Forms</a>
+      <a href="loaders.html">Loaders</a>
+      <a href="progress-bars.html">Progress Bars</a>
+      <a href="switches.html">Switches</a>
+      <a href="tabs.html">Tabs</a>
+      <a href="tables.html">Tables</a>
+      <a href="utilities.html">Utilities</a>
+      <a href="grid-system.html">Grid System</a>
+      <a href="icons.html">Icons</a>
+      <a href="browser-support.html">Browser Support</a>
+      <a href="attribution.html">Attribution</a>
+    </nav>
+
+    <div id="content">
+      <h2 id="grid-system">Grid System</h2>
+<p>Shoelace doesn’t ship with a grid system because <a href="https://rachelandrew.co.uk/archives/2017/07/01/you-do-not-need-a-css-grid-based-grid-system/">you don’t need one</a>. You should use the <a href="https://gridbyexample.com/">CSS Grid Layout</a> instead.</p>
+<p>This website uses the CSS Grid Layout. It’s really simple!</p>
+<pre><code class="lang-html">&lt;main id=&quot;wrap&quot;&gt;
+  &lt;nav id=&quot;nav&quot;&gt;
+    ...
+  &lt;/nav&gt;
+
+  &lt;div id=&quot;content&quot;&gt;
+    ...
+  &lt;/div&gt;
+&lt;/main&gt;
+</code></pre>
+<p>Now we just need a couple styles to turn the nav and content elements into columns. This will make the nav <code>12rem</code> wide and the content <code>100% - 12rem</code> so it fills the rest of the space.</p>
+<pre><code class="lang-css">#wrap {
+  display: grid;
+  grid-template-columns: 12rem calc(100% - 12rem);
+}
+</code></pre>
+<p>You can use media queries to make grids responsive. This is how we make the nav appear on top of the content on smaller screens.</p>
+<pre><code class="lang-css">@media (max-width: 60rem) {
+  #wrap {
+    display: block;
+  }
+}
+</code></pre>
+<p>Support for CSS Grid Layouts is <a href="http://caniuse.com/css-grid">very good</a>, but if you have an obligation to support older browsers, consider using the Bootstrap grid <a href="https://github.com/zirafa/bootstrap-grid-only">without any extras</a> in combination with Shoelace.</p>
+
+    </div>
+  </main>
+
+  <footer id="foot">
+    <a href="../index.html">
+      <img src="../source/img/wordmark.svg" alt="Shoelace logo">
+    </a>
+    <p class="text-small text-muted">
+      Shoelace.css 1.0.0-beta12 &middot;
+      &copy; A Beautiful Site, LLC
+    </p>
+
+    <p class="margin-y-small text-center">
+      <a class="github-button" href="https://github.com/claviska/shoelace-css/fork" data-size="large" aria-label="Fork claviska/shoelace-css on GitHub">Fork</a>
+      <a class="github-button" href="https://github.com/claviska/shoelace-css/releases" data-icon="octicon-cloud-download" data-size="large" aria-label="Download claviska/shoelace-css on GitHub">Download</a>
+      <a class="github-button" href="https://github.com/claviska/shoelace-css/issues" data-icon="octicon-issue-opened" data-size="large" aria-label="Issue claviska/shoelace-css on GitHub">Report a Bug</a>
+      <a class="github-button" href="https://github.com/claviska/shoelace-css" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star claviska/shoelace-css on GitHub">Star</a>
+    </p>
+    <p>
+      <a href="https://twitter.com/shoelacecss" class="button button-info" style="margin-bottom: 1.2rem;">Follow</a>
+      <a href="https://paypal.me/claviska" class="button button-success" style="margin-bottom: 1.2rem;">Donate</a>
+    </p>
+  </footer>
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js"></script>
+  <script src="../dist/shoelace.js"></script>
+  <script>
+    $(function() {
+      // Highlight current nav item
+      $('#nav a').each(function() {
+        if(this.pathname === location.pathname) {
+          $(this).addClass('current');
+        }
+      });
+    });
+  </script>
+  <script async defer src="https://buttons.github.io/buttons.js"></script>
+</body>
+</html>

docs/icons.html

@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <meta name="description" content="Shoelace doesn’t ship with icons, but you can easily add your own!">
+  <link rel="icon" href="../source/img/favicon.png">
+  <link rel="stylesheet" href="../dist/shoelace.css">
+  <link rel="stylesheet" href="../source/css/_docs.css">
+  <link rel="stylesheet" href="https://cdn.rawgit.com/AGMStudio/prism-theme-one-dark/f81fe477/prism-onedark.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
+  <title>Icons</title>
+</head>
+<body>
+
+  <header id="head" class="text-center">
+    <h1>
+      <a href="../index.html">
+        <img src="../source/img/wordmark.svg" alt="Shoelace logo">
+      </a>
+    </h1>
+    <p class="text-muted text-small">
+      A back to the basics CSS starter kit. For when you don’t need the whole boot.
+    </p>
+  </header>
+
+  <main id="wrap">
+    <nav id="nav">
+      <a href="installing.html">Installing</a>
+      <a href="customizing.html">Customizing</a>
+      <a href="content.html">Content</a>
+      <a href="alerts.html">Alerts</a>
+      <a href="badges.html">Badges</a>
+      <a href="buttons.html">Buttons</a>
+      <a href="dropdowns.html">Dropdowns</a>
+      <a href="forms.html">Forms</a>
+      <a href="loaders.html">Loaders</a>
+      <a href="progress-bars.html">Progress Bars</a>
+      <a href="switches.html">Switches</a>
+      <a href="tabs.html">Tabs</a>
+      <a href="tables.html">Tables</a>
+      <a href="utilities.html">Utilities</a>
+      <a href="grid-system.html">Grid System</a>
+      <a href="icons.html">Icons</a>
+      <a href="browser-support.html">Browser Support</a>
+      <a href="attribution.html">Attribution</a>
+    </nav>
+
+    <div id="content">
+      <h2 id="icons">Icons</h2>
+<p>Shoelace doesn’t bundle its own icons, but you can easily include your favorite library such as <a href="http://fontawesome.io/">Font Awesome</a>. They work superbly together.</p>
+<p>This keeps Shoelace light and makes it more customizable.</p>
+<h3 id="font-awesome">Font Awesome</h3>
+<p>You can load Font Awesome locally or via CDN. To use the CDN version, add this to the <code>&lt;head&gt;</code> section of your page:</p>
+<pre><code class="lang-html">&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css&quot;&gt;
+</code></pre>
+<p>Then add icons as you normally would with <code>&lt;i class=&quot;fa fa-*&quot;&gt;&lt;/i&gt;</code>:</p>
+<div class="input-single text-muted" style="font-size: 2rem;">
+  <i class="fa fa-magic"></i>
+  <i class="fa fa-briefcase"></i>
+  <i class="fa fa-cog"></i>
+  <i class="fa fa-database"></i>
+  <i class="fa fa-bug"></i>
+  <i class="fa fa-beer"></i>
+  <i class="fa fa-arrows"></i>
+  <i class="fa fa-rocket"></i>
+  <i class="fa fa-tag"></i>
+  <i class="fa fa-plane"></i>
+  <i class="fa fa-soccer-ball-o"></i>
+  <i class="fa fa-warning"></i>
+</div>
+
+<div class="input-single">
+  <button type="button"><i class="fa fa-star"></i> Star</button>
+  <button type="button" class="button-success"><i class="fa fa-check"></i> Check</button>
+  <button type="button" class="button-warning"><i class="fa fa-pencil"></i> Edit</button>
+  <button type="button" class="button-info"><i class="fa fa-comment"></i> Comment</button>
+</div>
+
+<p>For your convenience, <a href="http://fontawesome.io/icons/">here’s a full list</a> of icons available in Font Awesome.</p>
+
+    </div>
+  </main>
+
+  <footer id="foot">
+    <a href="../index.html">
+      <img src="../source/img/wordmark.svg" alt="Shoelace logo">
+    </a>
+    <p class="text-small text-muted">
+      Shoelace.css 1.0.0-beta12 &middot;
+      &copy; A Beautiful Site, LLC
+    </p>
+
+    <p class="margin-y-small text-center">
+      <a class="github-button" href="https://github.com/claviska/shoelace-css/fork" data-size="large" aria-label="Fork claviska/shoelace-css on GitHub">Fork</a>
+      <a class="github-button" href="https://github.com/claviska/shoelace-css/releases" data-icon="octicon-cloud-download" data-size="large" aria-label="Download claviska/shoelace-css on GitHub">Download</a>
+      <a class="github-button" href="https://github.com/claviska/shoelace-css/issues" data-icon="octicon-issue-opened" data-size="large" aria-label="Issue claviska/shoelace-css on GitHub">Report a Bug</a>
+      <a class="github-button" href="https://github.com/claviska/shoelace-css" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star claviska/shoelace-css on GitHub">Star</a>
+    </p>
+    <p>
+      <a href="https://twitter.com/shoelacecss" class="button button-info" style="margin-bottom: 1.2rem;">Follow</a>
+      <a href="https://paypal.me/claviska" class="button button-success" style="margin-bottom: 1.2rem;">Donate</a>
+    </p>
+  </footer>
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js"></script>
+  <script src="../dist/shoelace.js"></script>
+  <script>
+    $(function() {
+      // Highlight current nav item
+      $('#nav a').each(function() {
+        if(this.pathname === location.pathname) {
+          $(this).addClass('current');
+        }
+      });
+    });
+  </script>
+  <script async defer src="https://buttons.github.io/buttons.js"></script>
+</body>
+</html>

docs/installing.html

@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <meta name="description" content="How to install Shoelace.css.">
+  <link rel="icon" href="../source/img/favicon.png">
+  <link rel="stylesheet" href="../dist/shoelace.css">
+  <link rel="stylesheet" href="../source/css/_docs.css">
+  <link rel="stylesheet" href="https://cdn.rawgit.com/AGMStudio/prism-theme-one-dark/f81fe477/prism-onedark.css">
+  <title>Installing</title>
+</head>
+<body>
+
+  <header id="head" class="text-center">
+    <h1>
+      <a href="../index.html">
+        <img src="../source/img/wordmark.svg" alt="Shoelace logo">
+      </a>
+    </h1>
+    <p class="text-muted text-small">
+      A back to the basics CSS starter kit. For when you don’t need the whole boot.
+    </p>
+  </header>
+
+  <main id="wrap">
+    <nav id="nav">
+      <a href="installing.html">Installing</a>
+      <a href="customizing.html">Customizing</a>
+      <a href="content.html">Content</a>
+      <a href="alerts.html">Alerts</a>
+      <a href="badges.html">Badges</a>
+      <a href="buttons.html">Buttons</a>
+      <a href="dropdowns.html">Dropdowns</a>
+      <a href="forms.html">Forms</a>
+      <a href="loaders.html">Loaders</a>
+      <a href="progress-bars.html">Progress Bars</a>
+      <a href="switches.html">Switches</a>
+      <a href="tabs.html">Tabs</a>
+      <a href="tables.html">Tables</a>
+      <a href="utilities.html">Utilities</a>
+      <a href="grid-system.html">Grid System</a>
+      <a href="icons.html">Icons</a>
+      <a href="browser-support.html">Browser Support</a>
+      <a href="attribution.html">Attribution</a>
+    </nav>
+
+    <div id="content">
+      <h2 id="installing">Installing</h2>
+<p>Shoelace is incredibly easy to use. To get started, simply link to <code>shoelace.css</code> in your project. You can use the CDN version or download the source manually.</p>
+<p>To make certain components interactive (e.g. dropdowns and tabs), you’ll need to load <a href="https://cdnjs.com/libraries/jquery/">jQuery</a> or <a href="https://cdnjs.com/libraries/zepto/">Zepto</a> along with <code>shoelace.js</code>.</p>
+<h3 id="cdn">CDN</h3>
+<p>The easiest way to use Shoelace is via CDN. Just add this to your <code>&lt;head&gt;</code>:</p>
+<pre><code class="lang-html">&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/shoelace-css/1.0.0-beta12/shoelace.css&quot;&gt;
+</code></pre>
+<p>And this before <code>&lt;/body&gt;</code> but after jQuery/Zepto:</p>
+<pre><code class="lang-html">&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/shoelace-css/1.0.0-beta12/shoelace.js&quot;&gt;&lt;/script&gt;
+</code></pre>
+<p>This service is provided free, courtesy of <a href="https://cdnjs.com/">CDNJS</a>. New releases can take up to 12 hours to appear on the CDN.</p>
+<h3 id="download">Download</h3>
+<p>Alternatively, you can <a href="https://github.com/claviska/shoelace-css/releases">download the source</a> and link to <code>shoelace.css</code> from your own server. Just add this stylesheet to your <code>&lt;head&gt;</code>:</p>
+<pre><code class="lang-html">&lt;link rel=&quot;stylesheet&quot; href=&quot;dist/shoelace.css&quot;&gt;
+</code></pre>
+<p>And this before <code>&lt;/body&gt;</code> but after jQuery/Zepto:</p>
+<pre><code class="lang-html">&lt;script src=&quot;dist/shoelace.js&quot;&gt;&lt;/script&gt;
+</code></pre>
+<h3 id="npm">NPM</h3>
+<p>If you’re using NPM, you can install Shoelace by running:</p>
+<pre><code>npm install shoelace-css
+</code></pre>
+    </div>
+  </main>
+
+  <footer id="foot">
+    <a href="../index.html">
+      <img src="../source/img/wordmark.svg" alt="Shoelace logo">
+    </a>
+    <p class="text-small text-muted">
+      Shoelace.css 1.0.0-beta12 &middot;
+      &copy; A Beautiful Site, LLC
+    </p>
+
+    <p class="margin-y-small text-center">
+      <a class="github-button" href="https://github.com/claviska/shoelace-css/fork" data-size="large" aria-label="Fork claviska/shoelace-css on GitHub">Fork</a>
+      <a class="github-button" href="https://github.com/claviska/shoelace-css/releases" data-icon="octicon-cloud-download" data-size="large" aria-label="Download claviska/shoelace-css on GitHub">Download</a>
+      <a class="github-button" href="https://github.com/claviska/shoelace-css/issues" data-icon="octicon-issue-opened" data-size="large" aria-label="Issue claviska/shoelace-css on GitHub">Report a Bug</a>
+      <a class="github-button" href="https://github.com/claviska/shoelace-css" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star claviska/shoelace-css on GitHub">Star</a>
+    </p>
+    <p>
+      <a href="https://twitter.com/shoelacecss" class="button button-info" style="margin-bottom: 1.2rem;">Follow</a>
+      <a href="https://paypal.me/claviska" class="button button-success" style="margin-bottom: 1.2rem;">Donate</a>
+    </p>
+  </footer>
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js"></script>
+  <script src="../dist/shoelace.js"></script>
+  <script>
+    $(function() {
+      // Highlight current nav item
+      $('#nav a').each(function() {
+        if(this.pathname === location.pathname) {
+          $(this).addClass('current');
+        }
+      });
+    });
+  </script>
+  <script async defer src="https://buttons.github.io/buttons.js"></script>
+</body>
+</html>

docs/loaders.html

@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <meta name="description" content="These pure CSS loaders are easy to use and look great.">
+  <link rel="icon" href="../source/img/favicon.png">
+  <link rel="stylesheet" href="../dist/shoelace.css">
+  <link rel="stylesheet" href="../source/css/_docs.css">
+  <link rel="stylesheet" href="https://cdn.rawgit.com/AGMStudio/prism-theme-one-dark/f81fe477/prism-onedark.css">
+  <title>Loaders</title>
+</head>
+<body>
+
+  <header id="head" class="text-center">
+    <h1>
+      <a href="../index.html">
+        <img src="../source/img/wordmark.svg" alt="Shoelace logo">
+      </a>
+    </h1>
+    <p class="text-muted text-small">
+      A back to the basics CSS starter kit. For when you don’t need the whole boot.
+    </p>
+  </header>
+
+  <main id="wrap">
+    <nav id="nav">
+      <a href="installing.html">Installing</a>
+      <a href="customizing.html">Customizing</a>
+      <a href="content.html">Content</a>
+      <a href="alerts.html">Alerts</a>
+      <a href="badges.html">Badges</a>
+      <a href="buttons.html">Buttons</a>
+      <a href="dropdowns.html">Dropdowns</a>
+      <a href="forms.html">Forms</a>
+      <a href="loaders.html">Loaders</a>
+      <a href="progress-bars.html">Progress Bars</a>
+      <a href="switches.html">Switches</a>
+      <a href="tabs.html">Tabs</a>
+      <a href="tables.html">Tables</a>
+      <a href="utilities.html">Utilities</a>
+      <a href="grid-system.html">Grid System</a>
+      <a href="icons.html">Icons</a>
+      <a href="browser-support.html">Browser Support</a>
+      <a href="attribution.html">Attribution</a>
+    </nav>
+
+    <div id="content">
+      <h2 id="loaders">Loaders</h2>
+<p>Create a pure CSS loader by applying the <code>loader</code> class to an empty <code>&lt;span&gt;</code> element. You can use the <code>loader-small</code> and <code>loader-big</code> modifiers to change the size.</p>
+<pre><code class="lang-html">&lt;span class=&quot;loader loader-small&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;loader&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;loader loader-big&quot;&gt;&lt;/span&gt;
+</code></pre>
+<div class="input-single">
+  <span class="loader loader-small"></span>
+  <span class="loader"></span>
+  <span class="loader loader-big"></span>
+</div>
+
+<p>You can simulate a background loader using <code>loader-bg</code>. This is achieved using <code>position: relative</code> on the container and the <code>::after</code> pseudo-element. You can use the <code>loader-bg-small</code> and <code>loader-bg-big</code> modifiers to change the size.</p>
+<pre><code class="lang-html">&lt;div class=&quot;loader-bg loader-bg-small&quot;&gt;&lt;/div&gt;
+&lt;div class=&quot;loader-bg&quot;&gt;&lt;/div&gt;
+&lt;div class=&quot;loader-bg loader-bg-big&quot;&gt;&lt;/div&gt;
+</code></pre>
+<div class="loader-example clearfix">
+  <div class="loader-bg loader-bg-small"></div>
+  <div class="loader-bg"></div>
+  <div class="loader-bg loader-bg-big"></div>
+</div>
+
+    </div>
+  </main>
+
+  <footer id="foot">
+    <a href="../index.html">
+      <img src="../source/img/wordmark.svg" alt="Shoelace logo">
+    </a>
+    <p class="text-small text-muted">
+      Shoelace.css 1.0.0-beta12 &middot;
+      &copy; A Beautiful Site, LLC
+    </p>
+
+    <p class="margin-y-small text-center">
+      <a class="github-button" href="https://github.com/claviska/shoelace-css/fork" data-size="large" aria-label="Fork claviska/shoelace-css on GitHub">Fork</a>
+      <a class="github-button" href="https://github.com/claviska/shoelace-css/releases" data-icon="octicon-cloud-download" data-size="large" aria-label="Download claviska/shoelace-css on GitHub">Download</a>
+      <a class="github-button" href="https://github.com/claviska/shoelace-css/issues" data-icon="octicon-issue-opened" data-size="large" aria-label="Issue claviska/shoelace-css on GitHub">Report a Bug</a>
+      <a class="github-button" href="https://github.com/claviska/shoelace-css" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star claviska/shoelace-css on GitHub">Star</a>
+    </p>
+    <p>
+      <a href="https://twitter.com/shoelacecss" class="button button-info" style="margin-bottom: 1.2rem;">Follow</a>
+      <a href="https://paypal.me/claviska" class="button button-success" style="margin-bottom: 1.2rem;">Donate</a>
+    </p>
+  </footer>
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js"></script>
+  <script src="../dist/shoelace.js"></script>
+  <script>
+    $(function() {
+      // Highlight current nav item
+      $('#nav a').each(function() {
+        if(this.pathname === location.pathname) {
+          $(this).addClass('current');
+        }
+      });
+    });
+  </script>
+  <script async defer src="https://buttons.github.io/buttons.js"></script>
+</body>
+</html>

docs/progress-bars.html

@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <meta name="description" content="These progress bars are easy to create and render consistently in all browsers.">
+  <link rel="icon" href="../source/img/favicon.png">
+  <link rel="stylesheet" href="../dist/shoelace.css">
+  <link rel="stylesheet" href="../source/css/_docs.css">
+  <link rel="stylesheet" href="https://cdn.rawgit.com/AGMStudio/prism-theme-one-dark/f81fe477/prism-onedark.css">
+  <title>Progress Bars</title>
+</head>
+<body>
+
+  <header id="head" class="text-center">
+    <h1>
+      <a href="../index.html">
+        <img src="../source/img/wordmark.svg" alt="Shoelace logo">
+      </a>
+    </h1>
+    <p class="text-muted text-small">
+      A back to the basics CSS starter kit. For when you don’t need the whole boot.
+    </p>
+  </header>
+
+  <main id="wrap">
+    <nav id="nav">
+      <a href="installing.html">Installing</a>
+      <a href="customizing.html">Customizing</a>
+      <a href="content.html">Content</a>
+      <a href="alerts.html">Alerts</a>
+      <a href="badges.html">Badges</a>
+      <a href="buttons.html">Buttons</a>
+      <a href="dropdowns.html">Dropdowns</a>
+      <a href="forms.html">Forms</a>
+      <a href="loaders.html">Loaders</a>
+      <a href="progress-bars.html">Progress Bars</a>
+      <a href="switches.html">Switches</a>
+      <a href="tabs.html">Tabs</a>
+      <a href="tables.html">Tables</a>
+      <a href="utilities.html">Utilities</a>
+      <a href="grid-system.html">Grid System</a>
+      <a href="icons.html">Icons</a>
+      <a href="browser-support.html">Browser Support</a>
+      <a href="attribution.html">Attribution</a>
+    </nav>
+
+    <div id="content">
+      <h2 id="progress-bars">Progress Bars</h2>
+<p>HTML5 introduced the <code>&lt;progress&gt;</code> element, but it’s not currently possible to style consistently in all browsers. As a result, Shoelace offers a custom alternative.</p>
+<p>Create a progress bar with the following markup. Use the <code>progress-small</code> and <code>progress-big</code> modifiers to change the size. To set the state, use a <a href="utilities.html#sizing-utilities">sizing utility</a> or set the width explicitly on the <code>progress-bar</code> element.</p>
+<p>An optional text label can be included inside the <code>progress-bar</code> element.</p>
+<pre><code class="lang-html">&lt;div class=&quot;progress progress-small&quot;&gt;
+  &lt;div class=&quot;progress-bar width-25&quot;&gt;25%&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;progress&quot;&gt;
+  &lt;div class=&quot;progress-bar width-50&quot;&gt;50%&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;progress progress-big&quot;&gt;
+  &lt;div class=&quot;progress-bar width-75&quot;&gt;75%&lt;/div&gt;
+&lt;/div&gt;
+</code></pre>
+<div class="progress progress-small">
+  <div class="progress-bar width-25">25%</div>
+</div>
+
+<div class="progress">
+  <div class="progress-bar width-50">50%</div>
+</div>
+
+<div class="progress progress-big">
+  <div class="progress-bar width-75">75%</div>
+</div>
+
+<p>When progress can’t be determined, use the <code>progress-indeterminate</code> modifier to set an indeterminate state.</p>
+<pre><code class="lang-html">&lt;div class=&quot;progress progress-indeterminate&quot;&gt;
+  &lt;div class=&quot;progress-bar&quot;&gt;&lt;/div&gt;
+&lt;/div&gt;
+</code></pre>
+<div class="progress progress-indeterminate">
+  <div class="progress-bar"></div>
+</div>
+
+    </div>
+  </main>
+
+  <footer id="foot">
+    <a href="../index.html">
+      <img src="../source/img/wordmark.svg" alt="Shoelace logo">
+    </a>
+    <p class="text-small text-muted">
+      Shoelace.css 1.0.0-beta12 &middot;
+      &copy; A Beautiful Site, LLC
+    </p>
+
+    <p class="margin-y-small text-center">
+      <a class="github-button" href="https://github.com/claviska/shoelace-css/fork" data-size="large" aria-label="Fork claviska/shoelace-css on GitHub">Fork</a>
+      <a class="github-button" href="https://github.com/claviska/shoelace-css/releases" data-icon="octicon-cloud-download" data-size="large" aria-label="Download claviska/shoelace-css on GitHub">Download</a>
+      <a class="github-button" href="https://github.com/claviska/shoelace-css/issues" data-icon="octicon-issue-opened" data-size="large" aria-label="Issue claviska/shoelace-css on GitHub">Report a Bug</a>
+      <a class="github-button" href="https://github.com/claviska/shoelace-css" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star claviska/shoelace-css on GitHub">Star</a>
+    </p>
+    <p>
+      <a href="https://twitter.com/shoelacecss" class="button button-info" style="margin-bottom: 1.2rem;">Follow</a>
+      <a href="https://paypal.me/claviska" class="button button-success" style="margin-bottom: 1.2rem;">Donate</a>
+    </p>
+  </footer>
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js"></script>
+  <script src="../dist/shoelace.js"></script>
+  <script>
+    $(function() {
+      // Highlight current nav item
+      $('#nav a').each(function() {
+        if(this.pathname === location.pathname) {
+          $(this).addClass('current');
+        }
+      });
+    });
+  </script>
+  <script async defer src="https://buttons.github.io/buttons.js"></script>
+</body>
+</html>

docs/switches.html

@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <meta name="description" content="These pure CSS switches can be used as a checkbox replacement.">
+  <link rel="icon" href="../source/img/favicon.png">
+  <link rel="stylesheet" href="../dist/shoelace.css">
+  <link rel="stylesheet" href="../source/css/_docs.css">
+  <link rel="stylesheet" href="https://cdn.rawgit.com/AGMStudio/prism-theme-one-dark/f81fe477/prism-onedark.css">
+  <title>Switches</title>
+</head>
+<body>
+
+  <header id="head" class="text-center">
+    <h1>
+      <a href="../index.html">
+        <img src="../source/img/wordmark.svg" alt="Shoelace logo">
+      </a>
+    </h1>
+    <p class="text-muted text-small">
+      A back to the basics CSS starter kit. For when you don’t need the whole boot.
+    </p>
+  </header>
+
+  <main id="wrap">
+    <nav id="nav">
+      <a href="installing.html">Installing</a>
+      <a href="customizing.html">Customizing</a>
+      <a href="content.html">Content</a>
+      <a href="alerts.html">Alerts</a>
+      <a href="badges.html">Badges</a>
+      <a href="buttons.html">Buttons</a>
+      <a href="dropdowns.html">Dropdowns</a>
+      <a href="forms.html">Forms</a>
+      <a href="loaders.html">Loaders</a>
+      <a href="progress-bars.html">Progress Bars</a>
+      <a href="switches.html">Switches</a>
+      <a href="tabs.html">Tabs</a>
+      <a href="tables.html">Tables</a>
+      <a href="utilities.html">Utilities</a>
+      <a href="grid-system.html">Grid System</a>
+      <a href="icons.html">Icons</a>
+      <a href="browser-support.html">Browser Support</a>
+      <a href="attribution.html">Attribution</a>
+    </nav>
+
+    <div id="content">
+      <h2 id="switches">Switches</h2>
+<p>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.</p>
+<p>Because this is a pure CSS solution, there are a couple important things to remember:</p>
+<ul>
+<li>Each switch must have a unique <code>id</code></li>
+<li>The <code>&lt;label&gt;</code> must have a <code>for</code> attribute that references the switch <code>id</code></li>
+<li>The <code>&lt;label&gt;</code> must come <strong>after</strong> the checkbox, otherwise the control won’t render</li>
+</ul>
+<p>The markup for a switch looks like this:</p>
+<pre><code class="lang-html">&lt;span class=&quot;switch&quot;&gt;
+  &lt;input type=&quot;checkbox&quot; class=&quot;switch&quot; id=&quot;switch-1&quot;&gt;
+  &lt;label for=&quot;switch-1&quot;&gt;Option 1&lt;/label&gt;
+&lt;/span&gt;
+
+&lt;span class=&quot;switch&quot;&gt;
+  &lt;input type=&quot;checkbox&quot; class=&quot;switch&quot; id=&quot;switch-2&quot; checked&gt;
+  &lt;label for=&quot;switch-2&quot;&gt;Option 2&lt;/label&gt;
+&lt;/span&gt;
+</code></pre>
+<div class="input-single">
+  <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>
+</div>
+
+<p>Use the <code>switch-small</code> and <code>switch-big</code> modifiers to change the size of a switch.</p>
+<div class="input-single">
+  <span class="switch switch-small">
+    <input type="checkbox" class="switch" id="switch-3">
+    <label for="switch-3">Small</label>
+  </span>
+
+  <span class="switch">
+    <input type="checkbox" class="switch" id="switch-4">
+    <label for="switch-4">Normal</label>
+  </span>
+
+  <span class="switch switch-big">
+    <input type="checkbox" class="switch" id="switch-5">
+    <label for="switch-5">Big</label>
+  </span>
+</div>
+
+<p>Disabled switches are dimmed out. To disable a switch, add the <code>disabled</code> attribute to the checkbox (not the wrapper).</p>
+<div class="input-single">
+  <span class="switch">
+    <input type="checkbox" class="switch" disabled id="switch-6">
+    <label for="switch-6">Disabled</label>
+  </span>
+</div>
+
+    </div>
+  </main>
+
+  <footer id="foot">
+    <a href="../index.html">
+      <img src="../source/img/wordmark.svg" alt="Shoelace logo">
+    </a>
+    <p class="text-small text-muted">
+      Shoelace.css 1.0.0-beta12 &middot;
+      &copy; A Beautiful Site, LLC
+    </p>
+
+    <p class="margin-y-small text-center">
+      <a class="github-button" href="https://github.com/claviska/shoelace-css/fork" data-size="large" aria-label="Fork claviska/shoelace-css on GitHub">Fork</a>
+      <a class="github-button" href="https://github.com/claviska/shoelace-css/releases" data-icon="octicon-cloud-download" data-size="large" aria-label="Download claviska/shoelace-css on GitHub">Download</a>
+      <a class="github-button" href="https://github.com/claviska/shoelace-css/issues" data-icon="octicon-issue-opened" data-size="large" aria-label="Issue claviska/shoelace-css on GitHub">Report a Bug</a>
+      <a class="github-button" href="https://github.com/claviska/shoelace-css" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star claviska/shoelace-css on GitHub">Star</a>
+    </p>
+    <p>
+      <a href="https://twitter.com/shoelacecss" class="button button-info" style="margin-bottom: 1.2rem;">Follow</a>
+      <a href="https://paypal.me/claviska" class="button button-success" style="margin-bottom: 1.2rem;">Donate</a>
+    </p>
+  </footer>
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js"></script>
+  <script src="../dist/shoelace.js"></script>
+  <script>
+    $(function() {
+      // Highlight current nav item
+      $('#nav a').each(function() {
+        if(this.pathname === location.pathname) {
+          $(this).addClass('current');
+        }
+      });
+    });
+  </script>
+  <script async defer src="https://buttons.github.io/buttons.js"></script>
+</body>
+</html>

docs/tables.html

@@ -0,0 +1,169 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <meta name="description" content="Shoelace ships with elegant table styles and a handful of modifiers.">
+  <link rel="icon" href="../source/img/favicon.png">
+  <link rel="stylesheet" href="../dist/shoelace.css">
+  <link rel="stylesheet" href="../source/css/_docs.css">
+  <link rel="stylesheet" href="https://cdn.rawgit.com/AGMStudio/prism-theme-one-dark/f81fe477/prism-onedark.css">
+  <title>Tables</title>
+</head>
+<body>
+
+  <header id="head" class="text-center">
+    <h1>
+      <a href="../index.html">
+        <img src="../source/img/wordmark.svg" alt="Shoelace logo">
+      </a>
+    </h1>
+    <p class="text-muted text-small">
+      A back to the basics CSS starter kit. For when you don’t need the whole boot.
+    </p>
+  </header>
+
+  <main id="wrap">
+    <nav id="nav">
+      <a href="installing.html">Installing</a>
+      <a href="customizing.html">Customizing</a>
+      <a href="content.html">Content</a>
+      <a href="alerts.html">Alerts</a>
+      <a href="badges.html">Badges</a>
+      <a href="buttons.html">Buttons</a>
+      <a href="dropdowns.html">Dropdowns</a>
+      <a href="forms.html">Forms</a>
+      <a href="loaders.html">Loaders</a>
+      <a href="progress-bars.html">Progress Bars</a>
+      <a href="switches.html">Switches</a>
+      <a href="tabs.html">Tabs</a>
+      <a href="tables.html">Tables</a>
+      <a href="utilities.html">Utilities</a>
+      <a href="grid-system.html">Grid System</a>
+      <a href="icons.html">Icons</a>
+      <a href="browser-support.html">Browser Support</a>
+      <a href="attribution.html">Attribution</a>
+    </nav>
+
+    <div id="content">
+      <h2 id="tables">Tables</h2>
+<p>Tables are styled for you automatically — no special classes required.</p>
+<pre><code class="lang-html">&lt;table&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;&lt;th&gt;Item&lt;/th&gt;&lt;th&gt;Price&lt;/th&gt;&lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;&lt;td&gt;Shoe Freshener&lt;/td&gt;&lt;td&gt;$4.79&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;td&gt;Shoe Glue&lt;/td&gt;&lt;td&gt;$2.50&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;td&gt;Shoe Polish&lt;/td&gt;&lt;td&gt;$5.25&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;td&gt;Shoelaces&lt;/td&gt;&lt;td&gt;$3.99&lt;/td&gt;&lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</code></pre>
+<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>
+
+<h3 id="striped-tables">Striped Tables</h3>
+<p>Use the <code>table-striped</code> modifier to add stripes to alternating rows.</p>
+<pre><code class="lang-html">&lt;table class=&quot;table-striped&quot;&gt;
+  ...
+&lt;/table&gt;
+</code></pre>
+<table class="table-striped">
+  <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>
+
+<h3 id="bordered-tables">Bordered Tables</h3>
+<p>Use the <code>table-bordered</code> modifier to add a border to the table.</p>
+<pre><code class="lang-html">&lt;table class=&quot;table-bordered&quot;&gt;
+  ...
+&lt;/table&gt;
+</code></pre>
+<table class="table-bordered">
+  <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>
+
+<h3 id="hoverable-rows">Hoverable Rows</h3>
+<p>Use the <code>table-hoverable</code> modifier to enable the hover state on table rows.</p>
+<pre><code class="lang-html">&lt;table class=&quot;table-hoverable&quot;&gt;
+  ...
+&lt;/table&gt;
+</code></pre>
+<table class="table-hoverable">
+  <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>
+
+    </div>
+  </main>
+
+  <footer id="foot">
+    <a href="../index.html">
+      <img src="../source/img/wordmark.svg" alt="Shoelace logo">
+    </a>
+    <p class="text-small text-muted">
+      Shoelace.css 1.0.0-beta12 &middot;
+      &copy; A Beautiful Site, LLC
+    </p>
+
+    <p class="margin-y-small text-center">
+      <a class="github-button" href="https://github.com/claviska/shoelace-css/fork" data-size="large" aria-label="Fork claviska/shoelace-css on GitHub">Fork</a>
+      <a class="github-button" href="https://github.com/claviska/shoelace-css/releases" data-icon="octicon-cloud-download" data-size="large" aria-label="Download claviska/shoelace-css on GitHub">Download</a>
+      <a class="github-button" href="https://github.com/claviska/shoelace-css/issues" data-icon="octicon-issue-opened" data-size="large" aria-label="Issue claviska/shoelace-css on GitHub">Report a Bug</a>
+      <a class="github-button" href="https://github.com/claviska/shoelace-css" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star claviska/shoelace-css on GitHub">Star</a>
+    </p>
+    <p>
+      <a href="https://twitter.com/shoelacecss" class="button button-info" style="margin-bottom: 1.2rem;">Follow</a>
+      <a href="https://paypal.me/claviska" class="button button-success" style="margin-bottom: 1.2rem;">Donate</a>
+    </p>
+  </footer>
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js"></script>
+  <script src="../dist/shoelace.js"></script>
+  <script>
+    $(function() {
+      // Highlight current nav item
+      $('#nav a').each(function() {
+        if(this.pathname === location.pathname) {
+          $(this).addClass('current');
+        }
+      });
+    });
+  </script>
+  <script async defer src="https://buttons.github.io/buttons.js"></script>
+</body>
+</html>

docs/tabs.html

@@ -0,0 +1,219 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <meta name="description" content="Add tabs to your app with the tabs component.">
+  <link rel="icon" href="../source/img/favicon.png">
+  <link rel="stylesheet" href="../dist/shoelace.css">
+  <link rel="stylesheet" href="../source/css/_docs.css">
+  <link rel="stylesheet" href="https://cdn.rawgit.com/AGMStudio/prism-theme-one-dark/f81fe477/prism-onedark.css">
+  <title>Tabs</title>
+</head>
+<body>
+
+  <header id="head" class="text-center">
+    <h1>
+      <a href="../index.html">
+        <img src="../source/img/wordmark.svg" alt="Shoelace logo">
+      </a>
+    </h1>
+    <p class="text-muted text-small">
+      A back to the basics CSS starter kit. For when you don’t need the whole boot.
+    </p>
+  </header>
+
+  <main id="wrap">
+    <nav id="nav">
+      <a href="installing.html">Installing</a>
+      <a href="customizing.html">Customizing</a>
+      <a href="content.html">Content</a>
+      <a href="alerts.html">Alerts</a>
+      <a href="badges.html">Badges</a>
+      <a href="buttons.html">Buttons</a>
+      <a href="dropdowns.html">Dropdowns</a>
+      <a href="forms.html">Forms</a>
+      <a href="loaders.html">Loaders</a>
+      <a href="progress-bars.html">Progress Bars</a>
+      <a href="switches.html">Switches</a>
+      <a href="tabs.html">Tabs</a>
+      <a href="tables.html">Tables</a>
+      <a href="utilities.html">Utilities</a>
+      <a href="grid-system.html">Grid System</a>
+      <a href="icons.html">Icons</a>
+      <a href="browser-support.html">Browser Support</a>
+      <a href="attribution.html">Attribution</a>
+    </nav>
+
+    <div id="content">
+      <h2 id="tabs">Tabs</h2>
+<p>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.</p>
+<p>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 <code>id</code>.</p>
+<p>To disable a tab, add <code>disabled</code> to the appropriate tab nav.</p>
+<pre><code class="lang-html">&lt;div class=&quot;tabs&quot;&gt;
+  &lt;nav class=&quot;tabs-nav&quot;&gt;
+    &lt;a href=&quot;#tab-1&quot; class=&quot;active&quot;&gt;Tab 1&lt;/a&gt;
+    &lt;a href=&quot;#tab-2&quot;&gt;Tab 2&lt;/a&gt;
+    &lt;a href=&quot;#tab-3&quot;&gt;Tab 3&lt;/a&gt;
+    &lt;a href=&quot;#&quot; class=&quot;disabled&quot;&gt;Disabled&lt;/a&gt;
+  &lt;/nav&gt;
+
+  &lt;div class=&quot;tabs-pane active&quot; id=&quot;tab-1&quot;&gt;
+    ...
+  &lt;/div&gt;
+
+  &lt;div class=&quot;tabs-pane&quot; id=&quot;tab-2&quot;&gt;
+    ...
+  &lt;/div&gt;
+
+  &lt;div class=&quot;tabs-pane&quot; id=&quot;tab-3&quot;&gt;
+    ...
+  &lt;/div&gt;
+&lt;/div&gt;
+</code></pre>
+<div class="tabs">
+  <nav class="tabs-nav">
+    <a href="#tab-1-example-1" class="active">Tab 1</a>
+    <a href="#tab-2-example-1">Tab 2</a>
+    <a href="#tab-3-example-1">Tab 3</a>
+    <a href="#" class="disabled">Disabled</a>
+  </nav>
+
+  <div class="tabs-pane active" id="tab-1-example-1">
+    <h3>Tab 1</h3>
+    <p>
+      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!
+    </p>
+  </div>
+
+  <div class="tabs-pane" id="tab-2-example-1">
+    <h3>Tab 2</h3>
+    <p>
+      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.
+    </p>
+  </div>
+
+  <div class="tabs-pane" id="tab-3-example-1">
+    <h3>Tab 3</h3>
+    <p>
+      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.
+    </p>
+  </div>
+</div>
+
+<h3 id="vertical-tabs">Vertical Tabs</h3>
+<p>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.</p>
+<p>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.</p>
+<pre><code class="lang-css">.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;
+}
+</code></pre>
+<div class="tabs tabs-vertical-example">
+  <nav class="tabs-nav tabs-nav-block">
+    <a href="#tab-1-example-2" class="active">Tab 1</a>
+    <a href="#tab-2-example-2">Tab 2</a>
+    <a href="#tab-3-example-2">Tab 3</a>
+    <a href="#" class="disabled">Disabled</a>
+  </nav>
+
+  <div class="tabs-pane active" id="tab-1-example-2">
+    <h3>Tab 1</h3>
+    <p>
+      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!
+    </p>
+  </div>
+
+  <div class="tabs-pane" id="tab-2-example-2">
+    <h3>Tab 2</h3>
+    <p>
+      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.
+    </p>
+  </div>
+
+  <div class="tabs-pane" id="tab-3-example-2">
+    <h3>Tab 3</h3>
+    <p>
+      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.
+    </p>
+  </div>
+</div>
+
+<h3 id="events">Events</h3>
+<p>Tabs require <code>shoelace.js</code> to make them interactive. You don’t need to initialize them. Simply include the script and everything “just works.”</p>
+<p>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:</p>
+<ul>
+<li><code>show</code> – Fires when a tab is shown. The second callback argument is a reference to the respective tab pane.</li>
+<li><code>hide</code> – Fires when a tab is hidden. The second callback argument is a reference to the respective tab pane.</li>
+</ul>
+<p>This example will log both events for the tab set with an id of <code>my-tabs</code>.</p>
+<pre><code class="lang-javascript">$(&#39;#my-tabs&#39;)
+  .on(&#39;show&#39;, function(event, tabPane) {
+    console.log(&#39;show&#39;, event.target, tabPane);
+  })
+  .on(&#39;hide&#39;, function(event, tabPane) {
+    console.log(&#39;hide&#39;, event.target, tabPane);
+  });
+</code></pre>
+
+    </div>
+  </main>
+
+  <footer id="foot">
+    <a href="../index.html">
+      <img src="../source/img/wordmark.svg" alt="Shoelace logo">
+    </a>
+    <p class="text-small text-muted">
+      Shoelace.css 1.0.0-beta12 &middot;
+      &copy; A Beautiful Site, LLC
+    </p>
+
+    <p class="margin-y-small text-center">
+      <a class="github-button" href="https://github.com/claviska/shoelace-css/fork" data-size="large" aria-label="Fork claviska/shoelace-css on GitHub">Fork</a>
+      <a class="github-button" href="https://github.com/claviska/shoelace-css/releases" data-icon="octicon-cloud-download" data-size="large" aria-label="Download claviska/shoelace-css on GitHub">Download</a>
+      <a class="github-button" href="https://github.com/claviska/shoelace-css/issues" data-icon="octicon-issue-opened" data-size="large" aria-label="Issue claviska/shoelace-css on GitHub">Report a Bug</a>
+      <a class="github-button" href="https://github.com/claviska/shoelace-css" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star claviska/shoelace-css on GitHub">Star</a>
+    </p>
+    <p>
+      <a href="https://twitter.com/shoelacecss" class="button button-info" style="margin-bottom: 1.2rem;">Follow</a>
+      <a href="https://paypal.me/claviska" class="button button-success" style="margin-bottom: 1.2rem;">Donate</a>
+    </p>
+  </footer>
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js"></script>
+  <script src="../dist/shoelace.js"></script>
+  <script>
+    $(function() {
+      // Highlight current nav item
+      $('#nav a').each(function() {
+        if(this.pathname === location.pathname) {
+          $(this).addClass('current');
+        }
+      });
+    });
+  </script>
+  <script async defer src="https://buttons.github.io/buttons.js"></script>
+</body>
+</html>

docs/utilities.html

@@ -0,0 +1,214 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <meta name="description" content="Use these utilities for quick prototyping.">
+  <link rel="icon" href="../source/img/favicon.png">
+  <link rel="stylesheet" href="../dist/shoelace.css">
+  <link rel="stylesheet" href="../source/css/_docs.css">
+  <link rel="stylesheet" href="https://cdn.rawgit.com/AGMStudio/prism-theme-one-dark/f81fe477/prism-onedark.css">
+  <title>Utilities</title>
+</head>
+<body>
+
+  <header id="head" class="text-center">
+    <h1>
+      <a href="../index.html">
+        <img src="../source/img/wordmark.svg" alt="Shoelace logo">
+      </a>
+    </h1>
+    <p class="text-muted text-small">
+      A back to the basics CSS starter kit. For when you don’t need the whole boot.
+    </p>
+  </header>
+
+  <main id="wrap">
+    <nav id="nav">
+      <a href="installing.html">Installing</a>
+      <a href="customizing.html">Customizing</a>
+      <a href="content.html">Content</a>
+      <a href="alerts.html">Alerts</a>
+      <a href="badges.html">Badges</a>
+      <a href="buttons.html">Buttons</a>
+      <a href="dropdowns.html">Dropdowns</a>
+      <a href="forms.html">Forms</a>
+      <a href="loaders.html">Loaders</a>
+      <a href="progress-bars.html">Progress Bars</a>
+      <a href="switches.html">Switches</a>
+      <a href="tabs.html">Tabs</a>
+      <a href="tables.html">Tables</a>
+      <a href="utilities.html">Utilities</a>
+      <a href="grid-system.html">Grid System</a>
+      <a href="icons.html">Icons</a>
+      <a href="browser-support.html">Browser Support</a>
+      <a href="attribution.html">Attribution</a>
+    </nav>
+
+    <div id="content">
+      <h2 id="utilities">Utilities</h2>
+<p>Shoelace provides a number of helpful utility classes that make prototyping easier.</p>
+<h3 id="text-utilities">Text Utilities</h3>
+<p>Text utilities are classes that can be applied to just about any element. The text inside will be
+formatted appropriately.</p>
+<table class="table">
+  <thead>
+    <tr>
+      <th>Class</th>
+      <th>Example</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>text-success</code></td>
+      <td class="text-success">This is success text</td>
+    </tr>
+    <tr>
+      <td><code>text-info</code></td>
+      <td class="text-info">This is info text</td>
+    </tr>
+    <tr>
+      <td><code>text-warning</code></td>
+      <td class="text-warning">This is warning text</td>
+    </tr>
+    <tr>
+      <td><code>text-danger</code></td>
+      <td class="text-danger">This is danger text</td>
+    </tr>
+    <tr>
+      <td><code>text-muted</code></td>
+      <td class="text-muted">This is muted text</td>
+    </tr>
+    <tr>
+      <td><code>text-small</code></td>
+      <td class="text-small">This is small text</td>
+    </tr>
+    <tr>
+      <td><code>text-bold</code></td>
+      <td class="text-bold">This is bold text</td>
+    </tr>
+    <tr>
+      <td><code>text-italic</code></td>
+      <td class="text-italic">This is italic text</td>
+    </tr>
+    <tr>
+      <td><code>text-left</code></td>
+      <td class="text-left">This is left-aligned text</td>
+    </tr>
+    <tr>
+      <td><code>text-center</code></td>
+      <td class="text-center">This is centered text</td>
+    </tr>
+    <tr>
+      <td><code>text-right</code></td>
+      <td class="text-right">This is right-aligned text</td>
+    </tr>
+    <tr>
+      <td><code>text-justify</code></td>
+      <td class="text-justify">This is justified text</td>
+    </tr>
+    <tr>
+      <td><code>text-nowrap</code></td>
+      <td class="text-nowrap">This is text that won’t wrap</td>
+    </tr>
+    <tr>
+      <td><code>text-lowercase</code></td>
+      <td class="text-lowercase">This is lowercase text</td>
+    </tr>
+    <tr>
+      <td><code>text-uppercase</code></td>
+      <td class="text-uppercase">This is uppercase text</td>
+    </tr>
+    <tr>
+      <td><code>text-capitalize</code></td>
+      <td class="text-capitalize">This is capitalized text</td>
+    </tr>
+  </tbody>
+</table>
+
+<h3 id="float-utilities">Float Utilities</h3>
+<p>Float utilities are provided to easily float elements to the left or right. Just apply the <code>float-left</code> or <code>float-right</code> class to an element to float it left or right.</p>
+<p>A clearfix utility is also available to clear floated elements. Just apply the <code>clearfix</code> class to the appropriate element.</p>
+<h3 id="sizing-utilities">Sizing Utilities</h3>
+<p>Sizing utilities can be used to set a relative width or height on any element. Just apply a <code>width-*</code> or <code>height-*</code> class and the appropriate element will be sized accordingly. Sizes are available as percentages from 0 – 100 in multiples of five.</p>
+<pre><code class="lang-html">&lt;div class=&quot;width-25&quot;&gt;25%&lt;/div&gt;
+&lt;div class=&quot;width-50&quot;&gt;50%&lt;/div&gt;
+&lt;div class=&quot;width-75&quot;&gt;75%&lt;/div&gt;
+&lt;div class=&quot;width-100&quot;&gt;100%&lt;/div&gt;
+
+&lt;div class=&quot;height-25&quot;&gt;25%&lt;/div&gt;
+&lt;div class=&quot;height-50&quot;&gt;50%&lt;/div&gt;
+&lt;div class=&quot;height-75&quot;&gt;75%&lt;/div&gt;
+&lt;div class=&quot;height-100&quot;&gt;100%&lt;/div&gt;
+</code></pre>
+<div class="width-sizing-example">
+  <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>
+
+<div class="height-sizing-example">
+  <div class="height-25">25%</div>
+  <div class="height-50">50%</div>
+  <div class="height-75">75%</div>
+  <div class="height-100">100%</div>
+</div>
+
+<h3 id="spacing-utilities">Spacing Utilities</h3>
+<p>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.</p>
+<p>Class names are prefixed with <code>padding-</code> or <code>margin-</code> for padding and margin, respectively. To apply spacing to all sides of an element, use the following classes:</p>
+<pre><code>padding-[none|small|medium|big]
+margin-[none|small|medium|big]
+</code></pre><p>Example:</p>
+<pre><code class="lang-html">&lt;div class=&quot;padding-none margin-big&quot;&gt;
+</code></pre>
+<p>To apply spacing to a specific side of an element, use one or more of the following classes:</p>
+<pre><code>padding-[top|right|bottom|left|x|y]-[none|small|medium|big]
+margin-[top|right|bottom|left|x|y]-[none|small|medium|big]
+</code></pre><p>Example:</p>
+<pre><code class="lang-html">&lt;div class=&quot;padding-left-medium margin-bottom-none&quot;&gt;
+</code></pre>
+<p>You can also use <code>margin-[x|y|xy]-auto</code> to set automatic margins horizontally and/or vertically.</p>
+
+    </div>
+  </main>
+
+  <footer id="foot">
+    <a href="../index.html">
+      <img src="../source/img/wordmark.svg" alt="Shoelace logo">
+    </a>
+    <p class="text-small text-muted">
+      Shoelace.css 1.0.0-beta12 &middot;
+      &copy; A Beautiful Site, LLC
+    </p>
+
+    <p class="margin-y-small text-center">
+      <a class="github-button" href="https://github.com/claviska/shoelace-css/fork" data-size="large" aria-label="Fork claviska/shoelace-css on GitHub">Fork</a>
+      <a class="github-button" href="https://github.com/claviska/shoelace-css/releases" data-icon="octicon-cloud-download" data-size="large" aria-label="Download claviska/shoelace-css on GitHub">Download</a>
+      <a class="github-button" href="https://github.com/claviska/shoelace-css/issues" data-icon="octicon-issue-opened" data-size="large" aria-label="Issue claviska/shoelace-css on GitHub">Report a Bug</a>
+      <a class="github-button" href="https://github.com/claviska/shoelace-css" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star claviska/shoelace-css on GitHub">Star</a>
+    </p>
+    <p>
+      <a href="https://twitter.com/shoelacecss" class="button button-info" style="margin-bottom: 1.2rem;">Follow</a>
+      <a href="https://paypal.me/claviska" class="button button-success" style="margin-bottom: 1.2rem;">Donate</a>
+    </p>
+  </footer>
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js"></script>
+  <script src="../dist/shoelace.js"></script>
+  <script>
+    $(function() {
+      // Highlight current nav item
+      $('#nav a').each(function() {
+        if(this.pathname === location.pathname) {
+          $(this).addClass('current');
+        }
+      });
+    });
+  </script>
+  <script async defer src="https://buttons.github.io/buttons.js"></script>
+</body>
+</html>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "shoelace-css",
   "description": "A back to the basics CSS starter kit.",
-  "version": "1.0.0-beta4",
+  "version": "1.0.0-beta12",
   "author": "Cory LaViska",
   "homepage": "https://shoelace.style/",
   "license": "MIT",
@@ -10,12 +10,22 @@
     "url": "https://github.com/claviska/shoelace-css"
   },
   "devDependencies": {
-    "chalk": "^2.0.1",
-    "clean-css": "^4.1.7",
+    "autoprefixer": "^7.1.2",
+    "bluebird": "^3.5.0",
+    "chalk": "^2.1.0",
     "commander": "^2.11.0",
+    "cssnano": "^3.10.0",
     "del": "^3.0.0",
-    "dotenv": "^4.0.0",
     "fs": "0.0.1-security",
-    "s3": "^4.4.0"
-  }
+    "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",
+    "watch": "^1.0.2"
+  },
+  "dependencies": {}
 }

shoelace.js

@@ -1,178 +0,0 @@
-'use strict';
-
-global.__version = require('./package.json').version;
-
-require('dotenv').config();
-const CleanCSS = require('clean-css');
-const Chalk = require('chalk');
-const Del = require('del');
-const FS = require('fs');
-const Path = require('path');
-const Program = require('commander');
-const S3 = require('s3');
-
-let source = Path.join(__dirname, 'source/css');
-let dist = Path.join(__dirname, 'dist');
-let docsFile = Path.join(__dirname, 'index.html');
-let inFile = Path.join(source, 'shoelace.css');
-let outFile = Path.join(dist, 'shoelace.css');
-
-// Initialize CLI
-Program
-  .version(__version)
-  .option('--clean', 'Removes the local dist directory')
-  .option('--build', 'Builds a release')
-  .option('--s3', 'Publish latest release to an S3 bucket (requires .env file)')
-  .on('--help', () => {
-    console.log(Chalk.cyan('\n  Version %s\n'), __version);
-    process.exit(1);
-  })
-  .parse(process.argv);
-
-// Show help by default
-if(!process.argv.slice(2).length) {
-  Program.outputHelp();
-  process.exit(1);
-}
-
-// Run build task
-if(Program.build) {
-  const clean = new CleanCSS({
-    // format: 'beautify',
-    inline: ['local'],
-    rebaseTo: Path.dirname(dist),
-    specialComments: 'all'
-  });
-
-  Promise.resolve()
-    // Generate minified version
-    .then(() => new Promise((resolve, reject) => {
-      clean.minify({
-        [inFile]: { styles: FS.readFileSync(inFile, 'utf8') }
-      }, (errors, output) => {
-        // Show errors
-        if(errors) {
-          errors.forEach((err) => console.log(Chalk.red(err)));
-          reject(new Error('Failed to minify styles.'));
-          return;
-        }
-
-        resolve(output);
-      });
-
-    }))
-    // Write dist files
-    .then((output) => new Promise((resolve, reject) => {
-      // Get stats
-      let stats = {
-        originalSize: parseInt(output.stats.originalSize / 1000) + 'KB', // KB
-        minifiedSize: parseInt(output.stats.minifiedSize / 1000) + 'KB' // KB
-      };
-
-      // Show output warnings and errors
-      output.warnings.forEach((err) => console.log(Chalk.red(err)));
-      output.errors.forEach((err) => console.log(Chalk.red(err)));
-
-      // Update placeholders in CSS
-      output.styles = output.styles
-        .replace(/\{version\}/g, __version)
-        .replace(/\{originalSize\}/, stats.originalSize)
-        .replace(/\{minifiedSize\}/, stats.minifiedSize);
-
-      // Create the dist folder if it doesn't exist
-      try {
-        FS.statSync(dist);
-      } catch(err) {
-        FS.mkdirSync(dist);
-      }
-
-      // Write output file
-      FS.writeFile(outFile, output.styles, 'utf8', (err) => {
-        if(err) {
-          reject(err);
-          return;
-        }
-        console.log(Chalk.green('CSS Minified: %s! 💪'), Path.relative(__dirname, outFile));
-
-        resolve(stats);
-      });
-    }))
-    // Update docs
-    .then((stats) => new Promise((resolve, reject) => {
-      // Update placeholders
-      let content = FS.readFileSync(docsFile, 'utf8');
-      content = content
-        .replace(/<span data-version>(.*?)<\/span>/g, '<span data-version>' + __version + '</span>')
-        .replace(/<span data-originalSize>(.*?)<\/span>/g, '<span data-originalSize>' + stats.originalSize + '</span>')
-        .replace(/<span data-minifiedSize>(.*?)<\/span>/g, '<span data-minifiedSize>' + stats.minifiedSize + '</span>');
-
-      // Write docs file
-      FS.writeFile(docsFile, content, 'utf8', (err) => {
-        if(err) {
-          reject(err);
-          return;
-        }
-        console.log(Chalk.green('Docs have been updated! 📚'));
-
-        resolve();
-      });
-    }))
-    // Publish to S3
-    .then(() => new Promise((resolve, reject) => {
-      // Skip if the --s3 flag is missing
-      if(!Program.s3) {
-        resolve();
-        return;
-      }
-
-      const client = S3.createClient({
-        s3Options: {
-          accessKeyId: process.env.S3_ACCESS_KEY,
-          secretAccessKey: process.env.S3_SECRET_KEY
-        }
-      });
-
-      // Sync the local /dist directory to /{version} in the S3 bucket
-      let uploader = client.uploadDir({
-        localDir: dist,
-        deleteRemoved: true,
-        s3Params: {
-          ACL: process.env.S3_ACL,
-          Prefix: __version,
-          Bucket: process.env.S3_BUCKET
-        }
-      });
-      uploader.on('error', (err) => {
-        reject('Unable to publish to S3: ' + err);
-        return;
-      });
-      uploader.on('end', () => {
-        console.log(Chalk.green('%s has been published to S3! ☁️'), __version);
-        resolve();
-      });
-    }))
-    .then(() => process.exit(1))
-    .catch((err) => {
-      console.error(Chalk.red(err));
-      process.exit(-1);
-    });
-} else {
-  // Can't use the --s3 options without --build
-  if(Program.s3) {
-    console.error(Chalk.yellow('The --s3 flag can only be used with --build'));
-    process.exit(-1);
-  }
-}
-
-// Clean task
-if(Program.clean) {
-  Del(dist)
-    .then(() => {
-      console.log(Chalk.green('%s has been removed.'), dist);
-      process.exit(1);
-    })
-    .catch((err) => {
-      console.error(Chalk.red('Unable to delete dist directory: ' + err));
-      process.exit(-1);
-    });
-}

source/css/_docs.css

@@ -0,0 +1,212 @@
+body {
+  border-top: solid .3rem var(--color-aqua);
+}
+
+#head {
+  padding: 0 2rem;
+  margin: var(--component-spacing-big) 0;
+}
+
+#head a {
+  display: inline-block;
+}
+
+#head img {
+  width: 24rem;
+  margin: 0 auto;
+  display: block;
+}
+
+#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) {
+  #head {
+    padding: 0 1rem;
+  }
+
+  #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;
+  }
+}
+
+/* Fallback to block nav for unsupportive browsers */
+@supports (not (display: grid)) {
+  #nav {
+    border: none;
+    text-align: center;
+    margin: 0 0 2rem 0;
+  }
+
+  #nav a {
+    margin: .5rem;
+    display: inline-block;
+  }
+}
+
+h1[id]:not(:first-child),
+h2[id]:not(:first-child),
+h3[id]:not(:first-child),
+h4[id]:not(:first-child) {
+  margin-top: 3rem;
+}
+
+h3[id],
+h4[id] {
+  color: var(--color-gray);
+}
+
+pre {
+  margin-bottom: 1rem !important; /* Prism overrides our bottom margin */
+}
+
+pre code {
+  white-space: pre;
+  padding: 0;
+  display: block;
+}
+
+a code {
+  color: inherit;
+}
+
+@media (max-width: 45rem) {
+  a.bookmark {
+    width: auto;
+    margin-left: 0;
+  }
+}
+
+/* Column helpers */
+.two-column {
+  column-count: 2;
+  column-gap: 1rem;
+}
+
+@media (max-width: 50rem) {
+  .two-column {
+    column-count: 1;
+    column-gap: 0;
+  }
+}
+
+/* Sizing examples */
+.width-sizing-example {
+  border: solid 1px var(--component-border-color);
+  padding: 1rem;
+  margin-bottom: 1rem;
+}
+
+.width-sizing-example div {
+  background: var(--color-primary);
+  color: white;
+  text-align: center;
+  padding: .25rem;
+  margin-bottom: 1rem;
+}
+
+.width-sizing-example div:last-child {
+  margin-bottom: 0;
+}
+
+.height-sizing-example {
+  border: solid 1px var(--component-border-color);
+  height: 15rem;
+  padding: 1rem .5rem;
+  margin-bottom: 1rem;
+}
+
+.height-sizing-example div {
+  width: calc(25% - 1rem);
+  float: left;
+  background: var(--color-primary);
+  color: white;
+  text-align: center;
+  padding: .25rem;
+  margin: 0 .5rem;
+}
+
+/* Loader example */
+.loader-example div {
+  float: left;
+  width: 6rem;
+  height: 6rem;
+  border: dashed 1px var(--component-border-color);
+  margin-right: .5rem;
+}
+
+/* Tabs example */
+.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;
+}
+
+/* Fix a known issue in Edge: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11495448/ */
+::selection {
+  background-color: tomato;
+  color: white;
+}

source/css/_homepage.css

@@ -0,0 +1,47 @@
+body {
+  border-top: solid .3rem var(--color-aqua);
+}
+
+#head {
+  padding: 0 2rem;
+  margin: var(--component-spacing-big) 0;
+}
+
+#head img {
+  width: 24rem;
+  margin: 0 auto;
+  display: block;
+}
+
+#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) {
+  #head {
+    padding: 0 1rem;
+  }
+
+  #wrap {
+    padding: 0 1rem;
+    display: block;
+  }
+}
+
+/* Fix a known issue in Edge: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11495448/ */
+::selection {
+  background-color: tomato;
+  color: white;
+}

source/css/buttons.css

@@ -11,7 +11,7 @@ button,
   background-color: var(--button-bg-color-primary);
   border-radius: var(--button-border-radius);
   border: none;
-  height: var(--input-height);
+  height: var(--button-height);
   line-height: 1;
   user-select: none;
   vertical-align: middle;
@@ -24,14 +24,14 @@ button,
 }
 
 .button-small {
-  font-size: calc(var(--button-font-size) * .8);
-  height: var(--input-height-small);
+  font-size: var(--button-font-size-small);
+  height: var(--button-height-small);
   padding: calc(var(--component-spacing) * .25) calc(var(--component-spacing) * .5);
 }
 
 .button-big {
-  font-size: calc(var(--button-font-size) * 1.2);
-  height: var(--input-height-big);
+  font-size: var(--button-font-size-big);
+  height: var(--button-height-big);
   padding: calc(var(--component-spacing) * .75) calc(var(--component-spacing) * 1);
 }
 
@@ -40,10 +40,6 @@ button,
   display: block;
 }
 
-.button-block + .button-block {
-  margin-top: 1rem;
-}
-
 button:hover,
 .button:hover {
   color: var(--button-color);

source/css/content.css

@@ -41,10 +41,6 @@ b, strong {
   font-weight: var(--font-weight-bold);
 }
 
-big {
-  font-size: var(--font-size-big);
-}
-
 blockquote {
   font-size: var(--font-size-big);
   border-left: solid .4rem var(--component-border-color);
@@ -53,6 +49,10 @@ blockquote {
   margin-left: 0;
 }
 
+blockquote :last-child {
+  margin-bottom: 0;
+}
+
 code {
   font-family: var(--font-monospace);
   font-size: var(--code-font-size);
@@ -164,8 +164,6 @@ dd {
 ol,
 ul {
   line-height: var(--line-height);
-  list-style-position: inside;
-  padding-left: 1rem;
   margin-top: 0;
   margin-bottom: 1rem;
 }
@@ -181,21 +179,14 @@ ul ul {
 * Placeholders
 ***************************************************************************************************/
 
-::-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); }
+::placeholder {
+  color: var(--placeholder-color);
+}
 
 /***************************************************************************************************
 * Selections
 ***************************************************************************************************/
 
-::-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);

source/css/dropdowns.css

@@ -0,0 +1,86 @@
+/*! Dropdowns */
+
+.dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.dropdown-trigger::after {
+  content: '▼';
+  font-family: var(--font-system);
+  font-size: .6em;
+  vertical-align: middle;
+  margin-left: .5em;
+  display: inline-block;
+  transform: scaleY(.75);
+}
+
+.dropdown-top .dropdown-trigger::after {
+  transform: scaleY(.75) rotate(180deg);
+}
+
+.dropdown-menu {
+  position: absolute;
+  top: calc(100% + var(--dropdown-offset-y));;
+  left: var(--dropdown-offset-x);
+  z-index: var(--dropdown-z-index);
+  min-width: var(--dropdown-min-width);
+  max-width: var(--dropdown-max-width);
+  max-height: var(--dropdown-max-height);
+  background-color: var(--dropdown-bg-color);
+  border: solid var(--dropdown-border-width) var(--dropdown-border-color);
+  border-radius: var(--dropdown-border-radius);
+  box-shadow: var(--dropdown-box-shadow);
+  display: none;
+  padding: calc(var(--dropdown-spacing-y) / 2) 0;
+  overflow-y: auto;
+}
+
+.dropdown-top .dropdown-menu {
+  top: auto;
+  bottom: calc(100% + var(--dropdown-offset-y));;
+}
+
+.dropdown-left .dropdown-menu {
+  left: auto;
+  right: var(--dropdown-offset-x);
+}
+
+.dropdown.active .dropdown-menu {
+  display: block;
+}
+
+.dropdown-menu a {
+  position: relative;
+  color: var(--dropdown-color);
+  text-decoration: none;
+  padding: var(--dropdown-spacing-y) calc(var(--dropdown-spacing-x) + .5em);
+  display: block;
+  white-space: nowrap;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+}
+
+.dropdown-menu a:hover:not(.disabled) {
+  color: var(--dropdown-color-hover);
+  background-color: var(--dropdown-bg-color-hover);
+}
+
+.dropdown-menu a.disabled {
+  cursor: not-allowed;
+  opacity: .5;
+}
+
+.dropdown-menu a.checked::before {
+  position: absolute;
+  left: calc(var(--dropdown-spacing-x) / 2 - .1em);
+  content: '✓';
+  font-family: var(--font-system);
+  font-weight: 600;
+}
+
+.dropdown-menu hr {
+  width: 100%;
+  border-top: solid var(--dropdown-divider-border-width) var(--dropdown-divider-border-color);
+  margin: calc(var(--dropdown-spacing-y) / 2) 0;
+}

source/css/forms.css

@@ -46,12 +46,14 @@ textarea {
   box-shadow: var(--input-box-shadow);
   background-color: var(--input-bg-color);
   height: var(--input-height);
-  line-height: 1;
+  line-height: var(--input-height);
   vertical-align: middle;
   display: block;
-  padding: calc(var(--component-spacing) * .5);
+  padding-left: calc(var(--component-spacing) * .5);
+  padding-right: calc(var(--component-spacing) * .5);
   margin: 0;
   transition: .1s border-color, .1s background-color, .1s color;
+  white-space: nowrap;
   -moz-appearance: none;
   -webkit-appearance: none;
 }
@@ -72,7 +74,7 @@ input[type="week"]:focus,
 select:focus,
 textarea:focus {
   outline: none;
-  border-color: var(--input-border-focus-color);
+  border-color: var(--input-border-color-focus);
 }
 
 select {
@@ -90,6 +92,11 @@ textarea {
   height: auto;
   resize: vertical;
   line-height: var(--line-height);
+  white-space: normal;
+}
+
+input[type="color"] {
+  padding: calc(var(--component-spacing) * .5);
 }
 
 input[type="color"]::-webkit-color-swatch-wrapper {
@@ -115,38 +122,64 @@ input[readonly] {
   background-color: var(--input-readonly-bg-color);
 }
 
-input.input-small,
+input[type="color"].input-small,
+input[type="date"].input-small,
+input[type="datetime-local"].input-small,
+input[type="email"].input-small,
+input[type="month"].input-small,
+input[type="number"].input-small,
+input[type="password"].input-small,
+input[type="search"].input-small,
+input[type="tel"].input-small,
+input[type="text"].input-small,
+input[type="time"].input-small,
+input[type="url"].input-small,
+input[type="week"].input-small,
 select.input-small {
-  font-size: calc(var(--input-font-size) * .8);
+  font-size: var(--input-font-size-small);
   height: var(--input-height-small);
+  line-height: var(--input-height-small);
 }
 
 textarea.input-small {
-  font-size: calc(var(--input-font-size) * .8);
+  font-size: var(--input-font-size-small);
 }
 
-input.input-big,
+input[type="color"].input-big,
+input[type="date"].input-big,
+input[type="datetime-local"].input-big,
+input[type="email"].input-big,
+input[type="month"].input-big,
+input[type="number"].input-big,
+input[type="password"].input-big,
+input[type="search"].input-big,
+input[type="tel"].input-big,
+input[type="text"].input-big,
+input[type="time"].input-big,
+input[type="url"].input-big,
+input[type="week"].input-big,
 select.input-big {
-  font-size: calc(var(--input-font-size) * 1.2);
+  font-size: var(--input-font-size-big);
   height: var(--input-height-big);
+  line-height: var(--input-height-big);
 }
 
 textarea.input-big {
-  font-size: calc(var(--input-font-size) * 1.2);
+  font-size: var(--input-font-size-big);
 }
 
 /* Range styles courtesy of http://danielstern.ca/range.css/ */
-input[type=range] {
+input[type="range"] {
   -webkit-appearance: none;
   width: 100%;
   margin: 1rem 0;
 }
 
-input[type=range]:focus {
+input[type="range"]:focus {
   outline: none;
 }
 
-input[type=range]::-webkit-slider-runnable-track {
+input[type="range"]::-webkit-slider-runnable-track {
   width: 100%;
   height: .5rem;
   cursor: pointer;
@@ -156,7 +189,7 @@ input[type=range]::-webkit-slider-runnable-track {
   box-shadow: var(--input-range-track-box-shadow);
 }
 
-input[type=range]::-webkit-slider-thumb {
+input[type="range"]::-webkit-slider-thumb {
   border: none;
   width: 1.5rem;
   height: 1.5rem;
@@ -167,11 +200,11 @@ input[type=range]::-webkit-slider-thumb {
   margin-top: -.5rem;
 }
 
-input[type=range]:focus::-webkit-slider-runnable-track {
+input[type="range"]:focus::-webkit-slider-runnable-track {
   background: var(--input-range-track-color);
 }
 
-input[type=range]::-moz-range-track {
+input[type="range"]::-moz-range-track {
   width: 100%;
   height: .5rem;
   cursor: pointer;
@@ -181,7 +214,7 @@ input[type=range]::-moz-range-track {
   box-shadow: var(--input-range-track-box-shadow);
 }
 
-input[type=range]::-moz-range-thumb {
+input[type="range"]::-moz-range-thumb {
   border: none;
   height: 1.5rem;
   width: 1.5rem;
@@ -190,7 +223,7 @@ input[type=range]::-moz-range-thumb {
   cursor: pointer;
 }
 
-input[type=range]::-ms-track {
+input[type="range"]::-ms-track {
   width: 100%;
   height: .5rem;
   cursor: pointer;
@@ -199,19 +232,19 @@ input[type=range]::-ms-track {
   color: transparent;
 }
 
-input[type=range]::-ms-fill-lower {
+input[type="range"]::-ms-fill-lower {
   background: #2f6ea5;
   border: none;
   border-radius: var(--input-border-radius);
 }
 
-input[type=range]::-ms-fill-upper {
+input[type="range"]::-ms-fill-upper {
   background: var(--input-range-track-color);
   border: none;
   border-radius: var(--input-border-radius);
 }
 
-input[type=range]::-ms-thumb {
+input[type="range"]::-ms-thumb {
   border: none;
   height: .5rem;
   width: .5rem;
@@ -220,11 +253,11 @@ input[type=range]::-ms-thumb {
   cursor: pointer;
 }
 
-input[type=range]:focus::-ms-fill-lower {
+input[type="range"]:focus::-ms-fill-lower {
   background: var(--input-range-track-color);
 }
 
-input[type=range]:focus::-ms-fill-upper {
+input[type="range"]:focus::-ms-fill-upper {
   background: var(--input-range-track-color);
 }
 
@@ -248,20 +281,26 @@ progress {
 
 .input-group > input,
 .input-group > button,
-.input-group > .button {
+.input-group > .button,
+.input-group > .dropdown button,
+.input-group > .dropdown .button {
   border-radius: 0;
 }
 
 .input-group > input:first-child,
 .input-group > button:first-child,
-.input-group > .button:first-child {
+.input-group > .button:first-child,
+.input-group > .dropdown:first-child button,
+.input-group > .dropdown:first-child .button {
   border-top-left-radius: var(--input-border-radius);
   border-bottom-left-radius: var(--input-border-radius);
 }
 
 .input-group > input:last-child,
 .input-group > button:last-child,
-.input-group > .button:last-child {
+.input-group > .button:last-child,
+.input-group > .dropdown:last-child button,
+.input-group > .dropdown:last-child .button {
   border-top-right-radius: var(--input-border-radius);
   border-bottom-right-radius: var(--input-border-radius);
 }
@@ -275,8 +314,14 @@ progress {
   margin-left: calc(var(--input-border-width) * -1);
 }
 
+.input-group :focus {
+  /* Force a new stacking context so focus rings don't get truncated by adjacent elements */
+  transform: translateZ(0);
+}
+
 /* Input addons */
 .input-addon {
+  font-size: var(--input-font-size);
   color: var(--text-muted);
   height: var(--input-height);
   line-height: var(--input-height);
@@ -288,13 +333,13 @@ progress {
 }
 
 .input-addon-small {
-  font-size: calc(var(--input-font-size) * .8);
+  font-size: var(--input-font-size-small);
   height: var(--input-height-small);
   line-height: var(--input-height-small);
 }
 
 .input-addon-big {
-  font-size: calc(var(--input-font-size) * 1.2);
+  font-size: var(--input-font-size-big);
   height: var(--input-height-big);
   line-height: var(--input-height-big);
 }

source/css/loaders.css

@@ -1,7 +1,7 @@
 /*! Loaders */
 
 @keyframes loader {
-  0%   { transform: rotate(0deg); }
+  0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
 }
 
@@ -19,20 +19,6 @@
   margin: var(--loader-spacing-y) var(--loader-spacing-x);
 }
 
-.loader-small,
-.loader-bg-small::after {
-  border-width: calc(var(--loader-border-width) / 2);
-  width: calc(var(--loader-size) / 2);
-  height: calc(var(--loader-size) / 2);
-}
-
-.loader-big,
-.loader-bg-big::after {
-  border-width: calc(var(--loader-border-width) * 1.5);
-  width: calc(var(--loader-size) * 2);
-  height: calc(var(--loader-size) * 2);
-}
-
 .loader-bg {
   position: relative !important;
 }
@@ -45,14 +31,26 @@
   margin: 0;
 }
 
+.loader-small,
 .loader-bg-small::after {
-  position: absolute;
-  top: calc(50% - var(--loader-size) / 4);
-  left: calc(50% - var(--loader-size) / 4);
+  width: var(--loader-size-small);
+  height: var(--loader-size-small);
+  border-width: var(--loader-border-width-small);
+}
+
+.loader-big,
+.loader-bg-big::after {
+  width: var(--loader-size-big);
+  height: var(--loader-size-big);
+  border-width: var(--loader-border-width-big);
+}
+
+.loader-bg-small::after {
+  top: calc(50% - var(--loader-size-small) / 2);
+  left: calc(50% - var(--loader-size-small) / 2);
 }
 
 .loader-bg-big::after {
-  position: absolute;
-  top: calc(50% - var(--loader-size) / 1);
-  left: calc(50% - var(--loader-size) / 1);
+  top: calc(50% - var(--loader-size-big) / 2);
+  left: calc(50% - var(--loader-size-big) / 2);
 }

source/css/progress-bars.css

@@ -0,0 +1,55 @@
+/*! Progress Bars */
+
+@keyframes progress-indeterminate {
+  0% {
+    left: -50%;
+  }
+
+  100% {
+    left: 100%;
+  }
+}
+
+.progress {
+  position: relative;
+  width: 100%;
+  height: var(--progress-height);
+  line-height: var(--progress-height);
+  font-size: var(--progress-font-size);
+  background-color: var(--progress-bg-color);
+  border-radius: var(--progress-border-radius);
+  display: block;
+  overflow: hidden;
+  margin-bottom: 1rem;
+}
+
+.progress-bar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 100%;
+  text-align: center;
+  color: var(--progress-color);
+  background-color: var(--progress-bar-bg-color);
+  transition: var(--progress-speed-change) width;
+  user-select: none;
+  cursor: default;
+}
+
+.progress-small {
+  font-size: var(--progress-font-size-small);
+  height: var(--progress-height-small);
+  line-height: var(--progress-height-small);
+}
+
+.progress-big {
+  font-size: var(--progress-font-size-big);
+  height: var(--progress-height-big);
+  line-height: var(--progress-height-big);
+}
+
+.progress-indeterminate .progress-bar {
+  width: 50% !important;
+  animation: progress-indeterminate linear var(--progress-speed-indeterminate) infinite;
+}

source/css/shoelace.css

@@ -1,5 +1,5 @@
 /*!
-  Shoelace.css {version}
+  Shoelace.css {{version}}
   (c) A Beautiful Site, LLC
 
   Released under the MIT license
@@ -17,8 +17,11 @@
 @import url('alerts.css');
 @import url('badges.css');
 @import url('buttons.css');
+@import url('dropdowns.css');
 @import url('forms.css');
 @import url('loaders.css');
+@import url('progress-bars.css');
+@import url('switches.css');
 @import url('tabs.css');
 @import url('tables.css');
 @import url('utilities.css');

source/css/switches.css

@@ -0,0 +1,114 @@
+/*! Switches */
+.switch {
+  font-size: var(--switch-font-size);
+}
+
+.switch input {
+  display: none;
+}
+
+.switch input + label {
+  position: relative;
+  min-width: calc(var(--switch-height) * 2);
+  height: var(--switch-height);
+  line-height: var(--switch-height);
+  display: inline-block;
+  cursor: pointer;
+  outline: none;
+  user-select: none;
+  vertical-align: middle;
+  text-indent: calc(var(--switch-height) * 2 + .5rem);
+}
+
+.switch input + label::before,
+.switch input + label::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: calc(var(--switch-height) * 2);
+  bottom: 0;
+  display: block;
+}
+
+.switch input + label::before {
+  right: 0;
+  background-color: var(--switch-bg-color);
+  border-radius: var(--switch-border-radius);
+  transition: background-color var(--switch-speed);
+}
+
+.switch input + label:after {
+  top: var(--switch-thumb-spacing);
+  left: var(--switch-thumb-spacing);
+  width: calc(var(--switch-height) - var(--switch-thumb-spacing) * 2);
+  height: calc(var(--switch-height) - var(--switch-thumb-spacing) * 2);
+  border-radius: var(--switch-thumb-border-radius);
+  background-color: var(--switch-thumb-bg-color);
+  transition: margin var(--switch-speed);
+}
+
+.switch input:checked + label::before {
+  background-color: var(--switch-bg-color-checked);
+}
+
+.switch input:checked + label::after {
+  margin-left: var(--switch-height);
+}
+
+.switch input:disabled + label {
+  opacity: .5;
+  cursor: not-allowed;
+}
+
+.switch-small {
+  font-size: var(--switch-font-size-small);
+}
+
+.switch-small input + label {
+  height: var(--switch-height-small);
+  line-height: var(--switch-height-small);
+  text-indent: calc(var(--switch-height-small) * 2 + .5rem);
+}
+
+.switch-small input + label::before,
+.switch-small input + label::after {
+  width: calc(var(--switch-height-small) * 2);
+}
+
+.switch-small input + label:after {
+  width: calc(var(--switch-height-small) - var(--switch-thumb-spacing) * 2);
+  height: calc(var(--switch-height-small) - var(--switch-thumb-spacing) * 2);
+}
+
+.switch-small input:checked + label::after {
+  margin-left: var(--switch-height-small);
+}
+
+.switch-big {
+  font-size: var(--switch-font-size-big);
+}
+
+.switch-big input + label {
+  height: var(--switch-height-big);
+  line-height: var(--switch-height-big);
+  text-indent: calc(var(--switch-height-big) * 2 + .5rem);
+}
+
+.switch-big input + label::before,
+.switch-big input + label::after {
+  width: calc(var(--switch-height-big) * 2);
+}
+
+.switch-big input + label:after {
+  width: calc(var(--switch-height-big) - var(--switch-thumb-spacing) * 2);
+  height: calc(var(--switch-height-big) - var(--switch-thumb-spacing) * 2);
+}
+
+.switch-big input:checked + label::after {
+  margin-left: var(--switch-height-big);
+}
+
+.switch + .switch {
+  margin-left: 1rem;
+}

source/css/tables.css

@@ -39,3 +39,8 @@ table.table-bordered td {
   border-width: var(--table-border-width);
   border-color: var(--table-border-color);
 }
+
+table.table-hoverable tbody tr:hover td {
+  color: var(--table-hover-color);
+  background-color: var(--table-hover-bg-color);
+}

source/css/utilities.css

@@ -74,71 +74,73 @@
 * Spacing utilities
 ***************************************************************************************************/
 
-.m-none { margin: 0 !important; }
-.m-x-none { margin-left: 0 !important; margin-right: 0 !important; }
-.m-y-none { margin-top: 0 !important; margin-bottom: 0 !important; }
-.m-t-none { margin-top: 0 !important; }
-.m-r-none { margin-right: 0 !important; }
-.m-b-none { margin-bottom: 0 !important; }
-.m-l-none { margin-left: 0 !important; }
+.padding-none { padding: 0 !important; }
+.padding-x-none { padding-left: 0 !important; padding-right: 0 !important; }
+.padding-y-none { padding-top: 0 !important; padding-bottom: 0 !important; }
+.padding-top-none { padding-top: 0 !important; }
+.padding-right-none { padding-right: 0 !important; }
+.padding-bottom-none { padding-bottom: 0 !important; }
+.padding-left-none { padding-left: 0 !important; }
 
-.m-small { margin: var(--spacing-small) !important; }
-.m-x-small { margin-left: var(--spacing-small) !important; margin-right: var(--spacing-small) !important; }
-.m-y-small { margin-top: var(--spacing-small) !important; margin-bottom: var(--spacing-small) !important; }
-.m-t-small { margin-top: var(--spacing-small) !important; }
-.m-r-small { margin-right: var(--spacing-small) !important; }
-.m-b-small { margin-bottom: var(--spacing-small) !important; }
-.m-l-small { margin-left: var(--spacing-small) !important; }
+.padding-small { padding: var(--spacing-small) !important; }
+.padding-x-small { padding-left: var(--spacing-small) !important; padding-right: var(--spacing-small) !important; }
+.padding-y-small { padding-top: var(--spacing-small) !important; padding-bottom: var(--spacing-small) !important; }
+.padding-top-small { padding-top: var(--spacing-small) !important; }
+.padding-right-small { padding-right: var(--spacing-small) !important; }
+.padding-bottom-small { padding-bottom: var(--spacing-small) !important; }
+.padding-left-small { padding-left: var(--spacing-small) !important; }
 
-.m-medium { margin: var(--spacing-medium) !important; }
-.m-x-medium { margin-left: var(--spacing-medium) !important; margin-right: var(--spacing-medium) !important; }
-.m-y-medium { margin-top: var(--spacing-medium) !important; margin-bottom: var(--spacing-medium) !important; }
-.m-t-medium { margin-top: var(--spacing-medium) !important; }
-.m-r-medium { margin-right: var(--spacing-medium) !important; }
-.m-b-medium { margin-bottom: var(--spacing-medium) !important; }
-.m-l-medium { margin-left: var(--spacing-medium) !important; }
+.padding-medium { padding: var(--spacing-medium) !important; }
+.padding-x-medium { padding-left: var(--spacing-medium) !important; padding-right: var(--spacing-medium) !important; }
+.padding-y-medium { padding-top: var(--spacing-medium) !important; padding-bottom: var(--spacing-medium) !important; }
+.padding-top-medium { padding-top: var(--spacing-medium) !important; }
+.padding-right-medium { padding-right: var(--spacing-medium) !important; }
+.padding-bottom-medium { padding-bottom: var(--spacing-medium) !important; }
+.padding-left-medium { padding-left: var(--spacing-medium) !important; }
 
-.m-big { margin: var(--spacing-big) !important; }
-.m-x-big { margin-left: var(--spacing-big) !important; margin-right: var(--spacing-big) !important; }
-.m-y-big { margin-top: var(--spacing-big) !important; margin-bottom: var(--spacing-big) !important; }
-.m-t-big { margin-top: var(--spacing-big) !important; }
-.m-r-big { margin-right: var(--spacing-big) !important; }
-.m-b-big { margin-bottom: var(--spacing-big) !important; }
-.m-l-big { margin-left: var(--spacing-big) !important; }
+.padding-big { padding: var(--spacing-big) !important; }
+.padding-x-big { padding-left: var(--spacing-big) !important; padding-right: var(--spacing-big) !important; }
+.padding-y-big { padding-top: var(--spacing-big) !important; padding-bottom: var(--spacing-big) !important; }
+.padding-top-big { padding-top: var(--spacing-big) !important; }
+.padding-right-big { padding-right: var(--spacing-big) !important; }
+.padding-bottom-big { padding-bottom: var(--spacing-big) !important; }
+.padding-left-big { padding-left: var(--spacing-big) !important; }
 
-.p-none { padding: 0 !important; }
-.p-x-none { padding-left: 0 !important; padding-right: 0 !important; }
-.p-y-none { padding-top: 0 !important; padding-bottom: 0 !important; }
-.p-t-none { padding-top: 0 !important; }
-.p-r-none { padding-right: 0 !important; }
-.p-b-none { padding-bottom: 0 !important; }
-.p-l-none { padding-left: 0 !important; }
+.margin-none { margin: 0 !important; }
+.margin-x-none { margin-left: 0 !important; margin-right: 0 !important; }
+.margin-y-none { margin-top: 0 !important; margin-bottom: 0 !important; }
+.margin-top-none { margin-top: 0 !important; }
+.margin-right-none { margin-right: 0 !important; }
+.margin-bottom-none { margin-bottom: 0 !important; }
+.margin-left-none { margin-left: 0 !important; }
 
-.p-small { padding: var(--spacing-small) !important; }
-.p-x-small { padding-left: var(--spacing-small) !important; padding-right: var(--spacing-small) !important; }
-.p-y-small { padding-top: var(--spacing-small) !important; padding-bottom: var(--spacing-small) !important; }
-.p-t-small { padding-top: var(--spacing-small) !important; }
-.p-r-small { padding-right: var(--spacing-small) !important; }
-.p-b-small { padding-bottom: var(--spacing-small) !important; }
-.p-l-small { padding-left: var(--spacing-small) !important; }
+.margin-small { margin: var(--spacing-small) !important; }
+.margin-x-small { margin-left: var(--spacing-small) !important; margin-right: var(--spacing-small) !important; }
+.margin-y-small { margin-top: var(--spacing-small) !important; margin-bottom: var(--spacing-small) !important; }
+.margin-top-small { margin-top: var(--spacing-small) !important; }
+.margin-right-small { margin-right: var(--spacing-small) !important; }
+.margin-bottom-small { margin-bottom: var(--spacing-small) !important; }
+.margin-left-small { margin-left: var(--spacing-small) !important; }
 
-.p-medium { padding: var(--spacing-medium) !important; }
-.p-x-medium { padding-left: var(--spacing-medium) !important; padding-right: var(--spacing-medium) !important; }
-.p-y-medium { padding-top: var(--spacing-medium) !important; padding-bottom: var(--spacing-medium) !important; }
-.p-t-medium { padding-top: var(--spacing-medium) !important; }
-.p-r-medium { padding-right: var(--spacing-medium) !important; }
-.p-b-medium { padding-bottom: var(--spacing-medium) !important; }
-.p-l-medium { padding-left: var(--spacing-medium) !important; }
+.margin-medium { margin: var(--spacing-medium) !important; }
+.margin-x-medium { margin-left: var(--spacing-medium) !important; margin-right: var(--spacing-medium) !important; }
+.margin-y-medium { margin-top: var(--spacing-medium) !important; margin-bottom: var(--spacing-medium) !important; }
+.margin-top-medium { margin-top: var(--spacing-medium) !important; }
+.margin-right-medium { margin-right: var(--spacing-medium) !important; }
+.margin-bottom-medium { margin-bottom: var(--spacing-medium) !important; }
+.margin-left-medium { margin-left: var(--spacing-medium) !important; }
 
-.p-big { padding: var(--spacing-big) !important; }
-.p-x-big { padding-left: var(--spacing-big) !important; padding-right: var(--spacing-big) !important; }
-.p-y-big { padding-top: var(--spacing-big) !important; padding-bottom: var(--spacing-big) !important; }
-.p-t-big { padding-top: var(--spacing-big) !important; }
-.p-r-big { padding-right: var(--spacing-big) !important; }
-.p-b-big { padding-bottom: var(--spacing-big) !important; }
-.p-l-big { padding-left: var(--spacing-big) !important; }
+.margin-big { margin: var(--spacing-big) !important; }
+.margin-x-big { margin-left: var(--spacing-big) !important; margin-right: var(--spacing-big) !important; }
+.margin-y-big { margin-top: var(--spacing-big) !important; margin-bottom: var(--spacing-big) !important; }
+.margin-top-big { margin-top: var(--spacing-big) !important; }
+.margin-right-big { margin-right: var(--spacing-big) !important; }
+.margin-bottom-big { margin-bottom: var(--spacing-big) !important; }
+.margin-left-big { margin-left: var(--spacing-big) !important; }
 
-.m-x-auto { margin-left: auto !important; margin-right: auto !important; }
+.margin-x-auto { margin-left: auto !important; margin-right: auto !important; }
+.margin-y-auto { margin-top: auto !important; margin-bottom: auto !important; }
+.margin-xy-auto { margin: auto !important; }
 
 /***************************************************************************************************
 * Text utilities

source/css/variables.css

@@ -120,7 +120,7 @@
 
   /* Badges */
   --badge-font-size: .8em; /* ems for relative sizing */
-  --badge-font-weight: var(--font-weight-bold);
+  --badge-font-weight: var(--font-weight);
   --badge-color: var(--color-white);
   --badge-border-radius: 1em;  /* ems for relative sizing */
   --badge-bg-color-primary: var(--color-primary);
@@ -129,13 +129,18 @@
   --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);
+  --badge-spacing-x: .6em;
+  --badge-spacing-y: .2em;
 
   /* Buttons */
-  --button-font-family: inherit;
-  --button-font-weight: inherit;
-  --button-font-size: var(--font-size);
+  --button-font-family: var(--input-font-family);
+  --button-font-weight: var(--input-font-weight);
+  --button-font-size: var(--input-font-size);
+  --button-font-size-small: var(--input-font-size-small);
+  --button-font-size-big: var(--input-font-size-big);
+  --button-height: var(--input-height);
+  --button-height-small: var(--input-height-small);
+  --button-height-big: var(--input-height-big);
   --button-color: var(--color-white);
   --button-border-radius: var(--component-border-radius);
   --button-box-shadow: inset 0 2px 0 rgba(255, 255, 255, .1), inset 0 -2px 0 rgba(0, 0, 0, .1);
@@ -148,6 +153,26 @@
   --button-bg-color-danger: var(--state-danger);
   --button-bg-color-inverse: var(--state-inverse);
 
+  /* Dropdowns */
+  --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;
+
   /* Forms */
   --fieldset-border-color: var(--component-border-color);
   --fieldset-border-width: var(--component-border-width);
@@ -157,13 +182,15 @@
 
   --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-focus-color: var(--color-primary);
+  --input-border-color-focus: var(--color-primary);
   --input-border-width: 1px;
   --input-border-radius: var(--component-border-radius);
   --input-bg-color: var(--color-white);
@@ -182,22 +209,55 @@
   /* Loaders */
   --loader-bg-color: var(--component-bg-color);
   --loader-border-color: var(--color-primary);
-  --loader-border-width: .25rem;
+  --loader-border-width: .2rem;
+  --loader-border-width-small: calc(var(--loader-border-width) / 2);
+  --loader-border-width-big: calc(var(--loader-border-width) * 2);;
   --loader-size: 2rem;
+  --loader-size-small: calc(var(--loader-size) / 2);
+  --loader-size-big: calc(var(--loader-size) * 2);
   --loader-speed: 750ms;
   --loader-spacing-x: var(--component-spacing-small);
   --loader-spacing-y: 0;
 
+  /* Progress */
+  --progress-font-size: var(--input-font-size);
+  --progress-font-size-small: var(--input-font-size-small);
+  --progress-font-size-big: var(--input-font-size-big);
+  --progress-height: var(--input-height);
+  --progress-height-small: var(--input-height-small);
+  --progress-height-big: var(--input-height-big);
+  --progress-color: var(--color-white);
+  --progress-bg-color: var(--component-bg-color);
+  --progress-bar-bg-color: var(--color-primary);
+  --progress-border-radius: var(--component-border-radius);
+  --progress-speed-change: .2s;
+  --progress-speed-indeterminate: 1.5s;
+
   /* Spacing Utilties */
   --spacing-small: var(--component-spacing);
   --spacing-medium: calc(var(--component-spacing) * 2);
   --spacing-big: calc(var(--component-spacing) * 4);
 
+  /* Switches */
+  --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-height);
+  --switch-height: var(--input-height);
+  --switch-height-small: var(--input-height-small);
+  --switch-height-big: var(--input-height-big);
+  --switch-thumb-bg-color: white;
+  --switch-thumb-border-radius: 50%;
+  --switch-thumb-spacing: 2px;
+  --switch-speed: .2s;
+
   /* Tabs */
-  --tab-bg-color: var(--body-bg);
-  --tab-bg-color-hover: var(--body-bg);
+  --tab-bg-color: var(--body-bg-color);
+  --tab-bg-color-hover: var(--body-bg-color);
   --tab-bg-color-active: var(--link-color);
-  --tab-bg-color-disabled: var(--body-bg);
+  --tab-bg-color-disabled: var(--body-bg-color);
   --tab-border-radius: var(--component-border-radius);
   --tab-color: var(--link-color);
   --tab-color-hover: var(--link-color-hover);
@@ -217,6 +277,8 @@
   --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);
 }

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 `<div>`. You can change an alert’s appearance using the `alert-*` modifier.
+
+```html
+<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>
+```
+
+<div class="alert">This is a default alert <a href="#">with link</a></div>
+<div class="alert alert-success">This is a success alert <a href="#">with link</a></div>
+<div class="alert alert-info">This is an info alert <a href="#">with link</a></div>
+<div class="alert alert-warning">This is a warning alert <a href="#">with link</a></div>
+<div class="alert alert-danger">This is a danger alert <a href="#">with link</a></div>
+<div class="alert alert-inverse">This is an inverse alert <a href="#">with link</a></div>

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

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 `<span>`. You can change a badge’s appearance using the `badge-*` modifier.
+
+```html
+<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>
+```
+
+<p>
+  <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>
+</p>
+
+By default, badges are sized relative to their parent element.
+
+```html
+<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>
+```
+
+<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>

source/docs/browser-support.md

@@ -0,0 +1,21 @@
+---
+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 (Edge is fine). If you need to support IE, just use a [grid system](https://github.com/zirafa/bootstrap-grid-only) and a polyfill such as [Myth](http://www.myth.io/) or [cssnext](http://cssnext.io/).
+
+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/) or [cssnext](http://cssnext.io/) as a polyfill. Both libraries let you write standards-compliant CSS and process it to work properly in unsupportive browsers.
+
+Unfortunately, it’s impossible for polyfills to support variable scoping. Because of this, Shoelace only uses CSS variables that are assigned at the `:root` level.
+
+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](https://github.com/zirafa/bootstrap-grid-only) 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.

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 `<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.
+
+```html
+<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>
+```
+
+<div class="input-single">
+  <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-link">Link</button>
+</div>
+
+Use the `button-small` and `button-big` modifiers to change the size of a button.
+
+<div class="input-single">
+  <button type="button" class="button-small">Small Button</button>
+  <button type="button">Normal Button</button>
+  <button type="button" class="button-big">Big Button</button>
+</div>
+
+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.
+
+<div class="input-single">
+  <button type="button" class="button-block button-small">Small Block Button</button>
+</div>
+
+<div class="input-single">
+  <button type="button" class="button-block">Normal Block Button</button>
+</div>
+
+<div class="input-single">
+  <button type="button" class="button-block button-big">Big Block Button</button>
+</div>
+
+Disabled buttons look like this. Set the `disabled` property on `<button>` elements to achieve this effect. For all other elements, apply `class="disabled"` instead.
+
+<div class="input-single">
+  <button type="button" disabled>Default</button>
+  <button type="button" class="button-success" disabled>Success</button>
+  <button type="button" class="button-info disabled">Info</button>
+  <button type="button" class="button-warning" disabled>Warning</button>
+  <button type="button" class="button-danger" disabled>Danger</button>
+  <button type="button" class="button-inverse" disabled>Inverse</button>
+</div>
+
+You can force buttons to have an active state by applying the `active` class.
+
+<div class="input-single">
+  <button type="button" class="active">Default</button>
+  <button type="button" class="button-success active">Success</button>
+  <button type="button" class="button-info active">Info</button>
+  <button type="button" class="button-warning active">Warning</button>
+  <button type="button" class="button-danger active">Danger</button>
+  <button type="button" class="button-inverse active">Inverse</button>
+</div>
+
+### 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 `<label>` elements with the `button` class and a nested file input.
+
+```html
+<label class="button">
+  Select File
+  <input type="file">
+</label>
+```
+
+<div class="input-single">
+  <label class="button">Select File <input type="file"></label>
+</div>

source/docs/content.md

@@ -0,0 +1,152 @@
+---
+layout: default.html
+title: Content
+description: Default content styles.
+---
+
+## 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>`
+
+<h1>Heading 1</h1>
+<h2>Heading 2</h2>
+<h3>Heading 3</h3>
+<h4>Heading 4</h4>
+<h5>Heading 5</h5>
+<h6>Heading 6</h6>
+
+### 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. List item 2
+    1. Nested item 1
+    2. Nested item 2
+    3. Nested item 3
+3. List item 3
+
+### Unordered Lists `<ul>`
+
+- List item 1
+- List item 2
+    - Nested item 1
+    - Nested item 2
+    - Nested item 3
+- List item 3
+
+### Definition Lists `<dl>`
+
+<dl>
+  <dt>Term 1</dt>
+  <dd>
+    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!
+  </dd>
+  <dt>Term 2</dt>
+  <dd>
+    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?
+  </dd>
+</dl>
+
+### Blockquotes `<blockquote>`
+
+<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.
+</blockquote>
+
+### Preformatted Text `<pre>`
+
+```
+CLS
+SCREEN 13
+PRINT "SHOELACE IS AWESOME"
+```
+
+### Text Formats
+
+<table class="table">
+  <thead>
+    <tr>
+      <th>Element</th>
+      <th>Example</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>`<strong>`</td>
+      <td><strong>This is strong text</strong></td>
+    </tr>
+    <tr>
+      <td>`<em>`</td>
+      <td><em>This is emphasized text</em></td>
+    </tr>
+    <tr>
+      <td>`<u>`</td>
+      <td><u>This is underlined text</u></td>
+    </tr>
+    <tr>
+      <td>`<s>`</td>
+      <td><s>This is strikethrough text</s></td>
+    </tr>
+    <tr>
+      <td>`<a>`</td>
+      <td><a href="#">This is link text</a></td>
+    </tr>
+    <tr>
+      <td>`<small>`</td>
+      <td><small>This is small text</small></td>
+    </tr>
+    <tr>
+      <td>`<sup>`</td>
+      <td><sup>This is superscript text</sup></td>
+    </tr>
+    <tr>
+      <td>`<sub>`</td>
+      <td><sub>This is subscript text</sub></td>
+    </tr>
+    <tr>
+      <td>`<code>`</td>
+      <td>`This is code text`</td>
+    </tr>
+    <tr>
+      <td>`<samp>`</td>
+      <td><samp>This is sample text</samp></td>
+    </tr>
+    <tr>
+      <td>`<var>`</td>
+      <td><var>This is variable text</var></td>
+    </tr>
+    <tr>
+      <td>`<kbd>`</td>
+      <td><kbd>This is keyboard text</kbd></td>
+    </tr>
+    <tr>
+      <td>`<abbr>`</td>
+      <td><abbr title="Abbreviation">This is abbreviation text</abbr></td>
+    </tr>
+    <tr>
+      <td>`<del>`</td>
+      <td><del>This is deleted text</del></td>
+    </tr>
+    <tr>
+      <td>`<ins>`</td>
+      <td><ins>This is inserted text</ins></td>
+    </tr>
+    <tr>
+      <td>`<mark>`</td>
+      <td><mark>This is marked text</mark></td>
+    </tr>
+  </tbody>
+</table>

source/docs/customizing.md

@@ -0,0 +1,42 @@
+---
+layout: default.html
+title: Customizing
+description: Learn how to customize Shoelace.css with CSS variables.
+---
+
+## 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:
+
+```css
+: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](#custom-components).
+
+```css
+.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](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables) will bring you up to speed. There’s also an [interactive demo](https://codepen.io/claviska/pen/NvGVYM?editors=1100) if you want to experiment.
+
+### 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.

source/docs/dropdowns.md

@@ -0,0 +1,129 @@
+---
+layout: default.html
+title: Dropdowns
+description: Add beautiful menus to your app with dropdowns.
+---
+
+## Dropdowns
+
+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.
+
+```html
+<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>
+```
+
+<div class="input-single">
+  <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>
+</div>
+
+Use the `dropdown-top` and `dropdown-left` modifiers to change the positioning of the menu. You can combine these modifiers as needed.
+
+```html
+<div class="dropdown dropdown-left">
+  ...
+</div>
+
+<div class="dropdown dropdown-top">
+  ...
+</div>
+
+<div class="dropdown dropdown-top dropdown-left">
+  ...
+</div>
+```
+
+<div class="input-single">
+  <div class="dropdown dropdown-left">
+    <button type="button" class="dropdown-trigger">Left</button>
+    <div class="dropdown-menu">
+      <a href="#">Item 1</a>
+      <a href="#">Item 2</a>
+      <a href="#">Item 3</a>
+    </div>
+  </div>
+
+  <div class="dropdown dropdown-top">
+    <button type="button" class="dropdown-trigger">Top</button>
+    <div class="dropdown-menu">
+      <a href="#">Item 1</a>
+      <a href="#">Item 2</a>
+      <a href="#">Item 3</a>
+    </div>
+  </div>
+
+  <div class="dropdown dropdown-top dropdown-left">
+    <button type="button" class="dropdown-trigger">Top Left</button>
+    <div class="dropdown-menu">
+      <a href="#">Item 1</a>
+      <a href="#">Item 2</a>
+      <a href="#">Item 3</a>
+    </div>
+  </div>
+</div>
+
+Dropdowns with button triggers can be used inside input groups.
+
+<div class="input-group">
+  <span class="input-addon">$</span>
+  <input type="text" placeholder="10.00">
+  <div class="dropdown dropdown-left">
+    <button type="button" class="dropdown-trigger">Currency</button>
+    <div class="dropdown-menu">
+      <a href="#" class="checked">USD</a>
+      <a href="#">AUD</a>
+      <a href="#">CAD</a>
+      <a href="#">GBP</a>
+    </div>
+  </div>
+</div>
+
+### 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);
+  });
+```

source/docs/forms.md

@@ -0,0 +1,339 @@
+---
+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.
+
+<table class="table table-bordered">
+  <thead>
+    <tr>
+      <th>Input Type</th>
+      <th>Example</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>&lt;input type=&quot;checkbox&quot;&gt;</code></td>
+      <td>
+        <label><input type="checkbox" checked> Checkbox 1</label><br>
+        <label><input type="checkbox"> Checkbox 2</label>
+      </td>
+    </tr>
+    <tr>
+      <td><code>&lt;input type=&quot;color&quot;&gt;</code></td>
+      <td><input type="color" value="#0099dd"></td>
+    </tr>
+    <tr>
+      <td><code>&lt;input type=&quot;date&quot;&gt;</code></td>
+      <td><input type="date"></td>
+    </tr>
+    <tr>
+      <td><code>&lt;input type=&quot;email&quot;&gt;</code></td>
+      <td><input type="email"></td>
+    </tr>
+    <tr>
+      <td>
+        <code>&lt;input type=&quot;file&quot;&gt;</code>
+        <br>
+        <span class="text-small text-muted">
+          File inputs aren’t supported. Use a [file button](buttons.html#file-buttons) instead.
+        </span>
+      </td>
+      <td>
+        <label class="button button-block">Select File <input type="file"></label>
+      </td>
+    </tr>
+    <tr>
+      <td><code>&lt;input type=&quot;number&quot;&gt;</code></td>
+      <td><input type="number"></td>
+    </tr>
+    <tr>
+      <td><code>&lt;input type=&quot;password&quot;&gt;</code></td>
+      <td><input type="password"></td>
+    </tr>
+    <tr>
+      <td><code>&lt;input type=&quot;radio&quot;&gt;</code></td>
+      <td>
+        <label><input type="Radio" name="radio" checked> Radio 1</label><br>
+        <label><input type="Radio" name="radio"> Radio 2</label>
+      </td>
+    </tr>
+    <tr>
+      <td><code>&lt;input type=&quot;range&quot;&gt;</code></td>
+      <td><input type="range"></td>
+    </tr>
+    <tr>
+      <td><code>&lt;input type=&quot;search&quot;&gt;</code></td>
+      <td><input type="search"></td>
+    </tr>
+    <tr>
+      <td><code>&lt;input type=&quot;text&quot;&gt;</code></td>
+      <td><input type="text"></td>
+    </tr>
+    <tr>
+      <td><code>&lt;input type=&quot;time&quot;&gt;</code></td>
+      <td><input type="time"></td>
+    </tr>
+    <tr>
+      <td><code>&lt;select&gt;</code></td>
+      <td>
+        <select>
+          <option>Item 1</option>
+          <option>Item 2</option>
+          <option>Item 3</option>
+        </select>
+      </td>
+    </tr>
+    <tr>
+      <td><code>&lt;textarea&gt;</code></td>
+      <td><textarea rows="4"></textarea></td>
+    </tr>
+  </tbody>
+</table>
+
+You can change the size of most form controls with the `input-small` and `input-big` modifiers.
+
+```html
+<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>
+```
+
+<div class="two-column">
+  <p><input type="text" class="input-small" placeholder="Small"></p>
+  <p><input type="text" placeholder="Default"></p>
+  <p><input type="text" class="input-big" placeholder="Big"></p>
+  <p><select class="input-small"><option>Item</option></select></p>
+  <p><select><option>Item</option></select></p>
+  <p><select class="input-big"><option>Item</option></select></p>
+</div>
+
+Disabled form controls look like this:
+
+<div class="input-single">
+  <input type="text" placeholder="Input" disabled>
+</div>
+
+<div class="input-single">
+  <label><input type="checkbox" disabled> Checkbox</label>
+  <label><input type="radio" disabled> Radio</label>
+</div>
+
+Read-only form controls look like this:
+
+<div class="input-single">
+  <input type="text" readonly value="This is read-only">
+</div>
+
+### Form Control Spacing
+
+For proper spacing of individual form controls, wrap them in `input-single` containers.
+
+```html
+<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>
+```
+
+<div class="input-single">
+  <label>Username</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.
+
+```html
+<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>
+```
+
+<div class="input-single">
+  <div class="input-group">
+    <input type="text">
+    <button type="button">Submit</button>
+  </div>
+</div>
+
+<div class="input-single">
+  <div class="input-group">
+    <button type="button">Submit</button>
+    <input type="text">
+  </div>
+</div>
+
+<div class="input-single">
+  <div class="input-group">
+    <input type="text" placeholder="First">
+    <input type="text" placeholder="Middle">
+    <input type="text" placeholder="Last">
+    <button type="button">Submit</button>
+  </div>
+</div>
+
+<div class="input-single">
+  <div class="input-group">
+    <button type="button">Option 1</button>
+    <button type="button">Option 2</button>
+    <button type="button">Option 3</button>
+  </div>
+</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.
+
+```html
+<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>
+```
+
+<div class="input-single">
+  <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>
+
+<div class="input-single">
+  <div class="input-group">
+    <span class="input-addon">$</span>
+    <input type="text">
+    <span class="input-addon">.00</span>
+  </div>
+</div>
+
+<div class="input-single">
+  <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>
+</div>
+
+### Form Groups
+
+Related form controls can be grouped in a `<fieldset>`. An optional `<legend>` can be used to display a name for the group.
+
+```html
+<fieldset>
+  <legend>User</legend>
+  ...
+</fieldset>
+```
+
+<fieldset>
+  <legend>Login</legend>
+  <div class="input-single">
+    <label>Username</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>
+  <div class="input-single">
+    <button type="button">Login</button>
+  </div>
+</fieldset>
+
+### 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
+<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>
+```
+
+<div class="two-column">
+  <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>
+</div>

source/docs/grid-system.md

@@ -0,0 +1,44 @@
+---
+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.
+
+This website uses the CSS Grid Layout. It’s really simple!
+
+```html
+<main id="wrap">
+  <nav id="nav">
+    ...
+  </nav>
+
+  <div id="content">
+    ...
+  </div>
+</main>
+```
+
+Now we just need a couple styles to turn the nav and content elements into columns. This will make the nav `12rem` wide and the content `100% - 12rem` so it fills the rest of the space.
+
+```css
+#wrap {
+  display: grid;
+  grid-template-columns: 12rem calc(100% - 12rem);
+}
+```
+
+You can use media queries to make grids responsive. This is how we make the nav appear on top of the content on smaller screens.
+
+```css
+@media (max-width: 60rem) {
+  #wrap {
+    display: block;
+  }
+}
+```
+
+Support for CSS Grid Layouts is [very good](http://caniuse.com/css-grid), but 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.

source/docs/icons.md

@@ -0,0 +1,47 @@
+---
+layout: default.html
+title: Icons
+description: Shoelace doesn’t ship with icons, but you can easily add your own!
+stylesheets:
+ - https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css
+---
+
+## 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.
+
+### Font Awesome
+
+You can load Font Awesome locally or via CDN. To use the CDN version, add this to the `<head>` section of your page:
+
+```html
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
+```
+
+Then add icons as you normally would with `<i class="fa fa-*"></i>`:
+
+<div class="input-single text-muted" style="font-size: 2rem;">
+  <i class="fa fa-magic"></i>
+  <i class="fa fa-briefcase"></i>
+  <i class="fa fa-cog"></i>
+  <i class="fa fa-database"></i>
+  <i class="fa fa-bug"></i>
+  <i class="fa fa-beer"></i>
+  <i class="fa fa-arrows"></i>
+  <i class="fa fa-rocket"></i>
+  <i class="fa fa-tag"></i>
+  <i class="fa fa-plane"></i>
+  <i class="fa fa-soccer-ball-o"></i>
+  <i class="fa fa-warning"></i>
+</div>
+
+<div class="input-single">
+  <button type="button"><i class="fa fa-star"></i> Star</button>
+  <button type="button" class="button-success"><i class="fa fa-check"></i> Check</button>
+  <button type="button" class="button-warning"><i class="fa fa-pencil"></i> Edit</button>
+  <button type="button" class="button-info"><i class="fa fa-comment"></i> Comment</button>
+</div>
+
+For your convenience, [here’s a full list](http://fontawesome.io/icons/) of icons available in Font Awesome.

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 your `<head>`:
+
+```html
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/shoelace-css/{{version}}/shoelace.css">
+```
+
+And this before `</body>` but after jQuery/Zepto:
+
+```html
+<script src="https://cdnjs.cloudflare.com/ajax/libs/shoelace-css/{{version}}/shoelace.js"></script>
+```
+
+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 `<head>`:
+
+```html
+<link rel="stylesheet" href="dist/shoelace.css">
+```
+
+And this before `</body>` but after jQuery/Zepto:
+
+```html
+<script src="dist/shoelace.js"></script>
+```
+
+### NPM
+
+If you’re using NPM, you can install Shoelace by running:
+
+```
+npm install shoelace-css
+```

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 `<span>` element. You can use the `loader-small` and `loader-big` modifiers to change the size.
+
+```html
+<span class="loader loader-small"></span>
+<span class="loader"></span>
+<span class="loader loader-big"></span>
+```
+<div class="input-single">
+  <span class="loader loader-small"></span>
+  <span class="loader"></span>
+  <span class="loader loader-big"></span>
+</div>
+
+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
+<div class="loader-bg loader-bg-small"></div>
+<div class="loader-bg"></div>
+<div class="loader-bg loader-bg-big"></div>
+```
+
+<div class="loader-example clearfix">
+  <div class="loader-bg loader-bg-small"></div>
+  <div class="loader-bg"></div>
+  <div class="loader-bg loader-bg-big"></div>
+</div>

source/docs/progress-bars.md

@@ -0,0 +1,51 @@
+---
+layout: default.html
+title: Progress Bars
+description: These progress bars are easy to create and render consistently in all browsers.
+---
+
+## Progress Bars
+
+HTML5 introduced the `<progress>` element, but it’s not currently possible to style consistently in all browsers. As a result, Shoelace offers a custom alternative.
+
+Create a progress bar with the following markup. Use the `progress-small` and `progress-big` modifiers to change the size. To set the state, use a [sizing utility](utilities.html#sizing-utilities) or set the width explicitly on the `progress-bar` element.
+
+An optional text label can be included inside the `progress-bar` element.
+
+```html
+<div class="progress progress-small">
+  <div class="progress-bar width-25">25%</div>
+</div>
+
+<div class="progress">
+  <div class="progress-bar width-50">50%</div>
+</div>
+
+<div class="progress progress-big">
+  <div class="progress-bar width-75">75%</div>
+</div>
+```
+
+<div class="progress progress-small">
+  <div class="progress-bar width-25">25%</div>
+</div>
+
+<div class="progress">
+  <div class="progress-bar width-50">50%</div>
+</div>
+
+<div class="progress progress-big">
+  <div class="progress-bar width-75">75%</div>
+</div>
+
+When progress can’t be determined, use the `progress-indeterminate` modifier to set an indeterminate state.
+
+```html
+<div class="progress progress-indeterminate">
+  <div class="progress-bar"></div>
+</div>
+```
+
+<div class="progress progress-indeterminate">
+  <div class="progress-bar"></div>
+</div>

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 `<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:
+
+```html
+<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>
+```
+
+<div class="input-single">
+  <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>
+</div>
+
+Use the `switch-small` and `switch-big` modifiers to change the size of a switch.
+
+<div class="input-single">
+  <span class="switch switch-small">
+    <input type="checkbox" class="switch" id="switch-3">
+    <label for="switch-3">Small</label>
+  </span>
+
+  <span class="switch">
+    <input type="checkbox" class="switch" id="switch-4">
+    <label for="switch-4">Normal</label>
+  </span>
+
+  <span class="switch switch-big">
+    <input type="checkbox" class="switch" id="switch-5">
+    <label for="switch-5">Big</label>
+  </span>
+</div>
+
+Disabled switches are dimmed out. To disable a switch, add the `disabled` attribute to the checkbox (not the wrapper).
+
+<div class="input-single">
+  <span class="switch">
+    <input type="checkbox" class="switch" disabled id="switch-6">
+    <label for="switch-6">Disabled</label>
+  </span>
+</div>

source/docs/tables.md

@@ -0,0 +1,101 @@
+---
+layout: default.html
+title: Tables
+description: Shoelace ships with elegant table styles and a handful of modifiers.
+---
+
+## Tables
+
+Tables are styled for you automatically — no special classes required.
+
+```html
+<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>
+```
+
+<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>
+
+### Striped Tables
+
+Use the `table-striped` modifier to add stripes to alternating rows.
+
+```html
+<table class="table-striped">
+  ...
+</table>
+```
+
+<table class="table-striped">
+  <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>
+
+### Bordered Tables
+
+Use the `table-bordered` modifier to add a border to the table.
+
+```html
+<table class="table-bordered">
+  ...
+</table>
+```
+
+<table class="table-bordered">
+  <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>
+
+### Hoverable Rows
+
+Use the `table-hoverable` modifier to enable the hover state on table rows.
+
+```html
+<table class="table-hoverable">
+  ...
+</table>
+```
+
+<table class="table-hoverable">
+  <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>

source/docs/tabs.md

@@ -0,0 +1,150 @@
+---
+layout: default.html
+title: Tabs
+description: Add tabs to your app with the tabs component.
+---
+
+## 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.
+
+```html
+<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>
+```
+
+<div class="tabs">
+  <nav class="tabs-nav">
+    <a href="#tab-1-example-1" class="active">Tab 1</a>
+    <a href="#tab-2-example-1">Tab 2</a>
+    <a href="#tab-3-example-1">Tab 3</a>
+    <a href="#" class="disabled">Disabled</a>
+  </nav>
+
+  <div class="tabs-pane active" id="tab-1-example-1">
+    <h3>Tab 1</h3>
+    <p>
+      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!
+    </p>
+  </div>
+
+  <div class="tabs-pane" id="tab-2-example-1">
+    <h3>Tab 2</h3>
+    <p>
+      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.
+    </p>
+  </div>
+
+  <div class="tabs-pane" id="tab-3-example-1">
+    <h3>Tab 3</h3>
+    <p>
+      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.
+    </p>
+  </div>
+</div>
+
+### 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.
+
+```css
+.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;
+}
+```
+
+<div class="tabs tabs-vertical-example">
+  <nav class="tabs-nav tabs-nav-block">
+    <a href="#tab-1-example-2" class="active">Tab 1</a>
+    <a href="#tab-2-example-2">Tab 2</a>
+    <a href="#tab-3-example-2">Tab 3</a>
+    <a href="#" class="disabled">Disabled</a>
+  </nav>
+
+  <div class="tabs-pane active" id="tab-1-example-2">
+    <h3>Tab 1</h3>
+    <p>
+      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!
+    </p>
+  </div>
+
+  <div class="tabs-pane" id="tab-2-example-2">
+    <h3>Tab 2</h3>
+    <p>
+      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.
+    </p>
+  </div>
+
+  <div class="tabs-pane" id="tab-3-example-2">
+    <h3>Tab 3</h3>
+    <p>
+      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.
+    </p>
+  </div>
+</div>
+
+### 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`.
+
+```javascript
+$('#my-tabs')
+  .on('show', function(event, tabPane) {
+    console.log('show', event.target, tabPane);
+  })
+  .on('hide', function(event, tabPane) {
+    console.log('hide', event.target, tabPane);
+  });
+```

source/docs/utilities.md

@@ -0,0 +1,156 @@
+---
+layout: default.html
+title: Utilities
+description: Use these utilities for quick prototyping.
+---
+
+## 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.
+
+<table class="table">
+  <thead>
+    <tr>
+      <th>Class</th>
+      <th>Example</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>`text-success`</td>
+      <td class="text-success">This is success text</td>
+    </tr>
+    <tr>
+      <td>`text-info`</td>
+      <td class="text-info">This is info text</td>
+    </tr>
+    <tr>
+      <td>`text-warning`</td>
+      <td class="text-warning">This is warning text</td>
+    </tr>
+    <tr>
+      <td>`text-danger`</td>
+      <td class="text-danger">This is danger text</td>
+    </tr>
+    <tr>
+      <td>`text-muted`</td>
+      <td class="text-muted">This is muted text</td>
+    </tr>
+    <tr>
+      <td>`text-small`</td>
+      <td class="text-small">This is small text</td>
+    </tr>
+    <tr>
+      <td>`text-bold`</td>
+      <td class="text-bold">This is bold text</td>
+    </tr>
+    <tr>
+      <td>`text-italic`</td>
+      <td class="text-italic">This is italic text</td>
+    </tr>
+    <tr>
+      <td>`text-left`</td>
+      <td class="text-left">This is left-aligned text</td>
+    </tr>
+    <tr>
+      <td>`text-center`</td>
+      <td class="text-center">This is centered text</td>
+    </tr>
+    <tr>
+      <td>`text-right`</td>
+      <td class="text-right">This is right-aligned text</td>
+    </tr>
+    <tr>
+      <td>`text-justify`</td>
+      <td class="text-justify">This is justified text</td>
+    </tr>
+    <tr>
+      <td>`text-nowrap`</td>
+      <td class="text-nowrap">This is text that won’t wrap</td>
+    </tr>
+    <tr>
+      <td>`text-lowercase`</td>
+      <td class="text-lowercase">This is lowercase text</td>
+    </tr>
+    <tr>
+      <td>`text-uppercase`</td>
+      <td class="text-uppercase">This is uppercase text</td>
+    </tr>
+    <tr>
+      <td>`text-capitalize`</td>
+      <td class="text-capitalize">This is capitalized text</td>
+    </tr>
+  </tbody>
+</table>
+
+### 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.
+
+```html
+<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>
+```
+
+<div class="width-sizing-example">
+  <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>
+
+<div class="height-sizing-example">
+  <div class="height-25">25%</div>
+  <div class="height-50">50%</div>
+  <div class="height-75">75%</div>
+  <div class="height-100">100%</div>
+</div>
+
+### 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:
+
+```html
+<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:
+
+```html
+<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.

source/js/dropdowns.js

@@ -0,0 +1,97 @@
+/*!
+  Shoelace.css dropdowns {{version}}
+  (c) A Beautiful Site, LLC
+
+  Released under the MIT license
+  Source: https://github.com/claviska/shoelace-css
+*/
+//
+// This script is required to make dropdowns interactive. Before loading it, you must include either
+// jQuery or Zepto. You can load them locally or via CDN. You only need one.
+//
+// jQuery via CDN (34.6KB)
+//
+//   <script
+//     src="https://code.jquery.com/jquery-3.2.1.min.js"
+//     integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
+//     crossorigin="anonymous"></script>
+//
+// Zepto via CDN (9.7KB)
+//
+//   <script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
+//
+// Dropdowns not working?
+//   - Make sure you've loaded jQuery or Zepto before this script
+//   - Make sure your dropdowns are structured properly per the docs
+//   - Make sure your dropdown triggers are inside the dropdown container
+//
+(function() {
+  /* eslint-env browser, jquery */
+  /* global Zepto */
+  'use strict';
+
+  if(typeof jQuery === 'undefined' && typeof Zepto === 'undefined') {
+    throw new Error('Shoelace dropdowns require either jQuery or Zepto.');
+  } else {
+    (typeof jQuery === 'function' ? jQuery : Zepto)(function($) {
+      $(document)
+        .on('click', function(event) {
+          var dropdown;
+          var menu;
+          var selectedItem;
+          var trigger;
+
+          // Watch for clicks on dropdown triggers
+          if($(event.target).is('.dropdown-trigger')) {
+            dropdown = $(event.target).closest('.dropdown');
+            trigger = event.target;
+
+            // Close other dropdowns
+            $('.dropdown.active')
+              .not(dropdown)
+              .removeClass('active')
+              .trigger('hide');
+
+            // Ignore dropdowns that have the disabled class
+            if($(trigger).is('.disabled, :disabled')) {
+              return;
+            }
+
+            // Toggle this dropdown
+            $(dropdown)
+              .toggleClass('active')
+              .trigger($(dropdown).is('.active') ? 'show' : 'hide');
+          } else {
+            menu = $(event.target).closest('.dropdown-menu');
+
+            // Watch for clicks on menu items
+            if(menu.length) {
+              dropdown = $(event.target).closest('.dropdown');
+              selectedItem = $(event.target).closest('a').get(0);
+
+              // If the user selected a menu item and it's not disabled, fire the select event
+              if(selectedItem && !$(selectedItem).is('.disabled')) {
+                $(dropdown).trigger('select', selectedItem);
+              }
+
+              // Prevent the page from scrolling since menu items are #links
+              event.preventDefault();
+            }
+
+            // Close dropdowns on all other clicks
+            $('.dropdown.active')
+              .removeClass('active')
+              .trigger('hide');
+          }
+        })
+        .on('keydown', function(event) {
+          // Close dropdowns on escape
+          if(event.keyCode === 27) {
+            $('.dropdown.active')
+              .removeClass('active')
+              .trigger('hide');
+          }
+        });
+    });
+  }
+})();

source/js/tabs.js

@@ -1,53 +1,68 @@
-/* eslint-env browser, jquery */
-/* eslint prefer-arrow-callback: "off" */
+/*!
+  Shoelace.css tabs {{version}}
+  (c) A Beautiful Site, LLC
+
+  Released under the MIT license
+  Source: https://github.com/claviska/shoelace-css
+*/
 //
-// Example tabs plugin for Shoelace
+// This script is required to make tabs interactive. Before loading it, you must include either
+// jQuery or Zepto. You can load them locally or via CDN. You only need one.
 //
-// This plugin demonstrates one way to add interactivity to Shoelace tabs. You don't need to
-// initialize it. Just include jQuery along with this script and everything will just work.
+// jQuery via CDN (34.6KB)
 //
-// If you don't have a local copy of jQuery, you can load it via CDN:
+//   <script
+//     src="https://code.jquery.com/jquery-3.2.1.min.js"
+//     integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
+//     crossorigin="anonymous"></script>
 //
-// <script
-//   src="https://code.jquery.com/jquery-3.2.1.min.js"
-//   integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
-//   crossorigin="anonymous"></script>
+// Zepto via CDN (9.7KB)
 //
-// Don't want to use jQuery? No problem! This is a just sample script to demonstrate how tabs can be
-// made interactive. You can write your own to replace it using vanilla JS or any other library you
-// want.
+//   <script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
 //
 // Tabs not toggling?
-//   - Make sure you've included this script: <script src="tabs.js"></script>
+//   - Make sure you've loaded jQuery or Zepto before this script
 //   - Make sure your tabs are structured properly per the docs
 //   - Make sure your tab navs and tab panes have the correct IDs
 //
-// To disable a tab, add the "disabled" class to the appropriate tab nav.
-//
-// To programmatically show or hide a tab, apply the "active" class to the appropriate tab nav and
-// tab pane. (Make sure to remove the "active" class from other active navs/panes first!)
-//
-$(function() {
+(function() {
+  /* eslint-env browser, jquery */
+  /* global Zepto */
   'use strict';
 
-  // Watch for clicks on tabs
-  $('.tabs-nav').on('click', 'a', function(event) {
-    var tabset = $(this).closest('.tabs');
-    var tab = this;
+  if(typeof jQuery === 'undefined' && typeof Zepto === 'undefined') {
+    throw new Error('Shoelace tabs require either jQuery or Zepto.');
+  } else {
+    (window.jQuery || window.Zepto)(function($) {
+      // Watch for clicks on tabs
+      $(document).on('click', '.tabs-nav a', function(event) {
+        var tabs = $(this).closest('.tabs');
+        var tabNav = this;
+        var selectedPane = $(tabs).find(tabNav.hash).get(0);
 
-    event.preventDefault();
+        event.preventDefault();
 
-    // Ignore tabs without an href or with the "disabled" class
-    if(!tab.hash || $(tab).is('.disabled')) return;
+        // Ignore tabs without an href or with the "disabled" class
+        if(!tabNav.hash || $(tabNav).is('.disabled')) {
+          return;
+        }
 
-    // Make the selected tab active
-    $(tab)
-      .siblings().removeClass('active').end()
-      .addClass('active');
+        // Make the selected tab active
+        $(tabNav).siblings().removeClass('active');
+        $(tabNav).addClass('active');
 
-    // Make the appropriate tab pane active
-    $(tabset)
-      .find('.tabs-pane').removeClass('active').end()
-      .find(tab.hash).addClass('active');
-  });
-});
+        // Hide active tab panes that aren't getting selected
+        $(tabs).find('.tabs-pane.active').not(selectedPane).each(function() {
+          $(this).removeClass('active');
+          $(tabs).trigger('hide', this);
+        });
+
+        // Show the selected tab pane
+        if(selectedPane && !$(selectedPane).is('.active')) {
+          $(selectedPane).addClass('active');
+          $(tabs).trigger('show', selectedPane);
+        }
+      });
+    });
+  }
+})();

source/layouts/default.html

@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <meta name="description" content="{{description}}">
+  <link rel="icon" href="../source/img/favicon.png">
+  <link rel="stylesheet" href="../dist/shoelace.css">
+  <link rel="stylesheet" href="../source/css/_docs.css">
+  <link rel="stylesheet" href="https://cdn.rawgit.com/AGMStudio/prism-theme-one-dark/f81fe477/prism-onedark.css">
+  {{#each stylesheets}}
+  <link rel="stylesheet" href="{{.}}">
+  {{/each}}
+  <title>{{title}}</title>
+</head>
+<body>
+
+  <header id="head" class="text-center">
+    <h1>
+      <a href="../index.html">
+        <img src="../source/img/wordmark.svg" alt="Shoelace logo">
+      </a>
+    </h1>
+    <p class="text-muted text-small">
+      A back to the basics CSS starter kit. For when you don’t need the whole boot.
+    </p>
+  </header>
+
+  <main id="wrap">
+    <nav id="nav">
+      <a href="installing.html">Installing</a>
+      <a href="customizing.html">Customizing</a>
+      <a href="content.html">Content</a>
+      <a href="alerts.html">Alerts</a>
+      <a href="badges.html">Badges</a>
+      <a href="buttons.html">Buttons</a>
+      <a href="dropdowns.html">Dropdowns</a>
+      <a href="forms.html">Forms</a>
+      <a href="loaders.html">Loaders</a>
+      <a href="progress-bars.html">Progress Bars</a>
+      <a href="switches.html">Switches</a>
+      <a href="tabs.html">Tabs</a>
+      <a href="tables.html">Tables</a>
+      <a href="utilities.html">Utilities</a>
+      <a href="grid-system.html">Grid System</a>
+      <a href="icons.html">Icons</a>
+      <a href="browser-support.html">Browser Support</a>
+      <a href="attribution.html">Attribution</a>
+    </nav>
+
+    <div id="content">
+      {{{contents}}}
+    </div>
+  </main>
+
+  <footer id="foot">
+    <a href="../index.html">
+      <img src="../source/img/wordmark.svg" alt="Shoelace logo">
+    </a>
+    <p class="text-small text-muted">
+      Shoelace.css {{version}} &middot;
+      &copy; A Beautiful Site, LLC
+    </p>
+
+    <p class="margin-y-small text-center">
+      <a class="github-button" href="https://github.com/claviska/shoelace-css/fork" data-size="large" aria-label="Fork claviska/shoelace-css on GitHub">Fork</a>
+      <a class="github-button" href="https://github.com/claviska/shoelace-css/releases" data-icon="octicon-cloud-download" data-size="large" aria-label="Download claviska/shoelace-css on GitHub">Download</a>
+      <a class="github-button" href="https://github.com/claviska/shoelace-css/issues" data-icon="octicon-issue-opened" data-size="large" aria-label="Issue claviska/shoelace-css on GitHub">Report a Bug</a>
+      <a class="github-button" href="https://github.com/claviska/shoelace-css" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star claviska/shoelace-css on GitHub">Star</a>
+    </p>
+    <p>
+      <a href="https://twitter.com/shoelacecss" class="button button-info" style="margin-bottom: 1.2rem;">Follow</a>
+      <a href="https://paypal.me/claviska" class="button button-success" style="margin-bottom: 1.2rem;">Donate</a>
+    </p>
+  </footer>
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js"></script>
+  <script src="../dist/shoelace.js"></script>
+  <script>
+    $(function() {
+      // Highlight current nav item
+      $('#nav a').each(function() {
+        if(this.pathname === location.pathname) {
+          $(this).addClass('current');
+        }
+      });
+    });
+  </script>
+  {{#each scripts}}
+  <script src="{{.}}"></script>
+  {{/each}}
+  <script async defer src="https://buttons.github.io/buttons.js"></script>
+</body>
+</html>