1.0.0-beta24

* Typo fix

* Shoelace fix?

.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,5 @@
 .DS_Store
 .env
+.htaccess
+design/
 node_modules/

.stylelintrc

@@ -0,0 +1,12 @@
+{
+  "extends": "stylelint-config-standard",
+  "rules": {
+    "at-rule-empty-line-before": null,
+    "comment-whitespace-inside": null,
+    "custom-property-empty-line-before": null,
+    "declaration-block-single-line-max-declarations": null,
+    "number-leading-zero": "never",
+    "selector-list-comma-newline-after": null,
+    "shorthand-property-no-redundant-values": null
+  }
+}

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+  // Ignore CSS validation errors so we can use
+  // PostCSS features. This lets stylelint handle
+  // validation instead.
+  "css.validate": false
+}

README.md

@@ -1,4 +1,4 @@
-# 👟 Shoelace.css
+# <img src="https://shoelace.style/source/img/wordmark.svg" alt="Shoelace.css" width="380">
 
 A back to the basics CSS starter kit. For when you don’t need the whole boot.
 
@@ -12,10 +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 see all available flags, 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 --help
+node build.js --build
+```
+
+To see all available options, run:
+
+```
+node build.js --help
 ```
 
 ---

build.js

@@ -0,0 +1,345 @@
+/* eslint prefer-arrow-callback: "warn" */
+'use strict';
+
+global.__version = require('./package.json').version;
+
+require('dotenv').config();
+const Promise = require('bluebird');
+const AtImport = require('postcss-import');
+const Chalk = require('chalk');
+const CSSnano = require('cssnano');
+const CSSnext = require('postcss-cssnext');
+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 S3 = require('s3');
+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 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 file = 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 processed: %s! 🐭'), Path.relative(__dirname, file));
+
+      // Write output file
+      return FS.writeFileAsync(file, 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(() => {
+      let file = Path.join(__dirname, 'source/css/shoelace.css');
+      let css = FS.readFileSync(file, 'utf8');
+
+      return PostCSS([
+        AtImport,
+        CSSnext({
+          features: {
+            rem: false
+          }
+        }),
+        CSSnano({
+          autoprefixer: false,
+          safe: true
+        })
+      ]).process(css, { from: file });
+    })
+
+    // Write stylesheet to dist
+    .then((result) => {
+      let file = Path.join(__dirname, 'dist/shoelace.css');
+
+      // Update {{version}} in CSS since it's not processed with Handlebars
+      result.css = result.css.replace(/\{\{version\}\}/g, __version);
+
+      // Output a message
+      console.log(Chalk.green('CSS processed: %s! 🦋'), Path.relative(__dirname, file));
+
+      // Write output file
+      return FS.writeFileAsync(file, result.css, 'utf8');
+    });
+}
+
+//
+// Publishes the dist folder to an S3 bucket.
+//
+//
+//
+function publishToS3() {
+  return new Promise((resolve, reject) => {
+    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: Path.join(__dirname, 'dist'),
+      deleteRemoved: true,
+      s3Params: {
+        ACL: process.env.S3_ACL,
+        Prefix: __version,
+        Bucket: process.env.S3_BUCKET
+      }
+    });
+
+    uploader.on('error', (err) => {
+      reject(err);
+    });
+
+    uploader.on('end', () => {
+      console.log(Chalk.green('%s has been published to S3! ☁️'), __version);
+      resolve();
+    });
+  });
+}
+
+//
+// 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('--s3', 'Publish lastest release to an S3 bucket (requires .env)')
+  .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())
+
+    // Publish to S3 if --s3 flag is set
+    .then(() => Program.s3 ? publishToS3() : null)
+
+    // Exit with success
+    .then(() => process.exit(1))
+
+    // Handle errors
+    .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
+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-beta24
+  (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=e(t.target).closest(".dropdown").get(0),r=i?e(t.target).closest(".dropdown-trigger").get(0):null,o=(i?e(t.target).closest(".dropdown-menu").get(0):null)?e(t.target).closest("a").get(0):null;if(r){if(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{if(o)return e(o).is(".disabled")?void t.preventDefault():void e(i).removeClass("active").trigger("hide").trigger(e.Event("select",t),o);i||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-beta24
+  (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){new MutationObserver(function(t){t.forEach(function(t){if("attributes"===t.type&&"class"===t.attributeName){var i=e(t.target).get(0),r=e(t.target).closest(".tabs").get(0),o=e(t.target).closest(".tabs-nav").get(0),a="A"===i.tagName?e(r).find(i.hash):null;if(!e(i).is("a")||!r||!o)return;if(e(i).is(".disabled.active"))return void e(i).removeClass("active");e(i).is(".active")?(e(i).siblings(".active").removeClass("active"),e(a).addClass("active"),e(r).trigger("show",a)):(e(a).removeClass("active"),e(r).trigger("hide",a))}})}).observe(document.body,{attributes:!0,attributeFilter:["class"],attributeOldValue:!0,subtree:!0}),e(document).on("click",".tabs-nav a",function(t){e(this).addClass("active"),t.preventDefault()})})}();

docs.css

@@ -1,132 +0,0 @@
-body {
-  border-top: solid .3rem var(--color-primary);
-}
-
-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);
-}
-
-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);
-}
-
-/* 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,133 @@
+<!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-secondary text-small">
+      A back to the basics CSS starter kit. For when you don’t need the whole boot.
+    </p>
+  </header>
+
+  <main class="container">
+    <div class="row">
+      <div class="col-md-3">
+        <ul id="nav">
+          <li><a href="installing.html">Installing</a></li>
+          <li><a href="customizing.html">Customizing</a></li>
+          <li><a href="content.html">Content</a></li>
+          <li><a href="alerts.html">Alerts</a></li>
+          <li><a href="badges.html">Badges</a></li>
+          <li><a href="buttons.html">Buttons</a></li>
+          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="file-buttons.html">File Buttons</a></li>
+          <li><a href="forms.html">Forms</a></li>
+          <li><a href="grid-system.html">Grid System</a></li>
+          <li><a href="loaders.html">Loaders</a></li>
+          <li><a href="progress-bars.html">Progress Bars</a></li>
+          <li><a href="switches.html">Switches</a></li>
+          <li><a href="tabs.html">Tabs</a></li>
+          <li><a href="tables.html">Tables</a></li>
+          <li><a href="utilities.html">Utilities</a></li>
+          <li><a href="icons.html">Icons</a></li>
+          <li><a href="browser-support.html">Browser Support</a></li>
+          <li><a href="attribution.html">Attribution</a></li>
+        </ul>
+      </div>
+
+      <div class="col-md-9">
+        <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>.</p>
+<pre><code class="lang-html">&lt;div class=&quot;alert&quot;&gt;This is an alert&lt;/div&gt;
+</code></pre>
+<div class="alert">This is an alert</div>
+
+<h2 id="variations">Variations</h2>
+<p>Use the <code>alert-*</code> modifier to create variations.</p>
+<pre><code class="lang-html">&lt;div class=&quot;alert&quot;&gt;Primary&lt;/div&gt;
+&lt;div class=&quot;alert alert-secondary&quot;&gt;Secondary&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;/div&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-light&quot;&gt;Light&lt;/div&gt;
+&lt;div class=&quot;alert alert-dark&quot;&gt;Dark&lt;/div&gt;
+</code></pre>
+<div class="alert">Primary</div>
+<div class="alert alert-secondary">Secondary</div>
+<div class="alert alert-success">Success</div>
+<div class="alert alert-info">Info</div>
+<div class="alert alert-warning">Warning</div>
+<div class="alert alert-danger">Danger</div>
+<div class="alert alert-light">Light</div>
+<div class="alert alert-dark">Dark</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-secondary">
+      1.0.0-beta24
+    </p>
+
+    <p class="mar-y-sm 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>
+
+    <p class="text-small text-secondary">
+      <a href="https://keycdn.com/" class="text-secondary">Accelerated by KeyCDN</a> &middot;
+      &copy; A Beautiful Site, LLC
+    </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');
+        }
+      });
+
+      // Intercept dropdown clicks for the demo
+      $('.dropdown').on('select', function(event) {
+        event.preventDefault();
+      });
+    });
+  </script>
+  <script async defer src="https://buttons.github.io/buttons.js"></script>
+</body>
+</html>

docs/attribution.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="Special thanks to the following individuals and organizations.">
+  <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-secondary text-small">
+      A back to the basics CSS starter kit. For when you don’t need the whole boot.
+    </p>
+  </header>
+
+  <main class="container">
+    <div class="row">
+      <div class="col-md-3">
+        <ul id="nav">
+          <li><a href="installing.html">Installing</a></li>
+          <li><a href="customizing.html">Customizing</a></li>
+          <li><a href="content.html">Content</a></li>
+          <li><a href="alerts.html">Alerts</a></li>
+          <li><a href="badges.html">Badges</a></li>
+          <li><a href="buttons.html">Buttons</a></li>
+          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="file-buttons.html">File Buttons</a></li>
+          <li><a href="forms.html">Forms</a></li>
+          <li><a href="grid-system.html">Grid System</a></li>
+          <li><a href="loaders.html">Loaders</a></li>
+          <li><a href="progress-bars.html">Progress Bars</a></li>
+          <li><a href="switches.html">Switches</a></li>
+          <li><a href="tabs.html">Tabs</a></li>
+          <li><a href="tables.html">Tables</a></li>
+          <li><a href="utilities.html">Utilities</a></li>
+          <li><a href="icons.html">Icons</a></li>
+          <li><a href="browser-support.html">Browser Support</a></li>
+          <li><a href="attribution.html">Attribution</a></li>
+        </ul>
+      </div>
+
+      <div class="col-md-9">
+        <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 and an amazing grid system.</li>
+<li><a href="https://keycdn.com/">KeyCDN</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>
+      </div>
+  </main>
+
+  <footer id="foot">
+    <a href="../index.html">
+      <img src="../source/img/wordmark.svg" alt="Shoelace logo">
+    </a>
+
+    <p class="text-small text-secondary">
+      1.0.0-beta24
+    </p>
+
+    <p class="mar-y-sm 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>
+
+    <p class="text-small text-secondary">
+      <a href="https://keycdn.com/" class="text-secondary">Accelerated by KeyCDN</a> &middot;
+      &copy; A Beautiful Site, LLC
+    </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');
+        }
+      });
+
+      // Intercept dropdown clicks for the demo
+      $('.dropdown').on('select', function(event) {
+        event.preventDefault();
+      });
+    });
+  </script>
+  <script async defer src="https://buttons.github.io/buttons.js"></script>
+</body>
+</html>

docs/badges.html

@@ -0,0 +1,162 @@
+<!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-secondary text-small">
+      A back to the basics CSS starter kit. For when you don’t need the whole boot.
+    </p>
+  </header>
+
+  <main class="container">
+    <div class="row">
+      <div class="col-md-3">
+        <ul id="nav">
+          <li><a href="installing.html">Installing</a></li>
+          <li><a href="customizing.html">Customizing</a></li>
+          <li><a href="content.html">Content</a></li>
+          <li><a href="alerts.html">Alerts</a></li>
+          <li><a href="badges.html">Badges</a></li>
+          <li><a href="buttons.html">Buttons</a></li>
+          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="file-buttons.html">File Buttons</a></li>
+          <li><a href="forms.html">Forms</a></li>
+          <li><a href="grid-system.html">Grid System</a></li>
+          <li><a href="loaders.html">Loaders</a></li>
+          <li><a href="progress-bars.html">Progress Bars</a></li>
+          <li><a href="switches.html">Switches</a></li>
+          <li><a href="tabs.html">Tabs</a></li>
+          <li><a href="tables.html">Tables</a></li>
+          <li><a href="utilities.html">Utilities</a></li>
+          <li><a href="icons.html">Icons</a></li>
+          <li><a href="browser-support.html">Browser Support</a></li>
+          <li><a href="attribution.html">Attribution</a></li>
+        </ul>
+      </div>
+
+      <div class="col-md-9">
+        <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>.</p>
+<pre><code class="lang-html">&lt;span class=&quot;badge&quot;&gt;Badge&lt;/span&gt;
+</code></pre>
+<p><span class="badge">Badge</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>
+
+<h3 id="variations">Variations</h3>
+<p>Use the <code>badge-*</code> modifier to create variations.</p>
+<pre><code class="lang-html">&lt;span class=&quot;badge&quot;&gt;Primary&lt;/span&gt;
+&lt;span class=&quot;badge badge-secondary&quot;&gt;Secondary&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-light&quot;&gt;Light&lt;/span&gt;
+&lt;span class=&quot;badge badge-dark&quot;&gt;Dark&lt;/span&gt;
+</code></pre>
+<p><span class="badge">Primary</span>
+<span class="badge badge-secondary">Secondary</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-light">Light</span>
+<span class="badge badge-dark">Dark</span></p>
+<h3 id="badge-links">Badge Links</h3>
+<p>Badges can also be made into links.</p>
+<pre><code class="lang-html">&lt;a href=&quot;#&quot; class=&quot;badge&quot;&gt;Primary&lt;/a&gt;
+&lt;a href=&quot;#&quot; class=&quot;badge badge-secondary&quot;&gt;Secondary&lt;/a&gt;
+&lt;a href=&quot;#&quot; class=&quot;badge badge-success&quot;&gt;Success&lt;/a&gt;
+&lt;a href=&quot;#&quot; class=&quot;badge badge-info&quot;&gt;Info&lt;/a&gt;
+&lt;a href=&quot;#&quot; class=&quot;badge badge-warning&quot;&gt;Warning&lt;/a&gt;
+&lt;a href=&quot;#&quot; class=&quot;badge badge-danger&quot;&gt;Danger&lt;/a&gt;
+&lt;a href=&quot;#&quot; class=&quot;badge badge-light&quot;&gt;Light&lt;/a&gt;
+&lt;a href=&quot;#&quot; class=&quot;badge badge-dark&quot;&gt;Dark&lt;/a&gt;
+</code></pre>
+<p><a href="#" class="badge">Primary</a>
+<a href="#" class="badge badge-secondary">Secondary</a>
+<a href="#" class="badge badge-success">Success</a>
+<a href="#" class="badge badge-info">Info</a>
+<a href="#" class="badge badge-warning">Warning</a>
+<a href="#" class="badge badge-danger">Danger</a>
+<a href="#" class="badge badge-light">Light</a>
+<a href="#" class="badge badge-dark">Dark</a></p>
+
+        </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-secondary">
+      1.0.0-beta24
+    </p>
+
+    <p class="mar-y-sm 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>
+
+    <p class="text-small text-secondary">
+      <a href="https://keycdn.com/" class="text-secondary">Accelerated by KeyCDN</a> &middot;
+      &copy; A Beautiful Site, LLC
+    </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');
+        }
+      });
+
+      // Intercept dropdown clicks for the demo
+      $('.dropdown').on('select', function(event) {
+        event.preventDefault();
+      });
+    });
+  </script>
+  <script async defer src="https://buttons.github.io/buttons.js"></script>
+</body>
+</html>

docs/browser-support.html

@@ -0,0 +1,123 @@
+<!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 works in just about every browser.">
+  <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-secondary text-small">
+      A back to the basics CSS starter kit. For when you don’t need the whole boot.
+    </p>
+  </header>
+
+  <main class="container">
+    <div class="row">
+      <div class="col-md-3">
+        <ul id="nav">
+          <li><a href="installing.html">Installing</a></li>
+          <li><a href="customizing.html">Customizing</a></li>
+          <li><a href="content.html">Content</a></li>
+          <li><a href="alerts.html">Alerts</a></li>
+          <li><a href="badges.html">Badges</a></li>
+          <li><a href="buttons.html">Buttons</a></li>
+          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="file-buttons.html">File Buttons</a></li>
+          <li><a href="forms.html">Forms</a></li>
+          <li><a href="grid-system.html">Grid System</a></li>
+          <li><a href="loaders.html">Loaders</a></li>
+          <li><a href="progress-bars.html">Progress Bars</a></li>
+          <li><a href="switches.html">Switches</a></li>
+          <li><a href="tabs.html">Tabs</a></li>
+          <li><a href="tables.html">Tables</a></li>
+          <li><a href="utilities.html">Utilities</a></li>
+          <li><a href="icons.html">Icons</a></li>
+          <li><a href="browser-support.html">Browser Support</a></li>
+          <li><a href="attribution.html">Attribution</a></li>
+        </ul>
+      </div>
+
+      <div class="col-md-9">
+        <div id="content">
+          <h2 id="browser-support">Browser Support</h2>
+<p>You can use Shoelace <em>today</em> in just about every browser. If you’re using the <a href="installing.html#cdn">CDN version</a> for prototyping, you’re good. If you’re <a href="installing.html#building-from-source">building from source</a>, you’re good.</p>
+<div class="browsers">
+  <img src="../source/img/chrome.svg" alt="Chrome">
+  <img src="../source/img/edge.svg" alt="Edge">
+  <img src="../source/img/firefox.svg" alt="Firefox">
+  <img src="../source/img/opera.svg" alt="Opera">
+  <img src="../source/img/safari.png" alt="Safari">
+</div>
+
+<p><em>What you can’t do</em> is use the source files without processing them with <a href="http://cssnext.io/">cssnext</a>.</p>
+<p>Shoelace makes extensive use of future CSS features in its source. Most browsers don’t support this syntax today, but they will soon. As CSS evolves and support improves, you’ll eventually be able to use Shoelace without any processing at all. In that sense, Shoelace is “future-ready.”</p>
+<p><a href="http://cssnext.io/features/">CSS has a really bright future</a>, and you can use most of its upcoming features today with Shoelace + cssnext. You no longer need Less or Sass to do amazing things with CSS.</p>
+<p>I believe we should focus on the future. Preprocessors had a place when the evolution of CSS seemed stagnant, but things have changed and it’s time to move forward. Instead of learning a different syntax, let’s just learn the <em>future syntax</em>.</p>
+<p>Unfortunately, many people aren’t aware of the great things happening with CSS these days. Shoelace aims to raise awareness by bringing us back to the basics and using tomorrow’s CSS today.</p>
+
+        </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-secondary">
+      1.0.0-beta24
+    </p>
+
+    <p class="mar-y-sm 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>
+
+    <p class="text-small text-secondary">
+      <a href="https://keycdn.com/" class="text-secondary">Accelerated by KeyCDN</a> &middot;
+      &copy; A Beautiful Site, LLC
+    </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');
+        }
+      });
+
+      // Intercept dropdown clicks for the demo
+      $('.dropdown').on('select', function(event) {
+        event.preventDefault();
+      });
+    });
+  </script>
+  <script async defer src="https://buttons.github.io/buttons.js"></script>
+</body>
+</html>

docs/buttons.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 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-secondary text-small">
+      A back to the basics CSS starter kit. For when you don’t need the whole boot.
+    </p>
+  </header>
+
+  <main class="container">
+    <div class="row">
+      <div class="col-md-3">
+        <ul id="nav">
+          <li><a href="installing.html">Installing</a></li>
+          <li><a href="customizing.html">Customizing</a></li>
+          <li><a href="content.html">Content</a></li>
+          <li><a href="alerts.html">Alerts</a></li>
+          <li><a href="badges.html">Badges</a></li>
+          <li><a href="buttons.html">Buttons</a></li>
+          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="file-buttons.html">File Buttons</a></li>
+          <li><a href="forms.html">Forms</a></li>
+          <li><a href="grid-system.html">Grid System</a></li>
+          <li><a href="loaders.html">Loaders</a></li>
+          <li><a href="progress-bars.html">Progress Bars</a></li>
+          <li><a href="switches.html">Switches</a></li>
+          <li><a href="tabs.html">Tabs</a></li>
+          <li><a href="tables.html">Tables</a></li>
+          <li><a href="utilities.html">Utilities</a></li>
+          <li><a href="icons.html">Icons</a></li>
+          <li><a href="browser-support.html">Browser Support</a></li>
+          <li><a href="attribution.html">Attribution</a></li>
+        </ul>
+      </div>
+
+      <div class="col-md-9">
+        <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 an <code>&lt;a&gt;</code>.</p>
+<pre><code class="lang-html">&lt;button type=&quot;button&quot;&gt;Button&lt;/button&gt;
+</code></pre>
+<div class="input-field">
+  <button type="button">Button</button>
+</div>
+
+<p>Use the <code>button-[xs|sm|lg|xl]</code> modifiers to change the size of a button.</p>
+<pre><code class="lang-html">&lt;button type=&quot;button&quot; class=&quot;button-xs&quot;&gt;XS Button&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;button-sm&quot;&gt;SM Button&lt;/button&gt;
+&lt;button type=&quot;button&quot;&gt;Default Button&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;button-lg&quot;&gt;LG Button&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;button-xl&quot;&gt;XL Button&lt;/button&gt;
+</code></pre>
+<div class="input-field">
+  <button type="button" class="button-xs">XS Button</button>
+  <button type="button" class="button-sm">SM Button</button>
+  <button type="button">Default Button</button>
+  <button type="button" class="button-lg">LG Button</button>
+  <button type="button" class="button-xl">XL Button</button>
+</div>
+
+<p>To disable a button set the <code>disabled</code> property on <code>&lt;button&gt;</code> elements. You can simulate the disabled state on links by adding the <code>disabled</code> class, but additional JavaScript is required to prevent them from being activated.</p>
+<pre><code class="lang-html">&lt;button type=&quot;button&quot; disabled&gt;Disabled Button&lt;/button&gt;
+&lt;a href=&quot;#&quot; class=&quot;button disabled&quot;&gt;Disabled Link&lt;/a&gt;
+</code></pre>
+<div class="input-field">
+  <button type="button" disabled>Disabled Button</button>
+  <a href="#" class="button disabled">Disabled Link</a>
+</div>
+
+<p>You can force buttons to have an active state by applying the <code>active</code> class.</p>
+<pre><code class="lang-html">&lt;button type=&quot;button&quot; class=&quot;active&quot;&gt;Active Button&lt;/button&gt;
+&lt;a href=&quot;#&quot; class=&quot;button active&quot;&gt;Active Link&lt;/a&gt;
+</code></pre>
+<div class="input-field">
+  <button type="button" class="active">Active Button</button>
+  <a href="#" class="button active">Active Link</a>
+</div>
+
+<h3 id="variations">Variations</h3>
+<p>Use the <code>button-*</code> modifier to create variations.</p>
+<pre><code class="lang-html">&lt;button type=&quot;button&quot; class=&quot;button-secondary&quot;&gt;Secondary&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-light&quot;&gt;Light&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;button-dark&quot;&gt;Dark&lt;/button&gt;
+</code></pre>
+<div class="input-field">
+  <button type="button" class="button-secondary">Secondary</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-light">Light</button>
+  <button type="button" class="button-dark">Dark</button>
+</div>
+
+<h3 id="block-buttons">Block Buttons</h3>
+<p>Use the <code>button-block</code> modifier to make a button span the entire width of its parent.</p>
+<pre><code class="lang-html">&lt;button type=&quot;button&quot; class=&quot;button-block&quot;&gt;Block Button&lt;/button&gt;
+</code></pre>
+<div class="input-field">
+  <button type="button" class="button-block">Block Button</button>
+</div>
+
+<h3 id="link-buttons">Link Buttons</h3>
+<p>Buttons can be styled to look like normal links with the <code>button-link</code> modifier. Button sizing is maintained so they align properly with other buttons.</p>
+<pre><code class="lang-html">&lt;a href=&quot;#&quot; class=&quot;button button-link&quot;&gt;Link Button&lt;/a&gt;
+</code></pre>
+<div class="input-field">
+  <a href="#" class="button button-link">Link Button</a>
+</div>
+
+<h3 id="loader-buttons">Loader Buttons</h3>
+<p>Buttons can be given a loading state with the <code>button-loader</code> modifier. This will make the button text invisible and display a loader using the <code>::after</code> pseudo-element. The button’s width will not be affected.</p>
+<pre><code class="lang-html">&lt;button type=&quot;button&quot; class=&quot;button-loader button-xs&quot;&gt;Button&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;button-loader button-sm&quot;&gt;Button&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;button-loader&quot;&gt;Button&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;button-loader button-lg&quot;&gt;Button&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;button-loader button-xl&quot;&gt;Button&lt;/button&gt;
+</code></pre>
+<div class="input-field">
+  <button type="button" class="button-loader button-xs">Button</button>
+  <button type="button" class="button-loader button-sm">Button</button>
+  <button type="button" class="button-loader">Button</button>
+  <button type="button" class="button-loader button-lg">Button</button>
+  <button type="button" class="button-loader button-xl">Button</button>
+</div>
+
+<p>Loader buttons also work with button variations.</p>
+<pre><code class="lang-html">&lt;button type=&quot;button&quot; class=&quot;button-loader button-secondary&quot;&gt;Button&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;button-loader button-success&quot;&gt;Button&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;button-loader button-info&quot;&gt;Button&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;button-loader button-warning&quot;&gt;Button&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;button-loader button-danger&quot;&gt;Button&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;button-loader button-light&quot;&gt;Button&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;button-loader button-dark&quot;&gt;Button&lt;/button&gt;
+</code></pre>
+<div class="input-field">
+  <button type="button" class="button-loader button-secondary">Button</button>
+  <button type="button" class="button-loader button-success">Button</button>
+  <button type="button" class="button-loader button-info">Button</button>
+  <button type="button" class="button-loader button-warning">Button</button>
+  <button type="button" class="button-loader button-danger">Button</button>
+  <button type="button" class="button-loader button-light">Button</button>
+  <button type="button" class="button-loader button-dark">Button</button>
+</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-secondary">
+      1.0.0-beta24
+    </p>
+
+    <p class="mar-y-sm 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>
+
+    <p class="text-small text-secondary">
+      <a href="https://keycdn.com/" class="text-secondary">Accelerated by KeyCDN</a> &middot;
+      &copy; A Beautiful Site, LLC
+    </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');
+        }
+      });
+
+      // Intercept dropdown clicks for the demo
+      $('.dropdown').on('select', function(event) {
+        event.preventDefault();
+      });
+    });
+  </script>
+  <script async defer src="https://buttons.github.io/buttons.js"></script>
+</body>
+</html>

docs/content.html

@@ -0,0 +1,246 @@
+<!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-secondary text-small">
+      A back to the basics CSS starter kit. For when you don’t need the whole boot.
+    </p>
+  </header>
+
+  <main class="container">
+    <div class="row">
+      <div class="col-md-3">
+        <ul id="nav">
+          <li><a href="installing.html">Installing</a></li>
+          <li><a href="customizing.html">Customizing</a></li>
+          <li><a href="content.html">Content</a></li>
+          <li><a href="alerts.html">Alerts</a></li>
+          <li><a href="badges.html">Badges</a></li>
+          <li><a href="buttons.html">Buttons</a></li>
+          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="file-buttons.html">File Buttons</a></li>
+          <li><a href="forms.html">Forms</a></li>
+          <li><a href="grid-system.html">Grid System</a></li>
+          <li><a href="loaders.html">Loaders</a></li>
+          <li><a href="progress-bars.html">Progress Bars</a></li>
+          <li><a href="switches.html">Switches</a></li>
+          <li><a href="tabs.html">Tabs</a></li>
+          <li><a href="tables.html">Tables</a></li>
+          <li><a href="utilities.html">Utilities</a></li>
+          <li><a href="icons.html">Icons</a></li>
+          <li><a href="browser-support.html">Browser Support</a></li>
+          <li><a href="attribution.html">Attribution</a></li>
+        </ul>
+      </div>
+
+      <div class="col-md-9">
+        <div id="content">
+          <h2 id="content">Content</h2>
+<p>Shoelace provides default content styles that are easy to customize. 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. Shoelace also sets <code>box-sizing: border-box</code> globally to make it easier to properly size elements.</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="horizontal-rules-hr-">Horizontal Rules <code>&lt;hr&gt;</code></h3>
+<hr>
+<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>
+      </div>
+  </main>
+
+  <footer id="foot">
+    <a href="../index.html">
+      <img src="../source/img/wordmark.svg" alt="Shoelace logo">
+    </a>
+
+    <p class="text-small text-secondary">
+      1.0.0-beta24
+    </p>
+
+    <p class="mar-y-sm 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>
+
+    <p class="text-small text-secondary">
+      <a href="https://keycdn.com/" class="text-secondary">Accelerated by KeyCDN</a> &middot;
+      &copy; A Beautiful Site, LLC
+    </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');
+        }
+      });
+
+      // Intercept dropdown clicks for the demo
+      $('.dropdown').on('select', function(event) {
+        event.preventDefault();
+      });
+    });
+  </script>
+  <script async defer src="https://buttons.github.io/buttons.js"></script>
+</body>
+</html>

docs/customizing.html

@@ -0,0 +1,160 @@
+<!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-secondary text-small">
+      A back to the basics CSS starter kit. For when you don’t need the whole boot.
+    </p>
+  </header>
+
+  <main class="container">
+    <div class="row">
+      <div class="col-md-3">
+        <ul id="nav">
+          <li><a href="installing.html">Installing</a></li>
+          <li><a href="customizing.html">Customizing</a></li>
+          <li><a href="content.html">Content</a></li>
+          <li><a href="alerts.html">Alerts</a></li>
+          <li><a href="badges.html">Badges</a></li>
+          <li><a href="buttons.html">Buttons</a></li>
+          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="file-buttons.html">File Buttons</a></li>
+          <li><a href="forms.html">Forms</a></li>
+          <li><a href="grid-system.html">Grid System</a></li>
+          <li><a href="loaders.html">Loaders</a></li>
+          <li><a href="progress-bars.html">Progress Bars</a></li>
+          <li><a href="switches.html">Switches</a></li>
+          <li><a href="tabs.html">Tabs</a></li>
+          <li><a href="tables.html">Tables</a></li>
+          <li><a href="utilities.html">Utilities</a></li>
+          <li><a href="icons.html">Icons</a></li>
+          <li><a href="browser-support.html">Browser Support</a></li>
+          <li><a href="attribution.html">Attribution</a></li>
+        </ul>
+      </div>
+
+      <div class="col-md-9">
+        <div id="content">
+          <h2 id="customizing">Customizing</h2>
+<p>If you’re using the source version of Shoelace (i.e. not the CDN or <code>/dist</code> version), you can customize components using CSS variables. To add customizations, simply override one or more of the variables found in <a href="../source/css/variables.css"><code>source/css/variables.css</code></a>.</p>
+<p>For example, you can customize the default text color, background color, and the primary color by adding this to your stylesheet:</p>
+<pre><code class="lang-css">:root {
+  --body-color: white;
+  --body-bg-color: black;
+  --state-primary: tomato;
+}
+</code></pre>
+<p>You don’t need to include all of the core variables. You only need to include the ones you want to customize.</p>
+<h3 id="using-css-variables">Using CSS Variables</h3>
+<p>You’re encouraged to use Shoelace’s variables in your own stylesheet. This makes it easy to reuse values without hardcoding them. It also provides a foundation for extending Shoelace with your own <a href="#creating-custom-components">custom components</a>.</p>
+<pre><code class="lang-css">.your-component {
+  background-color: var(--component-bg-color);
+  border-color: var(--component-border-color);
+  color: var(--state-secondary);
+}
+</code></pre>
+<p>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.</p>
+<h3 id="creating-custom-components">Creating Custom Components</h3>
+<p>You can create custom components to extend Shoelace’s functionality. Here’s what a component stylesheet looks like.</p>
+<pre><code class="lang-css">/* Set default variables in a :root block. It&#39;s a good idea to
+   base them off core variables when possible. This makes it
+   easier to customize the library as a whole but still lets
+   users change individual components.
+
+   Never change or override core variables!
+*/
+:root {
+  --accordion-bg-color: var(--component-bg-color);
+  --accordion-border-color: var(--component-border-color);
+  /* etc. */
+}
+
+/* Component styles */
+.accordion {
+  /* Base styles go here. */
+
+  /* Modifiers can be nested and should always be prefixed with
+     the component&#39;s name.
+  */
+  &amp;.accordion-xs { }
+  &amp;.accordion-sm { }
+  &amp;.accordion-lg { }
+  &amp;.accordion-xl { }
+}
+</code></pre>
+<p>Here are some best practices for creating custom components:</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-xs</code>, and variable names that look like <code>--accordion-bg-color</code>. Try to follow the same patterns as much as possible.</p>
+<p><strong>Define new variables when it makes sense to.</strong> Take a look at 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>Provide source and dist versions.</strong> Many people use Shoelace as a tool for prototyping. If you’re open sourcing your component, it’s best to provide both source and dist versions. The dist version is just a minified version of the source after it’s been processed by cssnext.</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>
+
+        </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-secondary">
+      1.0.0-beta24
+    </p>
+
+    <p class="mar-y-sm 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>
+
+    <p class="text-small text-secondary">
+      <a href="https://keycdn.com/" class="text-secondary">Accelerated by KeyCDN</a> &middot;
+      &copy; A Beautiful Site, LLC
+    </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');
+        }
+      });
+
+      // Intercept dropdown clicks for the demo
+      $('.dropdown').on('select', function(event) {
+        event.preventDefault();
+      });
+    });
+  </script>
+  <script async defer src="https://buttons.github.io/buttons.js"></script>
+</body>
+</html>

docs/dropdowns.html

@@ -0,0 +1,246 @@
+<!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-secondary text-small">
+      A back to the basics CSS starter kit. For when you don’t need the whole boot.
+    </p>
+  </header>
+
+  <main class="container">
+    <div class="row">
+      <div class="col-md-3">
+        <ul id="nav">
+          <li><a href="installing.html">Installing</a></li>
+          <li><a href="customizing.html">Customizing</a></li>
+          <li><a href="content.html">Content</a></li>
+          <li><a href="alerts.html">Alerts</a></li>
+          <li><a href="badges.html">Badges</a></li>
+          <li><a href="buttons.html">Buttons</a></li>
+          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="file-buttons.html">File Buttons</a></li>
+          <li><a href="forms.html">Forms</a></li>
+          <li><a href="grid-system.html">Grid System</a></li>
+          <li><a href="loaders.html">Loaders</a></li>
+          <li><a href="progress-bars.html">Progress Bars</a></li>
+          <li><a href="switches.html">Switches</a></li>
+          <li><a href="tabs.html">Tabs</a></li>
+          <li><a href="tables.html">Tables</a></li>
+          <li><a href="utilities.html">Utilities</a></li>
+          <li><a href="icons.html">Icons</a></li>
+          <li><a href="browser-support.html">Browser Support</a></li>
+          <li><a href="attribution.html">Attribution</a></li>
+        </ul>
+      </div>
+
+      <div class="col-md-9">
+        <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. When a dropdown is activated, it will receive the <code>active</code> class and the menu will show.</p>
+<p>Headings can be created with the <code>dropdown-heading</code> class.</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;div class=&quot;dropdown-heading&quot;&gt;Heading&lt;/div&gt;
+    &lt;a href=&quot;#&quot;&gt;More...&lt;/a&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</code></pre>
+<div class="input-field">
+  <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>
+      <div class="dropdown-heading">Heading</div>
+      <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-top&quot;&gt;
+  ...
+&lt;/div&gt;
+
+&lt;div class=&quot;dropdown dropdown-left&quot;&gt;
+  ...
+&lt;/div&gt;
+
+&lt;div class=&quot;dropdown dropdown-top dropdown-left&quot;&gt;
+  ...
+&lt;/div&gt;
+</code></pre>
+<div class="input-field">
+  <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-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 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>
+<pre><code class="lang-html">&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; placeholder=&quot;10.00&quot;&gt;
+
+  &lt;div class=&quot;dropdown dropdown-left&quot;&gt;
+    &lt;button type=&quot;button&quot; class=&quot;dropdown-trigger&quot;&gt;Currency&lt;/button&gt;
+    &lt;div class=&quot;dropdown-menu&quot;&gt;
+      &lt;a href=&quot;#&quot; class=&quot;checked&quot;&gt;USD&lt;/a&gt;
+      &lt;a href=&quot;#&quot;&gt;AUD&lt;/a&gt;
+      &lt;a href=&quot;#&quot;&gt;CAD&lt;/a&gt;
+      &lt;a href=&quot;#&quot;&gt;GBP&lt;/a&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</code></pre>
+<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="interactivity">Interactivity</h3>
+<p>Dropdowns require <code>shoelace.js</code> for interactivity. You don’t need to initialize anything. Just 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);
+
+    // Tip: Use event.preventDefault() to
+    // intercept the original click event.
+  });
+</code></pre>
+<p>To show or hide a dropdown programmatically, just add or remove the <code>active</code> class to the dropdown.</p>
+<pre><code class="lang-javascript">// Show the dropdown
+$(&#39;#my-dropdown&#39;).addClass(&#39;active&#39;);
+
+// Hide the dropdown
+$(&#39;#my-dropdown&#39;).removeClass(&#39;active&#39;);
+</code></pre>
+
+        </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-secondary">
+      1.0.0-beta24
+    </p>
+
+    <p class="mar-y-sm 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>
+
+    <p class="text-small text-secondary">
+      <a href="https://keycdn.com/" class="text-secondary">Accelerated by KeyCDN</a> &middot;
+      &copy; A Beautiful Site, LLC
+    </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');
+        }
+      });
+
+      // Intercept dropdown clicks for the demo
+      $('.dropdown').on('select', function(event) {
+        event.preventDefault();
+      });
+    });
+  </script>
+  <script async defer src="https://buttons.github.io/buttons.js"></script>
+</body>
+</html>

docs/file-buttons.html

@@ -0,0 +1,195 @@
+<!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 buttons to let users select files in your app.">
+  <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>File 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-secondary text-small">
+      A back to the basics CSS starter kit. For when you don’t need the whole boot.
+    </p>
+  </header>
+
+  <main class="container">
+    <div class="row">
+      <div class="col-md-3">
+        <ul id="nav">
+          <li><a href="installing.html">Installing</a></li>
+          <li><a href="customizing.html">Customizing</a></li>
+          <li><a href="content.html">Content</a></li>
+          <li><a href="alerts.html">Alerts</a></li>
+          <li><a href="badges.html">Badges</a></li>
+          <li><a href="buttons.html">Buttons</a></li>
+          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="file-buttons.html">File Buttons</a></li>
+          <li><a href="forms.html">Forms</a></li>
+          <li><a href="grid-system.html">Grid System</a></li>
+          <li><a href="loaders.html">Loaders</a></li>
+          <li><a href="progress-bars.html">Progress Bars</a></li>
+          <li><a href="switches.html">Switches</a></li>
+          <li><a href="tabs.html">Tabs</a></li>
+          <li><a href="tables.html">Tables</a></li>
+          <li><a href="utilities.html">Utilities</a></li>
+          <li><a href="icons.html">Icons</a></li>
+          <li><a href="browser-support.html">Browser Support</a></li>
+          <li><a href="attribution.html">Attribution</a></li>
+        </ul>
+      </div>
+
+      <div class="col-md-9">
+        <div id="content">
+          <h2 id="file-buttons">File Buttons</h2>
+<p>File inputs are notoriously hard to style consistently in every browser. Shoelace offers file buttons as an alternative.</p>
+<p>File buttons are much easier to style, but come with the caveat that the name and 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>To create a file button, use the following markup. Note that the input needs to have an <code>id</code> and the label needs to have a matching <code>for</code> attribute. The label also needs to have the <code>button</code> class.</p>
+<pre><code class="lang-html">&lt;span class=&quot;file-button&quot;&gt;
+  &lt;input type=&quot;file&quot; id=&quot;my-file&quot;&gt;
+  &lt;label class=&quot;button&quot; for=&quot;my-file&quot;&gt;Select File&lt;/label&gt;
+&lt;/span&gt;
+</code></pre>
+<p><span class="file-button">
+  <input type="file" id="file-input">
+  <label class="button" for="file-input">Select File</label>
+</span></p>
+<p>This approach is a bit more verbose than simply wrapping the input with a label, but the extra markup makes file buttons accessible via keyboard.</p>
+<p>You can allow multiple files to be selected by adding the <code>multiple</code> attribute:</p>
+<pre><code class="lang-html">&lt;span class=&quot;file-button&quot;&gt;
+  &lt;input type=&quot;file&quot; id=&quot;my-files&quot; multiple&gt;
+  &lt;label class=&quot;button&quot; for=&quot;my-files&quot;&gt;Select Files&lt;/label&gt;
+&lt;/span&gt;
+</code></pre>
+<p><span class="file-button">
+  <input type="file" id="my-files" multiple>
+  <label class="button" for="my-files">Select Files</label>
+</span></p>
+<h3 id="variations">Variations</h3>
+<p>File buttons can use <a href="buttons.html">button modifiers</a>. Just apply the appropriate classes to the label.</p>
+<p><span class="file-button">
+  <input type="file" id="file-input-xs">
+  <label class="button button-xs" for="file-input-xs">Browse</label>
+</span>
+<span class="file-button">
+  <input type="file" id="file-input-sm">
+  <label class="button button-sm" for="file-input-sm">Browse</label>
+</span>
+<span class="file-button">
+  <input type="file" id="file-input-default">
+  <label class="button" for="file-input-default">Browse</label>
+</span>
+<span class="file-button">
+  <input type="file" id="file-input-lg">
+  <label class="button button-lg" for="file-input-lg">Browse</label>
+</span>
+<span class="file-button">
+  <input type="file" id="file-input-xl">
+  <label class="button button-xl" for="file-input-xl">Browse</label>
+</span></p>
+<p><span class="file-button">
+  <input type="file" id="file-input-default">
+  <label class="button" for="file-input-default">Browse</label>
+</span>
+<span class="file-button">
+  <input type="file" id="file-input-secondary">
+  <label class="button button-secondary" for="file-input-secondary">Browse</label>
+</span>
+<span class="file-button">
+  <input type="file" id="file-input-success">
+  <label class="button button-success" for="file-input-success">Browse</label>
+</span>
+<span class="file-button">
+  <input type="file" id="file-input-info">
+  <label class="button button-info" for="file-input-info">Browse</label>
+</span>
+<span class="file-button">
+  <input type="file" id="file-input-warning">
+  <label class="button button-warning" for="file-input-warning">Browse</label>
+</span>
+<span class="file-button">
+  <input type="file" id="file-input-danger">
+  <label class="button button-danger" for="file-input-danger">Browse</label>
+</span>
+<span class="file-button">
+  <input type="file" id="file-input-light">
+  <label class="button button-light" for="file-input-light">Browse</label>
+</span>
+<span class="file-button">
+  <input type="file" id="file-input-dark">
+  <label class="button button-dark" for="file-input-dark">Browse</label>
+</span></p>
+<p>You can also use file buttons in <a href="forms.html#input-groups">input groups</a>.</p>
+<div class="input-group">
+  <span class="file-button">
+    <input type="file" id="file-input-group">
+    <label class="button" for="file-input-group">Select File</label>
+  </span>
+  <input type="text">
+  <button type="button">Submit</button>
+</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-secondary">
+      1.0.0-beta24
+    </p>
+
+    <p class="mar-y-sm 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>
+
+    <p class="text-small text-secondary">
+      <a href="https://keycdn.com/" class="text-secondary">Accelerated by KeyCDN</a> &middot;
+      &copy; A Beautiful Site, LLC
+    </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');
+        }
+      });
+
+      // Intercept dropdown clicks for the demo
+      $('.dropdown').on('select', function(event) {
+        event.preventDefault();
+      });
+    });
+  </script>
+  <script async defer src="https://buttons.github.io/buttons.js"></script>
+</body>
+</html>

docs/forms.html

@@ -0,0 +1,688 @@
+<!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">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.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-secondary text-small">
+      A back to the basics CSS starter kit. For when you don’t need the whole boot.
+    </p>
+  </header>
+
+  <main class="container">
+    <div class="row">
+      <div class="col-md-3">
+        <ul id="nav">
+          <li><a href="installing.html">Installing</a></li>
+          <li><a href="customizing.html">Customizing</a></li>
+          <li><a href="content.html">Content</a></li>
+          <li><a href="alerts.html">Alerts</a></li>
+          <li><a href="badges.html">Badges</a></li>
+          <li><a href="buttons.html">Buttons</a></li>
+          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="file-buttons.html">File Buttons</a></li>
+          <li><a href="forms.html">Forms</a></li>
+          <li><a href="grid-system.html">Grid System</a></li>
+          <li><a href="loaders.html">Loaders</a></li>
+          <li><a href="progress-bars.html">Progress Bars</a></li>
+          <li><a href="switches.html">Switches</a></li>
+          <li><a href="tabs.html">Tabs</a></li>
+          <li><a href="tables.html">Tables</a></li>
+          <li><a href="utilities.html">Utilities</a></li>
+          <li><a href="icons.html">Icons</a></li>
+          <li><a href="browser-support.html">Browser Support</a></li>
+          <li><a href="attribution.html">Attribution</a></li>
+        </ul>
+      </div>
+
+      <div class="col-md-9">
+        <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-secondary">
+          File inputs aren’t supported. Use a <a href="file-buttons.html">file button</a> instead.
+        </span>
+      </td>
+      <td>
+        <span class="file-button">
+          <input type="file" id="file-button-ex">
+          <label class="button button-block" for="file-button-ex">Select File</label>
+        </span>
+      </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-[xs|sm|lg|xl]</code> modifiers.</p>
+<pre><code class="lang-html">&lt;input type=&quot;text&quot; class=&quot;input-xs&quot; placeholder=&quot;XS&quot;&gt;
+&lt;input type=&quot;text&quot; class=&quot;input-sm&quot; placeholder=&quot;SM&quot;&gt;
+&lt;input type=&quot;text&quot; placeholder=&quot;Default&quot;&gt;
+&lt;input type=&quot;text&quot; class=&quot;input-lg&quot; placeholder=&quot;LG&quot;&gt;
+&lt;input type=&quot;text&quot; class=&quot;input-xl&quot; placeholder=&quot;XL&quot;&gt;
+
+&lt;select class=&quot;input-xs&quot;&gt;&lt;option&gt;Item&lt;/option&gt;&lt;/select&gt;
+&lt;select class=&quot;input-sm&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-lg&quot;&gt;&lt;option&gt;Item&lt;/option&gt;&lt;/select&gt;
+&lt;select class=&quot;input-xl&quot;&gt;&lt;option&gt;Item&lt;/option&gt;&lt;/select&gt;
+</code></pre>
+<div class="row">
+  <div class="col-sm-6">
+    <div class="input-field">
+      <input type="text" class="input-xs" placeholder="XS">
+    </div>
+    <div class="input-field">
+      <input type="text" class="input-sm" placeholder="SM">
+    </div>
+    <div class="input-field">
+      <input type="text" placeholder="Default">
+    </div>
+    <div class="input-field">
+      <input type="text" class="input-lg" placeholder="LG">
+    </div>
+    <div class="input-field">
+      <input type="text" class="input-xl" placeholder="XL">
+    </div>
+  </div>
+  <div class="col-sm-6">
+    <div class="input-field">
+      <select class="input-xs"><option>XS</option></select>
+    </div>
+    <div class="input-field">
+      <select class="input-sm"><option>SM</option></select>
+    </div>
+    <div class="input-field">
+      <select><option>Default</option></select>
+    </div>
+    <div class="input-field">
+      <select class="input-lg"><option>LG</option></select>
+    </div>
+    <div class="input-field">
+      <select class="input-xl"><option>XL</option></select>
+    </div>
+  </div>
+</div>
+
+<p>Disabled form controls look like this:</p>
+<div class="input-field">
+  <input type="text" placeholder="Input" disabled>
+</div>
+
+<div class="input-field">
+  <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-field">
+  <input type="text" readonly value="This is read-only">
+</div>
+
+<h3 id="input-fields">Input Fields</h3>
+<p>For proper spacing of individual form controls, wrap them in <code>input-field</code> containers.</p>
+<pre><code class="lang-html">&lt;div class=&quot;input-field&quot;&gt;
+  &lt;label&gt;Name&lt;/label&gt;
+  &lt;input type=&quot;text&quot;&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;input-field&quot;&gt;
+  &lt;label&gt;Password&lt;/label&gt;
+  &lt;input type=&quot;password&quot;&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;input-field&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-field">
+  <label>Username</label>
+  <input type="text">
+</div>
+
+<div class="input-field">
+  <label>Password</label>
+  <input type="password">
+</div>
+
+<div class="input-field">
+  <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-group">
+  <input type="text">
+  <button type="button">Submit</button>
+</div>
+
+<div class="input-group">
+  <button type="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">Submit</button>
+</div>
+
+<div class="input-group">
+  <button type="button">Option 1</button>
+  <button type="button">Option 2</button>
+  <button type="button">Option 3</button>
+</div>
+
+<h3 id="input-hints">Input Hints</h3>
+<p>You can add textual hints below form controls with the <code>input-hint</code> class.</p>
+<pre><code class="lang-html">&lt;div class=&quot;input-field&quot;&gt;
+  &lt;label&gt;Name&lt;/label&gt;
+  &lt;input type=&quot;text&quot;&gt;
+  &lt;p class=&quot;input-hint&quot;&gt;What do people call you?&lt;/p&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;input-field&quot;&gt;
+  &lt;label&gt;Age&lt;/label&gt;
+  &lt;input type=&quot;number&quot;&gt;
+  &lt;p class=&quot;input-hint&quot;&gt;Enter your age in years&lt;/p&gt;
+&lt;/div&gt;
+</code></pre>
+<div class="row">
+  <div class="col-sm-6">
+    <div class="input-field">
+      <label>Name</label>
+      <input type="text">
+      <p class="input-hint">What do people call you?</p>
+    </div>
+  </div>
+  <div class="col-sm-6">
+    <div class="input-field">
+      <label>Age</label>
+      <input type="number">
+      <p class="input-hint">Enter your age in years</p>
+    </div>
+  </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-[xs|sm|lg|xl]</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-xs&quot;&gt;$&lt;/span&gt;
+  &lt;input type=&quot;text&quot; class=&quot;input-xs&quot;&gt;
+  &lt;span class=&quot;input-addon input-addon-xs&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-sm&quot;&gt;$&lt;/span&gt;
+  &lt;input type=&quot;text&quot; class=&quot;input-sm&quot;&gt;
+  &lt;span class=&quot;input-addon input-addon-sm&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-lg&quot;&gt;$&lt;/span&gt;
+  &lt;input type=&quot;text&quot; class=&quot;input-lg&quot;&gt;
+  &lt;span class=&quot;input-addon input-addon-lg&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-xl&quot;&gt;$&lt;/span&gt;
+  &lt;input type=&quot;text&quot; class=&quot;input-xl&quot;&gt;
+  &lt;span class=&quot;input-addon input-addon-xl&quot;&gt;.00&lt;/span&gt;
+&lt;/div&gt;
+</code></pre>
+<div class="input-field">
+  <div class="input-group">
+    <span class="input-addon input-addon-xs">$</span>
+    <input type="text" class="input-xs">
+    <span class="input-addon input-addon-xs">.00</span>
+  </div>
+</div>
+
+<div class="input-field">
+  <div class="input-group">
+    <span class="input-addon input-addon-sm">$</span>
+    <input type="text" class="input-sm">
+    <span class="input-addon input-addon-sm">.00</span>
+  </div>
+</div>
+
+<div class="input-field">
+  <div class="input-group">
+    <span class="input-addon">$</span>
+    <input type="text">
+    <span class="input-addon">.00</span>
+  </div>
+</div>
+
+<div class="input-field">
+  <div class="input-group">
+    <span class="input-addon input-addon-lg">$</span>
+    <input type="text" class="input-lg">
+    <span class="input-addon input-addon-lg">.00</span>
+  </div>
+</div>
+
+<div class="input-field">
+  <div class="input-group">
+    <span class="input-addon input-addon-xl">$</span>
+    <input type="text" class="input-xl">
+    <span class="input-addon input-addon-xl">.00</span>
+  </div>
+</div>
+
+<h3 id="input-icons">Input Icons</h3>
+<p>Input icons add visual context to form controls. To add icons to a form control, wrap it with an <code>input-icon</code> element and add icons before and after it.</p>
+<p>This example uses Font Awesome, but you can use whatever icon library you want. For consistency, use fixed with icons if your icon library supports them.</p>
+<pre><code class="lang-html">&lt;div class=&quot;input-icon&quot;&gt;
+  &lt;i class=&quot;fa fa-fw fa-phone&quot;&gt;&lt;/i&gt;
+  &lt;input type=&quot;text&quot;&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;input-icon&quot;&gt;
+  &lt;input type=&quot;text&quot;&gt;
+  &lt;i class=&quot;fa fa-fw fa-envelope-o&quot;&gt;&lt;/i&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;input-icon&quot;&gt;
+  &lt;i class=&quot;fa fa-fw fa-user&quot;&gt;&lt;/i&gt;
+  &lt;input type=&quot;text&quot;&gt;
+  &lt;i class=&quot;fa fa-check&quot;&gt;&lt;/i&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;input-icon&quot;&gt;
+  &lt;i class=&quot;fa fa-fw fa-map-marker&quot;&gt;&lt;/i&gt;
+  &lt;select&gt;&lt;option&gt;United States&lt;/option&gt;&lt;/select&gt;
+&lt;/div&gt;
+</code></pre>
+<div class="row">
+  <div class="col-md-6 mar-b-md">
+    <div class="input-icon">
+      <i class="fa fa-fw fa-phone"></i>
+      <input type="text">
+    </div>
+  </div>
+  <div class="col-md-6 mar-b-md">
+    <div class="input-icon">
+      <input type="text">
+      <i class="fa fa-fw fa-envelope-o"></i>
+    </div>
+  </div>
+  <div class="col-md-6 mar-b-md">
+    <div class="input-icon">
+      <i class="fa fa-fw fa-user"></i>
+      <input type="text">
+      <i class="fa fa-check"></i>
+    </div>
+  </div>
+  <div class="col-md-6 mar-b-md">
+    <div class="input-icon">
+      <i class="fa fa-fw fa-map-marker"></i>
+      <select><option>United States</option></select>
+    </div>
+  </div>
+</div>
+
+<p>Input icons can be used inside form groups.</p>
+<pre><code class="lang-html">&lt;div class=&quot;input-group&quot;&gt;
+  &lt;span class=&quot;input-addon&quot;&gt;Location&lt;/span&gt;
+  &lt;div class=&quot;input-icon&quot;&gt;
+    &lt;i class=&quot;fa fa-fw fa-map-marker&quot;&gt;&lt;/i&gt;
+    &lt;input type=&quot;text&quot;&gt;
+    &lt;i class=&quot;fa fa-fw fa-check&quot;&gt;&lt;/i&gt;
+  &lt;/div&gt;
+  &lt;button type=&quot;button&quot;&gt;Submit&lt;/button&gt;
+&lt;/div&gt;
+</code></pre>
+<div class="input-group">
+  <span class="input-addon">Location</span>
+  <div class="input-icon">
+    <i class="fa fa-fw fa-map-marker"></i>
+    <input type="text">
+    <i class="fa fa-fw fa-check"></i>
+  </div>
+  <button type="button">Submit</button>
+</div>
+
+<p>Use the <code>input-icon-[xs|sm|lg|xs]</code> modifiers to change the size of input icons to match form controls.</p>
+<pre><code class="lang-html">&lt;div class=&quot;input-icon input-icon-xs&quot;&gt;
+  &lt;i class=&quot;fa fa-fw fa-user&quot;&gt;&lt;/i&gt;
+  &lt;input class=&quot;input-xs&quot; type=&quot;text&quot;&gt;
+  &lt;i class=&quot;fa fa-check&quot;&gt;&lt;/i&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;input-icon input-icon-sm&quot;&gt;
+  &lt;i class=&quot;fa fa-fw fa-user&quot;&gt;&lt;/i&gt;
+  &lt;input class=&quot;input-sm&quot; type=&quot;text&quot;&gt;
+  &lt;i class=&quot;fa fa-check&quot;&gt;&lt;/i&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;input-icon&quot;&gt;
+  &lt;i class=&quot;fa fa-fw fa-user&quot;&gt;&lt;/i&gt;
+  &lt;input type=&quot;text&quot;&gt;
+  &lt;i class=&quot;fa fa-check&quot;&gt;&lt;/i&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;input-icon input-icon-lg&quot;&gt;
+  &lt;i class=&quot;fa fa-fw fa-user&quot;&gt;&lt;/i&gt;
+  &lt;input class=&quot;input-lg&quot; type=&quot;text&quot;&gt;
+  &lt;i class=&quot;fa fa-check&quot;&gt;&lt;/i&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;input-icon input-icon-xl&quot;&gt;
+  &lt;i class=&quot;fa fa-fw fa-user&quot;&gt;&lt;/i&gt;
+  &lt;input class=&quot;input-xl&quot; type=&quot;text&quot;&gt;
+  &lt;i class=&quot;fa fa-check&quot;&gt;&lt;/i&gt;
+&lt;/div&gt;
+</code></pre>
+<div class="input-field">
+  <div class="input-icon input-icon-xs">
+    <i class="fa fa-fw fa-user"></i>
+    <input class="input-xs" type="text">
+    <i class="fa fa-check"></i>
+  </div>
+</div>
+
+<div class="input-field">
+  <div class="input-icon input-icon-sm">
+    <i class="fa fa-fw fa-user"></i>
+    <input class="input-sm" type="text">
+    <i class="fa fa-check"></i>
+  </div>
+</div>
+
+<div class="input-field">
+  <div class="input-icon">
+    <i class="fa fa-fw fa-user"></i>
+    <input type="text">
+    <i class="fa fa-check"></i>
+  </div>
+</div>
+
+<div class="input-field">
+  <div class="input-icon input-icon-lg">
+    <i class="fa fa-fw fa-user"></i>
+    <input class="input-lg" type="text">
+    <i class="fa fa-check"></i>
+  </div>
+</div>
+
+<div class="input-field">
+  <div class="input-icon input-icon-xl">
+    <i class="fa fa-fw fa-user"></i>
+    <input class="input-xl" type="text">
+    <i class="fa fa-check"></i>
+  </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-field">
+    <label>Username</label>
+    <input type="text">
+  </div>
+  <div class="input-field">
+    <label>Password</label>
+    <input type="password">
+  </div>
+  <div class="input-field">
+    <label>
+      <input type="checkbox"> Remember me
+    </label>
+  </div>
+  <div class="input-field">
+    <button type="button">Login</button>
+  </div>
+</fieldset>
+
+<h3 id="validation">Validation</h3>
+<p>A form control can be made valid or invalid by adding the <code>input-valid</code> or <code>input-invalid</code> modifiers to the surrounding <code>input-field</code>.</p>
+<pre><code class="lang-html">&lt;div class=&quot;input-field 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-field 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="row">
+  <div class="col-12 col-sm-6">
+    <div class="input-field input-valid">
+      <label>Valid</label>
+      <input type="text">
+    </div>
+  </div>
+  <div class="col-12 col-sm-6">
+    <div class="input-field input-invalid">
+      <label>Invalid</label>
+      <input type="text">
+    </div>
+  </div>
+</div>
+
+<p>Never apply validation modifiers directly to a form control, as some components (e.g. input icons) wrap inputs with additional elements that won’t be able to inherit the correct styles.</p>
+<pre><code class="lang-html">&lt;div class=&quot;input-field input-valid&quot;&gt;
+  &lt;label&gt;Valid with Icons&lt;/label&gt;
+  &lt;div class=&quot;input-icon&quot;&gt;
+    &lt;i class=&quot;fa fa-fw fa-user&quot;&gt;&lt;/i&gt;
+    &lt;input type=&quot;text&quot;&gt;
+    &lt;i class=&quot;fa fa-fw fa-check&quot;&gt;&lt;/i&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;input-field input-invalid&quot;&gt;
+  &lt;label&gt;Invalid with Icons&lt;/label&gt;
+  &lt;div class=&quot;input-icon&quot;&gt;
+    &lt;i class=&quot;fa fa-fw fa-user&quot;&gt;&lt;/i&gt;
+    &lt;input type=&quot;text&quot;&gt;
+    &lt;i class=&quot;fa fa-fw fa-times&quot;&gt;&lt;/i&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</code></pre>
+<div class="row">
+  <div class="col-12 col-sm-6">
+    <div class="input-field input-valid">
+      <label>Valid with Icons</label>
+      <div class="input-icon">
+        <i class="fa fa-fw fa-user"></i>
+        <input type="text">
+        <i class="fa fa-fw fa-check"></i>
+      </div>
+    </div>
+  </div>
+  <div class="col-12 col-sm-6">
+    <div class="input-field input-invalid">
+      <label>Invalid with Icons</label>
+      <div class="input-icon">
+        <i class="fa fa-fw fa-user"></i>
+        <input type="text">
+        <i class="fa fa-fw fa-times"></i>
+      </div>
+    </div>
+  </div>
+</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-secondary">
+      1.0.0-beta24
+    </p>
+
+    <p class="mar-y-sm 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>
+
+    <p class="text-small text-secondary">
+      <a href="https://keycdn.com/" class="text-secondary">Accelerated by KeyCDN</a> &middot;
+      &copy; A Beautiful Site, LLC
+    </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');
+        }
+      });
+
+      // Intercept dropdown clicks for the demo
+      $('.dropdown').on('select', function(event) {
+        event.preventDefault();
+      });
+    });
+  </script>
+  <script async defer src="https://buttons.github.io/buttons.js"></script>
+</body>
+</html>

docs/grid-system.html

@@ -0,0 +1,353 @@
+<!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 features a 12-column grid system based on Bootstrap 4’s grid.">
+  <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-secondary text-small">
+      A back to the basics CSS starter kit. For when you don’t need the whole boot.
+    </p>
+  </header>
+
+  <main class="container">
+    <div class="row">
+      <div class="col-md-3">
+        <ul id="nav">
+          <li><a href="installing.html">Installing</a></li>
+          <li><a href="customizing.html">Customizing</a></li>
+          <li><a href="content.html">Content</a></li>
+          <li><a href="alerts.html">Alerts</a></li>
+          <li><a href="badges.html">Badges</a></li>
+          <li><a href="buttons.html">Buttons</a></li>
+          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="file-buttons.html">File Buttons</a></li>
+          <li><a href="forms.html">Forms</a></li>
+          <li><a href="grid-system.html">Grid System</a></li>
+          <li><a href="loaders.html">Loaders</a></li>
+          <li><a href="progress-bars.html">Progress Bars</a></li>
+          <li><a href="switches.html">Switches</a></li>
+          <li><a href="tabs.html">Tabs</a></li>
+          <li><a href="tables.html">Tables</a></li>
+          <li><a href="utilities.html">Utilities</a></li>
+          <li><a href="icons.html">Icons</a></li>
+          <li><a href="browser-support.html">Browser Support</a></li>
+          <li><a href="attribution.html">Attribution</a></li>
+        </ul>
+      </div>
+
+      <div class="col-md-9">
+        <div id="content">
+          <h2 id="grid-system">Grid System</h2>
+<p>Shoelace features a 12-column grid system based on <a href="https://getbootstrap.com/docs/4.0/layout/grid/">Bootstrap 4’s grid</a>. It’s flexible, easy to use, and fully responsive.</p>
+<h3 id="structure">Structure</h3>
+<p>The grid consists of containers, rows, and columns. A basic, two-column grid looks like this:</p>
+<pre><code class="lang-html">&lt;div class=&quot;container&quot;&gt;
+  &lt;div class=&quot;row&quot;&gt;
+    &lt;div class=&quot;col&quot;&gt;1st column&lt;/div&gt;
+    &lt;div class=&quot;col&quot;&gt;2nd column&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</code></pre>
+<div class="container grid-example">
+  <div class="row">
+    <div class="col">1st column</div>
+    <div class="col">2nd column</div>
+  </div>
+</div>
+
+<p>Containers can be used to wrap sections of your page. Use the <code>container</code> class to create a responsive, fixed-width container or the <code>container-fluid</code> class to create a fluid container.</p>
+<p>Rows are used to group columns horizontally and can only contain columns as child elements. Columns are where you’ll put your content.</p>
+<h3 id="creating-columns">Creating Columns</h3>
+<p>Columns are equal width by default. The grid will automatically determine the appropriate size for columns with the <code>col</code> class.</p>
+<pre><code class="lang-html">&lt;div class=&quot;row&quot;&gt;
+  &lt;div class=&quot;col&quot;&gt;1&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;row&quot;&gt;
+  &lt;div class=&quot;col&quot;&gt;1&lt;/div&gt;
+  &lt;div class=&quot;col&quot;&gt;2&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;row&quot;&gt;
+  &lt;div class=&quot;col&quot;&gt;1&lt;/div&gt;
+  &lt;div class=&quot;col&quot;&gt;2&lt;/div&gt;
+  &lt;div class=&quot;col&quot;&gt;3&lt;/div&gt;
+&lt;/div&gt;
+</code></pre>
+<div class="container grid-example">
+  <div class="row">
+    <div class="col">col</div>
+  </div>
+  <div class="row">
+    <div class="col">col</div>
+    <div class="col">col</div>
+  </div>
+  <div class="row">
+    <div class="col">col</div>
+    <div class="col">col</div>
+    <div class="col">col</div>
+  </div>
+</div>
+
+<p>To set the width of a column, use the <code>col-*</code> modifier with a value of 1–12. Widths are calculated based on a total of 12 possible columns. Additional columns will wrap to a new line.</p>
+<pre><code class="lang-html">&lt;div class=&quot;row&quot;&gt;
+  &lt;div class=&quot;col-2&quot;&gt;col-2&lt;/div&gt;
+  &lt;div class=&quot;col-4&quot;&gt;col-4&lt;/div&gt;
+  &lt;div class=&quot;col-6&quot;&gt;col-6&lt;/div&gt;
+&lt;/div&gt;
+</code></pre>
+<div class="container grid-example">
+  <div class="row">
+    <div class="col-2">col-2</div>
+    <div class="col-4">col-4</div>
+    <div class="col-6">col-6</div>
+  </div>
+</div>
+
+<p>You can mix and match sized columns with unsized columns for flexibility. Unsized columns will take up equal widths of the remaining space.</p>
+<pre><code class="lang-html">&lt;div class=&quot;row&quot;&gt;
+  &lt;div class=&quot;col&quot;&gt;col&lt;/div&gt;
+  &lt;div class=&quot;col-6&quot;&gt;col-6&lt;/div&gt;
+  &lt;div class=&quot;col&quot;&gt;col&lt;/div&gt;
+&lt;/div&gt;
+</code></pre>
+<div class="container grid-example">
+  <div class="row">
+    <div class="col">col</div>
+    <div class="col-6">col-6</div>
+    <div class="col">col</div>
+  </div>
+</div>
+
+<p>To size a column based on its content, use <code>col-auto</code>.</p>
+<pre><code class="lang-html">&lt;div class=&quot;row&quot;&gt;
+  &lt;div class=&quot;col&quot;&gt;col&lt;/div&gt;
+  &lt;div class=&quot;col-auto&quot;&gt;Sized to fit&lt;/div&gt;
+  &lt;div class=&quot;col&quot;&gt;col&lt;/div&gt;
+&lt;/div&gt;
+</code></pre>
+<div class="container grid-example">
+  <div class="row">
+    <div class="col">col</div>
+    <div class="col-auto">Sized to fit</div>
+    <div class="col">col</div>
+  </div>
+</div>
+
+<h3 id="making-columns-responsive">Making Columns Responsive</h3>
+<p>There are five responsive tiers in Shoelace: <code>xs</code>, <code>sm</code>, <code>md</code>, <code>lg</code>, and <code>xl</code>. You can use these tiers to change the way the grid responds at various breakpoints. The grid is mobile-first, so the default tier is <code>xs</code>.</p>
+<p>Use the <code>col-[sm|md|lg|xl]-*</code> modifier to target a specific tier. Note that tiers are based on minimum widths, so using <code>col-sm-6</code> will target <code>sm</code>, <code>md</code>, <code>lg</code>, and <code>xl</code> screens. Of course, you can target multiple tiers on the same column as needed.</p>
+<p>For example, the following columns will stack on <code>xs</code> screens, take up 50% each (6 out of 12 columns) on <code>sm</code> screens, and 75% and 25% respectively on <code>md</code>, <code>lg</code>, and <code>xl</code> screens.</p>
+<pre><code class="lang-html">&lt;div class=&quot;row&quot;&gt;
+  &lt;div class=&quot;col-12 col-sm-6 col-md-8&quot;&gt;1st column&lt;/div&gt;
+  &lt;div class=&quot;col-12 col-sm-6 col-md-4&quot;&gt;2nd column&lt;/div&gt;
+&lt;/div&gt;
+</code></pre>
+<div class="container grid-example">
+  <div class="row">
+    <div class="col-12 col-sm-6 col-md-8">1st column</div>
+    <div class="col-12 col-sm-6 col-md-4">2nd column</div>
+  </div>
+</div>
+
+<h3 id="offsetting-columns">Offsetting Columns</h3>
+<p>You can offset columns using <code>offset-*</code> and <code>offset-[sm|md|lg|xl]-*</code> modifiers. To reset an offset at a specific tier, use <code>offset-[sm|md|lg|xl]-0</code>.</p>
+<pre><code class="lang-html">&lt;div class=&quot;row&quot;&gt;
+  &lt;div class=&quot;col-2&quot;&gt;left&lt;/div&gt;
+  &lt;div class=&quot;col-2 offset-2&quot;&gt;center&lt;/div&gt;
+  &lt;div class=&quot;col-2 offset-2&quot;&gt;right&lt;/div&gt;
+&lt;/div&gt;
+</code></pre>
+<div class="container grid-example">
+  <div class="row">
+    <div class="col-2">left</div>
+    <div class="col-2 offset-3">center</div>
+    <div class="col-2 offset-3">right</div>
+  </div>
+</div>
+
+<h3 id="aligning-columns">Aligning Columns</h3>
+<p>Columns can be aligned with the <code>row-[start|center|end|around|between]</code> and <code>row-[sm|md|lg|xl]-[start|center|end|around|between]</code> modifiers.</p>
+<pre><code class="lang-html">&lt;div class=&quot;row row-start&quot;&gt;
+  &lt;div class=&quot;col-4&quot;&gt;1st&lt;/div&gt;
+  &lt;div class=&quot;col-4&quot;&gt;2nd&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;row row-center&quot;&gt;
+  &lt;div class=&quot;col-4&quot;&gt;1st&lt;/div&gt;
+  &lt;div class=&quot;col-4&quot;&gt;2nd&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;row row-end&quot;&gt;
+  &lt;div class=&quot;col-4&quot;&gt;1st&lt;/div&gt;
+  &lt;div class=&quot;col-4&quot;&gt;2nd&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;row row-around&quot;&gt;
+  &lt;div class=&quot;col-4&quot;&gt;1st&lt;/div&gt;
+  &lt;div class=&quot;col-4&quot;&gt;2nd&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;row row-between&quot;&gt;
+  &lt;div class=&quot;col-4&quot;&gt;1st&lt;/div&gt;
+  &lt;div class=&quot;col-4&quot;&gt;2nd&lt;/div&gt;
+&lt;/div&gt;
+</code></pre>
+<div class="container grid-example">
+  <div class="row row-start">
+    <div class="col-4">1st</div>
+    <div class="col-4">2nd</div>
+  </div>
+  <div class="row row-center">
+    <div class="col-4">1st</div>
+    <div class="col-4">2nd</div>
+  </div>
+  <div class="row row-end">
+    <div class="col-4">1st</div>
+    <div class="col-4">2nd</div>
+  </div>
+  <div class="row row-around">
+    <div class="col-4">1st</div>
+    <div class="col-4">2nd</div>
+  </div>
+  <div class="row row-between">
+    <div class="col-4">1st</div>
+    <div class="col-4">2nd</div>
+  </div>
+</div>
+
+<h3 id="reordering-columns">Reordering Columns</h3>
+<p>You can control the visual order of columns using the <code>order-*</code> and <code>order-[sm|md|lg|xl]-*</code> modifiers. Note that columns without an order modifier will not be affected.</p>
+<pre><code class="lang-html">&lt;div class=&quot;row&quot;&gt;
+  &lt;div class=&quot;col-4&quot;&gt;1st (unordered)&lt;/div&gt;
+  &lt;div class=&quot;col-4 order-3&quot;&gt;2nd&lt;/div&gt;
+  &lt;div class=&quot;col-4 order-2&quot;&gt;3rd&lt;/div&gt;
+&lt;/div&gt;
+</code></pre>
+<div class="container grid-example">
+  <div class="row">
+    <div class="col-4">1st (unordered)</div>
+    <div class="col-4 order-3">2nd</div>
+    <div class="col-4 order-2">3rd</div>
+  </div>
+</div>
+
+<h3 id="hiding-columns">Hiding Columns</h3>
+<p>You can hide columns based on breakpoints using <a href="utilities.html#display-utilities">display utilities</a>.</p>
+<pre><code class="lang-html">&lt;div class=&quot;row&quot;&gt;
+  &lt;div class=&quot;col-2 hide-xs&quot;&gt;hide-xs&lt;/div&gt;
+  &lt;div class=&quot;col-2 hide-sm&quot;&gt;hide-sm&lt;/div&gt;
+  &lt;div class=&quot;col-2 hide-md&quot;&gt;hide-md&lt;/div&gt;
+  &lt;div class=&quot;col-2 hide-lg&quot;&gt;hide-lg&lt;/div&gt;
+  &lt;div class=&quot;col-2 hide-xl&quot;&gt;hide-xl&lt;/div&gt;
+&lt;/div&gt;
+</code></pre>
+<div class="container grid-example">
+  <div class="row">
+    <div class="col-2 hide-xs">hide-xs</div>
+    <div class="col-2 hide-sm">hide-sm</div>
+    <div class="col-2 hide-md">hide-md</div>
+    <div class="col-2 hide-lg">hide-lg</div>
+    <div class="col-2 hide-xl">hide-xl</div>
+  </div>
+</div>
+
+<h3 id="removing-gutters">Removing Gutters</h3>
+<p>By default, columns have horizontal spacing around them to create “gutters.” You can remove this spacing by applying the <code>row-flush</code> modifier to the parent row.</p>
+<pre><code class="lang-html">&lt;div class=&quot;row row-flush&quot;&gt;
+  ...
+&lt;/div&gt;
+</code></pre>
+<p>For an edge-to-edge design, refrain from using <code>container</code> and <code>container-fluid</code> around the row.</p>
+<h3 id="nested-grids">Nested Grids</h3>
+<p>Grids can be nested. Simply add a new row inside of a column.</p>
+<pre><code class="lang-html">&lt;div class=&quot;row&quot;&gt;
+  &lt;div class=&quot;col-8&quot;&gt;
+    outer, col-8
+    &lt;div class=&quot;row&quot;&gt;
+      &lt;div class=&quot;col-3&quot;&gt;inner, col-3&lt;/div&gt;
+      &lt;div class=&quot;col-9&quot;&gt;inner, col-9&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</code></pre>
+<div class="container grid-example">
+  <div class="row">
+    <div class="col-8">
+      outer, col-8
+      <div class="row">
+        <div class="col-3">inner, col-3</div>
+        <div class="col-9">inner, col-9</div>
+      </div>
+    </div>
+  </div>
+</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-secondary">
+      1.0.0-beta24
+    </p>
+
+    <p class="mar-y-sm 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>
+
+    <p class="text-small text-secondary">
+      <a href="https://keycdn.com/" class="text-secondary">Accelerated by KeyCDN</a> &middot;
+      &copy; A Beautiful Site, LLC
+    </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');
+        }
+      });
+
+      // Intercept dropdown clicks for the demo
+      $('.dropdown').on('select', function(event) {
+        event.preventDefault();
+      });
+    });
+  </script>
+  <script async defer src="https://buttons.github.io/buttons.js"></script>
+</body>
+</html>

docs/icons.html

@@ -0,0 +1,140 @@
+<!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-secondary text-small">
+      A back to the basics CSS starter kit. For when you don’t need the whole boot.
+    </p>
+  </header>
+
+  <main class="container">
+    <div class="row">
+      <div class="col-md-3">
+        <ul id="nav">
+          <li><a href="installing.html">Installing</a></li>
+          <li><a href="customizing.html">Customizing</a></li>
+          <li><a href="content.html">Content</a></li>
+          <li><a href="alerts.html">Alerts</a></li>
+          <li><a href="badges.html">Badges</a></li>
+          <li><a href="buttons.html">Buttons</a></li>
+          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="file-buttons.html">File Buttons</a></li>
+          <li><a href="forms.html">Forms</a></li>
+          <li><a href="grid-system.html">Grid System</a></li>
+          <li><a href="loaders.html">Loaders</a></li>
+          <li><a href="progress-bars.html">Progress Bars</a></li>
+          <li><a href="switches.html">Switches</a></li>
+          <li><a href="tabs.html">Tabs</a></li>
+          <li><a href="tables.html">Tables</a></li>
+          <li><a href="utilities.html">Utilities</a></li>
+          <li><a href="icons.html">Icons</a></li>
+          <li><a href="browser-support.html">Browser Support</a></li>
+          <li><a href="attribution.html">Attribution</a></li>
+        </ul>
+      </div>
+
+      <div class="col-md-9">
+        <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-field text-secondary" 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-field">
+  <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>
+      </div>
+  </main>
+
+  <footer id="foot">
+    <a href="../index.html">
+      <img src="../source/img/wordmark.svg" alt="Shoelace logo">
+    </a>
+
+    <p class="text-small text-secondary">
+      1.0.0-beta24
+    </p>
+
+    <p class="mar-y-sm 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>
+
+    <p class="text-small text-secondary">
+      <a href="https://keycdn.com/" class="text-secondary">Accelerated by KeyCDN</a> &middot;
+      &copy; A Beautiful Site, LLC
+    </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');
+        }
+      });
+
+      // Intercept dropdown clicks for the demo
+      $('.dropdown').on('select', function(event) {
+        event.preventDefault();
+      });
+    });
+  </script>
+  <script async defer src="https://buttons.github.io/buttons.js"></script>
+</body>
+</html>

docs/installing.html

@@ -0,0 +1,128 @@
+<!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-secondary text-small">
+      A back to the basics CSS starter kit. For when you don’t need the whole boot.
+    </p>
+  </header>
+
+  <main class="container">
+    <div class="row">
+      <div class="col-md-3">
+        <ul id="nav">
+          <li><a href="installing.html">Installing</a></li>
+          <li><a href="customizing.html">Customizing</a></li>
+          <li><a href="content.html">Content</a></li>
+          <li><a href="alerts.html">Alerts</a></li>
+          <li><a href="badges.html">Badges</a></li>
+          <li><a href="buttons.html">Buttons</a></li>
+          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="file-buttons.html">File Buttons</a></li>
+          <li><a href="forms.html">Forms</a></li>
+          <li><a href="grid-system.html">Grid System</a></li>
+          <li><a href="loaders.html">Loaders</a></li>
+          <li><a href="progress-bars.html">Progress Bars</a></li>
+          <li><a href="switches.html">Switches</a></li>
+          <li><a href="tabs.html">Tabs</a></li>
+          <li><a href="tables.html">Tables</a></li>
+          <li><a href="utilities.html">Utilities</a></li>
+          <li><a href="icons.html">Icons</a></li>
+          <li><a href="browser-support.html">Browser Support</a></li>
+          <li><a href="attribution.html">Attribution</a></li>
+        </ul>
+      </div>
+
+      <div class="col-md-9">
+        <div id="content">
+          <h2 id="installing">Installing</h2>
+<p>There are two ways to use Shoelace. If you want to get things up and running quickly, use the <code>dist/</code> version or the <a href="#cdn">CDN version</a>. This version isn’t customizable, nor can you use future CSS features with it. It’s primarily intended for prototyping.</p>
+<p>If you’re developing a production app, you should <a href="#building-from-source">build Shoelace from source</a>. This version is completely customizable, modular, and let’s you use future CSS features <em>today</em>.</p>
+<p><strong>Note:</strong> 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> before <code>shoelace.js</code>.</p>
+<h3 id="cdn">CDN</h3>
+<p>This is the best approach for prototyping, however, this version isn’t customizable and doesn’t support future CSS features. To load Shoelace via CDN, add this to your <code>&lt;head&gt;</code>:</p>
+<pre><code class="lang-html">&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.shoelace.style/1.0.0-beta24/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://cdn.shoelace.style/1.0.0-beta24/shoelace.js&quot;&gt;&lt;/script&gt;
+</code></pre>
+<p>This service is provided free, courtesy of <a href="https://keycdn.com/">KeyCDN</a>.</p>
+<h3 id="building-from-source">Building From Source</h3>
+<p>To make the most out of Shoelace, you should build it from source. This will let you use future CSS features <em>today</em>, such as <a href="https://www.w3.org/TR/css-variables/">CSS variables</a>, <a href="http://tabatkins.github.io/specs/css-nesting/">nesting</a>, <a href="https://drafts.csswg.org/css-color/#modifying-colors">color functions</a>, <a href="http://cssnext.io/features/">and more</a>. It also gives you complete control over customizing Shoelace.</p>
+<p>The recommended way to build Shoelace is with <a href="http://cssnext.io/">cssnext</a>. There are instructions for webpack, gulp, grunt, browserify, and others located on the <a href="http://cssnext.io/setup/">setup page</a>.</p>
+<p>You can <a href="https://github.com/claviska/shoelace-css/releases">download Shoelace</a> from GitHub, but it’s probably better to use the npm version:</p>
+<pre><code class="lang-text">npm install shoelace-css
+</code></pre>
+<p>The main source file is <a href="../source/css/shoelace.css"><code>source/css/shoelace.css</code></a>. This bootstraps the entire project by importing core variables and all of Shoelace’s components.</p>
+<p>If you don’t need everything, just load <a href="../source/css/variables.css"><code>source/css/variables.css</code></a> along with the components you want.</p>
+
+        </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-secondary">
+      1.0.0-beta24
+    </p>
+
+    <p class="mar-y-sm 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>
+
+    <p class="text-small text-secondary">
+      <a href="https://keycdn.com/" class="text-secondary">Accelerated by KeyCDN</a> &middot;
+      &copy; A Beautiful Site, LLC
+    </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');
+        }
+      });
+
+      // Intercept dropdown clicks for the demo
+      $('.dropdown').on('select', function(event) {
+        event.preventDefault();
+      });
+    });
+  </script>
+  <script async defer src="https://buttons.github.io/buttons.js"></script>
+</body>
+</html>

docs/loaders.html

@@ -0,0 +1,176 @@
+<!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-secondary text-small">
+      A back to the basics CSS starter kit. For when you don’t need the whole boot.
+    </p>
+  </header>
+
+  <main class="container">
+    <div class="row">
+      <div class="col-md-3">
+        <ul id="nav">
+          <li><a href="installing.html">Installing</a></li>
+          <li><a href="customizing.html">Customizing</a></li>
+          <li><a href="content.html">Content</a></li>
+          <li><a href="alerts.html">Alerts</a></li>
+          <li><a href="badges.html">Badges</a></li>
+          <li><a href="buttons.html">Buttons</a></li>
+          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="file-buttons.html">File Buttons</a></li>
+          <li><a href="forms.html">Forms</a></li>
+          <li><a href="grid-system.html">Grid System</a></li>
+          <li><a href="loaders.html">Loaders</a></li>
+          <li><a href="progress-bars.html">Progress Bars</a></li>
+          <li><a href="switches.html">Switches</a></li>
+          <li><a href="tabs.html">Tabs</a></li>
+          <li><a href="tables.html">Tables</a></li>
+          <li><a href="utilities.html">Utilities</a></li>
+          <li><a href="icons.html">Icons</a></li>
+          <li><a href="browser-support.html">Browser Support</a></li>
+          <li><a href="attribution.html">Attribution</a></li>
+        </ul>
+      </div>
+
+      <div class="col-md-9">
+        <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-xs|sm|lg|xl</code> modifiers to change the size.</p>
+<pre><code class="lang-html">&lt;span class=&quot;loader loader-xs&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;loader loader-sm&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;loader&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;loader loader-lg&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;loader loader-xl&quot;&gt;&lt;/span&gt;
+</code></pre>
+<div class="input-field">
+  <span class="loader loader-xs"></span>
+  <span class="loader loader-sm"></span>
+  <span class="loader"></span>
+  <span class="loader loader-lg"></span>
+  <span class="loader loader-xl"></span>
+</div>
+
+<h3 id="variations">Variations</h3>
+<p>Use the <code>loader-*</code> modifier to create variations.</p>
+<pre><code class="lang-html">&lt;span class=&quot;loader loader-secondary&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;loader loader-success&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;loader loader-info&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;loader loader-warning&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;loader loader-danger&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;loader loader-light&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;loader loader-dark&quot;&gt;&lt;/span&gt;
+</code></pre>
+<p><span class="loader loader-secondary"></span>
+<span class="loader loader-success"></span>
+<span class="loader loader-info"></span>
+<span class="loader loader-warning"></span>
+<span class="loader loader-danger"></span>
+<span class="loader loader-light"></span>
+<span class="loader loader-dark"></span></p>
+<h3 id="background-loaders">Background Loaders</h3>
+<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-xs|sm|lg|xl</code> modifiers to change the size.</p>
+<pre><code class="lang-html">&lt;div class=&quot;loader-bg loader-bg-xs&quot;&gt;&lt;/div&gt;
+&lt;div class=&quot;loader-bg loader-bg-sm&quot;&gt;&lt;/div&gt;
+&lt;div class=&quot;loader-bg&quot;&gt;&lt;/div&gt;
+&lt;div class=&quot;loader-bg loader-bg-lg&quot;&gt;&lt;/div&gt;
+&lt;div class=&quot;loader-bg loader-bg-xl&quot;&gt;&lt;/div&gt;
+</code></pre>
+<div class="loader-example clearfix">
+  <div class="loader-bg loader-bg-xs"></div>
+  <div class="loader-bg loader-bg-sm"></div>
+  <div class="loader-bg"></div>
+  <div class="loader-bg loader-bg-lg"></div>
+  <div class="loader-bg loader-bg-xl"></div>
+</div>
+
+<h3 id="background-variations">Background Variations</h3>
+<p>Use the <code>loader-bg-*</code> modifier to create variations.</p>
+<pre><code class="lang-html">&lt;div class=&quot;loader-bg loader-bg-secondary&quot;&gt;&lt;/div&gt;
+&lt;div class=&quot;loader-bg loader-bg-success&quot;&gt;&lt;/div&gt;
+&lt;div class=&quot;loader-bg loader-bg-info&quot;&gt;&lt;/div&gt;
+&lt;div class=&quot;loader-bg loader-bg-warning&quot;&gt;&lt;/div&gt;
+&lt;div class=&quot;loader-bg loader-bg-danger&quot;&gt;&lt;/div&gt;
+&lt;div class=&quot;loader-bg loader-bg-light&quot;&gt;&lt;/div&gt;
+&lt;div class=&quot;loader-bg loader-bg-dark&quot;&gt;&lt;/div&gt;
+</code></pre>
+<div class="loader-example clearfix">
+  <div class="loader-bg loader-bg-secondary"></div>
+  <div class="loader-bg loader-bg-success"></div>
+  <div class="loader-bg loader-bg-info"></div>
+  <div class="loader-bg loader-bg-warning"></div>
+  <div class="loader-bg loader-bg-danger"></div>
+  <div class="loader-bg loader-bg-light"></div>
+  <div class="loader-bg loader-bg-dark"></div>
+</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-secondary">
+      1.0.0-beta24
+    </p>
+
+    <p class="mar-y-sm 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>
+
+    <p class="text-small text-secondary">
+      <a href="https://keycdn.com/" class="text-secondary">Accelerated by KeyCDN</a> &middot;
+      &copy; A Beautiful Site, LLC
+    </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');
+        }
+      });
+
+      // Intercept dropdown clicks for the demo
+      $('.dropdown').on('select', function(event) {
+        event.preventDefault();
+      });
+    });
+  </script>
+  <script async defer src="https://buttons.github.io/buttons.js"></script>
+</body>
+</html>

docs/progress-bars.html

@@ -0,0 +1,218 @@
+<!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-secondary text-small">
+      A back to the basics CSS starter kit. For when you don’t need the whole boot.
+    </p>
+  </header>
+
+  <main class="container">
+    <div class="row">
+      <div class="col-md-3">
+        <ul id="nav">
+          <li><a href="installing.html">Installing</a></li>
+          <li><a href="customizing.html">Customizing</a></li>
+          <li><a href="content.html">Content</a></li>
+          <li><a href="alerts.html">Alerts</a></li>
+          <li><a href="badges.html">Badges</a></li>
+          <li><a href="buttons.html">Buttons</a></li>
+          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="file-buttons.html">File Buttons</a></li>
+          <li><a href="forms.html">Forms</a></li>
+          <li><a href="grid-system.html">Grid System</a></li>
+          <li><a href="loaders.html">Loaders</a></li>
+          <li><a href="progress-bars.html">Progress Bars</a></li>
+          <li><a href="switches.html">Switches</a></li>
+          <li><a href="tabs.html">Tabs</a></li>
+          <li><a href="tables.html">Tables</a></li>
+          <li><a href="utilities.html">Utilities</a></li>
+          <li><a href="icons.html">Icons</a></li>
+          <li><a href="browser-support.html">Browser Support</a></li>
+          <li><a href="attribution.html">Attribution</a></li>
+        </ul>
+      </div>
+
+      <div class="col-md-9">
+        <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-[xs|sm|lg|xl]</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-xs&quot;&gt;
+  &lt;div class=&quot;progress-bar w-20&quot;&gt;20%&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;progress progress-sm&quot;&gt;
+  &lt;div class=&quot;progress-bar w-40&quot;&gt;40%&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;progress&quot;&gt;
+  &lt;div class=&quot;progress-bar w-60&quot;&gt;60%&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;progress progress-lg&quot;&gt;
+  &lt;div class=&quot;progress-bar w-70&quot;&gt;80%&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;progress progress-xl&quot;&gt;
+  &lt;div class=&quot;progress-bar w-100&quot;&gt;100%&lt;/div&gt;
+&lt;/div&gt;
+</code></pre>
+<div class="progress progress-xs">
+  <div class="progress-bar w-20">20%</div>
+</div>
+
+<div class="progress progress-sm">
+  <div class="progress-bar w-40">40%</div>
+</div>
+
+<div class="progress">
+  <div class="progress-bar w-60">60%</div>
+</div>
+
+<div class="progress progress-lg">
+  <div class="progress-bar w-70">80%</div>
+</div>
+
+<div class="progress progress-xl">
+  <div class="progress-bar w-100">100%</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>
+
+<h3 id="variations">Variations</h3>
+<p>Use the <code>progress-*</code> modifier to create variations.</p>
+<pre><code class="lang-html">&lt;div class=&quot;progress progress-secondary&quot;&gt;
+  &lt;div class=&quot;progress-bar w-50&quot;&gt;50%&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;progress progress-success&quot;&gt;
+  &lt;div class=&quot;progress-bar w-50&quot;&gt;50%&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;progress progress-info&quot;&gt;
+  &lt;div class=&quot;progress-bar w-50&quot;&gt;50%&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;progress progress-warning&quot;&gt;
+  &lt;div class=&quot;progress-bar w-50&quot;&gt;50%&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;progress progress-danger&quot;&gt;
+  &lt;div class=&quot;progress-bar w-50&quot;&gt;50%&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;progress progress-light&quot;&gt;
+  &lt;div class=&quot;progress-bar w-50&quot;&gt;50%&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;progress progress-dark&quot;&gt;
+  &lt;div class=&quot;progress-bar w-50&quot;&gt;50%&lt;/div&gt;
+&lt;/div&gt;
+</code></pre>
+<div class="progress progress-secondary">
+  <div class="progress-bar w-50">50%</div>
+</div>
+
+<div class="progress progress-success">
+  <div class="progress-bar w-50">50%</div>
+</div>
+
+<div class="progress progress-info">
+  <div class="progress-bar w-50">50%</div>
+</div>
+
+<div class="progress progress-warning">
+  <div class="progress-bar w-50">50%</div>
+</div>
+
+<div class="progress progress-danger">
+  <div class="progress-bar w-50">50%</div>
+</div>
+
+<div class="progress progress-light">
+  <div class="progress-bar w-50">50%</div>
+</div>
+
+<div class="progress progress-dark">
+  <div class="progress-bar w-50">50%</div>
+</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-secondary">
+      1.0.0-beta24
+    </p>
+
+    <p class="mar-y-sm 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>
+
+    <p class="text-small text-secondary">
+      <a href="https://keycdn.com/" class="text-secondary">Accelerated by KeyCDN</a> &middot;
+      &copy; A Beautiful Site, LLC
+    </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');
+        }
+      });
+
+      // Intercept dropdown clicks for the demo
+      $('.dropdown').on('select', function(event) {
+        event.preventDefault();
+      });
+    });
+  </script>
+  <script async defer src="https://buttons.github.io/buttons.js"></script>
+</body>
+</html>

docs/switches.html

@@ -0,0 +1,244 @@
+<!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-secondary text-small">
+      A back to the basics CSS starter kit. For when you don’t need the whole boot.
+    </p>
+  </header>
+
+  <main class="container">
+    <div class="row">
+      <div class="col-md-3">
+        <ul id="nav">
+          <li><a href="installing.html">Installing</a></li>
+          <li><a href="customizing.html">Customizing</a></li>
+          <li><a href="content.html">Content</a></li>
+          <li><a href="alerts.html">Alerts</a></li>
+          <li><a href="badges.html">Badges</a></li>
+          <li><a href="buttons.html">Buttons</a></li>
+          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="file-buttons.html">File Buttons</a></li>
+          <li><a href="forms.html">Forms</a></li>
+          <li><a href="grid-system.html">Grid System</a></li>
+          <li><a href="loaders.html">Loaders</a></li>
+          <li><a href="progress-bars.html">Progress Bars</a></li>
+          <li><a href="switches.html">Switches</a></li>
+          <li><a href="tabs.html">Tabs</a></li>
+          <li><a href="tables.html">Tables</a></li>
+          <li><a href="utilities.html">Utilities</a></li>
+          <li><a href="icons.html">Icons</a></li>
+          <li><a href="browser-support.html">Browser Support</a></li>
+          <li><a href="attribution.html">Attribution</a></li>
+        </ul>
+      </div>
+
+      <div class="col-md-9">
+        <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; id=&quot;switch-1&quot;&gt;
+  &lt;label for=&quot;switch-1&quot;&gt;Switch 1&lt;/label&gt;
+&lt;/span&gt;
+
+&lt;span class=&quot;switch&quot;&gt;
+  &lt;input type=&quot;checkbox&quot; id=&quot;switch-2&quot; checked&gt;
+  &lt;label for=&quot;switch-2&quot;&gt;Switch 2&lt;/label&gt;
+&lt;/span&gt;
+</code></pre>
+<div class="input-field">
+  <span class="switch">
+    <input type="checkbox" id="switch-1">
+    <label for="switch-1">Switch 1</label>
+  </span>
+
+  <span class="switch">
+    <input type="checkbox" id="switch-2" checked>
+    <label for="switch-2">Switch 2</label>
+  </span>
+</div>
+
+<p>Use the <code>switch-[xs|sm|lg|xl]</code> modifiers to change the size of a switch.</p>
+<pre><code class="lang-html">&lt;span class=&quot;switch switch-xs&quot;&gt;
+  &lt;input type=&quot;checkbox&quot; id=&quot;switch-xs&quot;&gt;
+  &lt;label for=&quot;switch-xs&quot;&gt;XS&lt;/label&gt;
+&lt;/span&gt;
+
+&lt;span class=&quot;switch switch-sm&quot;&gt;
+  &lt;input type=&quot;checkbox&quot; id=&quot;switch-sm&quot;&gt;
+  &lt;label for=&quot;switch-sm&quot;&gt;SM&lt;/label&gt;
+&lt;/span&gt;
+
+&lt;span class=&quot;switch&quot;&gt;
+  &lt;input type=&quot;checkbox&quot; id=&quot;switch-default&quot;&gt;
+  &lt;label for=&quot;switch-default&quot;&gt;Default&lt;/label&gt;
+&lt;/span&gt;
+
+&lt;span class=&quot;switch switch-lg&quot;&gt;
+  &lt;input type=&quot;checkbox&quot; id=&quot;switch-lg&quot;&gt;
+  &lt;label for=&quot;switch-lg&quot;&gt;LG&lt;/label&gt;
+&lt;/span&gt;
+
+&lt;span class=&quot;switch switch-xl&quot;&gt;
+  &lt;input type=&quot;checkbox&quot; id=&quot;switch-xl&quot;&gt;
+  &lt;label for=&quot;switch-xl&quot;&gt;XL&lt;/label&gt;
+&lt;/span&gt;
+</code></pre>
+<div class="input-field">
+  <span class="switch switch-xs">
+    <input type="checkbox" id="switch-xs">
+    <label for="switch-xs">XS</label>
+  </span>
+
+  <span class="switch switch-sm">
+    <input type="checkbox" id="switch-sm">
+    <label for="switch-sm">SM</label>
+  </span>
+
+  <span class="switch">
+    <input type="checkbox" id="switch-default">
+    <label for="switch-default">Default</label>
+  </span>
+
+  <span class="switch switch-lg">
+    <input type="checkbox" id="switch-lg">
+    <label for="switch-lg">LG</label>
+  </span>
+
+  <span class="switch switch-xl">
+    <input type="checkbox" id="switch-xl">
+    <label for="switch-xl">XL</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>
+<pre><code class="lang-html">&lt;span class=&quot;switch&quot;&gt;
+  &lt;input type=&quot;checkbox&quot; disabled id=&quot;switch-disabled&quot;&gt;
+  &lt;label for=&quot;switch-disabled&quot;&gt;Disabled&lt;/label&gt;
+&lt;/span&gt;
+</code></pre>
+<div class="input-field">
+  <span class="switch">
+    <input type="checkbox" disabled id="switch-disabled">
+    <label for="switch-disabled">Disabled</label>
+  </span>
+</div>
+
+
+<h3 id="variations">Variations</h3>
+<p>Use the <code>switch-*</code> modifier to create variations.</p>
+<pre><code class="lang-html">&lt;span class=&quot;switch switch-secondary&quot;&gt;...&lt;/span&gt;
+&lt;span class=&quot;switch switch-success&quot;&gt;...&lt;/span&gt;
+&lt;span class=&quot;switch switch-info&quot;&gt;...&lt;/span&gt;
+&lt;span class=&quot;switch switch-warning&quot;&gt;...&lt;/span&gt;
+&lt;span class=&quot;switch switch-danger&quot;&gt;...&lt;/span&gt;
+&lt;span class=&quot;switch switch-light&quot;&gt;...&lt;/span&gt;
+&lt;span class=&quot;switch switch-dark&quot;&gt;...&lt;/span&gt;
+</code></pre>
+<p><span class="switch switch-secondary">
+  <input type="checkbox" id="variation-secondary" checked>
+  <label for="variation-secondary">Secondary</label>
+</span></p>
+<p><span class="switch switch-success">
+  <input type="checkbox" id="variation-success" checked>
+  <label for="variation-success">Success</label>
+</span></p>
+<p><span class="switch switch-info">
+  <input type="checkbox" id="variation-info" checked>
+  <label for="variation-info">Info</label>
+</span></p>
+<p><span class="switch switch-warning">
+  <input type="checkbox" id="variation-warning" checked>
+  <label for="variation-warning">Warning</label>
+</span></p>
+<p><span class="switch switch-danger">
+  <input type="checkbox" id="variation-danger" checked>
+  <label for="variation-danger">Danger</label>
+</span></p>
+<p><span class="switch switch-light">
+  <input type="checkbox" id="variation-light" checked>
+  <label for="variation-light">Light</label>
+</span></p>
+<p><span class="switch switch-dark">
+  <input type="checkbox" id="variation-dark" checked>
+  <label for="variation-dark">Dark</label>
+</span></p>
+
+        </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-secondary">
+      1.0.0-beta24
+    </p>
+
+    <p class="mar-y-sm 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>
+
+    <p class="text-small text-secondary">
+      <a href="https://keycdn.com/" class="text-secondary">Accelerated by KeyCDN</a> &middot;
+      &copy; A Beautiful Site, LLC
+    </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');
+        }
+      });
+
+      // Intercept dropdown clicks for the demo
+      $('.dropdown').on('select', function(event) {
+        event.preventDefault();
+      });
+    });
+  </script>
+  <script async defer src="https://buttons.github.io/buttons.js"></script>
+</body>
+</html>

docs/tables.html

@@ -0,0 +1,187 @@
+<!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-secondary text-small">
+      A back to the basics CSS starter kit. For when you don’t need the whole boot.
+    </p>
+  </header>
+
+  <main class="container">
+    <div class="row">
+      <div class="col-md-3">
+        <ul id="nav">
+          <li><a href="installing.html">Installing</a></li>
+          <li><a href="customizing.html">Customizing</a></li>
+          <li><a href="content.html">Content</a></li>
+          <li><a href="alerts.html">Alerts</a></li>
+          <li><a href="badges.html">Badges</a></li>
+          <li><a href="buttons.html">Buttons</a></li>
+          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="file-buttons.html">File Buttons</a></li>
+          <li><a href="forms.html">Forms</a></li>
+          <li><a href="grid-system.html">Grid System</a></li>
+          <li><a href="loaders.html">Loaders</a></li>
+          <li><a href="progress-bars.html">Progress Bars</a></li>
+          <li><a href="switches.html">Switches</a></li>
+          <li><a href="tabs.html">Tabs</a></li>
+          <li><a href="tables.html">Tables</a></li>
+          <li><a href="utilities.html">Utilities</a></li>
+          <li><a href="icons.html">Icons</a></li>
+          <li><a href="browser-support.html">Browser Support</a></li>
+          <li><a href="attribution.html">Attribution</a></li>
+        </ul>
+      </div>
+
+      <div class="col-md-9">
+        <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>
+      </div>
+  </main>
+
+  <footer id="foot">
+    <a href="../index.html">
+      <img src="../source/img/wordmark.svg" alt="Shoelace logo">
+    </a>
+
+    <p class="text-small text-secondary">
+      1.0.0-beta24
+    </p>
+
+    <p class="mar-y-sm 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>
+
+    <p class="text-small text-secondary">
+      <a href="https://keycdn.com/" class="text-secondary">Accelerated by KeyCDN</a> &middot;
+      &copy; A Beautiful Site, LLC
+    </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');
+        }
+      });
+
+      // Intercept dropdown clicks for the demo
+      $('.dropdown').on('select', function(event) {
+        event.preventDefault();
+      });
+    });
+  </script>
+  <script async defer src="https://buttons.github.io/buttons.js"></script>
+</body>
+</html>

docs/tabs.html

@@ -0,0 +1,249 @@
+<!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-secondary text-small">
+      A back to the basics CSS starter kit. For when you don’t need the whole boot.
+    </p>
+  </header>
+
+  <main class="container">
+    <div class="row">
+      <div class="col-md-3">
+        <ul id="nav">
+          <li><a href="installing.html">Installing</a></li>
+          <li><a href="customizing.html">Customizing</a></li>
+          <li><a href="content.html">Content</a></li>
+          <li><a href="alerts.html">Alerts</a></li>
+          <li><a href="badges.html">Badges</a></li>
+          <li><a href="buttons.html">Buttons</a></li>
+          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="file-buttons.html">File Buttons</a></li>
+          <li><a href="forms.html">Forms</a></li>
+          <li><a href="grid-system.html">Grid System</a></li>
+          <li><a href="loaders.html">Loaders</a></li>
+          <li><a href="progress-bars.html">Progress Bars</a></li>
+          <li><a href="switches.html">Switches</a></li>
+          <li><a href="tabs.html">Tabs</a></li>
+          <li><a href="tables.html">Tables</a></li>
+          <li><a href="utilities.html">Utilities</a></li>
+          <li><a href="icons.html">Icons</a></li>
+          <li><a href="browser-support.html">Browser Support</a></li>
+          <li><a href="attribution.html">Attribution</a></li>
+        </ul>
+      </div>
+
+      <div class="col-md-9">
+        <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 tabs, and the tab panes. Also note that each tab links to its respective tab pane’s <code>id</code>.</p>
+<p>For initial rendering, make sure the appropriate tab and tab pane have the <code>active</code> class.</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 when used with the <a href="grid-system.html">grid system</a> and <code>tabs-nav-block</code>.</p>
+<pre><code class="lang-html">&lt;div class=&quot;tabs&quot;&gt;
+  &lt;div class=&quot;row&quot;&gt;
+    &lt;div class=&quot;col-4&quot;&gt;
+      &lt;nav class=&quot;tabs-nav tabs-nav-block&quot;&gt;
+        &lt;a href=&quot;#tab-1-example-2&quot; class=&quot;active&quot;&gt;Tab 1&lt;/a&gt;
+        &lt;a href=&quot;#tab-2-example-2&quot;&gt;Tab 2&lt;/a&gt;
+        &lt;a href=&quot;#tab-3-example-2&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&gt;
+
+    &lt;div class=&quot;col-8&quot;&gt;
+      &lt;div class=&quot;tabs-pane active&quot; id=&quot;tab-1-example-2&quot;&gt;...&lt;/div&gt;
+      &lt;div class=&quot;tabs-pane&quot; id=&quot;tab-2-example-2&quot;&gt;...&lt;/div&gt;
+      &lt;div class=&quot;tabs-pane&quot; id=&quot;tab-3-example-2&quot;&gt;...&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</code></pre>
+<div class="tabs">
+  <div class="row">
+    <div class="col-4">
+      <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>
+    <div class="col-8">
+      <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>
+  </div>
+</div>
+
+<h3 id="interactivity">Interactivity</h3>
+<p>Tabs require <code>shoelace.js</code> for interactivity. You don’t need to initialize anything. Just 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>
+<p>To activate a tab programmatically, just add the <code>active</code> class to it. We use a <a href="https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver">mutation observer</a> to remove the active class on other tabs and to show/hide the appropriate tab panes automatically.</p>
+<pre><code class="lang-javascript">$(&#39;#tab-id&#39;).addClass(&#39;active&#39;);
+</code></pre>
+<p>To disable a tab, add the <code>disabled</code> class to the appropriate tab.</p>
+
+        </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-secondary">
+      1.0.0-beta24
+    </p>
+
+    <p class="mar-y-sm 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>
+
+    <p class="text-small text-secondary">
+      <a href="https://keycdn.com/" class="text-secondary">Accelerated by KeyCDN</a> &middot;
+      &copy; A Beautiful Site, LLC
+    </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');
+        }
+      });
+
+      // Intercept dropdown clicks for the demo
+      $('.dropdown').on('select', function(event) {
+        event.preventDefault();
+      });
+    });
+  </script>
+  <script async defer src="https://buttons.github.io/buttons.js"></script>
+</body>
+</html>

docs/utilities.html

@@ -0,0 +1,315 @@
+<!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-secondary text-small">
+      A back to the basics CSS starter kit. For when you don’t need the whole boot.
+    </p>
+  </header>
+
+  <main class="container">
+    <div class="row">
+      <div class="col-md-3">
+        <ul id="nav">
+          <li><a href="installing.html">Installing</a></li>
+          <li><a href="customizing.html">Customizing</a></li>
+          <li><a href="content.html">Content</a></li>
+          <li><a href="alerts.html">Alerts</a></li>
+          <li><a href="badges.html">Badges</a></li>
+          <li><a href="buttons.html">Buttons</a></li>
+          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="file-buttons.html">File Buttons</a></li>
+          <li><a href="forms.html">Forms</a></li>
+          <li><a href="grid-system.html">Grid System</a></li>
+          <li><a href="loaders.html">Loaders</a></li>
+          <li><a href="progress-bars.html">Progress Bars</a></li>
+          <li><a href="switches.html">Switches</a></li>
+          <li><a href="tabs.html">Tabs</a></li>
+          <li><a href="tables.html">Tables</a></li>
+          <li><a href="utilities.html">Utilities</a></li>
+          <li><a href="icons.html">Icons</a></li>
+          <li><a href="browser-support.html">Browser Support</a></li>
+          <li><a href="attribution.html">Attribution</a></li>
+        </ul>
+      </div>
+
+      <div class="col-md-9">
+        <div id="content">
+          <h2 id="utilities">Utilities</h2>
+<p>Shoelace provides a number of helpful utilities that make designing and prototyping easier.</p>
+<h3 id="background-utilities">Background Utilities</h3>
+<p>Background utilities can be applied to change an element’s background color.</p>
+<pre><code class="lang-html">&lt;div class=&quot;bg-primary&quot;&gt;Primary&lt;/div&gt;
+&lt;div class=&quot;bg-secondary&quot;&gt;Secondary&lt;/div&gt;
+&lt;div class=&quot;bg-success&quot;&gt;Success&lt;/div&gt;
+&lt;div class=&quot;bg-info&quot;&gt;Info&lt;/div&gt;
+&lt;div class=&quot;bg-warning&quot;&gt;Warning&lt;/div&gt;
+&lt;div class=&quot;bg-danger&quot;&gt;Danger&lt;/div&gt;
+&lt;div class=&quot;bg-light&quot;&gt;Light&lt;/div&gt;
+&lt;div class=&quot;bg-dark&quot;&gt;Dark&lt;/div&gt;
+</code></pre>
+<div class="mar-b-sm pad-sm bg-primary text-light">Primary</div>
+<div class="mar-b-sm pad-sm bg-secondary text-light">Secondary</div>
+<div class="mar-b-sm pad-sm bg-success text-light">Success</div>
+<div class="mar-b-sm pad-sm bg-info text-light">Info</div>
+<div class="mar-b-sm pad-sm bg-warning text-light">Warning</div>
+<div class="mar-b-sm pad-sm bg-danger text-light">Danger</div>
+<div class="mar-b-sm pad-sm bg-light text-dark">Light</div>
+<div class="mar-b-sm pad-sm bg-dark text-light">Dark</div>
+
+<h3 id="breakpoint-utilities">Breakpoint Utilities</h3>
+<p>Responsive breakpoints exist for five tiers of screen sizes. By default, the breakpoints are:</p>
+<ul>
+<li><code>xs</code> &rarr; 575px and below</li>
+<li><code>sm</code> &rarr; 576px – 767px</li>
+<li><code>md</code> &rarr; 768px – 991px</li>
+<li><code>lg</code> &rarr; 992px - 1199px</li>
+<li><code>xl</code> &rarr; 1200px and above</li>
+</ul>
+<p>If you’re building Shoelace from source, you can use the custom media queries found in <a href="../source/css/variables.css"><code>source/css/variables.css</code></a> to easily target various breakpoints without hard-coding screen sizes in your stylesheet.</p>
+<pre><code class="lang-css">@media (--breakpoint-xs-up) { /* xs screens and above */ }
+@media (--breakpoint-sm-up) { /* sm screens and above */ }
+@media (--breakpoint-md-up) { /* md screens and above */ }
+@media (--breakpoint-lg-up) { /* lg screens and above */ }
+@media (--breakpoint-xl-up) { /* xl screens and above */ }
+
+@media (--breakpoint-xs-down) { /* xs screens and below */ }
+@media (--breakpoint-sm-down) { /* sm screens and below */ }
+@media (--breakpoint-md-down) { /* md screens and below */ }
+@media (--breakpoint-lg-down) { /* lg screens and below */ }
+@media (--breakpoint-xl-down) { /* xl screens and below */ }
+
+@media (--breakpoint-xs-only) { /* xs screens only */ }
+@media (--breakpoint-sm-only) { /* sm screens only */ }
+@media (--breakpoint-md-only) { /* md screens only */ }
+@media (--breakpoint-lg-only) { /* lg screens only */ }
+@media (--breakpoint-xl-only) { /* xl screens only */ }
+</code></pre>
+<h3 id="display-utilities">Display Utilities</h3>
+<p>Display utilities let you hide elements based on the current breakpoint. Use <code>hide-[xs|sm|md|lg|xl]</code> to hide an element only at a specific viewport. Use <code>hide-*-up</code> to hide an element at and above a specific breakpoint. Use <code>hide-*-down</code> to hide an element at and below a specific breakpoint.</p>
+<pre><code class="lang-html">&lt;div class=&quot;row&quot;&gt;
+  &lt;div class=&quot;col-2 hide-xs&quot;&gt;hide-xs&lt;/div&gt;
+  &lt;div class=&quot;col-2 hide-sm&quot;&gt;hide-sm&lt;/div&gt;
+  &lt;div class=&quot;col-2 hide-md&quot;&gt;hide-md&lt;/div&gt;
+  &lt;div class=&quot;col-2 hide-lg&quot;&gt;hide-lg&lt;/div&gt;
+  &lt;div class=&quot;col-2 hide-xl&quot;&gt;hide-xl&lt;/div&gt;
+&lt;/div&gt;
+</code></pre>
+<div class="container grid-example">
+  <div class="row">
+    <div class="col-2 hide-xs">hide-xs</div>
+    <div class="col-2 hide-sm">hide-sm</div>
+    <div class="col-2 hide-md">hide-md</div>
+    <div class="col-2 hide-lg">hide-lg</div>
+    <div class="col-2 hide-xl">hide-xl</div>
+  </div>
+</div>
+
+<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>w-*</code> or <code>h-*</code> class and the appropriate element will be sized accordingly. Sizes are available as percentages from 0 – 100 in multiples of five.</p>
+<p>You can also use the <code>w-max-100</code> and <code>h-max-100</code> classes to set a max width and height of 100%.</p>
+<pre><code class="lang-html">&lt;div class=&quot;w-25&quot;&gt;25%&lt;/div&gt;
+&lt;div class=&quot;w-50&quot;&gt;50%&lt;/div&gt;
+&lt;div class=&quot;w-75&quot;&gt;75%&lt;/div&gt;
+&lt;div class=&quot;w-100&quot;&gt;100%&lt;/div&gt;
+
+&lt;div class=&quot;h-25&quot;&gt;25%&lt;/div&gt;
+&lt;div class=&quot;h-50&quot;&gt;50%&lt;/div&gt;
+&lt;div class=&quot;h-75&quot;&gt;75%&lt;/div&gt;
+&lt;div class=&quot;h-100&quot;&gt;100%&lt;/div&gt;
+</code></pre>
+<div class="width-sizing-example">
+  <div class="w-25">25%</div>
+  <div class="w-50">50%</div>
+  <div class="w-75">75%</div>
+  <div class="w-100">100%</div>
+</div>
+
+<div class="height-sizing-example">
+  <div class="h-25">25%</div>
+  <div class="h-50">50%</div>
+  <div class="h-75">75%</div>
+  <div class="h-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>pad-</code> or <code>mar-</code> for padding and margin, respectively. To apply spacing to all sides of an element, use the following classes.</p>
+<pre><code>pad-[0|xs|sm|md|lg|xl]
+mar-[0|xs|sm|md|lg|xl]
+</code></pre><p>Example:</p>
+<pre><code class="lang-html">&lt;div class=&quot;pad-0 mar-xl&quot;&gt;
+</code></pre>
+<p>To apply spacing to a specific side of an element, use one or more of the following classes indicating top, right, bottom, left, x (horizontal), and y (vertical):</p>
+<pre><code>pad-[t|r|b|l|x|y]-[0|xs|sm|md|lg|xl]
+mar-[t|r|b|l|x|y]-[0|xs|sm|md|lg|xl]
+</code></pre><p>Example:</p>
+<pre><code class="lang-html">&lt;div class=&quot;pad-l-md mar-b-0&quot;&gt;
+</code></pre>
+<p>You can also use <code>mar-[x|y|xy]-auto</code> to set automatic margins horizontally and/or vertically.</p>
+<h3 id="text-utilities">Text Utilities</h3>
+<p>Text utility classes can be applied to change the appearance of text.</p>
+<table class="table">
+  <thead>
+    <tr>
+      <th>Class</th>
+      <th>Example</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>text-primary</code></td>
+      <td class="text-primary">This is primary text</td>
+    </tr>
+    <tr>
+      <td><code>text-secondary</code></td>
+      <td class="text-secondary">This is secondary text</td>
+    </tr>
+    <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-light</code></td>
+      <td class="text-light">This is light text</td>
+    </tr>
+    <tr>
+      <td><code>text-dark</code></td>
+      <td class="text-dark">This is dark 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-muted</code></td>
+      <td class="text-muted">This is muted 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>
+
+        </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-secondary">
+      1.0.0-beta24
+    </p>
+
+    <p class="mar-y-sm 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>
+
+    <p class="text-small text-secondary">
+      <a href="https://keycdn.com/" class="text-secondary">Accelerated by KeyCDN</a> &middot;
+      &copy; A Beautiful Site, LLC
+    </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');
+        }
+      });
+
+      // Intercept dropdown clicks for the demo
+      $('.dropdown').on('select', function(event) {
+        event.preventDefault();
+      });
+    });
+  </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-beta3",
+  "version": "1.0.0-beta24",
   "author": "Cory LaViska",
   "homepage": "https://shoelace.style/",
   "license": "MIT",
@@ -10,12 +10,26 @@
     "url": "https://github.com/claviska/shoelace-css"
   },
   "devDependencies": {
-    "chalk": "^2.0.1",
-    "clean-css": "^4.1.7",
+    "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.11",
+    "postcss-cssnext": "^3.0.2",
+    "postcss-import": "^10.0.0",
+    "s3": "^4.4.0",
+    "stylelint": "^8.1.1",
+    "stylelint-config-standard": "^17.0.0",
+    "uglify-js": "^3.1.1",
+    "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('--dist', 'Builds a dist')
-  .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 dist task
-if(Program.dist) {
-  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 --dist
-  if(Program.s3) {
-    console.error(Chalk.yellow('The --s3 flag can only be used with --dist'));
-    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,164 @@
+body {
+  border-top: solid .3rem #0074d9;
+}
+
+#head {
+  padding: 0 2rem;
+  margin: 2rem 0;
+}
+
+#head img {
+  width: 24rem;
+  margin: 0 auto;
+  display: inline-block;
+}
+
+#nav {
+  text-align: right;
+  list-style: none;
+  border-right: solid 1px #ddd;
+  padding-right: 1rem;
+}
+
+#nav li {
+  margin: .5rem 0;
+  display: block;
+}
+
+#nav a.current {
+  color: #aaa;
+  cursor: default;
+}
+
+@media screen and (max-width: 767px) {
+  #nav {
+    border: none;
+    text-align: center;
+    padding: 0;
+    margin: 0 0 2rem 0;
+  }
+
+  #nav li {
+    margin: .5rem;
+    display: inline-block;
+  }
+}
+
+#foot {
+  text-align: center;
+  margin: 2rem 0;
+}
+
+#foot img {
+  width: 14rem;
+  display: inline-block;
+  margin: .5rem 0;
+}
+
+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: #aaa;
+}
+
+pre {
+  margin-bottom: 1.5rem !important; /* Prism overrides our bottom margin */
+}
+
+pre code {
+  white-space: pre;
+  padding: 0;
+  display: block;
+}
+
+a code {
+  color: inherit;
+}
+
+.browsers {
+  text-align: center;
+}
+
+.browsers img {
+  max-width: 6rem;
+  display: inline-block;
+  margin: 0 1rem 1rem 0;
+}
+
+/* Sizing examples */
+.width-sizing-example {
+  border: solid 1px #ddd;
+  padding: 1rem;
+  margin-bottom: 1.5rem;
+}
+
+.width-sizing-example div {
+  background: #0074d9;
+  color: white;
+  text-align: center;
+  padding: .25rem;
+  margin-bottom: 1.5rem;
+}
+
+.width-sizing-example div:last-child {
+  margin-bottom: 0;
+}
+
+.height-sizing-example {
+  border: solid 1px #ddd;
+  height: 15rem;
+  padding: 1rem .5rem;
+  margin-bottom: 1.5rem;
+}
+
+.height-sizing-example div {
+  width: calc(25% - 1rem);
+  float: left;
+  background: #0074d9;
+  color: white;
+  text-align: center;
+  padding: .25rem;
+  margin: 0 .5rem;
+}
+
+/* Loader example */
+.loader-example {
+  margin-left: -.5rem;
+  margin-right: -.5rem;
+}
+
+.loader-example div {
+  float: left;
+  width: 6rem;
+  height: 6rem;
+  border: dashed 1px #ddd;
+  margin: 0 .5rem 1rem .5rem;
+}
+
+/* Grid example */
+.grid-example {
+  margin-bottom: 1.5rem;
+}
+
+.grid-example .row .col,
+.grid-example .row [class*="col-"] {
+  background: #0074d9;
+  border: solid 1px white;
+  color: white;
+  text-align: center;
+  padding-top: .5rem;
+  padding-bottom: .5rem;
+}
+
+.grid-example .row .row .col,
+.grid-example .row .row [class*="col-"] {
+  background: tomato;
+  margin-top: .5rem;
+  margin-bottom: .5rem;
+}

source/css/_homepage.css

@@ -0,0 +1,24 @@
+body {
+  border-top: solid .3rem #0074d9;
+}
+
+#head {
+  padding: 0 2rem;
+  margin: 2rem 0;
+}
+
+#head img {
+  width: 24rem;
+  margin: 0 auto;
+  display: inline-block;
+}
+
+pre {
+  margin-bottom: 1rem !important; /* Prism overrides our bottom margin */
+}
+
+pre code {
+  white-space: pre;
+  padding: 0;
+  display: block;
+}

source/css/alerts.css

@@ -2,28 +2,68 @@
 
 .alert {
   color: var(--alert-color);
-  background-color: var(--alert-bg-color-primary);
+  background-color: var(--alert-bg-color);
+  border-color: var(--alert-border-color);
+  border-style: solid;
+  border-width: var(--alert-border-width);
   border-radius: var(--alert-border-radius);
-  padding: var(--alert-spacing-y) var(--alert-spacing-x);
+  padding: var(--alert-padding-y) var(--alert-padding-x);
   margin-top: 0;
-  margin-bottom: 1rem;
-}
+  margin-bottom: 1.5rem;
 
-.alert:empty {
-  display: none;
-}
+  &:empty {
+    display: none;
+  }
 
-.alert-success { background-color: var(--alert-bg-color-success); }
-.alert-info { background-color: var(--alert-bg-color-info); }
-.alert-warning { background-color: var(--alert-bg-color-warning); }
-.alert-danger { background-color: var(--alert-bg-color-danger); }
-.alert-inverse { background-color: var(--alert-bg-color-inverse); }
+  & a {
+    color: currentcolor;
+    font-weight: var(--font-weight-bold);
+  }
 
-.alert a {
-  color: inherit;
-  text-decoration: underline;
-}
+  & > :last-child {
+    margin-bottom: 0;
+  }
 
-.alert :last-child {
-  margin-bottom: 0;
+  /* Variations */
+  &.alert-secondary {
+    color: var(--alert-color-secondary);
+    background-color: var(--alert-bg-color-secondary);
+    border-color: var(--alert-border-color-secondary);
+  }
+
+  &.alert-info {
+    color: var(--alert-color-info);
+    background-color: var(--alert-bg-color-info);
+    border-color: var(--alert-border-color-info);
+  }
+
+  &.alert-success {
+    color: var(--alert-color-success);
+    background-color: var(--alert-bg-color-success);
+    border-color: var(--alert-border-color-success);
+  }
+
+  &.alert-warning {
+    color: var(--alert-color-warning);
+    background-color: var(--alert-bg-color-warning);
+    border-color: var(--alert-border-color-warning);
+  }
+
+  &.alert-danger {
+    color: var(--alert-color-danger);
+    background-color: var(--alert-bg-color-danger);
+    border-color: var(--alert-border-color-danger);
+  }
+
+  &.alert-light {
+    color: var(--alert-color-light);
+    background-color: var(--alert-bg-color-light);
+    border-color: var(--alert-border-color-light);
+  }
+
+  &.alert-dark {
+    color: var(--alert-color-dark);
+    background-color: var(--alert-bg-color-dark);
+    border-color: var(--alert-border-color-dark);
+  }
 }

source/css/badges.css

@@ -2,21 +2,142 @@
 
 .badge {
   font-size: var(--badge-font-size);
-  font-weight: var(--badge-font-weight);
   color: var(--badge-color);
-  background-color: var(--badge-bg-color-primary);
+  background-color: var(--badge-bg-color);
   border-radius: var(--badge-border-radius);
-  padding: var(--badge-spacing-y) var(--badge-spacing-x);
+  padding: .2em .6em;
   vertical-align: baseline;
   display: inline-block;
+  transition: var(--badge-speed) all;
+
+  &:empty {
+    display: none;
+  }
+
+  /* Variations */
+  &.badge-secondary {
+    color: var(--badge-color-secondary);
+    background-color: var(--badge-bg-color-secondary);
+  }
+
+  &.badge-success {
+    color: var(--badge-color-success);
+    background-color: var(--badge-bg-color-success);
+  }
+
+  &.badge-info {
+    color: var(--badge-color-info);
+    background-color: var(--badge-bg-color-info);
+  }
+
+  &.badge-warning {
+    color: var(--badge-color-warning);
+    background-color: var(--badge-bg-color-warning);
+  }
+
+  &.badge-danger {
+    color: var(--badge-color-danger);
+    background-color: var(--badge-bg-color-danger);
+  }
+
+  &.badge-light {
+    color: var(--badge-color-light);
+    background-color: var(--badge-bg-color-light);
+  }
+
+  &.badge-dark {
+    color: var(--badge-color-dark);
+    background-color: var(--badge-bg-color-dark);
+  }
 }
 
-.badge:empty {
-  display: none;
-}
+/* Badge links */
+a.badge {
+  &:hover {
+    color: var(--badge-color);
+    background-color: color(var(--badge-bg-color) shade(10%));
+    text-decoration: none;
+  }
 
-.badge-success { background-color: var(--badge-bg-color-success); }
-.badge-info { background-color: var(--badge-bg-color-info); }
-.badge-warning { background-color: var(--badge-bg-color-warning); }
-.badge-danger { background-color: var(--badge-bg-color-danger); }
-.badge-inverse { background-color: var(--badge-bg-color-inverse); }
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 var(--badge-focus-width) color(var(--badge-bg-color) alpha(50%));
+  }
+
+  &.badge-secondary {
+    &:hover {
+      color: var(--badge-color-secondary);
+      background-color: color(var(--badge-bg-color-secondary) shade(10%));
+    }
+
+    &:focus {
+      box-shadow: 0 0 0 var(--badge-focus-width) color(var(--badge-bg-color-secondary) alpha(50%));
+    }
+  }
+
+  &.badge-success {
+    &:hover {
+      color: var(--badge-color-success);
+      background-color: color(var(--badge-bg-color-success) shade(10%));
+    }
+
+    &:focus {
+      box-shadow: 0 0 0 var(--badge-focus-width) color(var(--badge-bg-color-success) alpha(50%));
+    }
+  }
+
+  &.badge-info {
+    &:hover {
+      color: var(--badge-color-info);
+      background-color: color(var(--badge-bg-color-info) shade(10%));
+    }
+
+    &:focus {
+      box-shadow: 0 0 0 var(--badge-focus-width) color(var(--badge-bg-color-info) alpha(50%));
+    }
+  }
+
+  &.badge-warning {
+    &:hover {
+      color: var(--badge-color-warning);
+      background-color: color(var(--badge-bg-color-warning) shade(10%));
+    }
+
+    &:focus {
+      box-shadow: 0 0 0 var(--badge-focus-width) color(var(--badge-bg-color-warning) alpha(50%));
+    }
+  }
+
+  &.badge-danger {
+    &:hover {
+      color: var(--badge-color-danger);
+      background-color: color(var(--badge-bg-color-danger) shade(10%));
+    }
+
+    &:focus {
+      box-shadow: 0 0 0 var(--badge-focus-width) color(var(--badge-bg-color-danger) alpha(50%));
+    }
+  }
+
+  &.badge-light {
+    &:hover {
+      color: var(--badge-color-light);
+      background-color: color(var(--badge-bg-color-light) shade(10%));
+    }
+
+    &:focus {
+      box-shadow: 0 0 0 var(--badge-focus-width) color(var(--badge-bg-color-light) alpha(50%));
+    }
+  }
+
+  &.badge-dark {
+    &:hover {
+      color: var(--badge-color-dark);
+      background-color: color(var(--badge-bg-color-dark) tint(10%));
+    }
+
+    &:focus {
+      box-shadow: 0 0 0 var(--badge-focus-width) color(var(--badge-bg-color-dark) alpha(50%));
+    }
+  }
+}

source/css/buttons.css

@@ -8,87 +8,433 @@ button,
   text-align: center;
   text-decoration: none;
   color: var(--button-color);
-  background-color: var(--button-bg-color-primary);
+  background-color: var(--button-bg-color);
   border-radius: var(--button-border-radius);
-  border: none;
-  height: var(--input-height);
-  line-height: 1;
+  border-style: solid;
+  border-width: var(--button-border-width);
+  border-color: var(--button-bg-color);
+  border-top-color: color(var(--button-bg-color) tint(10%));
+  border-bottom-color: color(var(--button-bg-color) shade(10%));
+  height: var(--button-height);
+  line-height: calc(var(--button-height) - var(--button-border-width) * 2);
   user-select: none;
   vertical-align: middle;
   white-space: nowrap;
-  padding: calc(var(--component-spacing) * .5) calc(var(--component-spacing) * .75);
-  box-shadow: var(--button-box-shadow);
+  padding: 0 .75em; /* ems for relative sizing */
   cursor: pointer;
   display: inline-block;
-  transition: .1s box-shadow, .1s background-color, .1s color;
+  transition: var(--button-speed) all;
+
+  &:hover {
+    color: var(--button-color);
+    text-decoration: none;
+    background-color: color(var(--button-bg-color) shade(10%));
+    border-color: color(var(--button-bg-color) shade(10%));
+    border-top-color: color(var(--button-bg-color) tint(0%));
+    border-bottom-color: color(var(--button-bg-color) shade(20%));
+  }
+
+  &:active,
+  &.active {
+    background-color: color(var(--button-bg-color) shade(10%));
+    border-color: color(var(--button-bg-color) shade(10%));
+    border-top-color: color(var(--button-bg-color) shade(20%));
+    border-bottom-color: color(var(--button-bg-color) shade(10%));
+  }
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 var(--button-focus-width) color(var(--button-bg-color) alpha(50%));
+  }
+
+  &:disabled,
+  &.disabled {
+    background-color: color(var(--button-bg-color) shade(10%));
+    border-top-color: color(var(--button-bg-color) tint(10%));
+    border-bottom-color: color(var(--button-bg-color) shade(10%));
+    box-shadow: none;
+    text-decoration: none;
+    opacity: .5;
+    cursor: not-allowed;
+  }
+
+  /* Sizes */
+  &.button-xs {
+    font-size: var(--button-font-size-xs);
+    height: var(--button-height-xs);
+    line-height: calc(var(--button-height-xs) - var(--button-border-width) * 2);
+  }
+
+  &.button-sm {
+    font-size: var(--button-font-size-sm);
+    height: var(--button-height-sm);
+    line-height: calc(var(--button-height-sm) - var(--button-border-width) * 2);
+  }
+
+  &.button-lg {
+    font-size: var(--button-font-size-lg);
+    height: var(--button-height-lg);
+    line-height: calc(var(--button-height-lg) - var(--button-border-width) * 2);
+  }
+
+  &.button-xl {
+    font-size: var(--button-font-size-xl);
+    height: var(--button-height-xl);
+    line-height: calc(var(--button-height-xl) - var(--button-border-width) * 2);
+  }
+
+  /* Variations */
+  &.button-secondary {
+    color: var(--button-color-secondary);
+    background-color: var(--button-bg-color-secondary);
+    border-color: var(--button-bg-color-secondary);
+    border-top-color: color(var(--button-bg-color-secondary) tint(10%));
+    border-bottom-color: color(var(--button-bg-color-secondary) shade(10%));
+
+    &:hover {
+      color: var(--button-color-secondary);
+      background-color: color(var(--button-bg-color-secondary) shade(10%));
+      border-color: color(var(--button-bg-color-secondary) shade(10%));
+      border-top-color: color(var(--button-bg-color-secondary) tint(0%));
+      border-bottom-color: color(var(--button-bg-color-secondary) shade(20%));
+    }
+
+    &:active,
+    &.active {
+      background-color: color(var(--button-bg-color-secondary) shade(10%));
+      border-color: color(var(--button-bg-color-secondary) shade(10%));
+      border-top-color: color(var(--button-bg-color-secondary) shade(20%));
+      border-bottom-color: color(var(--button-bg-color-secondary) shade(10%));
+    }
+
+    &:focus {
+      outline: none;
+      box-shadow: 0 0 0 var(--button-focus-width) color(var(--button-bg-color-secondary) alpha(50%));
+    }
+
+    &:disabled,
+    &.disabled {
+      background-color: color(var(--button-bg-color-secondary) shade(10%));
+      border-top-color: color(var(--button-bg-color-secondary) tint(10%));
+      border-bottom-color: color(var(--button-bg-color-secondary) shade(10%));
+      box-shadow: none;
+    }
+  }
+
+  &.button-success {
+    color: var(--button-color-success);
+    background-color: var(--button-bg-color-success);
+    border-color: var(--button-bg-color-success);
+    border-top-color: color(var(--button-bg-color-success) tint(10%));
+    border-bottom-color: color(var(--button-bg-color-success) shade(10%));
+
+    &:hover {
+      color: var(--button-color-success);
+      background-color: color(var(--button-bg-color-success) shade(10%));
+      border-color: color(var(--button-bg-color-success) shade(10%));
+      border-top-color: color(var(--button-bg-color-success) tint(0%));
+      border-bottom-color: color(var(--button-bg-color-success) shade(20%));
+    }
+
+    &:active,
+    &.active {
+      background-color: color(var(--button-bg-color-success) shade(10%));
+      border-color: color(var(--button-bg-color-success) shade(10%));
+      border-top-color: color(var(--button-bg-color-success) shade(20%));
+      border-bottom-color: color(var(--button-bg-color-success) shade(10%));
+    }
+
+    &:focus {
+      outline: none;
+      box-shadow: 0 0 0 var(--button-focus-width) color(var(--button-bg-color-success) alpha(50%));
+    }
+
+    &:disabled,
+    &.disabled {
+      background-color: color(var(--button-bg-color-success) shade(10%));
+      border-top-color: color(var(--button-bg-color-success) tint(10%));
+      border-bottom-color: color(var(--button-bg-color-success) shade(10%));
+      box-shadow: none;
+    }
+  }
+
+  &.button-info {
+    color: var(--button-color-info);
+    background-color: var(--button-bg-color-info);
+    border-color: var(--button-bg-color-info);
+    border-top-color: color(var(--button-bg-color-info) tint(10%));
+    border-bottom-color: color(var(--button-bg-color-info) shade(10%));
+
+    &:hover {
+      color: var(--button-color-info);
+      background-color: color(var(--button-bg-color-info) shade(10%));
+      border-color: color(var(--button-bg-color-info) shade(10%));
+      border-top-color: color(var(--button-bg-color-info) tint(0%));
+      border-bottom-color: color(var(--button-bg-color-info) shade(20%));
+    }
+
+    &:active,
+    &.active {
+      background-color: color(var(--button-bg-color-info) shade(10%));
+      border-color: color(var(--button-bg-color-info) shade(10%));
+      border-top-color: color(var(--button-bg-color-info) shade(20%));
+      border-bottom-color: color(var(--button-bg-color-info) shade(10%));
+    }
+
+    &:focus {
+      outline: none;
+      box-shadow: 0 0 0 var(--button-focus-width) color(var(--button-bg-color-info) alpha(50%));
+    }
+
+    &:disabled,
+    &.disabled {
+      background-color: color(var(--button-bg-color-info) shade(10%));
+      border-top-color: color(var(--button-bg-color-info) tint(10%));
+      border-bottom-color: color(var(--button-bg-color-info) shade(10%));
+      box-shadow: none;
+    }
+  }
+
+  &.button-warning {
+    color: var(--button-color-warning);
+    background-color: var(--button-bg-color-warning);
+    border-color: var(--button-bg-color-warning);
+    border-top-color: color(var(--button-bg-color-warning) tint(10%));
+    border-bottom-color: color(var(--button-bg-color-warning) shade(10%));
+
+    &:hover {
+      color: var(--button-color-warning);
+      background-color: color(var(--button-bg-color-warning) shade(10%));
+      border-color: color(var(--button-bg-color-warning) shade(10%));
+      border-top-color: color(var(--button-bg-color-warning) tint(0%));
+      border-bottom-color: color(var(--button-bg-color-warning) shade(20%));
+    }
+
+    &:active,
+    &.active {
+      background-color: color(var(--button-bg-color-warning) shade(10%));
+      border-color: color(var(--button-bg-color-warning) shade(10%));
+      border-top-color: color(var(--button-bg-color-warning) shade(20%));
+      border-bottom-color: color(var(--button-bg-color-warning) shade(10%));
+    }
+
+    &:focus {
+      outline: none;
+      box-shadow: 0 0 0 var(--button-focus-width) color(var(--button-bg-color-warning) alpha(50%));
+    }
+
+    &:disabled,
+    &.disabled {
+      background-color: color(var(--button-bg-color-warning) shade(10%));
+      border-top-color: color(var(--button-bg-color-warning) tint(10%));
+      border-bottom-color: color(var(--button-bg-color-warning) shade(10%));
+      box-shadow: none;
+    }
+  }
+
+  &.button-danger {
+    color: var(--button-color-danger);
+    background-color: var(--button-bg-color-danger);
+    border-color: var(--button-bg-color-danger);
+    border-top-color: color(var(--button-bg-color-danger) tint(10%));
+    border-bottom-color: color(var(--button-bg-color-danger) shade(10%));
+
+    &:hover {
+      color: var(--button-color-danger);
+      background-color: color(var(--button-bg-color-danger) shade(10%));
+      border-color: color(var(--button-bg-color-danger) shade(10%));
+      border-top-color: color(var(--button-bg-color-danger) tint(0%));
+      border-bottom-color: color(var(--button-bg-color-danger) shade(20%));
+    }
+
+    &:active,
+    &.active {
+      background-color: color(var(--button-bg-color-danger) shade(10%));
+      border-color: color(var(--button-bg-color-danger) shade(10%));
+      border-top-color: color(var(--button-bg-color-danger) shade(20%));
+      border-bottom-color: color(var(--button-bg-color-danger) shade(10%));
+    }
+
+    &:focus {
+      outline: none;
+      box-shadow: 0 0 0 var(--button-focus-width) color(var(--button-bg-color-danger) alpha(50%));
+    }
+
+    &:disabled,
+    &.disabled {
+      background-color: color(var(--button-bg-color-danger) shade(10%));
+      border-top-color: color(var(--button-bg-color-danger) tint(10%));
+      border-bottom-color: color(var(--button-bg-color-danger) shade(10%));
+      box-shadow: none;
+    }
+  }
+
+  &.button-light {
+    color: var(--button-color-light);
+    background-color: var(--button-bg-color-light);
+    border-color: var(--button-bg-color-light);
+    border-top-color: color(var(--button-bg-color-light) tint(10%));
+    border-bottom-color: color(var(--button-bg-color-light) shade(10%));
+
+    &:hover {
+      color: var(--button-color-light);
+      background-color: color(var(--button-bg-color-light) shade(10%));
+      border-color: color(var(--button-bg-color-light) shade(10%));
+      border-top-color: color(var(--button-bg-color-light) tint(0%));
+      border-bottom-color: color(var(--button-bg-color-light) shade(20%));
+    }
+
+    &:active,
+    &.active {
+      background-color: color(var(--button-bg-color-light) shade(10%));
+      border-color: color(var(--button-bg-color-light) shade(10%));
+      border-top-color: color(var(--button-bg-color-light) shade(20%));
+      border-bottom-color: color(var(--button-bg-color-light) shade(10%));
+    }
+
+    &:focus {
+      outline: none;
+      box-shadow: 0 0 0 var(--button-focus-width) color(var(--button-bg-color-light) alpha(50%));
+    }
+
+    &:disabled,
+    &.disabled {
+      background-color: color(var(--button-bg-color-light) shade(10%));
+      border-top-color: color(var(--button-bg-color-light) tint(10%));
+      border-bottom-color: color(var(--button-bg-color-light) shade(10%));
+      box-shadow: none;
+    }
+  }
+
+  &.button-dark {
+    color: var(--button-color-dark);
+    background-color: var(--button-bg-color-dark);
+    border-color: var(--button-bg-color-dark);
+    border-top-color: color(var(--button-bg-color-dark) tint(10%));
+    border-bottom-color: color(var(--button-bg-color-dark) shade(10%));
+
+    &:hover {
+      color: var(--button-color-dark);
+      background-color: color(var(--button-bg-color-dark) shade(10%));
+      border-color: color(var(--button-bg-color-dark) shade(10%));
+      border-top-color: color(var(--button-bg-color-dark) tint(0%));
+      border-bottom-color: color(var(--button-bg-color-dark) shade(20%));
+    }
+
+    &:active,
+    &.active {
+      background-color: color(var(--button-bg-color-dark) shade(10%));
+      border-color: color(var(--button-bg-color-dark) shade(10%));
+      border-top-color: color(var(--button-bg-color-dark) shade(20%));
+      border-bottom-color: color(var(--button-bg-color-dark) shade(10%));
+    }
+
+    &:focus {
+      outline: none;
+      box-shadow: 0 0 0 var(--button-focus-width) color(var(--button-bg-color-dark) alpha(50%));
+    }
+
+    &:disabled,
+    &.disabled {
+      background-color: color(var(--button-bg-color-dark) shade(10%));
+      border-top-color: color(var(--button-bg-color-dark) tint(10%));
+      border-bottom-color: color(var(--button-bg-color-dark) shade(10%));
+      box-shadow: none;
+    }
+  }
+
+  /* Block buttons */
+  &.button-block {
+    width: 100% !important;
+    display: block;
+  }
+
+  /* Link buttons */
+  &.button-link {
+    border-color: transparent;
+    background-color: transparent;
+    color: var(--link-color);
+    text-decoration: var(--link-text-decoration);
+    box-shadow: none;
+  }
+
+  &.button-link:hover,
+  &.button-link:focus {
+    border-color: transparent;
+    background-color: transparent;
+    color: var(--link-color-hover);
+    text-decoration: var(--link-text-decoration-hover);
+    box-shadow: none;
+  }
 }
 
-.button-small {
-  font-size: calc(var(--button-font-size) * .8);
-  height: var(--input-height-small);
-  padding: calc(var(--component-spacing) * .25) calc(var(--component-spacing) * .5);
+/* Loader buttons */
+.button-loader,
+.button-loader:hover {
+  position: relative;
+  min-width: calc(var(--button-loader-size) * 2);
+  color: transparent !important;
+  overflow: hidden;
 }
 
-.button-big {
-  font-size: calc(var(--button-font-size) * 1.2);
-  height: var(--input-height-big);
-  padding: calc(var(--component-spacing) * .75) calc(var(--component-spacing) * 1);
+.button-loader::after {
+  content: '';
+  position: absolute;
+  top: calc(50% - calc(var(--button-loader-size) / 2));
+  left: calc(50% - calc(var(--button-loader-size) / 2));
+  width: var(--button-loader-size);
+  height: var(--button-loader-size);
+  border-radius: 50%;
+  border: solid var(--button-loader-border-width) color(var(--button-color) alpha(20%));
+  border-top-color: var(--button-color);
+  border-left-color: var(--button-color);
+  display: inline-block;
+  animation: button-loader var(--loader-speed) linear infinite;
 }
 
-.button-block {
-  width: 100% !important;
-  display: block;
+.button-secondary.button-loader::after {
+  border-color: color(var(--button-color-secondary) alpha(20%));
+  border-top-color: var(--button-color-secondary);
+  border-left-color: var(--button-color-secondary);
 }
 
-.button-block + .button-block {
-  margin-top: 1rem;
+.button-success.button-loader::after {
+  border-color: color(var(--button-color-success) alpha(20%));
+  border-top-color: var(--button-color-success);
+  border-left-color: var(--button-color-success);
 }
 
-button:hover,
-.button:hover {
-  color: var(--button-color);
-  text-decoration: none;
+.button-info.button-loader::after {
+  border-color: color(var(--button-color-info) alpha(20%));
+  border-top-color: var(--button-color-info);
+  border-left-color: var(--button-color-info);
 }
 
-button:hover:not(:disabled),
-.button:hover:not(.disabled) {
-  box-shadow: var(--button-box-shadow-hover);
+.button-warning.button-loader::after {
+  border-color: color(var(--button-color-warning) alpha(20%));
+  border-top-color: var(--button-color-warning);
+  border-left-color: var(--button-color-warning);
 }
 
-button:active:not(:disabled),
-button.active:not(:disabled),
-.button.active:not(.disabled) {
-  color: var(--button-color);
-  box-shadow: var(--button-box-shadow-active);
+.button-danger.button-loader::after {
+  border-color: color(var(--button-color-danger) alpha(20%));
+  border-top-color: var(--button-color-danger);
+  border-left-color: var(--button-color-danger);
 }
 
-button:disabled,
-button.disabled,
-.button.disabled {
-  opacity: .5;
-  cursor: not-allowed;
+.button-light.button-loader::after {
+  border-color: color(var(--button-color-light) alpha(20%));
+  border-top-color: var(--button-color-light);
+  border-left-color: var(--button-color-light);
 }
 
-.button-success { background-color: var(--button-bg-color-success); }
-.button-info { background-color: var(--button-bg-color-info); }
-.button-warning { background-color: var(--button-bg-color-warning); }
-.button-danger { background-color: var(--button-bg-color-danger); }
-.button-inverse { background-color: var(--button-bg-color-inverse); }
-
-.button-link {
-  background-color: transparent;
-  color: var(--link-color);
-  text-decoration: var(--link-text-decoration);
-  box-shadow: none;
+.button-dark.button-loader::after {
+  border-color: color(var(--button-color-dark) alpha(20%));
+  border-top-color: var(--button-color-dark);
+  border-left-color: var(--button-color-dark);
 }
 
-.button-link:hover:not(:disabled) {
-  background-color: transparent;
-  color: var(--link-color-hover);
-  text-decoration: var(--link-text-decoration-hover);
-  box-shadow: none;
-}
-
-label.button input[type="file"] {
-  display: none;
+@keyframes button-loader {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
 }

source/css/content.css

@@ -1,14 +1,25 @@
 /*! Content */
 
+/***************************************************************************************************
+* Resets
+***************************************************************************************************/
+
 /* Box sizing reset */
 html {
   box-sizing: border-box;
 }
 
-*, *:before, *:after {
+*,
+*::before,
+*::after {
   box-sizing: inherit;
 }
 
+/* Hidden property reset */
+[hidden] {
+  display: none !important;
+}
+
 /***************************************************************************************************
 * The basics
 ***************************************************************************************************/
@@ -18,7 +29,6 @@ body {
   font-family: var(--font-family);
   font-weight: var(--font-weight);
   font-size: var(--font-size);
-  font-weight: var(--font-weight-normal);
   color: var(--body-color);
   line-height: var(--line-height);
 }
@@ -38,29 +48,30 @@ abbr[title] {
   border-bottom: dashed 2px currentcolor;
 }
 
-b, strong {
+b,
+strong {
   font-weight: var(--font-weight-bold);
 }
 
-big {
-  font-size: var(--font-size-big);
-}
-
 blockquote {
-  font-size: var(--font-size-big);
+  font-size: 120%;
   border-left: solid .4rem var(--component-border-color);
   padding: .5rem .5rem .5rem 1rem;
-  margin-bottom: 1rem;
+  margin-bottom: 1.5rem;
   margin-left: 0;
 }
 
+blockquote :last-child {
+  margin-bottom: 0;
+}
+
 code {
-  font-family: var(--font-family-monospace);
+  font-family: var(--font-monospace);
   font-size: var(--code-font-size);
   color: var(--code-color);
   background-color: var(--code-bg-color);
   border-radius: var(--code-border-radius);
-  padding: var(--code-spacing-y) var(--code-spacing-x);
+  padding: var(--code-padding-y) var(--code-padding-x);
 }
 
 del {
@@ -69,7 +80,7 @@ del {
 
 figure {
   margin-top: 0;
-  margin-bottom: 1rem;
+  margin-bottom: 1.5rem;
 }
 
 h1,
@@ -95,9 +106,8 @@ h6 { font-size: var(--headings-font-size-h6); }
 
 hr {
   border: none;
-  border-top: solid var(--hr-width) var(--component-border-color);
-  margin-top: var(--component-spacing-big);
-  margin-bottom: var(--component-spacing-big);
+  border-top: solid var(--hr-border-width) var(--hr-border-color);
+  margin: var(--hr-margin-y) var(--hr-margin-x);
 }
 
 img {
@@ -111,35 +121,35 @@ ins {
 }
 
 kbd {
-  font-family: var(--font-family-monospace);
+  font-family: var(--font-monospace);
   font-size: var(--kbd-font-size);
   color: var(--kbd-color);
   background-color: var(--kbd-bg-color);
   border-radius: var(--kbd-border-radius);
-  padding: var(--kbd-spacing-y) var(--kbd-spacing-x);
+  padding: var(--kbd-padding-y) var(--kbd-padding-x);
 }
 
 mark {
   color: var(--mark-color);
   background-color: var(--mark-bg-color);
-  padding: var(--mark-spacing-y) var(--mark-spacing-x);
+  padding: var(--mark-padding-y) var(--mark-padding-x);
 }
 
 p {
   margin-top: 0;
-  margin-bottom: 1rem;
+  margin-bottom: 1.5rem;
 }
 
 pre {
   max-height: var(--pre-max-height);
   overflow-y: auto;
-  font-family: var(--font-family-monospace);
+  font-family: var(--font-monospace);
   color: var(--pre-color);
   background-color: var(--pre-bg-color);
   border-radius: var(--pre-border-radius);
   padding: 1rem;
   margin-top: 0;
-  margin-bottom: 1rem;
+  margin-bottom: 1.5rem;
 }
 
 small {
@@ -151,7 +161,7 @@ small {
 ***************************************************************************************************/
 
 dl {
-  margin-bottom: 1rem;
+  margin-bottom: 1.5rem;
 }
 
 dt {
@@ -160,44 +170,33 @@ dt {
 
 dd {
   margin-left: 0;
-  margin-bottom: 1rem;
+  margin-bottom: 1.5rem;
 }
 
 ol,
 ul {
   line-height: var(--line-height);
-  list-style-position: inside;
-  padding-left: 1rem;
   margin-top: 0;
-  margin-bottom: 1rem;
-}
+  margin-bottom: 1.5rem;
 
-ol ol,
-ol ul,
-ul ol,
-ul ul {
-  margin-bottom: 0;
+  & ol,
+  & ul {
+    margin-bottom: 0;
+  }
 }
 
 /***************************************************************************************************
 * 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,114 @@
+/*! Dropdowns */
+
+.dropdown {
+  position: relative;
+  display: inline-block;
+
+  & .dropdown-trigger::after {
+    content: '';
+    width: var(--dropdown-caret-size);
+    height: var(--dropdown-caret-size);
+    border-top: solid var(--dropdown-caret-width) var(--dropdown-caret-color);
+    border-right: solid var(--dropdown-caret-width) var(--dropdown-caret-color);
+    margin-left: var(--dropdown-caret-size);
+    margin-top: calc(var(--dropdown-caret-size) * -1);
+    transform: rotate(135deg);
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  &.dropdown-top .dropdown-trigger::after {
+    transform: rotate(315deg);
+    margin-top: 0;
+  }
+
+  /* Menu */
+  & .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);
+    line-height: var(--dropdown-line-height);
+    font-size: var(--dropdown-font-size);
+    font-weight: var(--dropdown-font-weight);
+    text-align: left;
+    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: var(--dropdown-padding-y) 0;
+    overflow-y: auto;
+    transform: translateZ(0);
+    user-select: none;
+
+    & a {
+      position: relative;
+      color: var(--dropdown-color);
+      text-decoration: none;
+      padding: var(--dropdown-padding-y) calc(var(--dropdown-padding-x) + .5em);
+      display: block;
+      white-space: nowrap;
+      overflow-x: hidden;
+      text-overflow: ellipsis;
+
+      &:focus {
+        outline: none;
+        color: var(--dropdown-color);
+        background-color: color(var(--dropdown-bg-color) shade(5%));
+      }
+
+      &:hover {
+        color: var(--dropdown-color-hover);
+        background-color: var(--dropdown-bg-color-hover);
+      }
+
+      &.disabled {
+        background-color: transparent;
+        color: var(--dropdown-color);
+        outline: none;
+        cursor: not-allowed;
+        opacity: .5;
+      }
+
+      &.checked::before {
+        position: absolute;
+        left: calc(var(--dropdown-padding-x) / 2 - .1em);
+        content: '✓';
+        font-family: var(--font-system);
+        font-weight: 600;
+      }
+    }
+
+    & hr {
+      width: 100%;
+      border-top: solid var(--dropdown-divider-width) var(--dropdown-divider-color);
+      margin: var(--dropdown-padding-y) 0;
+    }
+
+    & .dropdown-heading {
+      font-size: var(--dropdown-heading-font-size);
+      font-weight: var(--dropdown-heading-font-weight);
+      color: var(--dropdown-heading-color);
+      padding: var(--dropdown-padding-y) calc(var(--dropdown-padding-x) + .5em);
+      cursor: default;
+    }
+  }
+
+  &.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;
+  }
+}

source/css/file-buttons.css

@@ -0,0 +1,27 @@
+/*! File buttons */
+
+.file-button {
+  position: relative;
+
+  & input[type="file"] {
+    position: absolute;
+    height: 1px;
+    width: 1px;
+    background: none;
+    border: 0;
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    overflow: hidden;
+    padding: 0;
+
+    /* When the input receives focus, simulate button focus states on the label */
+    &:focus + label { box-shadow: 0 0 0 var(--button-focus-width) color(var(--button-bg-color) alpha(50%)); }
+    &:focus + label.button-secondary { box-shadow: 0 0 0 var(--button-focus-width) color(var(--button-bg-color-secondary) alpha(50%)); }
+    &:focus + label.button-success { box-shadow: 0 0 0 var(--button-focus-width) color(var(--button-bg-color-success) alpha(50%)); }
+    &:focus + label.button-info { box-shadow: 0 0 0 var(--button-focus-width) color(var(--button-bg-color-info) alpha(50%)); }
+    &:focus + label.button-warning { box-shadow: 0 0 0 var(--button-focus-width) color(var(--button-bg-color-warning) alpha(50%)); }
+    &:focus + label.button-danger { box-shadow: 0 0 0 var(--button-focus-width) color(var(--button-bg-color-danger) alpha(50%)); }
+    &:focus + label.button-light { box-shadow: 0 0 0 var(--button-focus-width) color(var(--button-bg-color-light) alpha(50%)); }
+    &:focus + label.button-dark { box-shadow: 0 0 0 var(--button-focus-width) color(var(--button-bg-color-dark) alpha(50%)); }
+  }
+}

source/css/forms.css

@@ -3,22 +3,27 @@
 fieldset {
   border: solid var(--fieldset-border-width) var(--fieldset-border-color);
   border-radius: var(--fieldset-border-radius);
-  padding: var(--component-spacing) calc(var(--component-spacing) * 1.5);
-  margin-bottom: 1rem;
-}
+  padding: var(--fieldset-padding-y) var(--fieldset-padding-x);
+  margin-bottom: 1.5rem;
 
-fieldset legend {
-  font-weight: var(--font-weight-bold);
-  padding: 0 .25rem;
+  & legend {
+    font-weight: var(--font-weight-bold);
+    padding: 0 .25rem;
+  }
+
+  & > :last-child {
+    margin-bottom: 0;
+  }
 }
 
 label {
+  color: var(--label-color);
   display: inline-block;
   margin-bottom: .25rem;
-}
 
-label + label {
-  margin-left: 1rem;
+  & + label {
+    margin-left: 1rem;
+  }
 }
 
 input[type="color"],
@@ -46,33 +51,75 @@ 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: .5rem;
+  padding-right: .5rem;
   margin: 0;
-  transition: .1s border-color, .1s background-color, .1s color;
+  transition:
+    var(--input-speed) border-color,
+    var(--component-speed) background-color,
+    var(--component-speed) color;
+  white-space: nowrap;
   -moz-appearance: none;
   -webkit-appearance: none;
+
+  &:focus {
+    outline: none;
+    border-color: var(--input-focus-color);
+  }
+
+  &[disabled] {
+    opacity: .5;
+    cursor: not-allowed;
+  }
+
+  &[readonly] {
+    background-color: var(--input-readonly-bg-color);
+  }
+
+  &[type="color"] {
+    padding: .5rem;
+
+    &::-webkit-color-swatch-wrapper {
+      padding: 0;
+    }
+
+    &::-webkit-color-swatch {
+      border: none;
+      border-radius: var(--input-border-radius);
+    }
+  }
+
+  &.input-xs {
+    font-size: var(--input-font-size-xs);
+    height: var(--input-height-xs);
+    line-height: var(--input-height-xs);
+  }
+
+  &.input-sm {
+    font-size: var(--input-font-size-sm);
+    height: var(--input-height-sm);
+    line-height: var(--input-height-sm);
+  }
+
+  &.input-lg {
+    font-size: var(--input-font-size-lg);
+    height: var(--input-height-lg);
+    line-height: var(--input-height-lg);
+  }
+
+  &.input-xl {
+    font-size: var(--input-font-size-xl);
+    height: var(--input-height-xl);
+    line-height: var(--input-height-xl);
+  }
 }
 
-input[type="color"]:focus,
-input[type="date"]:focus,
-input[type="datetime-local"]:focus,
-input[type="email"]:focus,
-input[type="month"]:focus,
-input[type="number"]:focus,
-input[type="password"]:focus,
-input[type="search"]:focus,
-input[type="tel"]:focus,
-input[type="text"]:focus,
-input[type="time"]:focus,
-input[type="url"]:focus,
-input[type="week"]:focus,
-select:focus,
-textarea:focus {
-  outline: none;
-  border-color: var(--input-border-focus-color);
+input[type="checkbox"],
+input[type="radio"] {
+  vertical-align: 1px;
 }
 
 select {
@@ -83,253 +130,365 @@ select {
   background-size: .75rem;
   padding-top: 0;
   padding-bottom: 0;
-  padding-right: calc(var(--component-spacing) * .5 + 1rem);
+  padding-right: 1.5rem;
 }
 
-textarea {
+textarea,
+textarea.input-xs,
+textarea.input-sm,
+textarea.input-lg,
+textarea.input-xl {
   height: auto;
   resize: vertical;
   line-height: var(--line-height);
+  white-space: normal;
 }
 
-input[type="color"]::-webkit-color-swatch-wrapper {
-	padding: 0;
-}
-
-input[type="color"]::-webkit-color-swatch {
-  border: none;
-  border-radius: var(--input-border-radius);
-}
-
-input[type="checkbox"],
-input[type="radio"] {
-  padding: 0;
-}
-
-input[disabled] {
-  opacity: .5;
-  cursor: not-allowed;
-}
-
-input[readonly] {
-  background-color: var(--input-readonly-bg-color);
-}
-
-input.input-small,
-select.input-small {
-  font-size: calc(var(--input-font-size) * .8);
-  height: var(--input-height-small);
-}
-
-textarea.input-small {
-  font-size: calc(var(--input-font-size) * .8);
-}
-
-input.input-big,
-select.input-big {
-  font-size: calc(var(--input-font-size) * 1.2);
-  height: var(--input-height-big);
-}
-
-textarea.input-big {
-  font-size: calc(var(--input-font-size) * 1.2);
-}
-
-/* Range styles courtesy of http://danielstern.ca/range.css/ */
-input[type=range] {
+/* Range */
+input[type="range"] {
   -webkit-appearance: none;
   width: 100%;
-  margin: 1rem 0;
-}
-
-input[type=range]:focus {
-  outline: none;
-}
-
-input[type=range]::-webkit-slider-runnable-track {
-  width: 100%;
-  height: .5rem;
-  cursor: pointer;
-  background: var(--input-range-track-color);
-  border-radius: var(--input-border-radius);
-  border: none;
-  box-shadow: var(--input-range-track-box-shadow);
-}
-
-input[type=range]::-webkit-slider-thumb {
-  border: none;
-  width: 1.5rem;
-  height: 1.5rem;
-  border-radius: 50%;
-  background: var(--input-range-thumb-color);
-  cursor: pointer;
-  -webkit-appearance: none;
-  margin-top: -.5rem;
-}
-
-input[type=range]:focus::-webkit-slider-runnable-track {
-  background: var(--input-range-track-color);
-}
-
-input[type=range]::-moz-range-track {
-  width: 100%;
-  height: .5rem;
-  cursor: pointer;
-  background: var(--input-range-track-color);
-  border-radius: var(--input-border-radius);
-  border: none;
-  box-shadow: var(--input-range-track-box-shadow);
-}
-
-input[type=range]::-moz-range-thumb {
-  border: none;
-  height: 1.5rem;
-  width: 1.5rem;
-  border-radius: 50%;
-  background: var(--input-range-thumb-color);
-  cursor: pointer;
-}
-
-input[type=range]::-ms-track {
-  width: 100%;
-  height: .5rem;
-  cursor: pointer;
-  background: transparent;
-  border-color: transparent;
-  color: transparent;
-}
-
-input[type=range]::-ms-fill-lower {
-  background: #2f6ea5;
-  border: none;
-  border-radius: var(--input-border-radius);
-}
-
-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 {
-  border: none;
-  height: .5rem;
-  width: .5rem;
-  border-radius: 50%;
-  background: var(--input-range-thumb-color);
-  cursor: pointer;
-}
-
-input[type=range]:focus::-ms-fill-lower {
-  background: var(--input-range-track-color);
-}
-
-input[type=range]:focus::-ms-fill-upper {
-  background: var(--input-range-track-color);
-}
-
-/* Progress bars */
-progress {
-  width: 100%;
+  height: var(--input-height);
+  line-height: var(--input-height);
   vertical-align: middle;
+
+  &:focus {
+    outline: none;
+  }
+
+  /* Webkit */
+  &::-webkit-slider-runnable-track {
+    width: 100%;
+    height: var(--input-range-track-height);
+    cursor: pointer;
+    background: var(--input-range-track-color);
+    border-radius: var(--input-border-radius);
+    border: none;
+    box-shadow: var(--input-range-track-box-shadow);
+  }
+
+  &::-webkit-slider-thumb {
+    border: none;
+    width: var(--input-range-thumb-height);
+    height: var(--input-range-thumb-height);
+    border-radius: 50%;
+    background: var(--input-range-thumb-color);
+    cursor: pointer;
+    -webkit-appearance: none;
+    margin-top: calc(var(--input-range-thumb-height) / -2 + var(--input-range-track-height) / 2);
+  }
+
+  &:focus {
+    &::-webkit-slider-runnable-track {
+      background: var(--input-range-track-color);
+    }
+
+    &::-webkit-slider-thumb {
+      box-shadow: 0 0 0 var(--component-focus-width) color(var(--input-range-thumb-color) alpha(50%));
+    }
+  }
+
+  /* Firefox */
+  &::-moz-range-track {
+    width: 100%;
+    height: var(--input-range-track-height);
+    cursor: pointer;
+    background: var(--input-range-track-color);
+    border-radius: var(--input-border-radius);
+    border: none;
+    box-shadow: var(--input-range-track-box-shadow);
+  }
+
+  &::-moz-range-thumb {
+    border: none;
+    height: var(--input-range-thumb-height);
+    width: var(--input-range-thumb-height);
+    border-radius: 50%;
+    background: var(--input-range-thumb-color);
+    cursor: pointer;
+  }
+
+  &:focus::-moz-range-thumb {
+    box-shadow: 0 0 0 var(--component-focus-width) color(var(--input-range-thumb-color) alpha(50%));
+  }
+
+  /* IE / Edge */
+  &::-ms-track {
+    width: 100%;
+    height: var(--input-range-track-height);
+    cursor: pointer;
+    background: transparent;
+    border-color: transparent;
+    color: transparent;
+  }
+
+  &::-ms-fill-lower {
+    background: var(--input-range-track-color);
+    border: none;
+    border-radius: var(--input-border-radius);
+  }
+
+  &::-ms-fill-upper {
+    background: var(--input-range-track-color);
+    border: none;
+    border-radius: var(--input-border-radius);
+  }
+
+  &::-ms-thumb {
+    border: none;
+    height: var(--input-range-thumb-height);
+    width: var(--input-range-thumb-height);
+    border-radius: 50%;
+    background: var(--input-range-thumb-color);
+    cursor: pointer;
+    margin-top: calc(var(--input-range-track-height) / -2);
+  }
+
+  &:focus::-ms-thumb {
+    box-shadow: 0 0 0 var(--component-focus-width) color(var(--input-range-thumb-color) alpha(50%));
+  }
+
+  &:focus::-ms-fill-lower {
+    background: var(--input-range-track-color);
+  }
+
+  &:focus::-ms-fill-upper {
+    background: var(--input-range-track-color);
+  }
 }
 
 /* Input fields */
-.input-single {
-  margin-bottom: 1rem;
+.input-field {
+  margin-bottom: 1.5rem;
 }
 
 /* Input groups */
 .input-group {
   width: 100%;
   display: flex;
-  margin-bottom: 1rem;
+  margin-bottom: 1.5rem;
+
+  & > input,
+  & > button,
+  & > .button,
+  & > .dropdown button,
+  & > .dropdown .button,
+  & > .file-button label,
+  & > .input-icon input,
+  & > .input-icon select {
+    border-radius: 0;
+  }
+
+  & > input:first-child,
+  & > button:first-child,
+  & > .button:first-child,
+  & > .dropdown:first-child button,
+  & > .dropdown:first-child .button,
+  & > .file-button:first-child label,
+  & > .input-icon:first-child input,
+  & > .input-icon:first-child select {
+    border-top-left-radius: var(--input-border-radius);
+    border-bottom-left-radius: var(--input-border-radius);
+  }
+
+  & > input:last-child,
+  & > button:last-child,
+  & > .button:last-child,
+  & > .dropdown:last-child button,
+  & > .dropdown:last-child .button,
+  & > .file-button:last-child label,
+  & > .input-icon:last-child input,
+  & > .input-icon:last-child select {
+    border-top-right-radius: var(--input-border-radius);
+    border-bottom-right-radius: var(--input-border-radius);
+  }
+
+  & > input + input {
+    border-left-width: 0;
+  }
+
+  & > input + input:focus {
+    border-left-width: var(--input-border-width);
+    margin-left: calc(var(--input-border-width) * -1);
+  }
+
+  /* Force a new stacking context so focus rings don't get truncated by adjacent elements */
+  & button:focus,
+  & .button:focus,
+  & .file-button input[type="file"]:focus + label {
+    transform: translateZ(0);
+  }
 }
 
-.input-group > input,
-.input-group > button,
-.input-group > .button {
-  border-radius: 0;
+/* Input hints */
+.input-hint {
+  font-size: var(--input-hint-font-size);
+  color: var(--input-hint-color);
+  margin: .25rem 0 0 0;
+  display: block;
 }
 
-.input-group > input:first-child,
-.input-group > button:first-child,
-.input-group > .button:first-child {
-  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 {
-  border-top-right-radius: var(--input-border-radius);
-  border-bottom-right-radius: var(--input-border-radius);
-}
-
-.input-group > input + input {
-  border-left-width: 0;
-}
-
-.input-group > input + input:focus {
-  border-left-width: var(--input-border-width);
-  margin-left: calc(var(--input-border-width) * -1);
+/* Input groups can have input hints, but we need to adjust margins a bit */
+.input-group + .input-hint {
+  margin-top: -1.25rem; /* input group margin - input hint margin */
+  margin-bottom: 1.5rem;
 }
 
 /* Input addons */
 .input-addon {
-  color: var(--text-muted);
+  font-size: var(--input-font-size);
   height: var(--input-height);
   line-height: var(--input-height);
   border-top: solid var(--input-border-width) var(--input-border-color);
   border-bottom: solid var(--input-border-width) var(--input-border-color);
-  background: #f8f8f8;
-  padding: 0 calc(var(--component-spacing) * .5);
+  background: var(--input-addon-bg-color);
+  color: var(--input-addon-color);
+  padding: 0 .5rem;
   white-space: nowrap;
+
+  &:first-child {
+    border-left: solid var(--input-border-width) var(--input-border-color);
+    border-top-left-radius: var(--input-border-radius);
+    border-bottom-left-radius: var(--input-border-radius);
+  }
+
+  &:last-child {
+    border-right: solid var(--input-border-width) var(--input-border-color);
+    border-top-right-radius: var(--input-border-radius);
+    border-bottom-right-radius: var(--input-border-radius);
+  }
+
+  &.input-addon-xs {
+    font-size: var(--input-font-size-xs);
+    height: var(--input-height-xs);
+    line-height: var(--input-height-xs);
+  }
+
+  &.input-addon-sm {
+    font-size: var(--input-font-size-sm);
+    height: var(--input-height-sm);
+    line-height: var(--input-height-sm);
+  }
+
+  &.input-addon-lg {
+    font-size: var(--input-font-size-lg);
+    height: var(--input-height-lg);
+    line-height: var(--input-height-lg);
+  }
+
+  &.input-addon-xl {
+    font-size: var(--input-font-size-xl);
+    height: var(--input-height-xl);
+    line-height: var(--input-height-xl);
+  }
 }
 
-.input-addon-small {
-  font-size: calc(var(--input-font-size) * .8);
-  height: var(--input-height-small);
-  line-height: var(--input-height-small);
-}
+/* Input icons */
+.input-icon {
+  position: relative;
+  width: 100%;
 
-.input-addon-big {
-  font-size: calc(var(--input-font-size) * 1.2);
-  height: var(--input-height-big);
-  line-height: var(--input-height-big);
-}
+  /* Change default position for select controls so icons don't get hidden */
+  & select {
+    position: static;
+  }
 
-.input-addon:first-child {
-  border-left: solid var(--input-border-width) var(--input-border-color);
-  border-top-left-radius: var(--input-border-radius);
-  border-bottom-left-radius: var(--input-border-radius);
-}
+  & input:not(:first-child),
+  & select:not(:first-child) {
+    padding-left: var(--input-icon-width);
+  }
 
-.input-addon:last-child {
-  border-right: solid var(--input-border-width) var(--input-border-color);
-  border-top-right-radius: var(--input-border-radius);
-  border-bottom-right-radius: var(--input-border-radius);
+  & input:not(:last-child) {
+    padding-right: var(--input-icon-width);
+  }
+
+  & :first-child:not(input, select),
+  & :last-child:not(input, select) {
+    position: absolute;
+    top: 0;
+    left: var(--input-icon-offset);
+    height: var(--input-height);
+    line-height: var(--input-height);
+    color: var(--input-icon-color);
+    vertical-align: middle;
+    pointer-events: none;
+  }
+
+  & :last-child:not(input, select) {
+    left: auto;
+    right: var(--input-icon-offset);
+  }
+
+  &.input-icon-xs {
+    & :first-child:not(input, select),
+    & :last-child:not(input, select) {
+      font-size: var(--input-font-size-xs);
+      height: var(--input-height-xs);
+      line-height: var(--input-height-xs);
+    }
+  }
+
+  &.input-icon-sm {
+    & :first-child:not(input, select),
+    & :last-child:not(input, select) {
+      font-size: var(--input-font-size-sm);
+      height: var(--input-height-sm);
+      line-height: var(--input-height-sm);
+    }
+  }
+
+  &.input-icon-lg {
+    & :first-child:not(input, select),
+    & :last-child:not(input, select) {
+      font-size: var(--input-font-size-lg);
+      height: var(--input-height-lg);
+      line-height: var(--input-height-lg);
+    }
+  }
+
+  &.input-icon-xl {
+    & :first-child:not(input, select),
+    & :last-child:not(input, select) {
+      font-size: var(--input-font-size-xl);
+      height: var(--input-height-xl);
+      line-height: var(--input-height-xl);
+    }
+  }
 }
 
 /* Validation */
-.input-invalid label {
-  color: var(--input-invalid-color) !important;
+.input-invalid {
+  & label {
+    color: var(--input-invalid-color) !important;
+  }
+
+  & input,
+  & select,
+  & textarea {
+    color: var(--input-invalid-color) !important;
+    border-color: var(--input-invalid-border-color) !important;
+  }
+
+  & .input-icon :first-child:not(input, select),
+  & .input-icon :last-child:not(input, select) {
+    color: var(--input-invalid-color);
+  }
 }
 
-.input-invalid,
-.input-invalid input,
-.input-invalid select {
-  color: var(--input-invalid-color) !important;
-  border-color: var(--input-invalid-border-color) !important;
-}
+.input-valid {
+  & label {
+    color: var(--input-valid-color) !important;
+  }
 
-.input-valid label {
-  color: var(--input-valid-color) !important;
-}
+  & input,
+  & select,
+  & textarea {
+    color: var(--input-valid-color) !important;
+    border-color: var(--input-valid-border-color) !important;
+  }
 
-.input-valid,
-.input-valid input,
-.input-valid select {
-  color: var(--input-valid-color) !important;
-  border-color: var(--input-valid-border-color) !important;
+  & .input-icon :first-child:not(input, select),
+  & .input-icon :last-child:not(input, select) {
+    color: var(--input-valid-color);
+  }
 }

source/css/grid.css

@@ -0,0 +1,610 @@
+/*! Grid System
+
+  Forked from Bootstrap 4.
+
+  Copyright (c) 2011-2017 Twitter, Inc.
+  Copyright (c) 2011-2017 The Bootstrap Authors
+
+  Licensed under the MIT license.
+*/
+
+/* Containers */
+.container,
+.container-fluid {
+  width: 100%;
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: calc(var(--grid-gutter-width) / 2);
+  padding-left: calc(var(--grid-gutter-width) / 2);
+}
+
+@media (--breakpoint-sm-up) {
+  .container {
+    max-width: var(--container-max-width-sm);
+  }
+}
+
+@media (--breakpoint-md-up) {
+  .container {
+    max-width: var(--container-max-width-md);
+  }
+}
+
+@media (--breakpoint-lg-up) {
+  .container {
+    max-width: var(--container-max-width-lg);
+  }
+}
+
+@media (--breakpoint-xl-up) {
+  .container {
+    max-width: var(--container-max-width-xl);
+  }
+}
+
+/* Rows */
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  margin-right: calc(var(--grid-gutter-width) / -2);
+  margin-left: calc(var(--grid-gutter-width) / -2);
+}
+
+.row-flush {
+  margin-left: 0;
+  margin-right: 0;
+
+  > .col,
+  > [class*="col-"] {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+
+.row-start { justify-content: flex-start; }
+.row-center { justify-content: center; }
+.row-end { justify-content: flex-end; }
+.row-around { justify-content: space-around; }
+.row-between { justify-content: space-between; }
+
+@media (--breakpoint-sm-up) {
+  .row-sm-start { justify-content: flex-start; }
+  .row-sm-center { justify-content: center; }
+  .row-sm-end { justify-content: flex-end; }
+  .row-sm-around { justify-content: space-around; }
+  .row-sm-between { justify-content: space-between; }
+}
+
+@media (--breakpoint-md-up) {
+  .row-md-start { justify-content: flex-start; }
+  .row-md-center { justify-content: center; }
+  .row-md-end { justify-content: flex-end; }
+  .row-md-around { justify-content: space-around; }
+  .row-md-between { justify-content: space-between; }
+}
+
+@media (--breakpoint-lg-up) {
+  .row-lg-start { justify-content: flex-start; }
+  .row-lg-center { justify-content: center; }
+  .row-lg-end { justify-content: flex-end; }
+  .row-lg-around { justify-content: space-around; }
+  .row-lg-between { justify-content: space-between; }
+}
+
+@media (--breakpoint-xl-up) {
+  .row-xl-start { justify-content: flex-start; }
+  .row-xl-center { justify-content: center; }
+  .row-xl-end { justify-content: flex-end; }
+  .row-xl-around { justify-content: space-around; }
+  .row-xl-between { justify-content: space-between; }
+}
+
+/* Columns */
+.col, .col-auto, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
+.col-sm, .col-sm-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,
+.col-md, .col-md-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
+.col-lg, .col-lg-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12,
+.col-xl, .col-xl-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
+  position: relative;
+  width: 100%;
+  min-height: 1px;
+  padding-right: calc(var(--grid-gutter-width) / 2);
+  padding-left: calc(var(--grid-gutter-width) / 2);
+}
+
+.col {
+  flex-basis: 0;
+  flex-grow: 1;
+  max-width: 100%;
+}
+
+.col-auto {
+  flex: 0 0 auto;
+  width: auto;
+  max-width: none;
+}
+
+.col-1 {
+  flex: 0 0 8.333333%;
+  max-width: 8.333333%;
+}
+
+.col-2 {
+  flex: 0 0 16.666667%;
+  max-width: 16.666667%;
+}
+
+.col-3 {
+  flex: 0 0 25%;
+  max-width: 25%;
+}
+
+.col-4 {
+  flex: 0 0 33.333333%;
+  max-width: 33.333333%;
+}
+
+.col-5 {
+  flex: 0 0 41.666667%;
+  max-width: 41.666667%;
+}
+
+.col-6 {
+  flex: 0 0 50%;
+  max-width: 50%;
+}
+
+.col-7 {
+  flex: 0 0 58.333333%;
+  max-width: 58.333333%;
+}
+
+.col-8 {
+  flex: 0 0 66.666667%;
+  max-width: 66.666667%;
+}
+
+.col-9 {
+  flex: 0 0 75%;
+  max-width: 75%;
+}
+
+.col-10 {
+  flex: 0 0 83.333333%;
+  max-width: 83.333333%;
+}
+
+.col-11 {
+  flex: 0 0 91.666667%;
+  max-width: 91.666667%;
+}
+
+.col-12 {
+  flex: 0 0 100%;
+  max-width: 100%;
+}
+
+.order-1 { order: 1; }
+.order-2 { order: 2; }
+.order-3 { order: 3; }
+.order-4 { order: 4; }
+.order-5 { order: 5; }
+.order-6 { order: 6; }
+.order-7 { order: 7; }
+.order-8 { order: 8; }
+.order-9 { order: 9; }
+.order-10 { order: 10; }
+.order-11 { order: 11; }
+.order-12 { order: 12; }
+
+.offset-1 { margin-left: 8.333333%; }
+.offset-2 { margin-left: 16.666667%; }
+.offset-3 { margin-left: 25%; }
+.offset-4 { margin-left: 33.333333%; }
+.offset-5 { margin-left: 41.666667%; }
+.offset-6 { margin-left: 50%; }
+.offset-7 { margin-left: 58.333333%; }
+.offset-8 { margin-left: 66.666667%; }
+.offset-9 { margin-left: 75%; }
+.offset-10 { margin-left: 83.333333%; }
+.offset-11 { margin-left: 91.666667%; }
+
+@media (--breakpoint-sm-up) {
+  .col-sm {
+    flex-basis: 0;
+    flex-grow: 1;
+    max-width: 100%;
+  }
+
+  .col-sm-auto {
+    flex: 0 0 auto;
+    width: auto;
+    max-width: none;
+  }
+
+  .col-sm-1 {
+    flex: 0 0 8.333333%;
+    max-width: 8.333333%;
+  }
+
+  .col-sm-2 {
+    flex: 0 0 16.666667%;
+    max-width: 16.666667%;
+  }
+
+  .col-sm-3 {
+    flex: 0 0 25%;
+    max-width: 25%;
+  }
+
+  .col-sm-4 {
+    flex: 0 0 33.333333%;
+    max-width: 33.333333%;
+  }
+
+  .col-sm-5 {
+    flex: 0 0 41.666667%;
+    max-width: 41.666667%;
+  }
+
+  .col-sm-6 {
+    flex: 0 0 50%;
+    max-width: 50%;
+  }
+
+  .col-sm-7 {
+    flex: 0 0 58.333333%;
+    max-width: 58.333333%;
+  }
+
+  .col-sm-8 {
+    flex: 0 0 66.666667%;
+    max-width: 66.666667%;
+  }
+
+  .col-sm-9 {
+    flex: 0 0 75%;
+    max-width: 75%;
+  }
+
+  .col-sm-10 {
+    flex: 0 0 83.333333%;
+    max-width: 83.333333%;
+  }
+
+  .col-sm-11 {
+    flex: 0 0 91.666667%;
+    max-width: 91.666667%;
+  }
+
+  .col-sm-12 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+
+  .order-sm-1 { order: 1; }
+  .order-sm-2 { order: 2; }
+  .order-sm-3 { order: 3; }
+  .order-sm-4 { order: 4; }
+  .order-sm-5 { order: 5; }
+  .order-sm-6 { order: 6; }
+  .order-sm-7 { order: 7; }
+  .order-sm-8 { order: 8; }
+  .order-sm-9 { order: 9; }
+  .order-sm-10 { order: 10; }
+  .order-sm-11 { order: 11; }
+  .order-sm-12 { order: 12; }
+
+  .offset-sm-0 { margin-left: 0%; }
+  .offset-sm-1 { margin-left: 8.333333%; }
+  .offset-sm-2 { margin-left: 16.666667%; }
+  .offset-sm-3 { margin-left: 25%; }
+  .offset-sm-4 { margin-left: 33.333333%; }
+  .offset-sm-5 { margin-left: 41.666667%; }
+  .offset-sm-6 { margin-left: 50%; }
+  .offset-sm-7 { margin-left: 58.333333%; }
+  .offset-sm-8 { margin-left: 66.666667%; }
+  .offset-sm-9 { margin-left: 75%; }
+  .offset-sm-10 { margin-left: 83.333333%; }
+  .offset-sm-11 { margin-left: 91.666667%; }
+}
+
+@media (--breakpoint-md-up) {
+  .col-md {
+    flex-basis: 0;
+    flex-grow: 1;
+    max-width: 100%;
+  }
+
+  .col-md-auto {
+    flex: 0 0 auto;
+    width: auto;
+    max-width: none;
+  }
+
+  .col-md-1 {
+    flex: 0 0 8.333333%;
+    max-width: 8.333333%;
+  }
+
+  .col-md-2 {
+    flex: 0 0 16.666667%;
+    max-width: 16.666667%;
+  }
+
+  .col-md-3 {
+    flex: 0 0 25%;
+    max-width: 25%;
+  }
+
+  .col-md-4 {
+    flex: 0 0 33.333333%;
+    max-width: 33.333333%;
+  }
+
+  .col-md-5 {
+    flex: 0 0 41.666667%;
+    max-width: 41.666667%;
+  }
+
+  .col-md-6 {
+    flex: 0 0 50%;
+    max-width: 50%;
+  }
+
+  .col-md-7 {
+    flex: 0 0 58.333333%;
+    max-width: 58.333333%;
+  }
+
+  .col-md-8 {
+    flex: 0 0 66.666667%;
+    max-width: 66.666667%;
+  }
+
+  .col-md-9 {
+    flex: 0 0 75%;
+    max-width: 75%;
+  }
+
+  .col-md-10 {
+    flex: 0 0 83.333333%;
+    max-width: 83.333333%;
+  }
+
+  .col-md-11 {
+    flex: 0 0 91.666667%;
+    max-width: 91.666667%;
+  }
+
+  .col-md-12 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+
+  .order-md-1 { order: 1; }
+  .order-md-2 { order: 2; }
+  .order-md-3 { order: 3; }
+  .order-md-4 { order: 4; }
+  .order-md-5 { order: 5; }
+  .order-md-6 { order: 6; }
+  .order-md-7 { order: 7; }
+  .order-md-8 { order: 8; }
+  .order-md-9 { order: 9; }
+  .order-md-10 { order: 10; }
+  .order-md-11 { order: 11; }
+  .order-md-12 { order: 12; }
+
+  .offset-md-0 { margin-left: 0%; }
+  .offset-md-1 { margin-left: 8.333333%; }
+  .offset-md-2 { margin-left: 16.666667%; }
+  .offset-md-3 { margin-left: 25%; }
+  .offset-md-4 { margin-left: 33.333333%; }
+  .offset-md-5 { margin-left: 41.666667%; }
+  .offset-md-6 { margin-left: 50%; }
+  .offset-md-7 { margin-left: 58.333333%; }
+  .offset-md-8 { margin-left: 66.666667%; }
+  .offset-md-9 { margin-left: 75%; }
+  .offset-md-10 { margin-left: 83.333333%; }
+  .offset-md-11 { margin-left: 91.666667%; }
+}
+
+@media (--breakpoint-lg-up) {
+  .col-lg {
+    flex-basis: 0;
+    flex-grow: 1;
+    max-width: 100%;
+  }
+
+  .col-lg-auto {
+    flex: 0 0 auto;
+    width: auto;
+    max-width: none;
+  }
+
+  .col-lg-1 {
+    flex: 0 0 8.333333%;
+    max-width: 8.333333%;
+  }
+
+  .col-lg-2 {
+    flex: 0 0 16.666667%;
+    max-width: 16.666667%;
+  }
+
+  .col-lg-3 {
+    flex: 0 0 25%;
+    max-width: 25%;
+  }
+
+  .col-lg-4 {
+    flex: 0 0 33.333333%;
+    max-width: 33.333333%;
+  }
+
+  .col-lg-5 {
+    flex: 0 0 41.666667%;
+    max-width: 41.666667%;
+  }
+
+  .col-lg-6 {
+    flex: 0 0 50%;
+    max-width: 50%;
+  }
+
+  .col-lg-7 {
+    flex: 0 0 58.333333%;
+    max-width: 58.333333%;
+  }
+
+  .col-lg-8 {
+    flex: 0 0 66.666667%;
+    max-width: 66.666667%;
+  }
+
+  .col-lg-9 {
+    flex: 0 0 75%;
+    max-width: 75%;
+  }
+
+  .col-lg-10 {
+    flex: 0 0 83.333333%;
+    max-width: 83.333333%;
+  }
+
+  .col-lg-11 {
+    flex: 0 0 91.666667%;
+    max-width: 91.666667%;
+  }
+
+  .col-lg-12 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+
+  .order-lg-1 { order: 1; }
+  .order-lg-2 { order: 2; }
+  .order-lg-3 { order: 3; }
+  .order-lg-4 { order: 4; }
+  .order-lg-5 { order: 5; }
+  .order-lg-6 { order: 6; }
+  .order-lg-7 { order: 7; }
+  .order-lg-8 { order: 8; }
+  .order-lg-9 { order: 9; }
+  .order-lg-10 { order: 10; }
+  .order-lg-11 { order: 11; }
+  .order-lg-12 { order: 12; }
+
+  .offset-lg-0 { margin-left: 0%; }
+  .offset-lg-1 { margin-left: 8.333333%; }
+  .offset-lg-2 { margin-left: 16.666667%; }
+  .offset-lg-3 { margin-left: 25%; }
+  .offset-lg-4 { margin-left: 33.333333%; }
+  .offset-lg-5 { margin-left: 41.666667%; }
+  .offset-lg-6 { margin-left: 50%; }
+  .offset-lg-7 { margin-left: 58.333333%; }
+  .offset-lg-8 { margin-left: 66.666667%; }
+  .offset-lg-9 { margin-left: 75%; }
+  .offset-lg-10 { margin-left: 83.333333%; }
+  .offset-lg-11 { margin-left: 91.666667%; }
+}
+
+@media (--breakpoint-xl-up) {
+  .col-xl {
+    flex-basis: 0;
+    flex-grow: 1;
+    max-width: 100%;
+  }
+
+  .col-xl-auto {
+    flex: 0 0 auto;
+    width: auto;
+    max-width: none;
+  }
+
+  .col-xl-1 {
+    flex: 0 0 8.333333%;
+    max-width: 8.333333%;
+  }
+
+  .col-xl-2 {
+    flex: 0 0 16.666667%;
+    max-width: 16.666667%;
+  }
+
+  .col-xl-3 {
+    flex: 0 0 25%;
+    max-width: 25%;
+  }
+
+  .col-xl-4 {
+    flex: 0 0 33.333333%;
+    max-width: 33.333333%;
+  }
+
+  .col-xl-5 {
+    flex: 0 0 41.666667%;
+    max-width: 41.666667%;
+  }
+
+  .col-xl-6 {
+    flex: 0 0 50%;
+    max-width: 50%;
+  }
+
+  .col-xl-7 {
+    flex: 0 0 58.333333%;
+    max-width: 58.333333%;
+  }
+
+  .col-xl-8 {
+    flex: 0 0 66.666667%;
+    max-width: 66.666667%;
+  }
+
+  .col-xl-9 {
+    flex: 0 0 75%;
+    max-width: 75%;
+  }
+
+  .col-xl-10 {
+    flex: 0 0 83.333333%;
+    max-width: 83.333333%;
+  }
+
+  .col-xl-11 {
+    flex: 0 0 91.666667%;
+    max-width: 91.666667%;
+  }
+
+  .col-xl-12 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+
+  .order-xl-1 { order: 1; }
+  .order-xl-2 { order: 2; }
+  .order-xl-3 { order: 3; }
+  .order-xl-4 { order: 4; }
+  .order-xl-5 { order: 5; }
+  .order-xl-6 { order: 6; }
+  .order-xl-7 { order: 7; }
+  .order-xl-8 { order: 8; }
+  .order-xl-9 { order: 9; }
+  .order-xl-10 { order: 10; }
+  .order-xl-11 { order: 11; }
+  .order-xl-12 { order: 12; }
+
+  .offset-xl-0 { margin-left: 0%; }
+  .offset-xl-1 { margin-left: 8.333333%; }
+  .offset-xl-2 { margin-left: 16.666667%; }
+  .offset-xl-3 { margin-left: 25%; }
+  .offset-xl-4 { margin-left: 33.333333%; }
+  .offset-xl-5 { margin-left: 41.666667%; }
+  .offset-xl-6 { margin-left: 50%; }
+  .offset-xl-7 { margin-left: 58.333333%; }
+  .offset-xl-8 { margin-left: 66.666667%; }
+  .offset-xl-9 { margin-left: 75%; }
+  .offset-xl-10 { margin-left: 83.333333%; }
+  .offset-xl-11 { margin-left: 91.666667%; }
+}

source/css/loaders.css

@@ -1,58 +1,186 @@
 /*! Loaders */
 
-@keyframes loader {
-  0%   { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
-
-.loader,
-.loader-bg::after {
+.loader {
   width: var(--loader-size);
   height: var(--loader-size);
   border-radius: 50%;
-  border: solid var(--loader-width) var(--loader-bg-color);
+  border-style: solid;
+  border-width: var(--loader-thickness);
+  border-color: var(--loader-bg-color);
   border-top-color: var(--loader-color);
   border-left-color: var(--loader-color);
   display: inline-block;
   animation: loader var(--loader-speed) linear infinite;
+  margin: var(--loader-margin-y) var(--loader-margin-x);
   vertical-align: middle;
-  margin: var(--loader-spacing-y) var(--loader-spacing-x);
-}
-
-.loader-small,
-.loader-bg-small::after {
-  border-width: calc(var(--loader-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-width) * 1.5);
-  width: calc(var(--loader-size) * 2);
-  height: calc(var(--loader-size) * 2);
+
+  /* Sizes */
+  &.loader-xs {
+    width: var(--loader-size-xs);
+    height: var(--loader-size-xs);
+    border-width: var(--loader-thickness-xs);
+  }
+
+  &.loader-sm {
+    width: var(--loader-size-sm);
+    height: var(--loader-size-sm);
+    border-width: var(--loader-thickness-sm);
+  }
+
+  &.loader-lg {
+    width: var(--loader-size-lg);
+    height: var(--loader-size-lg);
+    border-width: var(--loader-thickness-lg);
+  }
+
+  &.loader-xl {
+    width: var(--loader-size-xl);
+    height: var(--loader-size-xl);
+    border-width: var(--loader-thickness-xl);
+  }
+
+  /* Variations */
+  &.loader-secondary {
+    border-color: var(--loader-bg-color-secondary);
+    border-top-color: var(--loader-color-secondary);
+    border-left-color: var(--loader-color-secondary);
+  }
+
+  &.loader-success {
+    border-color: var(--loader-bg-color-success);
+    border-top-color: var(--loader-color-success);
+    border-left-color: var(--loader-color-success);
+  }
+
+  &.loader-info {
+    border-color: var(--loader-bg-color-info);
+    border-top-color: var(--loader-color-info);
+    border-left-color: var(--loader-color-info);
+  }
+
+  &.loader-warning {
+    border-color: var(--loader-bg-color-warning);
+    border-top-color: var(--loader-color-warning);
+    border-left-color: var(--loader-color-warning);
+  }
+
+  &.loader-danger {
+    border-color: var(--loader-bg-color-danger);
+    border-top-color: var(--loader-color-danger);
+    border-left-color: var(--loader-color-danger);
+  }
+
+  &.loader-light {
+    border-color: var(--loader-bg-color-light);
+    border-top-color: var(--loader-color-light);
+    border-left-color: var(--loader-color-light);
+  }
+
+  &.loader-dark {
+    border-color: var(--loader-bg-color-dark);
+    border-top-color: var(--loader-color-dark);
+    border-left-color: var(--loader-color-dark);
+  }
 }
 
+/* Background loaders */
 .loader-bg {
-  position: relative !important;
+  position: relative;
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: calc(50% - var(--loader-size) / 2);
+    left: calc(50% - var(--loader-size) / 2);
+    width: var(--loader-size);
+    height: var(--loader-size);
+    border-radius: 50%;
+    border-style: solid;
+    border-width: var(--loader-thickness);
+    border-color: var(--loader-bg-color);
+    border-top-color: var(--loader-color);
+    border-left-color: var(--loader-color);
+    animation: loader var(--loader-speed) linear infinite;
+  }
+
+  /* Sizes */
+  &.loader-bg-xs::after {
+    top: calc(50% - var(--loader-size-xs) / 2);
+    left: calc(50% - var(--loader-size-xs) / 2);
+    width: var(--loader-size-xs);
+    height: var(--loader-size-xs);
+    border-width: var(--loader-thickness-xs);
+  }
+
+  &.loader-bg-sm::after {
+    top: calc(50% - var(--loader-size-sm) / 2);
+    left: calc(50% - var(--loader-size-sm) / 2);
+    width: var(--loader-size-sm);
+    height: var(--loader-size-sm);
+    border-width: var(--loader-thickness-sm);
+  }
+
+  &.loader-bg-lg::after {
+    top: calc(50% - var(--loader-size-lg) / 2);
+    left: calc(50% - var(--loader-size-lg) / 2);
+    width: var(--loader-size-lg);
+    height: var(--loader-size-lg);
+    border-width: var(--loader-thickness-lg);
+  }
+
+  &.loader-bg-xl::after {
+    top: calc(50% - var(--loader-size-xl) / 2);
+    left: calc(50% - var(--loader-size-xl) / 2);
+    width: var(--loader-size-xl);
+    height: var(--loader-size-xl);
+    border-width: var(--loader-thickness-xl);
+  }
+
+  /* Variations */
+  &.loader-bg-secondary::after {
+    border-color: var(--loader-bg-color-secondary);
+    border-top-color: var(--loader-color-secondary);
+    border-left-color: var(--loader-color-secondary);
+  }
+
+  &.loader-bg-success::after {
+    border-color: var(--loader-bg-color-success);
+    border-top-color: var(--loader-color-success);
+    border-left-color: var(--loader-color-success);
+  }
+
+  &.loader-bg-info::after {
+    border-color: var(--loader-bg-color-info);
+    border-top-color: var(--loader-color-info);
+    border-left-color: var(--loader-color-info);
+  }
+
+  &.loader-bg-warning::after {
+    border-color: var(--loader-bg-color-warning);
+    border-top-color: var(--loader-color-warning);
+    border-left-color: var(--loader-color-warning);
+  }
+
+  &.loader-bg-danger::after {
+    border-color: var(--loader-bg-color-danger);
+    border-top-color: var(--loader-color-danger);
+    border-left-color: var(--loader-color-danger);
+  }
+
+  &.loader-bg-light::after {
+    border-color: var(--loader-bg-color-light);
+    border-top-color: var(--loader-color-light);
+    border-left-color: var(--loader-color-light);
+  }
+
+  &.loader-bg-dark::after {
+    border-color: var(--loader-bg-color-dark);
+    border-top-color: var(--loader-color-dark);
+    border-left-color: var(--loader-color-dark);
+  }
 }
 
-.loader-bg::after {
-  content: '';
-  position: absolute;
-  top: calc(50% - var(--loader-size) / 2);
-  left: calc(50% - var(--loader-size) / 2);
-  margin: 0;
-}
-
-.loader-bg-small::after {
-  position: absolute;
-  top: calc(50% - var(--loader-size) / 4);
-  left: calc(50% - var(--loader-size) / 4);
-}
-
-.loader-bg-big::after {
-  position: absolute;
-  top: calc(50% - var(--loader-size) / 1);
-  left: calc(50% - var(--loader-size) / 1);
+@keyframes loader {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
 }

source/css/progress-bars.css

@@ -0,0 +1,122 @@
+/*! Progress Bars */
+
+.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: 1.5rem;
+  box-shadow: var(--progress-box-shadow);
+
+  & .progress-bar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 0;
+    height: 100%;
+    text-align: center;
+    color: var(--progress-color);
+    background-color: var(--progress-bar-color);
+    transition: var(--progress-speed) width;
+    user-select: none;
+    cursor: default;
+  }
+
+  &.progress-indeterminate .progress-bar {
+    width: 75% !important;
+    animation: progress-indeterminate ease-in-out var(--progress-speed-indeterminate) infinite;
+  }
+
+  /* Sizes */
+  &.progress-xs {
+    font-size: var(--progress-font-size-xs);
+    height: var(--progress-height-xs);
+    line-height: var(--progress-height-xs);
+  }
+
+  &.progress-sm {
+    font-size: var(--progress-font-size-sm);
+    height: var(--progress-height-sm);
+    line-height: var(--progress-height-sm);
+  }
+
+  &.progress-lg {
+    font-size: var(--progress-font-size-lg);
+    height: var(--progress-height-lg);
+    line-height: var(--progress-height-lg);
+  }
+
+  &.progress-xl {
+    font-size: var(--progress-font-size-xl);
+    height: var(--progress-height-xl);
+    line-height: var(--progress-height-xl);
+  }
+
+  /* Variations */
+  &.progress-secondary {
+    & .progress-bar {
+      background-color: var(--state-secondary);
+    }
+  }
+
+  &.progress-success {
+    & .progress-bar {
+      background-color: var(--state-success);
+    }
+  }
+
+  &.progress-info {
+    & .progress-bar {
+      background-color: var(--state-info);
+    }
+  }
+
+  &.progress-warning {
+    & .progress-bar {
+      background-color: var(--state-warning);
+    }
+  }
+
+  &.progress-danger {
+    & .progress-bar {
+      background-color: var(--state-danger);
+    }
+  }
+
+  &.progress-light {
+    background-color: var(--state-dark);
+
+    & .progress-bar {
+      color: var(--state-dark);
+      background-color: var(--state-light);
+    }
+  }
+
+  &.progress-dark {
+    background-color: var(--state-light);
+
+    & .progress-bar {
+      color: var(--state-light);
+      background-color: var(--state-dark);
+    }
+  }
+}
+
+@keyframes progress-indeterminate {
+  0% {
+    left: -65%;
+  }
+
+  50% {
+    left: 90%;
+  }
+
+  100% {
+    left: -65%;
+  }
+}

source/css/shoelace.css

@@ -1,24 +1,24 @@
 /*!
-  Shoelace.css {version}
+  Shoelace.css {{version}}
   (c) A Beautiful Site, LLC
 
   Released under the MIT license
   Source: https://github.com/claviska/shoelace-css
 */
 
-/* Reset */
 @import url('normalize.css');
-
-/* Shoelace variables and base styles */
-@import url('variables.css');
 @import url('content.css');
-
-/* Components */
 @import url('alerts.css');
 @import url('badges.css');
 @import url('buttons.css');
+@import url('dropdowns.css');
+@import url('file-buttons.css');
 @import url('forms.css');
+@import url('grid.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');
+@import url('variables.css');

source/css/switches.css

@@ -0,0 +1,335 @@
+/*! Switches */
+
+.switch {
+  font-size: var(--switch-font-size);
+  position: relative;
+
+  & input {
+    position: absolute;
+    height: 1px;
+    width: 1px;
+    background: none;
+    border: 0;
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    overflow: hidden;
+    padding: 0;
+
+    & + label {
+      position: relative;
+      min-width: calc(var(--switch-height) * 2);
+      border-radius: var(--switch-border-radius);
+      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);
+    }
+
+    & + label::before,
+    & + label::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: calc(var(--switch-height) * 2);
+      bottom: 0;
+      display: block;
+    }
+
+    & + label::before {
+      right: 0;
+      background-color: var(--switch-bg-color);
+      border-radius: var(--switch-border-radius);
+      transition: var(--switch-speed) all;
+    }
+
+    & + 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-color);
+      transition: var(--switch-speed) margin;
+    }
+
+    &:checked + label::before {
+      background-color: var(--switch-color);
+    }
+
+    &:checked + label::after {
+      margin-left: var(--switch-height);
+    }
+
+    &:focus + label::before {
+      outline: none;
+      box-shadow: 0 0 0 var(--switch-focus-width) color(var(--switch-color) alpha(50%));
+    }
+
+    &:disabled + label {
+      opacity: .5;
+      cursor: not-allowed;
+    }
+  }
+
+  & + .switch {
+    margin-left: 1rem;
+  }
+
+  /* Sizes */
+  &.switch-xs {
+    font-size: var(--switch-font-size-xs);
+
+    & input {
+      & + label {
+        min-width: calc(var(--switch-height-xs) * 2);
+        height: var(--switch-height-xs);
+        line-height: var(--switch-height-xs);
+        text-indent: calc(var(--switch-height-xs) * 2 + .5rem);
+      }
+
+      & + label::before,
+      & + label::after {
+        width: calc(var(--switch-height-xs) * 2);
+      }
+
+      & + label::after {
+        width: calc(var(--switch-height-xs) - var(--switch-thumb-spacing) * 2);
+        height: calc(var(--switch-height-xs) - var(--switch-thumb-spacing) * 2);
+      }
+
+      &:checked + label::after {
+        margin-left: var(--switch-height-xs);
+      }
+    }
+  }
+
+  &.switch-sm {
+    font-size: var(--switch-font-size-sm);
+
+    & input {
+      & + label {
+        min-width: calc(var(--switch-height-sm) * 2);
+        height: var(--switch-height-sm);
+        line-height: var(--switch-height-sm);
+        text-indent: calc(var(--switch-height-sm) * 2 + .5rem);
+      }
+
+      & + label::before,
+      & + label::after {
+        width: calc(var(--switch-height-sm) * 2);
+      }
+
+      & + label::after {
+        width: calc(var(--switch-height-sm) - var(--switch-thumb-spacing) * 2);
+        height: calc(var(--switch-height-sm) - var(--switch-thumb-spacing) * 2);
+      }
+
+      &:checked + label::after {
+        margin-left: var(--switch-height-sm);
+      }
+    }
+  }
+
+  &.switch-lg {
+    font-size: var(--switch-font-size-lg);
+
+    & input {
+      & + label {
+        min-width: calc(var(--switch-height-lg) * 2);
+        height: var(--switch-height-lg);
+        line-height: var(--switch-height-lg);
+        text-indent: calc(var(--switch-height-lg) * 2 + .5rem);
+      }
+
+      & + label::before,
+      & + label::after {
+        width: calc(var(--switch-height-lg) * 2);
+      }
+
+      & + label::after {
+        width: calc(var(--switch-height-lg) - var(--switch-thumb-spacing) * 2);
+        height: calc(var(--switch-height-lg) - var(--switch-thumb-spacing) * 2);
+      }
+
+      &:checked + label::after {
+        margin-left: var(--switch-height-lg);
+      }
+    }
+  }
+
+  &.switch-xl {
+    font-size: var(--switch-font-size-xl);
+
+    & input {
+      & + label {
+        min-width: calc(var(--switch-height-xl) * 2);
+        height: var(--switch-height-xl);
+        line-height: var(--switch-height-xl);
+        text-indent: calc(var(--switch-height-xl) * 2 + .5rem);
+      }
+
+      & + label::before,
+      & + label::after {
+        width: calc(var(--switch-height-xl) * 2);
+      }
+
+      & + label::after {
+        width: calc(var(--switch-height-xl) - var(--switch-thumb-spacing) * 2);
+        height: calc(var(--switch-height-xl) - var(--switch-thumb-spacing) * 2);
+      }
+
+      &:checked + label::after {
+        margin-left: var(--switch-height-xl);
+      }
+    }
+  }
+
+  /* Variations */
+  &.switch-secondary {
+    & input {
+      background-color: var(--switch-bg-color-secondary);
+
+      & + label::after { background-color: var(--switch-thumb-color-secondary); }
+      & + label::before { background-color: var(--switch-bg-color-secondary); }
+      &:checked + label::before { background-color: var(--switch-color-secondary); }
+      &:focus + label::before { box-shadow: 0 0 0 var(--switch-focus-width) color(var(--switch-color-secondary) alpha(50%)); }
+    }
+  }
+
+  &.switch-success {
+    & input {
+      background-color: var(--switch-bg-color-success);
+
+      & + label::after {
+        background-color: var(--switch-thumb-color-success);
+      }
+
+      & + label::before {
+        background-color: var(--switch-bg-color-success);
+      }
+
+      &:checked + label::before {
+        background-color: var(--switch-color-success);
+      }
+
+      &:focus + label::before {
+        box-shadow: 0 0 0 var(--switch-focus-width) color(var(--switch-color-success) alpha(50%));
+      }
+    }
+  }
+
+  &.switch-info {
+    & input {
+      background-color: var(--switch-bg-color-info);
+
+      & + label::after {
+        background-color: var(--switch-thumb-color-info);
+      }
+
+      & + label::before {
+        background-color: var(--switch-bg-color-info);
+      }
+
+      &:checked + label::before {
+        background-color: var(--switch-color-info);
+      }
+
+      &:focus + label::before {
+        box-shadow: 0 0 0 var(--switch-focus-width) color(var(--switch-color-info) alpha(50%));
+      }
+    }
+  }
+
+  &.switch-warning {
+    & input {
+      background-color: var(--switch-bg-color-warning);
+
+      & + label::after {
+        background-color: var(--switch-thumb-color-warning);
+      }
+
+      & + label::before {
+        background-color: var(--switch-bg-color-warning);
+      }
+
+      &:checked + label::before {
+        background-color: var(--switch-color-warning);
+      }
+
+      &:focus + label::before {
+        box-shadow: 0 0 0 var(--switch-focus-width) color(var(--switch-color-warning) alpha(50%));
+      }
+    }
+  }
+
+  &.switch-danger {
+    & input {
+      background-color: var(--switch-bg-color-danger);
+
+      & + label::after {
+        background-color: var(--switch-thumb-color-danger);
+      }
+
+      & + label::before {
+        background-color: var(--switch-bg-color-danger);
+      }
+
+      &:checked + label::before {
+        background-color: var(--switch-color-danger);
+      }
+
+      &:focus + label::before {
+        box-shadow: 0 0 0 var(--switch-focus-width) color(var(--switch-color-danger) alpha(50%));
+      }
+    }
+  }
+
+  &.switch-light {
+    & input {
+      background-color: var(--switch-bg-color-light);
+
+      & + label::after {
+        background-color: var(--switch-thumb-color-light);
+      }
+
+      & + label::before {
+        background-color: var(--switch-bg-color-light);
+      }
+
+      &:checked + label::before {
+        background-color: var(--switch-color-light);
+      }
+
+      &:focus + label::before {
+        box-shadow: 0 0 0 var(--switch-focus-width) color(var(--switch-color-light) alpha(50%));
+      }
+    }
+  }
+
+  &.switch-dark {
+    & input {
+      background-color: var(--switch-bg-color-dark);
+
+      & + label::after {
+        background-color: var(--switch-thumb-color-dark);
+      }
+
+      & + label::before {
+        background-color: var(--switch-bg-color-dark);
+      }
+
+      &:checked + label::before {
+        background-color: var(--switch-color-dark);
+      }
+
+      &:focus + label::before {
+        box-shadow: 0 0 0 var(--switch-focus-width) color(var(--switch-color-dark) alpha(50%));
+      }
+    }
+  }
+}

source/css/tables.css

@@ -2,41 +2,51 @@
 
 table {
   width: 100%;
+  background-color: var(--table-bg-color);
   border-collapse: collapse;
-  margin-bottom: 1rem;
-}
+  margin-bottom: 1.5rem;
 
-table caption {
-  caption-side: bottom;
-  font-size: var(--font-size-small);
-  color: var(--text-muted);
-  text-align: center;
-  padding-top: var(--table-spacing-y);
-}
+  & caption {
+    caption-side: bottom;
+    font-size: var(--font-size-small);
+    color: var(--body-color-muted);
+    text-align: center;
+    padding-top: var(--table-spacing-y);
+  }
 
-table th {
-  text-align: left;
-  background: var(--table-header-bg-color);
-  border-bottom: solid calc(var(--table-border-width) * 2) var(--table-border-color);
-  padding: var(--table-spacing-y) var(--table-spacing-x);
-}
+  & th {
+    text-align: left;
+    background-color: var(--table-header-bg-color);
+    border-bottom: solid calc(var(--table-border-width) * 2) var(--table-border-color);
+    padding: var(--table-spacing-y) var(--table-spacing-x);
+  }
 
-table td {
-  border-bottom: solid var(--table-border-width) var(--table-border-color);
-  padding: var(--table-spacing-y) var(--table-spacing-x);
-}
+  & td {
+    border-bottom: solid var(--table-border-width) var(--table-border-color);
+    padding: var(--table-spacing-y) var(--table-spacing-x);
+  }
 
-table.table-striped tr:nth-child(odd) td {
-  background-color: var(--table-stripe-bg-color);
-}
+  /* Variations */
+  &.table-bordered {
+    border: solid var(--table-border-width) var(--table-border-color);
 
-table.table-bordered {
-  border: solid var(--table-border-width) var(--table-border-color);
-}
+    & td {
+      border-style: solid;
+      border-width: var(--table-border-width);
+      border-color: var(--table-border-color);
+    }
+  }
 
-table.table-bordered th,
-table.table-bordered td {
-  border-style: solid;
-  border-width: var(--table-border-width);
-  border-color: var(--table-border-color);
+  &.table-hoverable {
+    & tbody tr:hover td {
+      color: var(--table-hover-color);
+      background-color: var(--table-hover-bg-color);
+    }
+  }
+
+  &.table-striped {
+    & tr:nth-child(odd) td {
+      background-color: var(--table-stripe-bg-color);
+    }
+  }
 }

source/css/tabs.css

@@ -2,51 +2,56 @@
 
 .tabs {
   width: 100%;
-  margin-bottom: 1rem;
-}
+  margin-bottom: 1.5rem;
 
-.tabs-nav {
-  margin-bottom: 1rem;
-  user-select: none;
-}
+  & .tabs-nav {
+    margin-bottom: 1.5rem;
+    user-select: none;
 
-.tabs-nav a {
-  color: var(--tab-color);
-  text-decoration: none;
-  background-color: var(--tab-bg-color);
-  border-radius: var(--tab-border-radius);
-  padding: var(--tab-spacing-y) var(--tab-spacing-x);
-  display: inline-block;
-}
+    & a {
+      color: var(--tab-color);
+      text-decoration: none;
+      background-color: var(--tab-bg-color);
+      border-radius: var(--tab-border-radius);
+      padding: var(--tab-padding-y) var(--tab-padding-x);
+      display: inline-block;
+      transition: var(--tab-speed) box-shadow;
 
-.tabs-nav a:hover {
-  color: var(--tab-color-hover);
-  background-color: var(--tab-bg-color-hover);
-  text-decoration: none;
-}
+      &:hover {
+        color: var(--tab-color-hover);
+        background-color: var(--tab-bg-color-hover);
+        text-decoration: none;
+      }
 
-.tabs-nav a.active {
-  color: var(--tab-color-active);
-  background-color: var(--tab-bg-color-active);
-  cursor: default;
-}
+      &.active {
+        color: var(--tab-color-active);
+        background-color: var(--tab-bg-color-active);
+        cursor: default;
+      }
 
-.tabs-nav a.disabled {
-  color: var(--tab-color-disabled);
-  background-color: var(--tab-bg-color-disabled);
-  cursor: not-allowed;
-}
+      &.disabled {
+        color: var(--tab-color-disabled);
+        background-color: var(--tab-bg-color-disabled);
+        cursor: not-allowed;
+      }
+    }
 
-.tabs-pane {
-  border: solid var(--tab-pane-border-width) var(--tab-pane-border-color);
-  border-radius: .25rem;
-  padding: var(--tab-pane-spacing-y) var(--tab-pane-spacing-x);
-}
+    &.tabs-nav-block a {
+      display: block;
+    }
+  }
 
-.tabs-pane:not(.active) {
-  display: none;
-}
+  & .tabs-pane {
+    border: solid var(--tab-pane-border-width) var(--tab-pane-border-color);
+    border-radius: .25rem;
+    padding: var(--tab-pane-padding-y) var(--tab-pane-padding-x);
 
-.tabs-pane :last-child {
-  margin-bottom: 0;
+    &:not(.active) {
+      display: none;
+    }
+
+    & > :last-child {
+      margin-bottom: 0;
+    }
+  }
 }

source/css/utilities.css

@@ -1,5 +1,77 @@
 /*! Utilties */
 
+/***************************************************************************************************
+* Text utilities
+***************************************************************************************************/
+
+/* Text color */
+.text-primary { color: var(--state-primary) !important; }
+.text-secondary { color: var(--state-secondary) !important; }
+.text-success { color: var(--state-success) !important; }
+.text-success { color: var(--state-success) !important; }
+.text-info { color: var(--state-info) !important; }
+.text-warning { color: var(--state-warning) !important; }
+.text-danger { color: var(--state-danger) !important; }
+.text-light { color: var(--state-light) !important; }
+.text-dark { color: var(--state-dark) !important; }
+
+/* Text style */
+.text-small { font-size: var(--font-size-small) !important; }
+.text-bold { font-weight: var(--font-weight-bold) !important; }
+.text-italic { font-style: italic !important; }
+.text-muted { color: var(--body-color-muted) !important; }
+
+/* Text alignment */
+.text-left { text-align: left !important; }
+.text-right { text-align: right !important; }
+.text-center { text-align: center !important; }
+.text-justify { text-align: justify !important; }
+
+/* Text case */
+.text-lowercase { text-transform: lowercase !important; }
+.text-uppercase { text-transform: uppercase !important; }
+.text-capitalize { text-transform: capitalize !important; }
+
+/* Text wrapping */
+.text-nowrap { white-space: nowrap !important; }
+
+/***************************************************************************************************
+* Background utilities
+***************************************************************************************************/
+
+.bg-primary { background-color: var(--state-primary) !important; }
+.bg-secondary { background-color: var(--state-secondary) !important; }
+.bg-success { background-color: var(--state-success) !important; }
+.bg-info { background-color: var(--state-info) !important; }
+.bg-warning { background-color: var(--state-warning) !important; }
+.bg-danger { background-color: var(--state-danger) !important; }
+.bg-light { background-color: var(--state-light) !important; }
+.bg-dark { background-color: var(--state-dark) !important; }
+
+/***************************************************************************************************
+* Display utilities
+***************************************************************************************************/
+
+@media (--breakpoint-xs-only) { .hide-xs { display: none !important; } }
+@media (--breakpoint-xs-up) { .hide-xs-up { display: none !important; } }
+@media (--breakpoint-xs-down) { .hide-xs-down { display: none !important; } }
+
+@media (--breakpoint-sm-only) { .hide-sm { display: none !important; } }
+@media (--breakpoint-sm-up) { .hide-sm-up { display: none !important; } }
+@media (--breakpoint-sm-down) { .hide-sm-down { display: none !important; } }
+
+@media (--breakpoint-md-only) { .hide-md { display: none !important; } }
+@media (--breakpoint-md-up) { .hide-md-up { display: none !important; } }
+@media (--breakpoint-md-down) { .hide-md-down { display: none !important; } }
+
+@media (--breakpoint-lg-only) { .hide-lg { display: none !important; } }
+@media (--breakpoint-lg-up) { .hide-lg-up { display: none !important; } }
+@media (--breakpoint-lg-down) { .hide-lg-down { display: none !important; } }
+
+@media (--breakpoint-xl-only) { .hide-xl { display: none !important; } }
+@media (--breakpoint-xl-up) { .hide-xl-up { display: none !important; } }
+@media (--breakpoint-xl-down) { .hide-xl-down { display: none !important; } }
+
 /***************************************************************************************************
 * Float utilities
 ***************************************************************************************************/
@@ -26,146 +98,153 @@
 * Sizing utilities
 ***************************************************************************************************/
 
-.width-0 { width: 0% !important; }
-.width-5 { width: 5% !important; }
-.width-10 { width: 10% !important; }
-.width-15 { width: 15% !important; }
-.width-20 { width: 10% !important; }
-.width-25 { width: 25% !important; }
-.width-30 { width: 30% !important; }
-.width-35 { width: 35% !important; }
-.width-40 { width: 40% !important; }
-.width-45 { width: 45% !important; }
-.width-50 { width: 50% !important; }
-.width-55 { width: 55% !important; }
-.width-60 { width: 60% !important; }
-.width-65 { width: 65% !important; }
-.width-70 { width: 70% !important; }
-.width-75 { width: 75% !important; }
-.width-80 { width: 80% !important; }
-.width-85 { width: 85% !important; }
-.width-90 { width: 90% !important; }
-.width-95 { width: 95% !important; }
-.width-100 { width: 100% !important; }
+.w-0 { width: 0% !important; }
+.w-5 { width: 5% !important; }
+.w-10 { width: 10% !important; }
+.w-15 { width: 15% !important; }
+.w-20 { width: 20% !important; }
+.w-25 { width: 25% !important; }
+.w-30 { width: 30% !important; }
+.w-35 { width: 35% !important; }
+.w-40 { width: 40% !important; }
+.w-45 { width: 45% !important; }
+.w-50 { width: 50% !important; }
+.w-55 { width: 55% !important; }
+.w-60 { width: 60% !important; }
+.w-65 { width: 65% !important; }
+.w-70 { width: 70% !important; }
+.w-75 { width: 75% !important; }
+.w-80 { width: 80% !important; }
+.w-85 { width: 85% !important; }
+.w-90 { width: 90% !important; }
+.w-95 { width: 95% !important; }
+.w-100 { width: 100% !important; }
 
-.height-0 { height: 0% !important; }
-.height-5 { height: 5% !important; }
-.height-10 { height: 10% !important; }
-.height-15 { height: 15% !important; }
-.height-20 { height: 10% !important; }
-.height-25 { height: 25% !important; }
-.height-30 { height: 30% !important; }
-.height-35 { height: 35% !important; }
-.height-40 { height: 40% !important; }
-.height-45 { height: 45% !important; }
-.height-50 { height: 50% !important; }
-.height-55 { height: 55% !important; }
-.height-60 { height: 60% !important; }
-.height-65 { height: 65% !important; }
-.height-70 { height: 70% !important; }
-.height-75 { height: 75% !important; }
-.height-80 { height: 80% !important; }
-.height-85 { height: 85% !important; }
-.height-90 { height: 90% !important; }
-.height-95 { height: 95% !important; }
-.height-100 { height: 100% !important; }
+.h-0 { height: 0% !important; }
+.h-5 { height: 5% !important; }
+.h-10 { height: 10% !important; }
+.h-15 { height: 15% !important; }
+.h-20 { height: 20% !important; }
+.h-25 { height: 25% !important; }
+.h-30 { height: 30% !important; }
+.h-35 { height: 35% !important; }
+.h-40 { height: 40% !important; }
+.h-45 { height: 45% !important; }
+.h-50 { height: 50% !important; }
+.h-55 { height: 55% !important; }
+.h-60 { height: 60% !important; }
+.h-65 { height: 65% !important; }
+.h-70 { height: 70% !important; }
+.h-75 { height: 75% !important; }
+.h-80 { height: 80% !important; }
+.h-85 { height: 85% !important; }
+.h-90 { height: 90% !important; }
+.h-95 { height: 95% !important; }
+.h-100 { height: 100% !important; }
+
+.w-max-100 { max-width: 100% !important; }
+.h-max-100 { max-width: 100% !important; }
 
 /***************************************************************************************************
 * 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; }
+.pad-0 { padding: 0 !important; }
+.pad-x-0 { padding-left: 0 !important; padding-right: 0 !important; }
+.pad-y-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
+.pad-t-0 { padding-top: 0 !important; }
+.pad-r-0 { padding-right: 0 !important; }
+.pad-b-0 { padding-bottom: 0 !important; }
+.pad-l-0 { 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; }
+.pad-xs { padding: var(--spacing-xs) !important; }
+.pad-x-xs { padding-left: var(--spacing-xs) !important; padding-right: var(--spacing-xs) !important; }
+.pad-y-xs { padding-top: var(--spacing-xs) !important; padding-bottom: var(--spacing-xs) !important; }
+.pad-t-xs { padding-top: var(--spacing-xs) !important; }
+.pad-r-xs { padding-right: var(--spacing-xs) !important; }
+.pad-b-xs { padding-bottom: var(--spacing-xs) !important; }
+.pad-l-xs { padding-left: var(--spacing-xs) !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; }
+.pad-sm { padding: var(--spacing-sm) !important; }
+.pad-x-sm { padding-left: var(--spacing-sm) !important; padding-right: var(--spacing-sm) !important; }
+.pad-y-sm { padding-top: var(--spacing-sm) !important; padding-bottom: var(--spacing-sm) !important; }
+.pad-t-sm { padding-top: var(--spacing-sm) !important; }
+.pad-r-sm { padding-right: var(--spacing-sm) !important; }
+.pad-b-sm { padding-bottom: var(--spacing-sm) !important; }
+.pad-l-sm { padding-left: var(--spacing-sm) !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; }
+.pad-md { padding: var(--spacing-md) !important; }
+.pad-x-md { padding-left: var(--spacing-md) !important; padding-right: var(--spacing-md) !important; }
+.pad-y-md { padding-top: var(--spacing-md) !important; padding-bottom: var(--spacing-md) !important; }
+.pad-t-md { padding-top: var(--spacing-md) !important; }
+.pad-r-md { padding-right: var(--spacing-md) !important; }
+.pad-b-md { padding-bottom: var(--spacing-md) !important; }
+.pad-l-md { padding-left: var(--spacing-md) !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; }
+.pad-lg { padding: var(--spacing-lg) !important; }
+.pad-x-lg { padding-left: var(--spacing-lg) !important; padding-right: var(--spacing-lg) !important; }
+.pad-y-lg { padding-top: var(--spacing-lg) !important; padding-bottom: var(--spacing-lg) !important; }
+.pad-t-lg { padding-top: var(--spacing-lg) !important; }
+.pad-r-lg { padding-right: var(--spacing-lg) !important; }
+.pad-b-lg { padding-bottom: var(--spacing-lg) !important; }
+.pad-l-lg { padding-left: var(--spacing-lg) !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; }
+.pad-xl { padding: var(--spacing-xl) !important; }
+.pad-x-xl { padding-left: var(--spacing-xl) !important; padding-right: var(--spacing-xl) !important; }
+.pad-y-xl { padding-top: var(--spacing-xl) !important; padding-bottom: var(--spacing-xl) !important; }
+.pad-t-xl { padding-top: var(--spacing-xl) !important; }
+.pad-r-xl { padding-right: var(--spacing-xl) !important; }
+.pad-b-xl { padding-bottom: var(--spacing-xl) !important; }
+.pad-l-xl { padding-left: var(--spacing-xl) !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; }
+.mar-0 { margin: 0 !important; }
+.mar-x-0 { margin-left: 0 !important; margin-right: 0 !important; }
+.mar-y-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
+.mar-t-0 { margin-top: 0 !important; }
+.mar-r-0 { margin-right: 0 !important; }
+.mar-b-0 { margin-bottom: 0 !important; }
+.mar-l-0 { margin-left: 0 !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; }
+.mar-xs { margin: var(--spacing-xs) !important; }
+.mar-x-xs { margin-left: var(--spacing-xs) !important; margin-right: var(--spacing-xs) !important; }
+.mar-y-xs { margin-top: var(--spacing-xs) !important; margin-bottom: var(--spacing-xs) !important; }
+.mar-t-xs { margin-top: var(--spacing-xs) !important; }
+.mar-r-xs { margin-right: var(--spacing-xs) !important; }
+.mar-b-xs { margin-bottom: var(--spacing-xs) !important; }
+.mar-l-xs { margin-left: var(--spacing-xs) !important; }
 
-.m-x-auto { margin-left: auto !important; margin-right: auto !important; }
+.mar-sm { margin: var(--spacing-sm) !important; }
+.mar-x-sm { margin-left: var(--spacing-sm) !important; margin-right: var(--spacing-sm) !important; }
+.mar-y-sm { margin-top: var(--spacing-sm) !important; margin-bottom: var(--spacing-sm) !important; }
+.mar-t-sm { margin-top: var(--spacing-sm) !important; }
+.mar-r-sm { margin-right: var(--spacing-sm) !important; }
+.mar-b-sm { margin-bottom: var(--spacing-sm) !important; }
+.mar-l-sm { margin-left: var(--spacing-sm) !important; }
 
-/***************************************************************************************************
-* Text utilities
-***************************************************************************************************/
+.mar-md { margin: var(--spacing-md) !important; }
+.mar-x-md { margin-left: var(--spacing-md) !important; margin-right: var(--spacing-md) !important; }
+.mar-y-md { margin-top: var(--spacing-md) !important; margin-bottom: var(--spacing-md) !important; }
+.mar-t-md { margin-top: var(--spacing-md) !important; }
+.mar-r-md { margin-right: var(--spacing-md) !important; }
+.mar-b-md { margin-bottom: var(--spacing-md) !important; }
+.mar-l-md { margin-left: var(--spacing-md) !important; }
 
-/* Text color */
-.text-success { color: var(--state-success) !important; }
-.text-info { color: var(--state-info) !important; }
-.text-warning { color: var(--state-warning) !important; }
-.text-danger { color: var(--state-danger) !important; }
-.text-muted { color: var(--text-muted) !important; }
+.mar-lg { margin: var(--spacing-lg) !important; }
+.mar-x-lg { margin-left: var(--spacing-lg) !important; margin-right: var(--spacing-lg) !important; }
+.mar-y-lg { margin-top: var(--spacing-lg) !important; margin-bottom: var(--spacing-lg) !important; }
+.mar-t-lg { margin-top: var(--spacing-lg) !important; }
+.mar-r-lg { margin-right: var(--spacing-lg) !important; }
+.mar-b-lg { margin-bottom: var(--spacing-lg) !important; }
+.mar-l-lg { margin-left: var(--spacing-lg) !important; }
 
-/* Text style */
-.text-small { font-size: var(--font-size-small) !important; }
-.text-bold { font-weight: var(--font-weight-bold) !important; }
-.text-italic { font-style: italic !important; }
+.mar-xl { margin: var(--spacing-xl) !important; }
+.mar-x-xl { margin-left: var(--spacing-xl) !important; margin-right: var(--spacing-xl) !important; }
+.mar-y-xl { margin-top: var(--spacing-xl) !important; margin-bottom: var(--spacing-xl) !important; }
+.mar-t-xl { margin-top: var(--spacing-xl) !important; }
+.mar-r-xl { margin-right: var(--spacing-xl) !important; }
+.mar-b-xl { margin-bottom: var(--spacing-xl) !important; }
+.mar-l-xl { margin-left: var(--spacing-xl) !important; }
 
-/* Text alignment */
-.text-left { text-align: left !important; }
-.text-right { text-align: right !important; }
-.text-center { text-align: center !important; }
-.text-justify { text-align: justify !important; }
-
-/* Text case */
-.text-lowercase { text-transform: lowercase !important; }
-.text-uppercase { text-transform: uppercase !important; }
-.text-capitalize { text-transform: capitalize !important; }
-
-/* Text wrapping */
-.text-nowrap { white-space: nowrap !important; }
+.mar-x-auto { margin-left: auto !important; margin-right: auto !important; }
+.mar-y-auto { margin-top: auto !important; margin-bottom: auto !important; }
+.mar-xy-auto { margin: auto !important; }

source/css/variables.css

@@ -1,14 +1,15 @@
-/*! Variables */
-
 :root {
+  /*************************************************************************************************
+  * Core variables
+  *************************************************************************************************/
+
   /* Fonts */
-  --font-family-sans-serif: sans-serif;
-  --font-family-serif: serif;
-  --font-family-system: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-  --font-family-monospace: Menlo, Consolas, "DejaVu Sans Mono", monospace;
+  --font-sans-serif: sans-serif;
+  --font-serif: serif;
+  --font-system: system-ui;
+  --font-monospace: Menlo, Consolas, "DejaVu Sans Mono", monospace;
 
   /* Colors (most courtesy of http://clrs.cc/) */
-  --color-primary: tomato;
   --color-white: white;
   --color-navy: #001f3f;
   --color-blue: #0074d9;
@@ -28,42 +29,196 @@
   --color-silver: #ddd;
 
   /* States */
+  --state-primary: var(--color-blue);
+  --state-secondary: var(--color-gray);
   --state-success: var(--color-green);
-  --state-info: var(--color-aqua);
+  --state-info: var(--color-teal);
   --state-warning: var(--color-orange);
   --state-danger: var(--color-red);
-  --state-inverse: var(--color-black);
+  --state-light: var(--color-white);
+  --state-dark: var(--color-black);
 
   /* Components */
   --component-bg-color: #f2f2f2;
   --component-border-color: #ddd;
   --component-border-radius: .25rem;
   --component-border-width: 1px;
-  --component-spacing: 1rem;
-  --component-spacing-big: 2rem;
-  --component-spacing-small: .5rem;
+  --component-focus-width: 2px;
+  --component-padding-x: 1rem;
+  --component-padding-y: 1rem;
+  --component-speed: .1s;
+  --component-box-shadow-inner: inset 0 1px 1px rgba(0, 0, 0, .05);
+  --component-box-shadow-outer: 0 1px 0 rgba(0, 0, 0, .05);
+
+  /*************************************************************************************************
+  * Alerts
+  *************************************************************************************************/
+
+  --alert-border-radius: var(--component-border-radius);
+  --alert-border-width: 1px;
+  --alert-padding-x: var(--component-padding-x);
+  --alert-padding-y: var(--component-padding-y);
+
+  /* Default */
+  --alert-bg-color: color(var(--state-primary) tint(75%));
+  --alert-color: color(var(--state-primary) lightness(25%));
+  --alert-border-color: color(var(--alert-bg-color) shade(5%));
+
+  /* Secondary */
+  --alert-bg-color-secondary: color(var(--state-secondary) tint(75%));
+  --alert-color-secondary: color(var(--state-secondary) lightness(25%));
+  --alert-border-color-secondary: color(var(--alert-bg-color-secondary) shade(5%));
+
+  /* Success */
+  --alert-bg-color-success: color(var(--state-success) tint(75%));
+  --alert-color-success: color(var(--state-success) lightness(25%));
+  --alert-border-color-success: color(var(--alert-bg-color-success) shade(5%));
+
+  /* Info */
+  --alert-bg-color-info: color(var(--state-info) tint(75%));
+  --alert-color-info: color(var(--state-info) lightness(25%));
+  --alert-border-color-info: color(var(--alert-bg-color-info) shade(5%));
+
+  /* Warning */
+  --alert-bg-color-warning: color(var(--state-warning) tint(75%));
+  --alert-color-warning: color(var(--state-warning) lightness(25%));
+  --alert-border-color-warning: color(var(--alert-bg-color-warning) shade(5%));
+
+  /* Danger */
+  --alert-bg-color-danger: color(var(--state-danger) tint(75%));
+  --alert-color-danger: color(var(--state-danger) lightness(25%));
+  --alert-border-color-danger: color(var(--alert-bg-color-danger) shade(5%));
+
+  /* Light */
+  --alert-bg-color-light: color(var(--state-light) tint(75%));
+  --alert-color-light: color(var(--state-dark) lightness(50%));
+  --alert-border-color-light: color(var(--alert-bg-color-light) shade(5%));
+
+  /* Dark */
+  --alert-bg-color-dark: color(var(--state-dark) tint(75%));
+  --alert-color-dark: color(var(--state-light) lightness(25%));
+  --alert-border-color-dark: color(var(--alert-bg-color-dark) shade(5%));
+
+  /*************************************************************************************************
+  * Badges
+  *************************************************************************************************/
+
+  --badge-font-size: .8em; /* ems for relative sizing */
+  --badge-border-radius: 1em;  /* ems for relative sizing */
+  --badge-focus-width: var(--component-focus-width);
+  --badge-speed: var(--component-speed);
+
+  /* Default */
+  --badge-color: var(--color-white);
+  --badge-bg-color: var(--state-primary);
+
+  /* Secondary */
+  --badge-color-secondary: var(--color-white);
+  --badge-bg-color-secondary: var(--state-secondary);
+
+  /* Success */
+  --badge-color-success: var(--color-white);
+  --badge-bg-color-success: var(--state-success);
+
+  /* Info */
+  --badge-color-info: var(--color-white);
+  --badge-bg-color-info: var(--state-info);
+
+  /* Warning */
+  --badge-color-warning: var(--color-white);
+  --badge-bg-color-warning: var(--state-warning);
+
+  /* Danger */
+  --badge-color-danger: var(--color-white);
+  --badge-bg-color-danger: var(--state-danger);
+
+  /* Light */
+  --badge-color-light: var(--state-dark);
+  --badge-bg-color-light: var(--state-light);
+
+  /* Dark */
+  --badge-color-dark: var(--state-light);
+  --badge-bg-color-dark: var(--state-dark);
+
+  /*************************************************************************************************
+  * Buttons
+  *************************************************************************************************/
+
+  --button-height-xs: var(--input-height-xs);
+  --button-height-sm: var(--input-height-sm);
+  --button-height: var(--input-height);
+  --button-height-lg: var(--input-height-lg);
+  --button-height-xl: var(--input-height-xl);
+  --button-font-size-xs: var(--input-font-size-xs);
+  --button-font-size-sm: var(--input-font-size-sm);
+  --button-font-size: var(--input-font-size);
+  --button-font-size-lg: var(--input-font-size-lg);
+  --button-font-size-xl: var(--input-font-size-xl);
+  --button-font-family: var(--input-font-family);
+  --button-font-weight: var(--input-font-weight);
+  --button-border-radius: var(--component-border-radius);
+  --button-border-width: var(--component-border-width);
+  --button-focus-width: var(--component-focus-width);
+  --button-speed: var(--component-speed);
+  --button-loader-size: 1em;
+  --button-loader-border-width: .15em;
+
+  /* Default */
+  --button-color: var(--color-white);
+  --button-bg-color: var(--state-primary);
+
+  /* Secondary */
+  --button-color-secondary: var(--color-white);
+  --button-bg-color-secondary: var(--state-secondary);
+
+  /* Success */
+  --button-color-success: var(--color-white);
+  --button-bg-color-success: var(--state-success);
+
+  /* Info */
+  --button-color-info: var(--color-white);
+  --button-bg-color-info: var(--state-info);
+
+  /* Warning */
+  --button-color-warning: var(--color-white);
+  --button-bg-color-warning: var(--state-warning);
+
+  /* Danger */
+  --button-color-danger: var(--color-white);
+  --button-bg-color-danger: var(--state-danger);
+
+  /* Light */
+  --button-color-light: var(--state-dark);
+  --button-bg-color-light: color(var(--state-light) shade(10%));
+
+  /* Dark */
+  --button-color-dark: var(--state-light);
+  --button-bg-color-dark: color(var(--state-dark) tint(10%));
+
+  /*************************************************************************************************
+  * Content
+  *************************************************************************************************/
 
-  /* Content */
   --body-bg-color: var(--color-white);
   --body-color: var(--color-black);
-  --font-family: var(--font-family-system);
+  --body-color-muted: var(--color-gray);
+
+  --font-family: var(--font-system);
   --font-size: 1rem; /* Most browsers use a default font size of 16px */
-  --font-size-big: 1.25rem;
-  --font-size-small: .875rem;
+  --font-size-small: 80%;
   --font-weight-light: 300;
   --font-weight: 400;
   --font-weight-bold: 700;
   --line-height: 1.5;
-  --text-muted: var(--color-gray);
 
   --code-font-size: 90%;
-  --code-color: var(--color-olive);
+  --code-color: var(--color-black);
   --code-border-radius: var(--component-border-radius);
   --code-bg-color: var(--component-bg-color);
-  --code-spacing-x: calc(var(--font-size) * .4);
-  --code-spacing-y: calc(var(--font-size) * .2);
+  --code-padding-x: calc(var(--font-size) * .4);
+  --code-padding-y: calc(var(--font-size) * .2);
 
-  --headings-font-family: var(--font-family-system);
+  --headings-font-family: var(--font-system);
   --headings-font-weight: var(--font-weight-light);
   --headings-line-height: 1.1;
   --headings-margin-bottom: .5rem;
@@ -75,26 +230,29 @@
   --headings-font-size-h5: 1.25rem;
   --headings-font-size-h6: 1rem;
 
-  --hr-width: 1px;
+  --hr-border-width: 1px;
+  --hr-border-color: var(--component-border-color);
+  --hr-margin-x: 0;
+  --hr-margin-y: 2rem;
 
   --kbd-font-size: 90%;
   --kbd-color: var(--color-white);
   --kbd-border-radius: var(--component-border-radius);
   --kbd-bg-color: var(--color-black);
-  --kbd-spacing-x: calc(var(--font-size) * .4);
-  --kbd-spacing-y: calc(var(--font-size) * .2);
+  --kbd-padding-x: calc(var(--font-size) * .4);
+  --kbd-padding-y: calc(var(--font-size) * .2);
 
-  --link-color: var(--color-primary);
+  --link-color: var(--state-primary);
   --link-text-decoration: none;
   --link-color-hover: var(--link-color);
   --link-text-decoration-hover: underline;
 
   --mark-color: inherit;
   --mark-bg-color: var(--color-yellow);
-  --mark-spacing-x: calc(var(--font-size) * .4);
-  --mark-spacing-y: calc(var(--font-size) * .2);
+  --mark-padding-x: calc(var(--font-size) * .4);
+  --mark-padding-y: calc(var(--font-size) * .2);
 
-  --placeholder-color: var(--text-muted);
+  --placeholder-color: var(--body-color-muted);
 
   --pre-color: var(--code-color);
   --pre-border-radius: var(--component-border-radius);
@@ -102,119 +260,304 @@
   --pre-max-height: none;
 
   --selection-color: var(--color-white);
-  --selection-bg-color: var(--color-primary);
+  --selection-bg-color: var(--state-primary);
 
-  /* Alerts */
-  --alert-color: var(--color-white);
-  --alert-border-radius: var(--component-border-radius);
-  --alert-bg-color-primary: var(--color-primary);
-  --alert-bg-color-success: var(--state-success);
-  --alert-bg-color-info: var(--state-info);
-  --alert-bg-color-warning: var(--state-warning);
-  --alert-bg-color-danger: var(--state-danger);
-  --alert-bg-color-inverse: var(--state-inverse);
-  --alert-spacing-x: var(--component-spacing);
-  --alert-spacing-y: var(--component-spacing);
+  /*************************************************************************************************
+  * Dropdowns
+  *************************************************************************************************/
 
-  /* Badges */
-  --badge-font-size: .8em; /* ems for relative sizing */
-  --badge-font-weight: var(--font-weight-bold);
-  --badge-color: var(--color-white);
-  --badge-border-radius: 1em;  /* ems for relative sizing */
-  --badge-bg-color-primary: var(--color-primary);
-  --badge-bg-color-success: var(--state-success);
-  --badge-bg-color-info: var(--state-info);
-  --badge-bg-color-warning: var(--state-warning);
-  --badge-bg-color-danger: var(--state-danger);
-  --badge-bg-color-inverse: var(--state-inverse);
-  --badge-spacing-x: calc(var(--component-spacing) * .5);
-  --badge-spacing-y: calc(var(--component-spacing) * .15);
+  --dropdown-min-width: 10rem;
+  --dropdown-max-width: 25rem;
+  --dropdown-max-height: none;
+  --dropdown-border-color: var(--component-border-color);
+  --dropdown-border-radius: var(--component-border-radius);
+  --dropdown-border-width: var(--component-border-width);
+  --dropdown-font-size: inherit;
+  --dropdown-font-weight: inherit;
+  --dropdown-color: var(--body-color);
+  --dropdown-color-hover: var(--color-white);
+  --dropdown-bg-color: var(--color-white);
+  --dropdown-bg-color-hover: var(--state-primary);
+  --dropdown-box-shadow: var(--component-box-shadow-outer);
+  --dropdown-line-height: var(--line-height);
+  --dropdown-padding-x: 1rem;
+  --dropdown-padding-y: .25rem;
+  --dropdown-offset-x: 0;
+  --dropdown-offset-y: 1px;
+  --dropdown-z-index: 100;
 
-  /* Buttons */
-  --button-font-family: inherit;
-  --button-font-weight: inherit;
-  --button-font-size: var(--font-size);
-  --button-color: var(--color-white);
-  --button-border-radius: var(--component-border-radius);
-  --button-box-shadow: inset 0 2px 0 rgba(255, 255, 255, .1), inset 0 -2px 0 rgba(0, 0, 0, .1);
-  --button-box-shadow-hover: inset 0 2px 5rem rgba(0, 0, 0, .1), inset 0 -2px 0 rgba(0, 0, 0, .1);
-  --button-box-shadow-active: inset 0 2px 5rem rgba(0, 0, 0, .1), inset 0 2px 0 rgba(0, 0, 0, .1);
-  --button-bg-color-primary: var(--color-primary);
-  --button-bg-color-success: var(--state-success);
-  --button-bg-color-info: var(--state-info);
-  --button-bg-color-warning: var(--state-warning);
-  --button-bg-color-danger: var(--state-danger);
-  --button-bg-color-inverse: var(--state-inverse);
+  --dropdown-caret-color: currentcolor;
+  --dropdown-caret-size: .5em;
+  --dropdown-caret-width: 2px;
 
-  /* Forms */
-  --fieldset-border-color: var(--component-border-color);
-  --fieldset-border-width: var(--component-border-width);
-  --fieldset-border-radius: var(--component-border-radius);
-  --fieldset-spacing-x: var(--component-spacing);
-  --fieldset-spacing-y: var(--component-spacing);
+  --dropdown-divider-color: var(--component-border-color);
+  --dropdown-divider-width: var(--component-border-width);
 
+  --dropdown-heading-font-size: var(--font-size-small);
+  --dropdown-heading-font-weight: inherit;
+  --dropdown-heading-color: var(--body-color-muted);
+
+  /*************************************************************************************************
+  * Forms
+  *************************************************************************************************/
+
+  --input-height-xs: 1.25rem;
+  --input-height-sm: 1.75rem;
+  --input-height: 2.25rem;
+  --input-height-lg: 2.75rem;
+  --input-height-xl: 3.25rem;
+  --input-font-size-xs: .625rem;
+  --input-font-size-sm: .875rem;
+  --input-font-size: 1rem;
+  --input-font-size-lg: 1.25rem;
+  --input-font-size-xl: 1.5rem;
   --input-font-family: inherit;
-  --input-font-size: var(--font-size);
   --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-width: 1px;
   --input-border-radius: var(--component-border-radius);
   --input-bg-color: var(--color-white);
-  --input-box-shadow: inset 0 1px 0 rgba(0, 0, 0, .05);
+  --input-box-shadow: var(--component-box-shadow-inner);
   --input-readonly-bg-color: var(--component-bg-color);
+  --input-focus-color: var(--state-primary);
+  --input-speed: var(--component-speed);
+
+  --input-addon-bg-color: var(--component-bg-color);
+  --input-addon-color: var(--body-color-muted);
+
+  --input-hint-color: var(--body-color-muted);
+  --input-hint-font-size: var(--font-size-small);
+
+  --input-icon-width: 2em;
+  --input-icon-offset: .5em;
+  --input-icon-color: var(--state-secondary);
+
+  --input-range-track-height: .5rem;
   --input-range-track-color: var(--component-bg-color);
-  --input-range-track-box-shadow: inset 0 1px 0 rgba(0, 0, 0, .05);
-  --input-range-thumb-color: var(--color-primary);
-  --input-range-thumb-height: 2rem;
+  --input-range-track-box-shadow: var(--component-box-shadow-inner);
+  --input-range-thumb-height: 1.25rem;
+  --input-range-thumb-color: var(--state-primary);
 
   --input-invalid-color: var(--state-danger);
   --input-invalid-border-color: var(--state-danger);
   --input-valid-color: var(--state-success);
   --input-valid-border-color: var(--state-success);
 
-  /* Loaders */
-  --loader-bg-color: var(--component-bg-color);
-  --loader-color: var(--color-primary);
-  --loader-size: 2rem;
-  --loader-width: .25rem;
+  --fieldset-border-color: var(--component-border-color);
+  --fieldset-border-width: var(--component-border-width);
+  --fieldset-border-radius: var(--component-border-radius);
+  --fieldset-padding-x: 2rem;
+  --fieldset-padding-y: 1.5rem;
+
+  --label-color: inherit;
+
+  /*************************************************************************************************
+  * Grid
+  *************************************************************************************************/
+
+  --container-max-width-sm: 540px;
+  --container-max-width-md: 720px;
+  --container-max-width-lg: 960px;
+  --container-max-width-xl: 1140px;
+
+  --grid-gutter-width: 2rem;
+
+  /*************************************************************************************************
+  * Loaders
+  *************************************************************************************************/
+
+  --loader-thickness: .2rem;
+  --loader-thickness-xs: calc(var(--loader-thickness) / 2);
+  --loader-thickness-sm: calc(var(--loader-thickness) / 1.5);
+  --loader-thickness-lg: calc(var(--loader-thickness) * 1.5);
+  --loader-thickness-xl: calc(var(--loader-thickness) * 2);
+  --loader-size-xs: var(--input-height-xs);
+  --loader-size-sm: var(--input-height-sm);
+  --loader-size: var(--input-height);
+  --loader-size-lg: var(--input-height-lg);
+  --loader-size-xl: var(--input-height-xl);
   --loader-speed: 750ms;
-  --loader-spacing-x: var(--component-spacing-small);
-  --loader-spacing-y: 0;
+  --loader-margin-x: .5em;
+  --loader-margin-y: 0;
 
-  /* Spacing Utilties */
-  --spacing-small: var(--component-spacing);
-  --spacing-medium: calc(var(--component-spacing) * 2);
-  --spacing-big: calc(var(--component-spacing) * 4);
+  /* Default */
+  --loader-color: var(--state-primary);
+  --loader-bg-color: color(var(--state-primary) lightness(90%));
 
-  /* Tabs */
-  --tab-bg-color: var(--body-bg);
-  --tab-bg-color-hover: var(--body-bg);
+  /* Secondary */
+  --loader-color-secondary: var(--state-secondary);
+  --loader-bg-color-secondary: color(var(--state-secondary) lightness(90%));
+
+  /* Success */
+  --loader-color-success: var(--state-success);
+  --loader-bg-color-success: color(var(--state-success) lightness(90%));
+
+  /* Info */
+  --loader-color-info: var(--state-info);
+  --loader-bg-color-info: color(var(--state-info) lightness(90%));
+
+  /* Warning */
+  --loader-color-warning: var(--state-warning);
+  --loader-bg-color-warning: color(var(--state-warning) lightness(90%));
+
+  /* Danger */
+  --loader-color-danger: var(--state-danger);
+  --loader-bg-color-danger: color(var(--state-danger) lightness(90%));
+
+  /* Light */
+  --loader-color-light: var(--state-light);
+  --loader-bg-color-light: color(var(--state-light) lightness(90%));
+
+  /* Dark */
+  --loader-color-dark: var(--state-dark);
+  --loader-bg-color-dark: color(var(--state-dark) lightness(90%));
+
+  /*************************************************************************************************
+  * Progress Bars
+  *************************************************************************************************/
+
+  --progress-height: var(--input-height);
+  --progress-height-xs: var(--input-height-xs);
+  --progress-height-sm: var(--input-height-sm);
+  --progress-height-lg: var(--input-height-lg);
+  --progress-height-xl: var(--input-height-xl);
+  --progress-font-size: var(--input-font-size);
+  --progress-font-size-xs: var(--input-font-size-xs);
+  --progress-font-size-sm: var(--input-font-size-sm);
+  --progress-font-size-lg: var(--input-font-size-lg);
+  --progress-font-size-xl: var(--input-font-size-xl);
+  --progress-color: var(--color-white);
+  --progress-bg-color: var(--component-bg-color);
+  --progress-bar-color: var(--state-primary);
+  --progress-border-radius: var(--component-border-radius);
+  --progress-box-shadow: var(--component-box-shadow-inner);
+  --progress-speed: var(--component-speed);
+  --progress-speed-indeterminate: 3s;
+
+  /*************************************************************************************************
+  * Switches
+  *************************************************************************************************/
+
+  --switch-height: calc(var(--input-height) * .75);
+  --switch-height-xs: calc(var(--input-height-xs) * .75);
+  --switch-height-sm: calc(var(--input-height-sm) * .75);
+  --switch-height-lg: calc(var(--input-height-lg) * .75);
+  --switch-height-xl: calc(var(--input-height-xl) * .75);
+  --switch-font-size: var(--input-font-size);
+  --switch-font-size-xs: var(--input-font-size-xs);
+  --switch-font-size-sm: var(--input-font-size-sm);
+  --switch-font-size-lg: var(--input-font-size-lg);
+  --switch-font-size-xl: var(--input-font-size-xl);
+  --switch-border-radius: var(--switch-height);
+  --switch-thumb-border-radius: 50%;
+  --switch-thumb-spacing: 2px;
+  --switch-focus-width: var(--component-focus-width);
+  --switch-speed: var(--component-speed);
+
+  /* Default */
+  --switch-color: var(--state-primary);
+  --switch-bg-color: var(--component-border-color);
+  --switch-thumb-color: var(--color-white);
+
+  /* Secondary */
+  --switch-color-secondary: var(--state-secondary);
+  --switch-bg-color-secondary: var(--component-border-color);
+  --switch-thumb-color-secondary: var(--color-white);
+
+  /* Success */
+  --switch-color-success: var(--state-success);
+  --switch-bg-color-success: var(--component-border-color);
+  --switch-thumb-color-success: var(--color-white);
+
+  /* Info */
+  --switch-color-info: var(--state-info);
+  --switch-bg-color-info: var(--component-border-color);
+  --switch-thumb-color-info: var(--color-white);
+
+  /* Warning */
+  --switch-color-warning: var(--state-warning);
+  --switch-bg-color-warning: var(--component-border-color);
+  --switch-thumb-color-warning: var(--color-white);
+
+  /* Danger */
+  --switch-color-danger: var(--state-danger);
+  --switch-bg-color-danger: var(--component-border-color);
+  --switch-thumb-color-danger: var(--color-white);
+
+  /* Light */
+  --switch-color-light: color(var(--state-light) shade(25%));
+  --switch-bg-color-light: color(var(--state-light) shade(10%));
+  --switch-thumb-color-light: var(--color-white);
+
+  /* Dark */
+  --switch-color-dark: color(var(--state-dark) tint(10%));
+  --switch-bg-color-dark: color(var(--state-dark) tint(25%));
+  --switch-thumb-color-dark: var(--color-white);
+
+  /*************************************************************************************************
+  * Tables
+  *************************************************************************************************/
+
+  --table-bg-color: var(--color-white);
+  --table-border-color: var(--component-border-color);
+  --table-border-width: var(--component-border-width);
+  --table-header-bg-color: transparent;
+  --table-spacing-x: .75rem;
+  --table-spacing-y: .5rem;
+  --table-hover-color: var(--color-white);
+  --table-hover-bg-color: var(--state-primary);
+  --table-stripe-bg-color: var(--component-bg-color);
+
+  /*************************************************************************************************
+  * Tabs
+  *************************************************************************************************/
+
+  --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);
   --tab-color-active: var(--color-white);
-  --tab-color-disabled: var(--text-muted);
-  --tab-spacing-x: var(--component-spacing);
-  --tab-spacing-y: calc(var(--component-spacing) / 2);
+  --tab-color-disabled: var(--body-color-muted);
+  --tab-padding-x: var(--component-padding-x);
+  --tab-padding-y: calc(var(--component-padding-y) / 2);
+  --tab-speed: var(--component-speed);
 
   --tab-pane-border-color: var(--component-border-color);
   --tab-pane-border-radius: var(--component-border-radius);
   --tab-pane-border-width: var(--component-border-width);
-  --tab-pane-spacing-x: var(--component-spacing);
-  --tab-pane-spacing-y: var(--component-spacing);
+  --tab-pane-padding-x: var(--component-padding-x);
+  --tab-pane-padding-y: var(--component-padding-y);
 
-  /* Tables */
-  --table-border-color: var(--component-border-color);
-  --table-border-width: var(--component-border-width);
-  --table-header-bg-color: transparent;
-  --table-stripe-bg-color: var(--component-bg-color);
-  --table-spacing-x: calc(var(--component-spacing-small) * 1.5);
-  --table-spacing-y: var(--component-spacing-small);
+  /*************************************************************************************************
+  * Utilities
+  *************************************************************************************************/
+
+  --spacing-xs: .5rem;
+  --spacing-sm: 1rem;
+  --spacing-md: 1.5rem;
+  --spacing-lg: 2rem;
+  --spacing-xl: 2.5rem;
 }
+
+/* Core breakpoints */
+@custom-media --breakpoint-xs-up only screen and (min-width: 0);
+@custom-media --breakpoint-sm-up only screen and (min-width: 576px);
+@custom-media --breakpoint-md-up only screen and (min-width: 768px);
+@custom-media --breakpoint-lg-up only screen and (min-width: 992px);
+@custom-media --breakpoint-xl-up only screen and (min-width: 1200px);
+
+@custom-media --breakpoint-xs-down only screen and (max-width: 575px);
+@custom-media --breakpoint-sm-down only screen and (max-width: 767px);
+@custom-media --breakpoint-md-down only screen and (max-width: 991px);
+@custom-media --breakpoint-lg-down only screen and (max-width: 1199px);
+@custom-media --breakpoint-xl-down only screen and (min-width: 0);
+
+@custom-media --breakpoint-xs-only only screen and (min-width: 0) and (max-width: 575px);
+@custom-media --breakpoint-sm-only only screen and (min-width: 576px) and (max-width: 767px);
+@custom-media --breakpoint-md-only only screen and (min-width: 768px) and (max-width: 991px);
+@custom-media --breakpoint-lg-only only screen and (min-width: 992px) and (max-width: 1199px);
+@custom-media --breakpoint-xl-only only screen and (min-width: 1200px);

source/docs/alerts.md

@@ -0,0 +1,39 @@
+---
+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>`.
+
+```html
+<div class="alert">This is an alert</div>
+```
+
+<div class="alert">This is an alert</div>
+
+## Variations
+
+Use the `alert-*` modifier to create variations.
+
+```html
+<div class="alert">Primary</div>
+<div class="alert alert-secondary">Secondary</div>
+<div class="alert alert-success">Success</div>
+<div class="alert alert-info">Info</div>
+<div class="alert alert-warning">Warning</div>
+<div class="alert alert-danger">Danger</div>
+<div class="alert alert-light">Light</div>
+<div class="alert alert-dark">Dark</div>
+```
+
+<div class="alert">Primary</div>
+<div class="alert alert-secondary">Secondary</div>
+<div class="alert alert-success">Success</div>
+<div class="alert alert-info">Info</div>
+<div class="alert alert-warning">Warning</div>
+<div class="alert alert-danger">Danger</div>
+<div class="alert alert-light">Light</div>
+<div class="alert alert-dark">Dark</div>

source/docs/attribution.md

@@ -0,0 +1,16 @@
+---
+layout: default.html
+title: Attribution
+description: Special thanks to the following individuals and organizations.
+---
+
+## 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 and an amazing grid system.
+- [KeyCDN](https://keycdn.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,77 @@
+---
+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>`.
+
+```html
+<span class="badge">Badge</span>
+```
+
+<span class="badge">Badge</span>
+
+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>
+
+### Variations
+
+Use the `badge-*` modifier to create variations.
+
+```html
+<span class="badge">Primary</span>
+<span class="badge badge-secondary">Secondary</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-light">Light</span>
+<span class="badge badge-dark">Dark</span>
+```
+
+<span class="badge">Primary</span>
+<span class="badge badge-secondary">Secondary</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-light">Light</span>
+<span class="badge badge-dark">Dark</span>
+
+### Badge Links
+
+Badges can also be made into links.
+
+```html
+<a href="#" class="badge">Primary</a>
+<a href="#" class="badge badge-secondary">Secondary</a>
+<a href="#" class="badge badge-success">Success</a>
+<a href="#" class="badge badge-info">Info</a>
+<a href="#" class="badge badge-warning">Warning</a>
+<a href="#" class="badge badge-danger">Danger</a>
+<a href="#" class="badge badge-light">Light</a>
+<a href="#" class="badge badge-dark">Dark</a>
+```
+
+<a href="#" class="badge">Primary</a>
+<a href="#" class="badge badge-secondary">Secondary</a>
+<a href="#" class="badge badge-success">Success</a>
+<a href="#" class="badge badge-info">Info</a>
+<a href="#" class="badge badge-warning">Warning</a>
+<a href="#" class="badge badge-danger">Danger</a>
+<a href="#" class="badge badge-light">Light</a>
+<a href="#" class="badge badge-dark">Dark</a>

source/docs/browser-support.md

@@ -0,0 +1,27 @@
+---
+layout: default.html
+title: Browser Support
+description: Shoelace works in just about every browser.
+---
+
+## Browser Support
+
+You can use Shoelace _today_ in just about every browser. If you’re using the [CDN version](installing.html#cdn) for prototyping, you’re good. If you’re [building from source](installing.html#building-from-source), you’re good.
+
+<div class="browsers">
+  ![Chrome](../source/img/chrome.svg)
+  ![Edge](../source/img/edge.svg)
+  ![Firefox](../source/img/firefox.svg)
+  ![Opera](../source/img/opera.svg)
+  ![Safari](../source/img/safari.png)
+</div>
+
+_What you can’t do_ is use the source files without processing them with [cssnext](http://cssnext.io/).
+
+Shoelace makes extensive use of future CSS features in its source. Most browsers don’t support this syntax today, but they will soon. As CSS evolves and support improves, you’ll eventually be able to use Shoelace without any processing at all. In that sense, Shoelace is “future-ready.”
+
+[CSS has a really bright future](http://cssnext.io/features/), and you can use most of its upcoming features today with Shoelace + cssnext. You no longer need Less or Sass to do amazing things with CSS.
+
+I believe we should focus on the future. Preprocessors had a place when the evolution of CSS seemed stagnant, but things have changed and it’s time to move forward. Instead of learning a different syntax, let’s just learn the _future syntax_.
+
+Unfortunately, many people aren’t aware of the great things happening with CSS these days. Shoelace aims to raise awareness by bringing us back to the basics and using tomorrow’s CSS today.

source/docs/buttons.md

@@ -0,0 +1,149 @@
+---
+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 an `<a>`.
+
+```html
+<button type="button">Button</button>
+```
+
+<div class="input-field">
+  <button type="button">Button</button>
+</div>
+
+Use the `button-[xs|sm|lg|xl]` modifiers to change the size of a button.
+
+```html
+<button type="button" class="button-xs">XS Button</button>
+<button type="button" class="button-sm">SM Button</button>
+<button type="button">Default Button</button>
+<button type="button" class="button-lg">LG Button</button>
+<button type="button" class="button-xl">XL Button</button>
+```
+
+<div class="input-field">
+  <button type="button" class="button-xs">XS Button</button>
+  <button type="button" class="button-sm">SM Button</button>
+  <button type="button">Default Button</button>
+  <button type="button" class="button-lg">LG Button</button>
+  <button type="button" class="button-xl">XL Button</button>
+</div>
+
+To disable a button set the `disabled` property on `<button>` elements. You can simulate the disabled state on links by adding the `disabled` class, but additional JavaScript is required to prevent them from being activated.
+
+```html
+<button type="button" disabled>Disabled Button</button>
+<a href="#" class="button disabled">Disabled Link</a>
+```
+
+<div class="input-field">
+  <button type="button" disabled>Disabled Button</button>
+  <a href="#" class="button disabled">Disabled Link</a>
+</div>
+
+You can force buttons to have an active state by applying the `active` class.
+
+```html
+<button type="button" class="active">Active Button</button>
+<a href="#" class="button active">Active Link</a>
+```
+
+<div class="input-field">
+  <button type="button" class="active">Active Button</button>
+  <a href="#" class="button active">Active Link</a>
+</div>
+
+### Variations
+
+Use the `button-*` modifier to create variations.
+
+```html
+<button type="button" class="button-secondary">Secondary</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-light">Light</button>
+<button type="button" class="button-dark">Dark</button>
+```
+
+<div class="input-field">
+  <button type="button" class="button-secondary">Secondary</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-light">Light</button>
+  <button type="button" class="button-dark">Dark</button>
+</div>
+
+### Block Buttons
+
+Use the `button-block` modifier to make a button span the entire width of its parent.
+
+```html
+<button type="button" class="button-block">Block Button</button>
+```
+
+<div class="input-field">
+  <button type="button" class="button-block">Block Button</button>
+</div>
+
+### Link Buttons
+
+Buttons can be styled to look like normal links with the `button-link` modifier. Button sizing is maintained so they align properly with other buttons.
+
+```html
+<a href="#" class="button button-link">Link Button</a>
+```
+
+<div class="input-field">
+  <a href="#" class="button button-link">Link Button</a>
+</div>
+
+### Loader Buttons
+
+Buttons can be given a loading state with the `button-loader` modifier. This will make the button text invisible and display a loader using the `::after` pseudo-element. The button’s width will not be affected.
+
+```html
+<button type="button" class="button-loader button-xs">Button</button>
+<button type="button" class="button-loader button-sm">Button</button>
+<button type="button" class="button-loader">Button</button>
+<button type="button" class="button-loader button-lg">Button</button>
+<button type="button" class="button-loader button-xl">Button</button>
+```
+
+<div class="input-field">
+  <button type="button" class="button-loader button-xs">Button</button>
+  <button type="button" class="button-loader button-sm">Button</button>
+  <button type="button" class="button-loader">Button</button>
+  <button type="button" class="button-loader button-lg">Button</button>
+  <button type="button" class="button-loader button-xl">Button</button>
+</div>
+
+Loader buttons also work with button variations.
+
+```html
+<button type="button" class="button-loader button-secondary">Button</button>
+<button type="button" class="button-loader button-success">Button</button>
+<button type="button" class="button-loader button-info">Button</button>
+<button type="button" class="button-loader button-warning">Button</button>
+<button type="button" class="button-loader button-danger">Button</button>
+<button type="button" class="button-loader button-light">Button</button>
+<button type="button" class="button-loader button-dark">Button</button>
+```
+
+<div class="input-field">
+  <button type="button" class="button-loader button-secondary">Button</button>
+  <button type="button" class="button-loader button-success">Button</button>
+  <button type="button" class="button-loader button-info">Button</button>
+  <button type="button" class="button-loader button-warning">Button</button>
+  <button type="button" class="button-loader button-danger">Button</button>
+  <button type="button" class="button-loader button-light">Button</button>
+  <button type="button" class="button-loader button-dark">Button</button>
+</div>

source/docs/content.md

@@ -0,0 +1,156 @@
+---
+layout: default.html
+title: Content
+description: Default content styles.
+---
+
+## Content
+
+Shoelace provides default content styles that are easy to customize. 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. Shoelace also sets `box-sizing: border-box` globally to make it easier to properly size elements.
+
+### 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.
+
+### Horizontal Rules `<hr>`
+
+---
+
+### 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,77 @@
+---
+layout: default.html
+title: Customizing
+description: Learn how to customize Shoelace.css with CSS variables.
+---
+
+## Customizing
+
+If you’re using the source version of Shoelace (i.e. not the CDN or `/dist` version), you can customize components using CSS variables. To add customizations, simply override one or more of the variables found in [`source/css/variables.css`](../source/css/variables.css).
+
+For example, you can customize the default text color, background color, and the primary color by adding this to your stylesheet:
+
+```css
+:root {
+  --body-color: white;
+  --body-bg-color: black;
+  --state-primary: tomato;
+}
+```
+
+You don’t need to include all of the core variables. You only need to include the ones you want to customize.
+
+### Using CSS Variables
+
+You’re encouraged to use Shoelace’s variables in your own stylesheet. This makes it easy to reuse values without hardcoding them. It also provides a foundation for extending Shoelace with your own [custom components](#creating-custom-components).
+
+```css
+.your-component {
+  background-color: var(--component-bg-color);
+  border-color: var(--component-border-color);
+  color: var(--state-secondary);
+}
+```
+
+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.
+
+### Creating Custom Components
+
+You can create custom components to extend Shoelace’s functionality. Here’s what a component stylesheet looks like.
+
+```css
+/* Set default variables in a :root block. It's a good idea to
+   base them off core variables when possible. This makes it
+   easier to customize the library as a whole but still lets
+   users change individual components.
+
+   Never change or override core variables!
+*/
+:root {
+  --accordion-bg-color: var(--component-bg-color);
+  --accordion-border-color: var(--component-border-color);
+  /* etc. */
+}
+
+/* Component styles */
+.accordion {
+  /* Base styles go here. */
+
+  /* Modifiers can be nested and should always be prefixed with
+     the component's name.
+  */
+  &.accordion-xs { }
+  &.accordion-sm { }
+  &.accordion-lg { }
+  &.accordion-xl { }
+}
+```
+
+Here are some best practices for creating custom components:
+
+**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-xs`, and variable names that look like `--accordion-bg-color`. Try to follow the same patterns as much as possible.
+
+**Define new variables when it makes sense to.** Take a look at 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.
+
+**Provide source and dist versions.** Many people use Shoelace as a tool for prototyping. If you’re open sourcing your component, it’s best to provide both source and dist versions. The dist version is just a minified version of the source after it’s been processed by cssnext.
+
+**Semantic markup is strongly encouraged.** Custom components should use the most appropriate elements and the minimal amount of markup required.

source/docs/dropdowns.md

@@ -0,0 +1,164 @@
+---
+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. When a dropdown is activated, it will receive the `active` class and the menu will show.
+
+Headings can be created with the `dropdown-heading` class.
+
+```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>
+    <div class="dropdown-heading">Heading</div>
+    <a href="#">More...</a>
+  </div>
+</div>
+```
+
+<div class="input-field">
+  <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>
+      <div class="dropdown-heading">Heading</div>
+      <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-top">
+  ...
+</div>
+
+<div class="dropdown dropdown-left">
+  ...
+</div>
+
+<div class="dropdown dropdown-top dropdown-left">
+  ...
+</div>
+```
+
+<div class="input-field">
+  <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-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 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.
+
+```html
+<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>
+```
+
+<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>
+
+### Interactivity
+
+Dropdowns require `shoelace.js` for interactivity. You don’t need to initialize anything. Just 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);
+
+    // Tip: Use event.preventDefault() to
+    // intercept the original click event.
+  });
+```
+
+To show or hide a dropdown programmatically, just add or remove the `active` class to the dropdown.
+
+```javascript
+// Show the dropdown
+$('#my-dropdown').addClass('active');
+
+// Hide the dropdown
+$('#my-dropdown').removeClass('active');
+```

source/docs/file-buttons.md

@@ -0,0 +1,110 @@
+---
+layout: default.html
+title: File Buttons
+description: Add buttons to let users select files in your app.
+---
+
+## File Buttons
+
+File inputs are notoriously hard to style consistently in every browser. Shoelace offers file buttons as an alternative.
+
+File buttons are much easier to style, but come with the caveat that the name and 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).
+
+To create a file button, use the following markup. Note that the input needs to have an `id` and the label needs to have a matching `for` attribute. The label also needs to have the `button` class.
+
+```html
+<span class="file-button">
+  <input type="file" id="my-file">
+  <label class="button" for="my-file">Select File</label>
+</span>
+```
+
+<span class="file-button">
+  <input type="file" id="file-input">
+  <label class="button" for="file-input">Select File</label>
+</span>
+
+This approach is a bit more verbose than simply wrapping the input with a label, but the extra markup makes file buttons accessible via keyboard.
+
+You can allow multiple files to be selected by adding the `multiple` attribute:
+
+```html
+<span class="file-button">
+  <input type="file" id="my-files" multiple>
+  <label class="button" for="my-files">Select Files</label>
+</span>
+```
+
+<span class="file-button">
+  <input type="file" id="my-files" multiple>
+  <label class="button" for="my-files">Select Files</label>
+</span>
+
+### Variations
+
+File buttons can use [button modifiers](buttons.html). Just apply the appropriate classes to the label.
+
+<span class="file-button">
+  <input type="file" id="file-input-xs">
+  <label class="button button-xs" for="file-input-xs">Browse</label>
+</span>
+<span class="file-button">
+  <input type="file" id="file-input-sm">
+  <label class="button button-sm" for="file-input-sm">Browse</label>
+</span>
+<span class="file-button">
+  <input type="file" id="file-input-default">
+  <label class="button" for="file-input-default">Browse</label>
+</span>
+<span class="file-button">
+  <input type="file" id="file-input-lg">
+  <label class="button button-lg" for="file-input-lg">Browse</label>
+</span>
+<span class="file-button">
+  <input type="file" id="file-input-xl">
+  <label class="button button-xl" for="file-input-xl">Browse</label>
+</span>
+
+<span class="file-button">
+  <input type="file" id="file-input-default">
+  <label class="button" for="file-input-default">Browse</label>
+</span>
+<span class="file-button">
+  <input type="file" id="file-input-secondary">
+  <label class="button button-secondary" for="file-input-secondary">Browse</label>
+</span>
+<span class="file-button">
+  <input type="file" id="file-input-success">
+  <label class="button button-success" for="file-input-success">Browse</label>
+</span>
+<span class="file-button">
+  <input type="file" id="file-input-info">
+  <label class="button button-info" for="file-input-info">Browse</label>
+</span>
+<span class="file-button">
+  <input type="file" id="file-input-warning">
+  <label class="button button-warning" for="file-input-warning">Browse</label>
+</span>
+<span class="file-button">
+  <input type="file" id="file-input-danger">
+  <label class="button button-danger" for="file-input-danger">Browse</label>
+</span>
+<span class="file-button">
+  <input type="file" id="file-input-light">
+  <label class="button button-light" for="file-input-light">Browse</label>
+</span>
+<span class="file-button">
+  <input type="file" id="file-input-dark">
+  <label class="button button-dark" for="file-input-dark">Browse</label>
+</span>
+
+You can also use file buttons in [input groups](forms.html#input-groups).
+
+<div class="input-group">
+  <span class="file-button">
+    <input type="file" id="file-input-group">
+    <label class="button" for="file-input-group">Select File</label>
+  </span>
+  <input type="text">
+  <button type="button">Submit</button>
+</div>

source/docs/forms.md

@@ -0,0 +1,634 @@
+---
+layout: default.html
+title: Forms
+description: Default form control styles.
+stylesheets:
+ - https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css
+---
+
+## 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-secondary">
+          File inputs aren’t supported. Use a [file button](file-buttons.html) instead.
+        </span>
+      </td>
+      <td>
+        <span class="file-button">
+          <input type="file" id="file-button-ex">
+          <label class="button button-block" for="file-button-ex">Select File</label>
+        </span>
+      </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-[xs|sm|lg|xl]` modifiers.
+
+```html
+<input type="text" class="input-xs" placeholder="XS">
+<input type="text" class="input-sm" placeholder="SM">
+<input type="text" placeholder="Default">
+<input type="text" class="input-lg" placeholder="LG">
+<input type="text" class="input-xl" placeholder="XL">
+
+<select class="input-xs"><option>Item</option></select>
+<select class="input-sm"><option>Item</option></select>
+<select><option>Item</option></select>
+<select class="input-lg"><option>Item</option></select>
+<select class="input-xl"><option>Item</option></select>
+```
+
+<div class="row">
+  <div class="col-sm-6">
+    <div class="input-field">
+      <input type="text" class="input-xs" placeholder="XS">
+    </div>
+    <div class="input-field">
+      <input type="text" class="input-sm" placeholder="SM">
+    </div>
+    <div class="input-field">
+      <input type="text" placeholder="Default">
+    </div>
+    <div class="input-field">
+      <input type="text" class="input-lg" placeholder="LG">
+    </div>
+    <div class="input-field">
+      <input type="text" class="input-xl" placeholder="XL">
+    </div>
+  </div>
+  <div class="col-sm-6">
+    <div class="input-field">
+      <select class="input-xs"><option>XS</option></select>
+    </div>
+    <div class="input-field">
+      <select class="input-sm"><option>SM</option></select>
+    </div>
+    <div class="input-field">
+      <select><option>Default</option></select>
+    </div>
+    <div class="input-field">
+      <select class="input-lg"><option>LG</option></select>
+    </div>
+    <div class="input-field">
+      <select class="input-xl"><option>XL</option></select>
+    </div>
+  </div>
+</div>
+
+Disabled form controls look like this:
+
+<div class="input-field">
+  <input type="text" placeholder="Input" disabled>
+</div>
+
+<div class="input-field">
+  <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-field">
+  <input type="text" readonly value="This is read-only">
+</div>
+
+### Input Fields
+
+For proper spacing of individual form controls, wrap them in `input-field` containers.
+
+```html
+<div class="input-field">
+  <label>Name</label>
+  <input type="text">
+</div>
+
+<div class="input-field">
+  <label>Password</label>
+  <input type="password">
+</div>
+
+<div class="input-field">
+  <label><input type="checkbox"> Remember me</label>
+</div>
+```
+
+<div class="input-field">
+  <label>Username</label>
+  <input type="text">
+</div>
+
+<div class="input-field">
+  <label>Password</label>
+  <input type="password">
+</div>
+
+<div class="input-field">
+  <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-group">
+  <input type="text">
+  <button type="button">Submit</button>
+</div>
+
+<div class="input-group">
+  <button type="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">Submit</button>
+</div>
+
+<div class="input-group">
+  <button type="button">Option 1</button>
+  <button type="button">Option 2</button>
+  <button type="button">Option 3</button>
+</div>
+
+### Input Hints
+
+You can add textual hints below form controls with the `input-hint` class.
+
+```html
+<div class="input-field">
+  <label>Name</label>
+  <input type="text">
+  <p class="input-hint">What do people call you?</p>
+</div>
+
+<div class="input-field">
+  <label>Age</label>
+  <input type="number">
+  <p class="input-hint">Enter your age in years</p>
+</div>
+```
+
+<div class="row">
+  <div class="col-sm-6">
+    <div class="input-field">
+      <label>Name</label>
+      <input type="text">
+      <p class="input-hint">What do people call you?</p>
+    </div>
+  </div>
+  <div class="col-sm-6">
+    <div class="input-field">
+      <label>Age</label>
+      <input type="number">
+      <p class="input-hint">Enter your age in years</p>
+    </div>
+  </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-[xs|sm|lg|xl]` modifiers to change the size to match adjacent form controls.
+
+```html
+<div class="input-group">
+  <span class="input-addon input-addon-xs">$</span>
+  <input type="text" class="input-xs">
+  <span class="input-addon input-addon-xs">.00</span>
+</div>
+
+<div class="input-group">
+  <span class="input-addon input-addon-sm">$</span>
+  <input type="text" class="input-sm">
+  <span class="input-addon input-addon-sm">.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-lg">$</span>
+  <input type="text" class="input-lg">
+  <span class="input-addon input-addon-lg">.00</span>
+</div>
+
+<div class="input-group">
+  <span class="input-addon input-addon-xl">$</span>
+  <input type="text" class="input-xl">
+  <span class="input-addon input-addon-xl">.00</span>
+</div>
+```
+
+<div class="input-field">
+  <div class="input-group">
+    <span class="input-addon input-addon-xs">$</span>
+    <input type="text" class="input-xs">
+    <span class="input-addon input-addon-xs">.00</span>
+  </div>
+</div>
+
+<div class="input-field">
+  <div class="input-group">
+    <span class="input-addon input-addon-sm">$</span>
+    <input type="text" class="input-sm">
+    <span class="input-addon input-addon-sm">.00</span>
+  </div>
+</div>
+
+<div class="input-field">
+  <div class="input-group">
+    <span class="input-addon">$</span>
+    <input type="text">
+    <span class="input-addon">.00</span>
+  </div>
+</div>
+
+<div class="input-field">
+  <div class="input-group">
+    <span class="input-addon input-addon-lg">$</span>
+    <input type="text" class="input-lg">
+    <span class="input-addon input-addon-lg">.00</span>
+  </div>
+</div>
+
+<div class="input-field">
+  <div class="input-group">
+    <span class="input-addon input-addon-xl">$</span>
+    <input type="text" class="input-xl">
+    <span class="input-addon input-addon-xl">.00</span>
+  </div>
+</div>
+
+### Input Icons
+
+Input icons add visual context to form controls. To add icons to a form control, wrap it with an `input-icon` element and add icons before and after it.
+
+This example uses Font Awesome, but you can use whatever icon library you want. For consistency, use fixed with icons if your icon library supports them.
+
+```html
+<div class="input-icon">
+  <i class="fa fa-fw fa-phone"></i>
+  <input type="text">
+</div>
+
+<div class="input-icon">
+  <input type="text">
+  <i class="fa fa-fw fa-envelope-o"></i>
+</div>
+
+<div class="input-icon">
+  <i class="fa fa-fw fa-user"></i>
+  <input type="text">
+  <i class="fa fa-check"></i>
+</div>
+
+<div class="input-icon">
+  <i class="fa fa-fw fa-map-marker"></i>
+  <select><option>United States</option></select>
+</div>
+```
+
+<div class="row">
+  <div class="col-md-6 mar-b-md">
+    <div class="input-icon">
+      <i class="fa fa-fw fa-phone"></i>
+      <input type="text">
+    </div>
+  </div>
+  <div class="col-md-6 mar-b-md">
+    <div class="input-icon">
+      <input type="text">
+      <i class="fa fa-fw fa-envelope-o"></i>
+    </div>
+  </div>
+  <div class="col-md-6 mar-b-md">
+    <div class="input-icon">
+      <i class="fa fa-fw fa-user"></i>
+      <input type="text">
+      <i class="fa fa-check"></i>
+    </div>
+  </div>
+  <div class="col-md-6 mar-b-md">
+    <div class="input-icon">
+      <i class="fa fa-fw fa-map-marker"></i>
+      <select><option>United States</option></select>
+    </div>
+  </div>
+</div>
+
+Input icons can be used inside form groups.
+
+```html
+<div class="input-group">
+  <span class="input-addon">Location</span>
+  <div class="input-icon">
+    <i class="fa fa-fw fa-map-marker"></i>
+    <input type="text">
+    <i class="fa fa-fw fa-check"></i>
+  </div>
+  <button type="button">Submit</button>
+</div>
+```
+
+<div class="input-group">
+  <span class="input-addon">Location</span>
+  <div class="input-icon">
+    <i class="fa fa-fw fa-map-marker"></i>
+    <input type="text">
+    <i class="fa fa-fw fa-check"></i>
+  </div>
+  <button type="button">Submit</button>
+</div>
+
+Use the `input-icon-[xs|sm|lg|xs]` modifiers to change the size of input icons to match form controls.
+
+```html
+<div class="input-icon input-icon-xs">
+  <i class="fa fa-fw fa-user"></i>
+  <input class="input-xs" type="text">
+  <i class="fa fa-check"></i>
+</div>
+
+<div class="input-icon input-icon-sm">
+  <i class="fa fa-fw fa-user"></i>
+  <input class="input-sm" type="text">
+  <i class="fa fa-check"></i>
+</div>
+
+<div class="input-icon">
+  <i class="fa fa-fw fa-user"></i>
+  <input type="text">
+  <i class="fa fa-check"></i>
+</div>
+
+<div class="input-icon input-icon-lg">
+  <i class="fa fa-fw fa-user"></i>
+  <input class="input-lg" type="text">
+  <i class="fa fa-check"></i>
+</div>
+
+<div class="input-icon input-icon-xl">
+  <i class="fa fa-fw fa-user"></i>
+  <input class="input-xl" type="text">
+  <i class="fa fa-check"></i>
+</div>
+```
+
+<div class="input-field">
+  <div class="input-icon input-icon-xs">
+    <i class="fa fa-fw fa-user"></i>
+    <input class="input-xs" type="text">
+    <i class="fa fa-check"></i>
+  </div>
+</div>
+
+<div class="input-field">
+  <div class="input-icon input-icon-sm">
+    <i class="fa fa-fw fa-user"></i>
+    <input class="input-sm" type="text">
+    <i class="fa fa-check"></i>
+  </div>
+</div>
+
+<div class="input-field">
+  <div class="input-icon">
+    <i class="fa fa-fw fa-user"></i>
+    <input type="text">
+    <i class="fa fa-check"></i>
+  </div>
+</div>
+
+<div class="input-field">
+  <div class="input-icon input-icon-lg">
+    <i class="fa fa-fw fa-user"></i>
+    <input class="input-lg" type="text">
+    <i class="fa fa-check"></i>
+  </div>
+</div>
+
+<div class="input-field">
+  <div class="input-icon input-icon-xl">
+    <i class="fa fa-fw fa-user"></i>
+    <input class="input-xl" type="text">
+    <i class="fa fa-check"></i>
+  </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-field">
+    <label>Username</label>
+    <input type="text">
+  </div>
+  <div class="input-field">
+    <label>Password</label>
+    <input type="password">
+  </div>
+  <div class="input-field">
+    <label>
+      <input type="checkbox"> Remember me
+    </label>
+  </div>
+  <div class="input-field">
+    <button type="button">Login</button>
+  </div>
+</fieldset>
+
+### Validation
+
+A form control can be made valid or invalid by adding the `input-valid` or `input-invalid` modifiers to the surrounding `input-field`.
+
+```html
+<div class="input-field input-valid">
+  <label>Valid</label>
+  <input type="text">
+</div>
+
+<div class="input-field input-invalid">
+  <label>Invalid</label>
+  <input type="text">
+</div>
+```
+
+<div class="row">
+  <div class="col-12 col-sm-6">
+    <div class="input-field input-valid">
+      <label>Valid</label>
+      <input type="text">
+    </div>
+  </div>
+  <div class="col-12 col-sm-6">
+    <div class="input-field input-invalid">
+      <label>Invalid</label>
+      <input type="text">
+    </div>
+  </div>
+</div>
+
+Never apply validation modifiers directly to a form control, as some components (e.g. input icons) wrap inputs with additional elements that won’t be able to inherit the correct styles.
+
+```html
+<div class="input-field input-valid">
+  <label>Valid with Icons</label>
+  <div class="input-icon">
+    <i class="fa fa-fw fa-user"></i>
+    <input type="text">
+    <i class="fa fa-fw fa-check"></i>
+  </div>
+</div>
+
+<div class="input-field input-invalid">
+  <label>Invalid with Icons</label>
+  <div class="input-icon">
+    <i class="fa fa-fw fa-user"></i>
+    <input type="text">
+    <i class="fa fa-fw fa-times"></i>
+  </div>
+</div>
+```
+
+<div class="row">
+  <div class="col-12 col-sm-6">
+    <div class="input-field input-valid">
+      <label>Valid with Icons</label>
+      <div class="input-icon">
+        <i class="fa fa-fw fa-user"></i>
+        <input type="text">
+        <i class="fa fa-fw fa-check"></i>
+      </div>
+    </div>
+  </div>
+  <div class="col-12 col-sm-6">
+    <div class="input-field input-invalid">
+      <label>Invalid with Icons</label>
+      <div class="input-icon">
+        <i class="fa fa-fw fa-user"></i>
+        <input type="text">
+        <i class="fa fa-fw fa-times"></i>
+      </div>
+    </div>
+  </div>
+</div>

source/docs/grid-system.md

@@ -0,0 +1,303 @@
+---
+layout: default.html
+title: Grid System
+description: Shoelace features a 12-column grid system based on Bootstrap 4’s grid.
+---
+
+## Grid System
+
+Shoelace features a 12-column grid system based on [Bootstrap 4’s grid](https://getbootstrap.com/docs/4.0/layout/grid/). It’s flexible, easy to use, and fully responsive.
+
+### Structure
+
+The grid consists of containers, rows, and columns. A basic, two-column grid looks like this:
+
+```html
+<div class="container">
+  <div class="row">
+    <div class="col">1st column</div>
+    <div class="col">2nd column</div>
+  </div>
+</div>
+```
+
+<div class="container grid-example">
+  <div class="row">
+    <div class="col">1st column</div>
+    <div class="col">2nd column</div>
+  </div>
+</div>
+
+Containers can be used to wrap sections of your page. Use the `container` class to create a responsive, fixed-width container or the `container-fluid` class to create a fluid container.
+
+Rows are used to group columns horizontally and can only contain columns as child elements. Columns are where you’ll put your content.
+
+### Creating Columns
+
+Columns are equal width by default. The grid will automatically determine the appropriate size for columns with the `col` class.
+
+```html
+<div class="row">
+  <div class="col">1</div>
+</div>
+
+<div class="row">
+  <div class="col">1</div>
+  <div class="col">2</div>
+</div>
+
+<div class="row">
+  <div class="col">1</div>
+  <div class="col">2</div>
+  <div class="col">3</div>
+</div>
+```
+
+<div class="container grid-example">
+  <div class="row">
+    <div class="col">col</div>
+  </div>
+  <div class="row">
+    <div class="col">col</div>
+    <div class="col">col</div>
+  </div>
+  <div class="row">
+    <div class="col">col</div>
+    <div class="col">col</div>
+    <div class="col">col</div>
+  </div>
+</div>
+
+To set the width of a column, use the `col-*` modifier with a value of 1–12. Widths are calculated based on a total of 12 possible columns. Additional columns will wrap to a new line.
+
+```html
+<div class="row">
+  <div class="col-2">col-2</div>
+  <div class="col-4">col-4</div>
+  <div class="col-6">col-6</div>
+</div>
+```
+
+<div class="container grid-example">
+  <div class="row">
+    <div class="col-2">col-2</div>
+    <div class="col-4">col-4</div>
+    <div class="col-6">col-6</div>
+  </div>
+</div>
+
+You can mix and match sized columns with unsized columns for flexibility. Unsized columns will take up equal widths of the remaining space.
+
+```html
+<div class="row">
+  <div class="col">col</div>
+  <div class="col-6">col-6</div>
+  <div class="col">col</div>
+</div>
+```
+
+<div class="container grid-example">
+  <div class="row">
+    <div class="col">col</div>
+    <div class="col-6">col-6</div>
+    <div class="col">col</div>
+  </div>
+</div>
+
+To size a column based on its content, use `col-auto`.
+
+```html
+<div class="row">
+  <div class="col">col</div>
+  <div class="col-auto">Sized to fit</div>
+  <div class="col">col</div>
+</div>
+```
+
+<div class="container grid-example">
+  <div class="row">
+    <div class="col">col</div>
+    <div class="col-auto">Sized to fit</div>
+    <div class="col">col</div>
+  </div>
+</div>
+
+### Making Columns Responsive
+
+There are five responsive tiers in Shoelace: `xs`, `sm`, `md`, `lg`, and `xl`. You can use these tiers to change the way the grid responds at various breakpoints. The grid is mobile-first, so the default tier is `xs`.
+
+Use the `col-[sm|md|lg|xl]-*` modifier to target a specific tier. Note that tiers are based on minimum widths, so using `col-sm-6` will target `sm`, `md`, `lg`, and `xl` screens. Of course, you can target multiple tiers on the same column as needed.
+
+For example, the following columns will stack on `xs` screens, take up 50% each (6 out of 12 columns) on `sm` screens, and 75% and 25% respectively on `md`, `lg`, and `xl` screens.
+
+```html
+<div class="row">
+  <div class="col-12 col-sm-6 col-md-8">1st column</div>
+  <div class="col-12 col-sm-6 col-md-4">2nd column</div>
+</div>
+```
+
+<div class="container grid-example">
+  <div class="row">
+    <div class="col-12 col-sm-6 col-md-8">1st column</div>
+    <div class="col-12 col-sm-6 col-md-4">2nd column</div>
+  </div>
+</div>
+
+### Offsetting Columns
+
+You can offset columns using `offset-*` and `offset-[sm|md|lg|xl]-*` modifiers. To reset an offset at a specific tier, use `offset-[sm|md|lg|xl]-0`.
+
+```html
+<div class="row">
+  <div class="col-2">left</div>
+  <div class="col-2 offset-2">center</div>
+  <div class="col-2 offset-2">right</div>
+</div>
+```
+
+<div class="container grid-example">
+  <div class="row">
+    <div class="col-2">left</div>
+    <div class="col-2 offset-3">center</div>
+    <div class="col-2 offset-3">right</div>
+  </div>
+</div>
+
+### Aligning Columns
+
+Columns can be aligned with the `row-[start|center|end|around|between]` and `row-[sm|md|lg|xl]-[start|center|end|around|between]` modifiers.
+
+```html
+<div class="row row-start">
+  <div class="col-4">1st</div>
+  <div class="col-4">2nd</div>
+</div>
+
+<div class="row row-center">
+  <div class="col-4">1st</div>
+  <div class="col-4">2nd</div>
+</div>
+
+<div class="row row-end">
+  <div class="col-4">1st</div>
+  <div class="col-4">2nd</div>
+</div>
+
+<div class="row row-around">
+  <div class="col-4">1st</div>
+  <div class="col-4">2nd</div>
+</div>
+
+<div class="row row-between">
+  <div class="col-4">1st</div>
+  <div class="col-4">2nd</div>
+</div>
+```
+
+<div class="container grid-example">
+  <div class="row row-start">
+    <div class="col-4">1st</div>
+    <div class="col-4">2nd</div>
+  </div>
+  <div class="row row-center">
+    <div class="col-4">1st</div>
+    <div class="col-4">2nd</div>
+  </div>
+  <div class="row row-end">
+    <div class="col-4">1st</div>
+    <div class="col-4">2nd</div>
+  </div>
+  <div class="row row-around">
+    <div class="col-4">1st</div>
+    <div class="col-4">2nd</div>
+  </div>
+  <div class="row row-between">
+    <div class="col-4">1st</div>
+    <div class="col-4">2nd</div>
+  </div>
+</div>
+
+### Reordering Columns
+
+You can control the visual order of columns using the `order-*` and `order-[sm|md|lg|xl]-*` modifiers. Note that columns without an order modifier will not be affected.
+
+```html
+<div class="row">
+  <div class="col-4">1st (unordered)</div>
+  <div class="col-4 order-3">2nd</div>
+  <div class="col-4 order-2">3rd</div>
+</div>
+```
+
+<div class="container grid-example">
+  <div class="row">
+    <div class="col-4">1st (unordered)</div>
+    <div class="col-4 order-3">2nd</div>
+    <div class="col-4 order-2">3rd</div>
+  </div>
+</div>
+
+### Hiding Columns
+
+You can hide columns based on breakpoints using [display utilities](utilities.html#display-utilities).
+
+```html
+<div class="row">
+  <div class="col-2 hide-xs">hide-xs</div>
+  <div class="col-2 hide-sm">hide-sm</div>
+  <div class="col-2 hide-md">hide-md</div>
+  <div class="col-2 hide-lg">hide-lg</div>
+  <div class="col-2 hide-xl">hide-xl</div>
+</div>
+```
+
+<div class="container grid-example">
+  <div class="row">
+    <div class="col-2 hide-xs">hide-xs</div>
+    <div class="col-2 hide-sm">hide-sm</div>
+    <div class="col-2 hide-md">hide-md</div>
+    <div class="col-2 hide-lg">hide-lg</div>
+    <div class="col-2 hide-xl">hide-xl</div>
+  </div>
+</div>
+
+### Removing Gutters
+
+By default, columns have horizontal spacing around them to create “gutters.” You can remove this spacing by applying the `row-flush` modifier to the parent row.
+
+```html
+<div class="row row-flush">
+  ...
+</div>
+```
+
+For an edge-to-edge design, refrain from using `container` and `container-fluid` around the row.
+
+### Nested Grids
+
+Grids can be nested. Simply add a new row inside of a column.
+
+```html
+<div class="row">
+  <div class="col-8">
+    outer, col-8
+    <div class="row">
+      <div class="col-3">inner, col-3</div>
+      <div class="col-9">inner, col-9</div>
+    </div>
+  </div>
+</div>
+```
+
+<div class="container grid-example">
+  <div class="row">
+    <div class="col-8">
+      outer, col-8
+      <div class="row">
+        <div class="col-3">inner, col-3</div>
+        <div class="col-9">inner, col-9</div>
+      </div>
+    </div>
+  </div>
+</div>

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-field text-secondary" 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-field">
+  <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,45 @@
+---
+layout: default.html
+title: Installing
+description: How to install Shoelace.css.
+---
+
+## Installing
+
+There are two ways to use Shoelace. If you want to get things up and running quickly, use the `dist/` version or the [CDN version](#cdn). This version isn’t customizable, nor can you use future CSS features with it. It’s primarily intended for prototyping.
+
+If you’re developing a production app, you should [build Shoelace from source](#building-from-source). This version is completely customizable, modular, and let’s you use future CSS features _today_.
+
+**Note:** 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/) before `shoelace.js`.
+
+### CDN
+
+This is the best approach for prototyping, however, this version isn’t customizable and doesn’t support future CSS features. To load Shoelace via CDN, add this to your `<head>`:
+
+```html
+<link rel="stylesheet" href="https://cdn.shoelace.style/{{version}}/shoelace.css">
+```
+
+And this before `</body>` but after jQuery/Zepto:
+
+```html
+<script src="https://cdn.shoelace.style/{{version}}/shoelace.js"></script>
+```
+
+This service is provided free, courtesy of [KeyCDN](https://keycdn.com/).
+
+### Building From Source
+
+To make the most out of Shoelace, you should build it from source. This will let you use future CSS features _today_, such as [CSS variables](https://www.w3.org/TR/css-variables/), [nesting](http://tabatkins.github.io/specs/css-nesting/), [color functions](https://drafts.csswg.org/css-color/#modifying-colors), [and more](http://cssnext.io/features/). It also gives you complete control over customizing Shoelace.
+
+The recommended way to build Shoelace is with [cssnext](http://cssnext.io/). There are instructions for webpack, gulp, grunt, browserify, and others located on the [setup page](http://cssnext.io/setup/).
+
+You can [download Shoelace](https://github.com/claviska/shoelace-css/releases) from GitHub, but it’s probably better to use the npm version:
+
+```text
+npm install shoelace-css
+```
+
+The main source file is [`source/css/shoelace.css`](../source/css/shoelace.css). This bootstraps the entire project by importing core variables and all of Shoelace’s components.
+
+If you don’t need everything, just load [`source/css/variables.css`](../source/css/variables.css) along with the components you want.

source/docs/loaders.md

@@ -0,0 +1,90 @@
+---
+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-xs|sm|lg|xl` modifiers to change the size.
+
+```html
+<span class="loader loader-xs"></span>
+<span class="loader loader-sm"></span>
+<span class="loader"></span>
+<span class="loader loader-lg"></span>
+<span class="loader loader-xl"></span>
+```
+<div class="input-field">
+  <span class="loader loader-xs"></span>
+  <span class="loader loader-sm"></span>
+  <span class="loader"></span>
+  <span class="loader loader-lg"></span>
+  <span class="loader loader-xl"></span>
+</div>
+
+### Variations
+
+Use the `loader-*` modifier to create variations.
+
+```html
+<span class="loader loader-secondary"></span>
+<span class="loader loader-success"></span>
+<span class="loader loader-info"></span>
+<span class="loader loader-warning"></span>
+<span class="loader loader-danger"></span>
+<span class="loader loader-light"></span>
+<span class="loader loader-dark"></span>
+```
+
+<span class="loader loader-secondary"></span>
+<span class="loader loader-success"></span>
+<span class="loader loader-info"></span>
+<span class="loader loader-warning"></span>
+<span class="loader loader-danger"></span>
+<span class="loader loader-light"></span>
+<span class="loader loader-dark"></span>
+
+### Background Loaders
+
+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-xs|sm|lg|xl` modifiers to change the size.
+
+```html
+<div class="loader-bg loader-bg-xs"></div>
+<div class="loader-bg loader-bg-sm"></div>
+<div class="loader-bg"></div>
+<div class="loader-bg loader-bg-lg"></div>
+<div class="loader-bg loader-bg-xl"></div>
+```
+
+<div class="loader-example clearfix">
+  <div class="loader-bg loader-bg-xs"></div>
+  <div class="loader-bg loader-bg-sm"></div>
+  <div class="loader-bg"></div>
+  <div class="loader-bg loader-bg-lg"></div>
+  <div class="loader-bg loader-bg-xl"></div>
+</div>
+
+### Background Variations
+
+Use the `loader-bg-*` modifier to create variations.
+
+```html
+<div class="loader-bg loader-bg-secondary"></div>
+<div class="loader-bg loader-bg-success"></div>
+<div class="loader-bg loader-bg-info"></div>
+<div class="loader-bg loader-bg-warning"></div>
+<div class="loader-bg loader-bg-danger"></div>
+<div class="loader-bg loader-bg-light"></div>
+<div class="loader-bg loader-bg-dark"></div>
+```
+
+<div class="loader-example clearfix">
+  <div class="loader-bg loader-bg-secondary"></div>
+  <div class="loader-bg loader-bg-success"></div>
+  <div class="loader-bg loader-bg-info"></div>
+  <div class="loader-bg loader-bg-warning"></div>
+  <div class="loader-bg loader-bg-danger"></div>
+  <div class="loader-bg loader-bg-light"></div>
+  <div class="loader-bg loader-bg-dark"></div>
+</div>

source/docs/progress-bars.md

@@ -0,0 +1,129 @@
+---
+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-[xs|sm|lg|xl]` 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-xs">
+  <div class="progress-bar w-20">20%</div>
+</div>
+
+<div class="progress progress-sm">
+  <div class="progress-bar w-40">40%</div>
+</div>
+
+<div class="progress">
+  <div class="progress-bar w-60">60%</div>
+</div>
+
+<div class="progress progress-lg">
+  <div class="progress-bar w-70">80%</div>
+</div>
+
+<div class="progress progress-xl">
+  <div class="progress-bar w-100">100%</div>
+</div>
+```
+
+<div class="progress progress-xs">
+  <div class="progress-bar w-20">20%</div>
+</div>
+
+<div class="progress progress-sm">
+  <div class="progress-bar w-40">40%</div>
+</div>
+
+<div class="progress">
+  <div class="progress-bar w-60">60%</div>
+</div>
+
+<div class="progress progress-lg">
+  <div class="progress-bar w-70">80%</div>
+</div>
+
+<div class="progress progress-xl">
+  <div class="progress-bar w-100">100%</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>
+
+### Variations
+
+Use the `progress-*` modifier to create variations.
+
+```html
+<div class="progress progress-secondary">
+  <div class="progress-bar w-50">50%</div>
+</div>
+
+<div class="progress progress-success">
+  <div class="progress-bar w-50">50%</div>
+</div>
+
+<div class="progress progress-info">
+  <div class="progress-bar w-50">50%</div>
+</div>
+
+<div class="progress progress-warning">
+  <div class="progress-bar w-50">50%</div>
+</div>
+
+<div class="progress progress-danger">
+  <div class="progress-bar w-50">50%</div>
+</div>
+
+<div class="progress progress-light">
+  <div class="progress-bar w-50">50%</div>
+</div>
+
+<div class="progress progress-dark">
+  <div class="progress-bar w-50">50%</div>
+</div>
+```
+
+<div class="progress progress-secondary">
+  <div class="progress-bar w-50">50%</div>
+</div>
+
+<div class="progress progress-success">
+  <div class="progress-bar w-50">50%</div>
+</div>
+
+<div class="progress progress-info">
+  <div class="progress-bar w-50">50%</div>
+</div>
+
+<div class="progress progress-warning">
+  <div class="progress-bar w-50">50%</div>
+</div>
+
+<div class="progress progress-danger">
+  <div class="progress-bar w-50">50%</div>
+</div>
+
+<div class="progress progress-light">
+  <div class="progress-bar w-50">50%</div>
+</div>
+
+<div class="progress progress-dark">
+  <div class="progress-bar w-50">50%</div>
+</div>

source/docs/switches.md

@@ -0,0 +1,163 @@
+---
+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" id="switch-1">
+  <label for="switch-1">Switch 1</label>
+</span>
+
+<span class="switch">
+  <input type="checkbox" id="switch-2" checked>
+  <label for="switch-2">Switch 2</label>
+</span>
+```
+
+<div class="input-field">
+  <span class="switch">
+    <input type="checkbox" id="switch-1">
+    <label for="switch-1">Switch 1</label>
+  </span>
+
+  <span class="switch">
+    <input type="checkbox" id="switch-2" checked>
+    <label for="switch-2">Switch 2</label>
+  </span>
+</div>
+
+Use the `switch-[xs|sm|lg|xl]` modifiers to change the size of a switch.
+
+```html
+<span class="switch switch-xs">
+  <input type="checkbox" id="switch-xs">
+  <label for="switch-xs">XS</label>
+</span>
+
+<span class="switch switch-sm">
+  <input type="checkbox" id="switch-sm">
+  <label for="switch-sm">SM</label>
+</span>
+
+<span class="switch">
+  <input type="checkbox" id="switch-default">
+  <label for="switch-default">Default</label>
+</span>
+
+<span class="switch switch-lg">
+  <input type="checkbox" id="switch-lg">
+  <label for="switch-lg">LG</label>
+</span>
+
+<span class="switch switch-xl">
+  <input type="checkbox" id="switch-xl">
+  <label for="switch-xl">XL</label>
+</span>
+```
+
+<div class="input-field">
+  <span class="switch switch-xs">
+    <input type="checkbox" id="switch-xs">
+    <label for="switch-xs">XS</label>
+  </span>
+
+  <span class="switch switch-sm">
+    <input type="checkbox" id="switch-sm">
+    <label for="switch-sm">SM</label>
+  </span>
+
+  <span class="switch">
+    <input type="checkbox" id="switch-default">
+    <label for="switch-default">Default</label>
+  </span>
+
+  <span class="switch switch-lg">
+    <input type="checkbox" id="switch-lg">
+    <label for="switch-lg">LG</label>
+  </span>
+
+  <span class="switch switch-xl">
+    <input type="checkbox" id="switch-xl">
+    <label for="switch-xl">XL</label>
+  </span>
+</div>
+
+Disabled switches are dimmed out. To disable a switch, add the `disabled` attribute to the checkbox (not the wrapper).
+
+```html
+<span class="switch">
+  <input type="checkbox" disabled id="switch-disabled">
+  <label for="switch-disabled">Disabled</label>
+</span>
+```
+
+<div class="input-field">
+  <span class="switch">
+    <input type="checkbox" disabled id="switch-disabled">
+    <label for="switch-disabled">Disabled</label>
+  </span>
+</div>
+
+
+### Variations
+
+Use the `switch-*` modifier to create variations.
+
+```html
+<span class="switch switch-secondary">...</span>
+<span class="switch switch-success">...</span>
+<span class="switch switch-info">...</span>
+<span class="switch switch-warning">...</span>
+<span class="switch switch-danger">...</span>
+<span class="switch switch-light">...</span>
+<span class="switch switch-dark">...</span>
+```
+
+<span class="switch switch-secondary">
+  <input type="checkbox" id="variation-secondary" checked>
+  <label for="variation-secondary">Secondary</label>
+</span>
+
+<span class="switch switch-success">
+  <input type="checkbox" id="variation-success" checked>
+  <label for="variation-success">Success</label>
+</span>
+
+<span class="switch switch-info">
+  <input type="checkbox" id="variation-info" checked>
+  <label for="variation-info">Info</label>
+</span>
+
+<span class="switch switch-warning">
+  <input type="checkbox" id="variation-warning" checked>
+  <label for="variation-warning">Warning</label>
+</span>
+
+<span class="switch switch-danger">
+  <input type="checkbox" id="variation-danger" checked>
+  <label for="variation-danger">Danger</label>
+</span>
+
+<span class="switch switch-light">
+  <input type="checkbox" id="variation-light" checked>
+  <label for="variation-light">Light</label>
+</span>
+
+<span class="switch switch-dark">
+  <input type="checkbox" id="variation-dark" checked>
+  <label for="variation-dark">Dark</label>
+</span>

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,165 @@
+---
+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 tabs, and the tab panes. Also note that each tab links to its respective tab pane’s `id`.
+
+For initial rendering, make sure the appropriate tab and tab pane have the `active` class.
+
+```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 when used with the [grid system](grid-system.html) and `tabs-nav-block`.
+
+```html
+<div class="tabs">
+  <div class="row">
+    <div class="col-4">
+      <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>
+
+    <div class="col-8">
+      <div class="tabs-pane active" id="tab-1-example-2">...</div>
+      <div class="tabs-pane" id="tab-2-example-2">...</div>
+      <div class="tabs-pane" id="tab-3-example-2">...</div>
+    </div>
+  </div>
+</div>
+```
+
+<div class="tabs">
+  <div class="row">
+    <div class="col-4">
+      <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>
+    <div class="col-8">
+      <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>
+  </div>
+</div>
+
+### Interactivity
+
+Tabs require `shoelace.js` for interactivity. You don’t need to initialize anything. Just 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);
+  });
+```
+
+To activate a tab programmatically, just add the `active` class to it. We use a [mutation observer](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) to remove the active class on other tabs and to show/hide the appropriate tab panes automatically.
+
+```javascript
+$('#tab-id').addClass('active');
+```
+
+To disable a tab, add the `disabled` class to the appropriate tab.

source/docs/utilities.md

@@ -0,0 +1,254 @@
+---
+layout: default.html
+title: Utilities
+description: Use these utilities for quick prototyping.
+---
+
+## Utilities
+
+Shoelace provides a number of helpful utilities that make designing and prototyping easier.
+
+### Background Utilities
+
+Background utilities can be applied to change an element’s background color.
+
+```html
+<div class="bg-primary">Primary</div>
+<div class="bg-secondary">Secondary</div>
+<div class="bg-success">Success</div>
+<div class="bg-info">Info</div>
+<div class="bg-warning">Warning</div>
+<div class="bg-danger">Danger</div>
+<div class="bg-light">Light</div>
+<div class="bg-dark">Dark</div>
+```
+
+<div class="mar-b-sm pad-sm bg-primary text-light">Primary</div>
+<div class="mar-b-sm pad-sm bg-secondary text-light">Secondary</div>
+<div class="mar-b-sm pad-sm bg-success text-light">Success</div>
+<div class="mar-b-sm pad-sm bg-info text-light">Info</div>
+<div class="mar-b-sm pad-sm bg-warning text-light">Warning</div>
+<div class="mar-b-sm pad-sm bg-danger text-light">Danger</div>
+<div class="mar-b-sm pad-sm bg-light text-dark">Light</div>
+<div class="mar-b-sm pad-sm bg-dark text-light">Dark</div>
+
+### Breakpoint Utilities
+
+Responsive breakpoints exist for five tiers of screen sizes. By default, the breakpoints are:
+
+- `xs` &rarr; 575px and below
+- `sm` &rarr; 576px – 767px
+- `md` &rarr; 768px – 991px
+- `lg` &rarr; 992px - 1199px
+- `xl` &rarr; 1200px and above
+
+If you’re building Shoelace from source, you can use the custom media queries found in [`source/css/variables.css`](../source/css/variables.css) to easily target various breakpoints without hard-coding screen sizes in your stylesheet.
+
+```css
+@media (--breakpoint-xs-up) { /* xs screens and above */ }
+@media (--breakpoint-sm-up) { /* sm screens and above */ }
+@media (--breakpoint-md-up) { /* md screens and above */ }
+@media (--breakpoint-lg-up) { /* lg screens and above */ }
+@media (--breakpoint-xl-up) { /* xl screens and above */ }
+
+@media (--breakpoint-xs-down) { /* xs screens and below */ }
+@media (--breakpoint-sm-down) { /* sm screens and below */ }
+@media (--breakpoint-md-down) { /* md screens and below */ }
+@media (--breakpoint-lg-down) { /* lg screens and below */ }
+@media (--breakpoint-xl-down) { /* xl screens and below */ }
+
+@media (--breakpoint-xs-only) { /* xs screens only */ }
+@media (--breakpoint-sm-only) { /* sm screens only */ }
+@media (--breakpoint-md-only) { /* md screens only */ }
+@media (--breakpoint-lg-only) { /* lg screens only */ }
+@media (--breakpoint-xl-only) { /* xl screens only */ }
+```
+
+### Display Utilities
+
+Display utilities let you hide elements based on the current breakpoint. Use `hide-[xs|sm|md|lg|xl]` to hide an element only at a specific viewport. Use `hide-*-up` to hide an element at and above a specific breakpoint. Use `hide-*-down` to hide an element at and below a specific breakpoint.
+
+```html
+<div class="row">
+  <div class="col-2 hide-xs">hide-xs</div>
+  <div class="col-2 hide-sm">hide-sm</div>
+  <div class="col-2 hide-md">hide-md</div>
+  <div class="col-2 hide-lg">hide-lg</div>
+  <div class="col-2 hide-xl">hide-xl</div>
+</div>
+```
+
+<div class="container grid-example">
+  <div class="row">
+    <div class="col-2 hide-xs">hide-xs</div>
+    <div class="col-2 hide-sm">hide-sm</div>
+    <div class="col-2 hide-md">hide-md</div>
+    <div class="col-2 hide-lg">hide-lg</div>
+    <div class="col-2 hide-xl">hide-xl</div>
+  </div>
+</div>
+
+### 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 `w-*` or `h-*` class and the appropriate element will be sized accordingly. Sizes are available as percentages from 0 – 100 in multiples of five.
+
+You can also use the `w-max-100` and `h-max-100` classes to set a max width and height of 100%.
+
+```html
+<div class="w-25">25%</div>
+<div class="w-50">50%</div>
+<div class="w-75">75%</div>
+<div class="w-100">100%</div>
+
+<div class="h-25">25%</div>
+<div class="h-50">50%</div>
+<div class="h-75">75%</div>
+<div class="h-100">100%</div>
+```
+
+<div class="width-sizing-example">
+  <div class="w-25">25%</div>
+  <div class="w-50">50%</div>
+  <div class="w-75">75%</div>
+  <div class="w-100">100%</div>
+</div>
+
+<div class="height-sizing-example">
+  <div class="h-25">25%</div>
+  <div class="h-50">50%</div>
+  <div class="h-75">75%</div>
+  <div class="h-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 `pad-` or `mar-` for padding and margin, respectively. To apply spacing to all sides of an element, use the following classes.
+
+```
+pad-[0|xs|sm|md|lg|xl]
+mar-[0|xs|sm|md|lg|xl]
+```
+
+Example:
+
+```html
+<div class="pad-0 mar-xl">
+```
+
+To apply spacing to a specific side of an element, use one or more of the following classes indicating top, right, bottom, left, x (horizontal), and y (vertical):
+
+```
+pad-[t|r|b|l|x|y]-[0|xs|sm|md|lg|xl]
+mar-[t|r|b|l|x|y]-[0|xs|sm|md|lg|xl]
+```
+
+Example:
+
+```html
+<div class="pad-l-md mar-b-0">
+```
+
+You can also use `mar-[x|y|xy]-auto` to set automatic margins horizontally and/or vertically.
+
+### Text Utilities
+
+Text utility classes can be applied to change the appearance of text.
+
+<table class="table">
+  <thead>
+    <tr>
+      <th>Class</th>
+      <th>Example</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>`text-primary`</td>
+      <td class="text-primary">This is primary text</td>
+    </tr>
+    <tr>
+      <td>`text-secondary`</td>
+      <td class="text-secondary">This is secondary text</td>
+    </tr>
+    <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-light`</td>
+      <td class="text-light">This is light text</td>
+    </tr>
+    <tr>
+      <td>`text-dark`</td>
+      <td class="text-dark">This is dark 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-muted`</td>
+      <td class="text-muted">This is muted 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>

source/img/chrome.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="1 1 190 190"><defs><linearGradient id="b" x1="29.34" x2="81.84" y1="75.02" y2="44.35" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#a52714" stop-opacity=".6"/><stop offset=".66" stop-color="#a52714" stop-opacity="0"/></linearGradient><linearGradient id="c" x1="110.87" x2="52.54" y1="164.5" y2="130.33" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#055524" stop-opacity=".4"/><stop offset=".33" stop-color="#055524" stop-opacity="0"/></linearGradient><linearGradient id="a" x1="121.86" x2="136.55" y1="49.8" y2="114.13" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ea6100" stop-opacity=".3"/><stop offset=".66" stop-color="#ea6100" stop-opacity="0"/></linearGradient><linearGradient id="i" x1="121.86" x2="136.55" y1="49.8" y2="114.13" xlink:href="#a" gradientUnits="userSpaceOnUse"/><linearGradient id="l" x1="29.34" x2="81.84" y1="75.02" y2="44.35" xlink:href="#b" gradientUnits="userSpaceOnUse"/><radialGradient id="d" cx="668.18" cy="55.95" r="84.08" gradientTransform="translate(-576)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#3e2723" stop-opacity=".2"/><stop offset="1" stop-color="#3e2723" stop-opacity="0"/></radialGradient><linearGradient id="o" x1="110.87" x2="52.54" y1="164.5" y2="130.33" xlink:href="#c" gradientUnits="userSpaceOnUse"/><radialGradient id="p" cx="597.88" cy="48.52" r="78.04" xlink:href="#d" gradientTransform="translate(-576)" gradientUnits="userSpaceOnUse"/><radialGradient id="q" cx="671.84" cy="96.14" r="87.87" gradientTransform="translate(-576)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#263238" stop-opacity=".2"/><stop offset="1" stop-color="#263238" stop-opacity="0"/></radialGradient><radialGradient id="r" cx="34.29" cy="32.01" r="176.75" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff" stop-opacity=".1"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></radialGradient><circle id="e" cx="96" cy="96" r="88"/></defs><clipPath id="f"><use xlink:href="#e" overflow="visible"/></clipPath><g clip-path="url(#f)"><path fill="#db4437" d="M22 8v108h39.4L96 56h88V8z"/><path fill="url(#b)" d="M22 8v108h39.4L96 56h88V8z"/></g><path fill="#3e2723" fill-opacity=".15" d="M62.3 115.7L22.5 47.4l-.6 1 39 67.8z" clip-path="url(#f)"/><g clip-path="url(#f)"><path fill="#0f9d58" d="M8 184h83.8l39-39v-29H61.2L8 24.5z"/><path fill="url(#c)" d="M8 184h83.8l39-39v-29H61.2L8 24.5z"/></g><path fill="#263238" fill-opacity=".15" d="M129.8 117.3l-.8-.4-38.3 67h1l38.3-67z" clip-path="url(#f)"/><g clip-path="url(#f)"><defs><path id="g" d="M8 184h83.8l39-39v-29H61.2L8 24.5z"/></defs><clipPath id="h"><use xlink:href="#g" overflow="visible"/></clipPath><g clip-path="url(#h)"><path fill="#ffcd40" d="M96 56l34.6 60L92 184h92V56z"/><path fill="url(#a)" d="M96 56l34.6 60L92 184h92V56z"/></g></g><g clip-path="url(#f)"><path fill="#ffcd40" d="M96 56l34.6 60L92 184h92V56z"/><path fill="url(#i)" d="M96 56l34.6 60L92 184h92V56z"/></g><g clip-path="url(#f)"><defs><path id="j" d="M96 56l34.6 60L92 184h92V56z"/></defs><clipPath id="k"><use xlink:href="#j" overflow="visible"/></clipPath><g clip-path="url(#k)"><path fill="#db4437" d="M22 8v108h39.4L96 56h88V8z"/><path fill="url(#l)" d="M22 8v108h39.4L96 56h88V8z"/></g></g><path fill="url(#d)" d="M96 56v21l78.4-21z" clip-path="url(#f)"/><g clip-path="url(#f)"><defs><path id="m" d="M22 8v40.3L61.4 116 96 56h88V8z"/></defs><clipPath id="n"><use xlink:href="#m" overflow="visible"/></clipPath><g clip-path="url(#n)"><path fill="#0f9d58" d="M8 184h83.8l39-39v-29H61.2L8 24.5z"/><path fill="url(#o)" d="M8 184h83.8l39-39v-29H61.2L8 24.5z"/></g></g><path fill="url(#p)" d="M22 48.5l57.2 57.2L61.4 116z" clip-path="url(#f)"/><path fill="url(#q)" d="M91.8 184l21-78.3 17.8 10.3z" clip-path="url(#f)"/><g clip-path="url(#f)"><circle cx="96" cy="96" r="40" fill="#f1f1f1"/><circle cx="96" cy="96" r="32" fill="#4285f4"/></g><g clip-path="url(#f)"><path fill="#3e2723" fill-opacity=".2" d="M96 55c-22 0-40 18-40 40v1c0-22 18-40 40-40h88v-1H96z"/><path fill="#fff" fill-opacity=".1" d="M130.6 116c-7 12-19.8 20-34.6 20s-27.7-8-34.6-20L8 24.5v1L61.4 117c7 12 19.8 20 34.6 20s27.7-8 34.6-20v-1z"/><path fill="#3e2723" d="M97 56h-.5c22 .3 39.5 18 39.5 40s-17.6 39.7-39.5 40h.5c22 0 40-18 40-40s-18-40-40-40z" opacity=".1"/><path fill="#fff" fill-opacity=".2" d="M131 117.3c3.4-5.8 5.4-12.6 5.4-20 0-4-.7-8.2-2-12 1 3.4 1.6 7 1.6 10.7 0 7.3-2 14-5.4 20L92 184h1l38.2-66.5z"/></g><g clip-path="url(#f)"><path fill="#fff" fill-opacity=".2" d="M96 9c48.4 0 87.7 39 88 87.5V96c0-48.6-39.4-88-88-88S8 47.4 8 96v.5C8.3 48 47.6 9 96 9z"/><path fill="#3e2723" fill-opacity=".15" d="M96 183c48.4 0 87.7-39 88-87.5v.5c0 48.6-39.4 88-88 88S8 144.6 8 96v-.5C8.3 144 47.6 183 96 183z"/></g><circle cx="96" cy="96" r="88" fill="url(#r)"/><path fill="none" d="M0 0h192v192H0z"/></svg>

source/img/edge.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-3.3 -2.5 65 65"><path fill="#0078d7" d="M55.3 28.2c0-16.6-11.6-28-27-28.2C12.8.2 2 11.3 0 26.8c5.6-9.2 16.7-15.4 26.5-15.4 8 0 12.3 4.3 12.3 12.8H17.4c.4-3.6 2-7.3 4.2-9.5C13 18.2 7 26 7 36.5 7 49.5 17 60 31.6 60c7.4 0 13.4-1.6 18.6-4.3V43c-4.7 2.8-10.3 4.5-16.5 4.5-9.3 0-16-4.5-16-12.7h37.6v-6.6z"/></svg>

source/img/logo.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="127px" height="141px" viewBox="0 0 127 141" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
+    <title>logo</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="logo" fill-rule="nonzero" fill="#F1634A">
+            <path d="M102.375,90.85 C102.979,90.557 103.57,90.215 104.15,89.826 L106.425,88.501 C106.848,88.19 107.64,87.573 108.8,86.65 L108.95,86.501 C109.883,85.567 110.916,85.117 112.05,85.15 C112.55,85.15 113.133,85.284 113.8,85.55 L122.3,78 C122.533,77.8 122.767,77.633 123,77.5 L123.05,77.5 C123.95,76.967 124.7,77 125.3,77.6 C126.367,78.166 126.45,79.133 125.55,80.5 L116.65,88.399 C116.717,88.533 116.75,88.666 116.75,88.799 C116.883,89.399 116.833,89.999 116.6,90.599 C116.4,90.999 116.117,91.382 115.75,91.749 C115.379,92.145 114.996,92.528 114.6,92.898 L109.45,96.648 C108.99,96.97 108.523,97.27 108.05,97.548 C107.46,97.906 106.86,98.232 106.25,98.523 C105.985,98.644 105.718,98.76 105.45,98.874 C103.841,99.559 102.174,100.017 100.45,100.249 C99.65,106.982 97.35,113.183 93.55,118.849 C88.75,125.915 82.183,131.299 73.85,134.999 C65.55,138.699 56.567,140.549 46.9,140.549 C33.567,140.415 22.75,137.415 14.45,131.549 C4.817,124.75 0,115.7 0,104.399 L0,102.849 C0.333,95.149 2.6,87.849 6.8,80.95 C10.933,74.116 16.983,69.5 24.95,67.1 C29.05,65.9 33.166,65.3 37.3,65.3 C41.567,65.3 45.967,66.083 50.5,67.65 C55.033,69.216 60.15,71.916 65.85,75.75 L80.7,85.7 C84.833,88.399 88.6,90.233 92,91.2 C91.3,84.3 88.8,78.399 84.5,73.5 C80.2,68.533 74.717,64.9 68.05,62.6 L61.65,60.4 C55.783,58.333 51.417,56.3 48.55,54.3 C40.817,49.067 36.517,41.883 35.65,32.75 L35.5,30.05 C35.5,21.25 39.067,13.883 46.2,7.95 C52.567,2.65 60.133,0 68.9,0 C75.5,0 81.417,1.9 86.65,5.7 C91.917,9.533 94.9,14.967 95.6,22 L95.75,24.75 C95.75,29.85 94.433,34.216 91.8,37.85 C89.1,41.483 86.717,43.3 84.65,43.3 C84.21,43.269 83.802,43.21 83.425,43.125 L74.1,51.9 C72.6,52.733 71.583,52.583 71.05,51.45 C70.517,50.85 70.567,50.1 71.2,49.2 L71.25,49.15 C71.383,48.95 71.567,48.733 71.8,48.5 L80.475,40.275 C80.376,39.872 80.318,39.431 80.3,38.95 C80.3,37.817 80.75,36.867 81.65,36.1 C85.45,32.7 87.35,28.784 87.35,24.35 C87.35,19.95 85.683,16.25 82.35,13.25 C79.017,10.25 74.467,8.716 68.7,8.65 C61.5,8.65 55.583,10.817 50.95,15.15 C46.317,19.483 44,24.683 44,30.75 C44,35.65 45.883,40.066 49.65,44 C53.383,47.9 59.15,50.966 66.95,53.2 C77.883,56.367 86.233,61.7 92,69.2 C97.133,75.833 100,83.283 100.6,91.55 C101.199,91.365 101.791,91.132 102.375,90.85 Z M71.95,49.05 C71.95,49.35 72.117,49.5 72.45,49.5 C72.483,49.5 75.117,47.066 80.35,42.2 C80.35,41.533 78.95,42.45 76.15,44.95 C73.35,47.483 71.95,48.85 71.95,49.05 Z M74.15,50.8 C74.15,50.533 74.017,50.4 73.75,50.4 C73.45,50.4 73.183,50.55 72.95,50.85 C72.416,50.817 72.033,50.884 71.8,51.05 C71.7,51.117 71.65,51.183 71.65,51.25 C71.65,51.45 71.783,51.6 72.05,51.7 L72.95,51.7 C73.75,51.4 74.15,51.1 74.15,50.8 Z M80.35,45.35 C80.35,44.583 79.9,44.583 79,45.35 C78.567,45.75 78.017,46.317 77.35,47.05 C77.117,47.217 76.633,47.667 75.9,48.4 C75.133,49.2 74.75,49.683 74.75,49.85 L74.8,50.2 C75,50.267 75.133,50.3 75.2,50.3 C75.233,50.3 76.1,49.5 77.8,47.9 C79.5,46.3 80.35,45.45 80.35,45.35 Z M124.2,78.3 L115.8,85.7 C116.3,85.967 116.667,86.349 116.9,86.849 L125.2,79.45 C125.266,79.116 125.217,78.849 125.05,78.649 C124.883,78.517 124.6,78.399 124.2,78.3 Z M123.75,78.05 L123.55,77.85 L116.15,83.85 L116.6,84.4 L123.75,78.05 Z M91.85,99.899 C89.65,99.333 87.617,98.649 85.75,97.849 C81.55,96.149 76.333,93.183 70.1,88.95 L59.85,82 C55.517,79.233 51.567,77.166 48,75.8 C44.4,74.467 40.867,73.8 37.4,73.8 L35.9,73.8 C27.067,74.267 20.2,77.583 15.3,83.75 C10.734,89.45 8.45,96.184 8.45,103.95 C8.45,112.683 11.95,119.516 18.95,124.45 C25.916,129.416 35.467,131.899 47.6,131.899 C57.133,131.899 65.166,130.2 71.7,126.799 C78.2,123.399 83.25,118.899 86.85,113.299 C89.55,109.033 91.217,104.566 91.85,99.899 Z" id="Shape"></path>
+        </g>
+    </g>
+</svg>

source/img/opera.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="5.5 5.5 109 109"><linearGradient id="a" x2="1" gradientTransform="rotate(90 20.115 31.505) scale(97.39658)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ff1b2d"/><stop offset=".3" stop-color="#ff1b2d"/><stop offset=".61" stop-color="#ff1b2d"/><stop offset="1" stop-color="#a70014"/></linearGradient><linearGradient id="b" x2="1" gradientTransform="rotate(90 29.862 46.992) scale(86.1425)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#9c0000"/><stop offset=".7" stop-color="#ff4b4b"/><stop offset="1" stop-color="#ff4b4b"/></linearGradient><path fill="url(#a)" d="M60 9.75C32.25 9.75 9.75 32.25 9.75 60c0 26.95 21.22 48.94 47.86 50.19.8.04 1.59.06 2.39.06 12.87 0 24.6-4.84 33.49-12.79-5.89 3.91-12.78 6.15-20.14 6.15-11.97 0-22.68-5.94-29.89-15.3-5.56-6.56-9.15-16.25-9.4-27.13v-2.37c.25-10.88 3.84-20.58 9.4-27.13 7.21-9.36 17.93-15.3 29.89-15.3 7.36 0 14.25 2.25 20.14 6.16-8.84-7.91-20.51-12.74-33.3-12.79H60z"/><path fill="url(#b)" d="M43.46 31.68c4.61-5.44 10.57-8.73 17.07-8.73 14.63 0 26.49 16.59 26.49 37.04 0 20.46-11.86 37.04-26.49 37.04-6.51 0-12.46-3.28-17.07-8.72 7.21 9.36 17.92 15.3 29.89 15.3 7.36 0 14.25-2.25 20.14-6.15 10.29-9.2 16.76-22.57 16.76-37.46 0-14.88-6.47-28.26-16.76-37.46-5.89-3.91-12.78-6.15-20.14-6.15-11.97 0-22.68 5.94-29.89 15.3"/></svg>

source/js/dropdowns.js

@@ -0,0 +1,100 @@
+/*!
+  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.');
+  }
+
+  (typeof jQuery === 'function' ? jQuery : Zepto)(function($) {
+    $(document)
+      .on('click', function(event) {
+        var dropdown = $(event.target).closest('.dropdown').get(0);
+        var trigger = dropdown ? $(event.target).closest('.dropdown-trigger').get(0) : null;
+        var menu = dropdown ? $(event.target).closest('.dropdown-menu').get(0) : null;
+        var selectedItem = menu ? $(event.target).closest('a').get(0) : null;
+
+        // Watch for clicks on dropdown triggers
+        if(trigger) {
+          // 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');
+
+          return;
+        }
+
+        // If the user selected a menu item, close the dropdown and fire the select event
+        if(selectedItem) {
+          // Don't select disabled menu items
+          if($(selectedItem).is('.disabled')) {
+            event.preventDefault();
+            return;
+          }
+
+          // Close the dropdown and trigger the select event. The original click event is exposed to
+          // the handler so it can be prevented as needed.
+          $(dropdown)
+            .removeClass('active')
+            .trigger('hide')
+            .trigger($.Event('select', event), selectedItem);
+
+          return;
+        }
+
+        // If the click wasn't in a dropdown, hide any active dropdowns
+        if(!dropdown) {
+          $('.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,91 @@
-/* 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
+//   - Make sure your tab navs and tab panes have the correct href and id attributes
 //
-// 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.');
+  }
 
-    event.preventDefault();
+  (window.jQuery || window.Zepto)(function($) {
+    // Watch for mutations on tabs and show the appropriate tab pane
+    var observer = new MutationObserver(function(mutations) {
+      mutations.forEach(function(mutation) {
+        // Only observe class changes
+        if(mutation.type === 'attributes' && mutation.attributeName === 'class') {
+          var tab = $(mutation.target).get(0);
+          var tabs = $(mutation.target).closest('.tabs').get(0);
+          var tabsNav = $(mutation.target).closest('.tabs-nav').get(0);
+          var tabPane = tab.tagName === 'A' ? $(tabs).find(tab.hash) : null;
 
-    // Ignore tabs without an href or with the "disabled" class
-    if(!tab.hash || $(tab).is('.disabled')) return;
+          // The mutation must be on a tab
+          if(!$(tab).is('a') || !tabs || !tabsNav) return;
 
-    // Make the selected tab active
-    $(tab)
-      .siblings().removeClass('active').end()
-      .addClass('active');
+          // Disabled tabs can't receive the active class, so we just remove it
+          if($(tab).is('.disabled.active')) {
+            $(tab).removeClass('active');
+            return;
+          }
 
-    // Make the appropriate tab pane active
-    $(tabset)
-      .find('.tabs-pane').removeClass('active').end()
-      .find(tab.hash).addClass('active');
+          // Toggle the tab pane based on the tab's active state
+          if($(tab).is('.active')) {
+            // Remove the active class from other tabs
+            $(tab).siblings('.active').removeClass('active');
+
+            // Show the selected tab
+            $(tabPane).addClass('active');
+            $(tabs).trigger('show', tabPane);
+          } else {
+            // Hide the previously selected tab
+            $(tabPane).removeClass('active');
+            $(tabs).trigger('hide', tabPane);
+          }
+        }
+      });
+    });
+
+    // Observe the body so we can handle dynamically created elements
+    observer.observe(document.body, {
+      attributes: true,
+      attributeFilter: ['class'],
+      attributeOldValue: true,
+      subtree: true
+    });
+
+    // Watch for clicks on tabs
+    $(document).on('click', '.tabs-nav a', function(event) {
+      // Make the selected tab active. No need to worry about disabled tabs, showing the tab pane,
+      // or making other tabs inactive because the mutation observer handles everything.
+      $(this).addClass('active');
+
+      event.preventDefault();
+    });
   });
-});
+})();

source/layouts/default.html

@@ -0,0 +1,114 @@
+<!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-secondary text-small">
+      A back to the basics CSS starter kit. For when you don’t need the whole boot.
+    </p>
+  </header>
+
+  <main class="container">
+    <div class="row">
+      <div class="col-md-3">
+        <ul id="nav">
+          <li><a href="installing.html">Installing</a></li>
+          <li><a href="customizing.html">Customizing</a></li>
+          <li><a href="content.html">Content</a></li>
+          <li><a href="alerts.html">Alerts</a></li>
+          <li><a href="badges.html">Badges</a></li>
+          <li><a href="buttons.html">Buttons</a></li>
+          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="file-buttons.html">File Buttons</a></li>
+          <li><a href="forms.html">Forms</a></li>
+          <li><a href="grid-system.html">Grid System</a></li>
+          <li><a href="loaders.html">Loaders</a></li>
+          <li><a href="progress-bars.html">Progress Bars</a></li>
+          <li><a href="switches.html">Switches</a></li>
+          <li><a href="tabs.html">Tabs</a></li>
+          <li><a href="tables.html">Tables</a></li>
+          <li><a href="utilities.html">Utilities</a></li>
+          <li><a href="icons.html">Icons</a></li>
+          <li><a href="browser-support.html">Browser Support</a></li>
+          <li><a href="attribution.html">Attribution</a></li>
+        </ul>
+      </div>
+
+      <div class="col-md-9">
+        <div id="content">
+          {{{contents}}}
+        </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-secondary">
+      {{version}}
+    </p>
+
+    <p class="mar-y-sm 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>
+
+    <p class="text-small text-secondary">
+      <a href="https://keycdn.com/" class="text-secondary">Accelerated by KeyCDN</a> &middot;
+      &copy; A Beautiful Site, LLC
+    </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');
+        }
+      });
+
+      // Intercept dropdown clicks for the demo
+      $('.dropdown').on('select', function(event) {
+        event.preventDefault();
+      });
+    });
+  </script>
+  {{#each scripts}}
+  <script src="{{.}}"></script>
+  {{/each}}
+  <script async defer src="https://buttons.github.io/buttons.js"></script>
+</body>
+</html>