Use primary color

fix inability to use switch components w/keyboard controls

.env.example

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

.eslintrc

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

.github/CONTRIBUTING.md

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

.github/ISSUE_TEMPLATE.md

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

.github/PULL_REQUEST_TEMPLATE.md

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

.gitignore

@@ -1,2 +1,4 @@
 .DS_Store
+.env
+.htaccess
 node_modules/

.stylelintrc

@@ -0,0 +1,11 @@
+{
+  "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",
+    "shorthand-property-no-redundant-values": null
+  }
+}

README.md

@@ -1,8 +1,8 @@
-# 👟 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.
 
-📚 [Documentation & Examples](https://labs.abeautifulsite.net/shoelace-css/docs/)
+📚 [Website & Docs](https://shoelace.style)
 
 💻 [Source Code](https://github.com/claviska/shoelace-css)
 
@@ -10,6 +10,22 @@ 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 release and generate documentation. To build a release, run:
+
+```
+node build.js --build
+```
+
+To see all available options, run:
+
+```
+node build.js --help
+```
+
+---
+
 Developed by [@claviska](https://twitter.com/claviska) for [Surreal CMS](https://www.surrealcms.com/).
 
 &copy; A Beautiful Site, LLC

build.js

@@ -1,72 +1,345 @@
+/* eslint prefer-arrow-callback: "warn" */
 'use strict';
 
 global.__version = require('./package.json').version;
 
-const CleanCSS = require('clean-css');
+require('dotenv').config();
+const Promise = require('bluebird');
+const AtImport = require('postcss-import');
 const Chalk = require('chalk');
-const FS = require('fs');
+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');
 
-let source = Path.join(__dirname, 'source/css');
-let dist = Path.join(__dirname, 'dist');
-let docsFile = Path.join(__dirname, 'docs/index.html');
-let inFile = Path.join(source, 'shoelace.css');
-let outFile = Path.join(dist, 'shoelace.css');
+//
+// 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];
 
-const clean = new CleanCSS({
-  // format: 'beautify',
-  inline: ['local'],
-  rebaseTo: Path.dirname(dist),
-  specialComments: 'all'
-});
+            file.contents = new Buffer(
+              file.contents
+                .toString()
+                .replace(/\{\{version\}\}/g, __version)
+            );
+          });
 
-// Generate minified version
-clean.minify({
-  [inFile]: { styles: FS.readFileSync(inFile, 'utf8') }
-}, (errors, output) => {
-  // Show errors
-  if(errors) {
-    errors.forEach((err) => console.log(Chalk.red(err)));
-    return;
+          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);
   }
+}
 
-  // Get stats
-  let originalSize = parseInt(output.stats.originalSize / 1000) + 'KB'; // KB
-  let minifiedSize = parseInt(output.stats.minifiedSize / 1000) + 'KB'; // KB
+// Clean
+if(Program.clean) {
+  Promise.resolve()
+    // Delete /dist
+    .then(() => Del(Path.join(__dirname, 'dist')))
+    .then(() => {
+      console.log(Chalk.green('/dist has been removed.'));
+    })
 
-  // Show output warnings and errors
-  output.warnings.forEach((err) => console.log(Chalk.red(err)));
-  output.errors.forEach((err) => console.log(Chalk.red(err)));
+    // Delete /docs
+    .then(() => Del(Path.join(__dirname, 'docs')))
+    .then(() => {
+      console.log(Chalk.green('/docs has been removed.'));
+    })
 
-  // Update placeholders in CSS
-  output.styles = output.styles
-    .replace(/\{version\}/g, __version)
-    .replace(/\{originalSize\}/, originalSize)
-    .replace(/\{minifiedSize\}/, minifiedSize);
+    // Exit with success
+    .then(() => process.exit(1))
 
-  // Write output file
-  FS.writeFile(outFile, output.styles, 'utf8', (err) => {
-    if(err) {
+    // Handle errors
+    .catch((err) => {
       console.error(Chalk.red(err));
-      return;
+      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();
+      }
     }
-    console.log(Chalk.green('CSS Minified at %s! 💪'), Path.relative(__dirname, outFile));
   });
 
-  // Update placeholders in docs
-  let content = FS.readFileSync(docsFile, 'utf8');
-  content = content
-    .replace(/<span data-placeholder="version">(.*?)<\/span>/g, '<span data-placeholder="version">' + __version + '</span>')
-    .replace(/<span data-placeholder="originalSize">(.*?)<\/span>/g, '<span data-placeholder="originalSize">' + originalSize + '</span>')
-    .replace(/<span data-placeholder="minifiedSize">(.*?)<\/span>/g, '<span data-placeholder="minifiedSize">' + minifiedSize + '</span>');
-
-  // Write docs file
-  FS.writeFile(docsFile, content, 'utf8', (err) => {
-    if(err) {
-      console.error(Chalk.red(err));
-      return;
+  // 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();
+      }
     }
-    console.log(Chalk.green('Docs have been updated! 📚'));
   });
 
-});
+  // 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-beta17
+  (c) A Beautiful Site, LLC
+
+  Released under the MIT license
+  Source: https://github.com/claviska/shoelace-css
+*/
+!function(){"use strict";if("undefined"==typeof jQuery&&"undefined"==typeof Zepto)throw new Error("Shoelace dropdowns require either jQuery or Zepto.");("function"==typeof jQuery?jQuery:Zepto)(function(e){e(document).on("click",function(t){var i,o,r;if(e(t.target).is(".dropdown-trigger")){if(i=e(t.target).closest(".dropdown"),r=t.target,e(".dropdown.active").not(i).removeClass("active").trigger("hide"),e(r).is(".disabled, :disabled"))return;e(i).toggleClass("active").trigger(e(i).is(".active")?"show":"hide")}else e(t.target).closest(".dropdown-menu").length&&(i=e(t.target).closest(".dropdown"),(o=e(t.target).closest("a").get(0))&&!e(o).is(".disabled")&&e(i).trigger("select",o),t.preventDefault()),e(".dropdown.active").removeClass("active").trigger("hide")}).on("keydown",function(t){27===t.keyCode&&e(".dropdown.active").removeClass("active").trigger("hide")})})}(),/*!
+  Shoelace.css tabs 1.0.0-beta17
+  (c) A Beautiful Site, LLC
+
+  Released under the MIT license
+  Source: https://github.com/claviska/shoelace-css
+*/
+function(){"use strict";if("undefined"==typeof jQuery&&"undefined"==typeof Zepto)throw new Error("Shoelace tabs require either jQuery or Zepto.");(window.jQuery||window.Zepto)(function(e){e(document).on("click",".tabs-nav a",function(t){var i=e(this).closest(".tabs"),o=this,r=e(i).find(o.hash).get(0);t.preventDefault(),o.hash&&!e(o).is(".disabled")&&(e(o).siblings().removeClass("active"),e(o).addClass("active"),e(i).find(".tabs-pane.active").not(r).each(function(){e(this).removeClass("active"),e(i).trigger("hide",this)}),r&&!e(r).is(".active")&&(e(r).addClass("active"),e(i).trigger("show",r)))})})}();

docs/alerts.html

@@ -0,0 +1,121 @@
+<!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 id="wrap">
+    <nav id="nav">
+      <a href="installing.html">Installing</a>
+      <a href="customizing.html">Customizing</a>
+      <a href="content.html">Content</a>
+      <a href="alerts.html">Alerts</a>
+      <a href="badges.html">Badges</a>
+      <a href="buttons.html">Buttons</a>
+      <a href="dropdowns.html">Dropdowns</a>
+      <a href="forms.html">Forms</a>
+      <a href="loaders.html">Loaders</a>
+      <a href="progress-bars.html">Progress Bars</a>
+      <a href="switches.html">Switches</a>
+      <a href="tabs.html">Tabs</a>
+      <a href="tables.html">Tables</a>
+      <a href="utilities.html">Utilities</a>
+      <a href="grid-system.html">Grid System</a>
+      <a href="icons.html">Icons</a>
+      <a href="browser-support.html">Browser Support</a>
+      <a href="attribution.html">Attribution</a>
+    </nav>
+
+    <div id="content">
+      <h2 id="alerts">Alerts</h2>
+<p>Create an alert by applying the <code>alert</code> class to an element such as a <code>&lt;div&gt;</code>.</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>
+  </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-beta17
+    </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');
+        }
+      });
+    });
+  </script>
+  <script async defer src="https://buttons.github.io/buttons.js"></script>
+</body>
+</html>

docs/attribution.html

@@ -0,0 +1,106 @@
+<!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 id="wrap">
+    <nav id="nav">
+      <a href="installing.html">Installing</a>
+      <a href="customizing.html">Customizing</a>
+      <a href="content.html">Content</a>
+      <a href="alerts.html">Alerts</a>
+      <a href="badges.html">Badges</a>
+      <a href="buttons.html">Buttons</a>
+      <a href="dropdowns.html">Dropdowns</a>
+      <a href="forms.html">Forms</a>
+      <a href="loaders.html">Loaders</a>
+      <a href="progress-bars.html">Progress Bars</a>
+      <a href="switches.html">Switches</a>
+      <a href="tabs.html">Tabs</a>
+      <a href="tables.html">Tables</a>
+      <a href="utilities.html">Utilities</a>
+      <a href="grid-system.html">Grid System</a>
+      <a href="icons.html">Icons</a>
+      <a href="browser-support.html">Browser Support</a>
+      <a href="attribution.html">Attribution</a>
+    </nav>
+
+    <div id="content">
+      <h2 id="attribution">Attribution</h2>
+<p>Special thanks to the following individuals and organizations for their contributions to Shoelace.css.</p>
+<ul>
+<li><a href="https://twitter.com/claviska">Cory LaViska</a> – for creating this project.</li>
+<li><a href="https://twitter.com/adamkolson">Adam K Olson</a> – for designing the logo with a single shoelaces.</li>
+<li><a href="https://getbootstrap.com/">Bootstrap</a> – for inspiration.</li>
+<li><a href="https://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>
+  </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-beta17
+    </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');
+        }
+      });
+    });
+  </script>
+  <script async defer src="https://buttons.github.io/buttons.js"></script>
+</body>
+</html>

docs/badges.html

@@ -0,0 +1,150 @@
+<!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 id="wrap">
+    <nav id="nav">
+      <a href="installing.html">Installing</a>
+      <a href="customizing.html">Customizing</a>
+      <a href="content.html">Content</a>
+      <a href="alerts.html">Alerts</a>
+      <a href="badges.html">Badges</a>
+      <a href="buttons.html">Buttons</a>
+      <a href="dropdowns.html">Dropdowns</a>
+      <a href="forms.html">Forms</a>
+      <a href="loaders.html">Loaders</a>
+      <a href="progress-bars.html">Progress Bars</a>
+      <a href="switches.html">Switches</a>
+      <a href="tabs.html">Tabs</a>
+      <a href="tables.html">Tables</a>
+      <a href="utilities.html">Utilities</a>
+      <a href="grid-system.html">Grid System</a>
+      <a href="icons.html">Icons</a>
+      <a href="browser-support.html">Browser Support</a>
+      <a href="attribution.html">Attribution</a>
+    </nav>
+
+    <div id="content">
+      <h2 id="badges">Badges</h2>
+<p>Create a badge by applying the <code>badge</code> class to an element such as a <code>&lt;span&gt;</code>.</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>
+  </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-beta17
+    </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');
+        }
+      });
+    });
+  </script>
+  <script async defer src="https://buttons.github.io/buttons.js"></script>
+</body>
+</html>

docs/browser-support.html

@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <meta name="description" content="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 id="wrap">
+    <nav id="nav">
+      <a href="installing.html">Installing</a>
+      <a href="customizing.html">Customizing</a>
+      <a href="content.html">Content</a>
+      <a href="alerts.html">Alerts</a>
+      <a href="badges.html">Badges</a>
+      <a href="buttons.html">Buttons</a>
+      <a href="dropdowns.html">Dropdowns</a>
+      <a href="forms.html">Forms</a>
+      <a href="loaders.html">Loaders</a>
+      <a href="progress-bars.html">Progress Bars</a>
+      <a href="switches.html">Switches</a>
+      <a href="tabs.html">Tabs</a>
+      <a href="tables.html">Tables</a>
+      <a href="utilities.html">Utilities</a>
+      <a href="grid-system.html">Grid System</a>
+      <a href="icons.html">Icons</a>
+      <a href="browser-support.html">Browser Support</a>
+      <a href="attribution.html">Attribution</a>
+    </nav>
+
+    <div id="content">
+      <h2 id="browser-support">Browser Support</h2>
+<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>
+  </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-beta17
+    </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');
+        }
+      });
+    });
+  </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 id="wrap">
+    <nav id="nav">
+      <a href="installing.html">Installing</a>
+      <a href="customizing.html">Customizing</a>
+      <a href="content.html">Content</a>
+      <a href="alerts.html">Alerts</a>
+      <a href="badges.html">Badges</a>
+      <a href="buttons.html">Buttons</a>
+      <a href="dropdowns.html">Dropdowns</a>
+      <a href="forms.html">Forms</a>
+      <a href="loaders.html">Loaders</a>
+      <a href="progress-bars.html">Progress Bars</a>
+      <a href="switches.html">Switches</a>
+      <a href="tabs.html">Tabs</a>
+      <a href="tables.html">Tables</a>
+      <a href="utilities.html">Utilities</a>
+      <a href="grid-system.html">Grid System</a>
+      <a href="icons.html">Icons</a>
+      <a href="browser-support.html">Browser Support</a>
+      <a href="attribution.html">Attribution</a>
+    </nav>
+
+    <div id="content">
+      <h2 id="buttons">Buttons</h2>
+<p>To create a button, use the <code>&lt;button&gt;</code> element or apply the <code>button</code> class to 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-single">
+  <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-single">
+  <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-single">
+  <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-single">
+  <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-single">
+  <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-single">
+  <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-single">
+  <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;XS&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;button-loader button-sm&quot;&gt;SM&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;button-loader&quot;&gt;Default&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;button-loader button-lg&quot;&gt;LG&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;button-loader button-xl&quot;&gt;XL&lt;/button&gt;
+</code></pre>
+<div class="input-single">
+  <button type="button" class="button-loader button-xs">XS</button>
+  <button type="button" class="button-loader button-sm">SM</button>
+  <button type="button" class="button-loader">Default</button>
+  <button type="button" class="button-loader button-lg">LG</button>
+  <button type="button" class="button-loader button-xl">XL</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-single">
+  <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>
+
+<h3 id="file-buttons">File Buttons</h3>
+<p>File inputs are notoriously hard to style properly in every browser. Shoelace offers file buttons as an alternative. These are much easier to style consistently, but come with the caveat that the name (or number) of files selected will not be automatically shown to the user. This aspect of a file button’s UX can be handled effectively with JavaScript, but this is left as an <a href="https://stackoverflow.com/questions/2189615/how-to-get-file-name-when-user-select-a-file-via-input-type-file">exercise for the user</a>.</p>
+<p>File buttons are simply <code>&lt;label&gt;</code> elements with the <code>button</code> class and a nested file input.</p>
+<pre><code class="lang-html">&lt;label class=&quot;button&quot;&gt;
+  Select File
+  &lt;input type=&quot;file&quot;&gt;
+&lt;/label&gt;
+</code></pre>
+<div class="input-single">
+  <label class="button">Select File <input type="file"></label>
+</div>
+
+    </div>
+  </main>
+
+  <footer id="foot">
+    <a href="../index.html">
+      <img src="../source/img/wordmark.svg" alt="Shoelace logo">
+    </a>
+
+    <p class="text-small text-secondary">
+      1.0.0-beta17
+    </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');
+        }
+      });
+    });
+  </script>
+  <script async defer src="https://buttons.github.io/buttons.js"></script>
+</body>
+</html>

docs/content.html

@@ -0,0 +1,234 @@
+<!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 id="wrap">
+    <nav id="nav">
+      <a href="installing.html">Installing</a>
+      <a href="customizing.html">Customizing</a>
+      <a href="content.html">Content</a>
+      <a href="alerts.html">Alerts</a>
+      <a href="badges.html">Badges</a>
+      <a href="buttons.html">Buttons</a>
+      <a href="dropdowns.html">Dropdowns</a>
+      <a href="forms.html">Forms</a>
+      <a href="loaders.html">Loaders</a>
+      <a href="progress-bars.html">Progress Bars</a>
+      <a href="switches.html">Switches</a>
+      <a href="tabs.html">Tabs</a>
+      <a href="tables.html">Tables</a>
+      <a href="utilities.html">Utilities</a>
+      <a href="grid-system.html">Grid System</a>
+      <a href="icons.html">Icons</a>
+      <a href="browser-support.html">Browser Support</a>
+      <a href="attribution.html">Attribution</a>
+    </nav>
+
+    <div id="content">
+      <h2 id="content">Content</h2>
+<p>Shoelace 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>
+  </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-beta17
+    </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');
+        }
+      });
+    });
+  </script>
+  <script async defer src="https://buttons.github.io/buttons.js"></script>
+</body>
+</html>

docs/customizing.html

@@ -0,0 +1,147 @@
+<!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 id="wrap">
+    <nav id="nav">
+      <a href="installing.html">Installing</a>
+      <a href="customizing.html">Customizing</a>
+      <a href="content.html">Content</a>
+      <a href="alerts.html">Alerts</a>
+      <a href="badges.html">Badges</a>
+      <a href="buttons.html">Buttons</a>
+      <a href="dropdowns.html">Dropdowns</a>
+      <a href="forms.html">Forms</a>
+      <a href="loaders.html">Loaders</a>
+      <a href="progress-bars.html">Progress Bars</a>
+      <a href="switches.html">Switches</a>
+      <a href="tabs.html">Tabs</a>
+      <a href="tables.html">Tables</a>
+      <a href="utilities.html">Utilities</a>
+      <a href="grid-system.html">Grid System</a>
+      <a href="icons.html">Icons</a>
+      <a href="browser-support.html">Browser Support</a>
+      <a href="attribution.html">Attribution</a>
+    </nav>
+
+    <div id="content">
+      <h2 id="customizing">Customizing</h2>
+<p>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 the <code>:root</code> block of <a href="../source/css/shoelace.css"><code>shoelace.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>
+<p>Additional variables can be found in the <code>:root</code> block of each component’s stylesheet. For example, to customize alerts, refer to the top of <a href="https://github.com/claviska/shoelace-css/blob/master/source/css/alerts.css"><code>alerts.css</code></a> for a complete list of variables.</p>
+<h3 id="using-variables">Using Variables</h3>
+<p>You can use any of 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-selector {
+  color: var(--state-danger);
+}
+</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’s 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 in your extension!
+*/
+: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>
+  </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-beta17
+    </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');
+        }
+      });
+    });
+  </script>
+  <script async defer src="https://buttons.github.io/buttons.js"></script>
+</body>
+</html>

docs/docs.css

@@ -1,116 +0,0 @@
-:root {
-  --border-top-width: .3rem;
-}
-
-body {
-  border-top: solid var(--border-top-width) 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);
-}
-
-h2[id] {
-  border-bottom: solid var(--component-border-width) var(--component-border-color);
-  padding-bottom: .25rem;
-  margin-bottom: 1rem;
-}
-
-/* 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/dropdowns.html

@@ -0,0 +1,221 @@
+<!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 id="wrap">
+    <nav id="nav">
+      <a href="installing.html">Installing</a>
+      <a href="customizing.html">Customizing</a>
+      <a href="content.html">Content</a>
+      <a href="alerts.html">Alerts</a>
+      <a href="badges.html">Badges</a>
+      <a href="buttons.html">Buttons</a>
+      <a href="dropdowns.html">Dropdowns</a>
+      <a href="forms.html">Forms</a>
+      <a href="loaders.html">Loaders</a>
+      <a href="progress-bars.html">Progress Bars</a>
+      <a href="switches.html">Switches</a>
+      <a href="tabs.html">Tabs</a>
+      <a href="tables.html">Tables</a>
+      <a href="utilities.html">Utilities</a>
+      <a href="grid-system.html">Grid System</a>
+      <a href="icons.html">Icons</a>
+      <a href="browser-support.html">Browser Support</a>
+      <a href="attribution.html">Attribution</a>
+    </nav>
+
+    <div id="content">
+      <h2 id="dropdowns">Dropdowns</h2>
+<p>Dropdowns can be created using the markup below. You can use a <code>&lt;button&gt;</code> or an <code>&lt;a&gt;</code> as a trigger. Dropdown indicators (i.e. carets) are added for you. Menu items are simply <code>&lt;a&gt;</code> elements. Dividers are simply <code>&lt;hr&gt;</code> elements.</p>
+<p>Note the class names used for the main container, the trigger, and the menu. Additionally, menu items can be disabled by adding the <code>disabled</code> class. Menu items can also be given a checked state using the <code>checked</code> class.</p>
+<p>To disable a dropdown entirely, add the <code>disabled</code> property to the dropdown trigger if it’s a button. If it’s a link, add the <code>disabled</code> class instead. When a dropdown is activated, it will receive the <code>active</code> class and the menu will show.</p>
+<pre><code class="lang-html">&lt;div class=&quot;dropdown&quot;&gt;
+  &lt;button type=&quot;button&quot; class=&quot;dropdown-trigger&quot;&gt;Dropdown&lt;/button&gt;
+  &lt;div class=&quot;dropdown-menu&quot;&gt;
+    &lt;a href=&quot;#&quot;&gt;Item 1&lt;/a&gt;
+    &lt;a href=&quot;#&quot;&gt;Item 2&lt;/a&gt;
+    &lt;a href=&quot;#&quot;&gt;Item 3&lt;/a&gt;
+    &lt;a href=&quot;#&quot; class=&quot;checked&quot;&gt;Checked&lt;/a&gt;
+    &lt;a href=&quot;#&quot; class=&quot;disabled&quot;&gt;Disabled&lt;/a&gt;
+    &lt;hr&gt;
+    &lt;a href=&quot;#&quot;&gt;More...&lt;/a&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</code></pre>
+<div class="input-single">
+  <div class="dropdown">
+    <button type="button" class="dropdown-trigger">Dropdown</button>
+    <div class="dropdown-menu">
+      <a href="#">Item 1</a>
+      <a href="#">Item 2</a>
+      <a href="#">Item 3</a>
+      <a href="#" class="checked">Checked</a>
+      <a href="#" class="disabled">Disabled</a>
+      <hr>
+      <a href="#">More...</a>
+    </div>
+  </div>
+</div>
+
+<p>Use the <code>dropdown-top</code> and <code>dropdown-left</code> modifiers to change the positioning of the menu. You can combine these modifiers as needed.</p>
+<pre><code class="lang-html">&lt;div class=&quot;dropdown dropdown-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-single">
+  <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="events">Events</h3>
+<p>Dropdowns require <code>shoelace.js</code> to make them interactive. You don’t need to initialize them. Simply include the script and everything “just works.”</p>
+<p>There is no JavaScript API. Shoelace’s philosophy believes that custom components should act like native components as much as possible. You can, however, listen for various events:</p>
+<ul>
+<li><code>show</code> – Fires when a dropdown is shown.</li>
+<li><code>hide</code> – Fires when a dropdown is hidden.</li>
+<li><code>select</code> – Fires when a dropdown menu item is selected. The second callback argument is a reference to the respective menu item.</li>
+</ul>
+<p>This example will log all three events for a dropdown with an id of <code>my-dropdown</code>.</p>
+<pre><code class="lang-javascript">$(&#39;#my-dropdown&#39;)
+  .on(&#39;show&#39;, function(event) {
+    console.log(&#39;show&#39;, event.target);
+  })
+  .on(&#39;hide&#39;, function(event) {
+    console.log(&#39;hide&#39;, event.target);
+  })
+  .on(&#39;select&#39;, function(event, item) {
+    console.log(&#39;select&#39;, event.target, item);
+  });
+</code></pre>
+
+    </div>
+  </main>
+
+  <footer id="foot">
+    <a href="../index.html">
+      <img src="../source/img/wordmark.svg" alt="Shoelace logo">
+    </a>
+
+    <p class="text-small text-secondary">
+      1.0.0-beta17
+    </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');
+        }
+      });
+    });
+  </script>
+  <script async defer src="https://buttons.github.io/buttons.js"></script>
+</body>
+</html>

docs/forms.html

@@ -0,0 +1,457 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <meta name="description" content="Default form control styles.">
+  <link rel="icon" href="../source/img/favicon.png">
+  <link rel="stylesheet" href="../dist/shoelace.css">
+  <link rel="stylesheet" href="../source/css/_docs.css">
+  <link rel="stylesheet" href="https://cdn.rawgit.com/AGMStudio/prism-theme-one-dark/f81fe477/prism-onedark.css">
+  <title>Forms</title>
+</head>
+<body>
+
+  <header id="head" class="text-center">
+    <h1>
+      <a href="../index.html">
+        <img src="../source/img/wordmark.svg" alt="Shoelace logo">
+      </a>
+    </h1>
+    <p class="text-secondary text-small">
+      A back to the basics CSS starter kit. For when you don’t need the whole boot.
+    </p>
+  </header>
+
+  <main id="wrap">
+    <nav id="nav">
+      <a href="installing.html">Installing</a>
+      <a href="customizing.html">Customizing</a>
+      <a href="content.html">Content</a>
+      <a href="alerts.html">Alerts</a>
+      <a href="badges.html">Badges</a>
+      <a href="buttons.html">Buttons</a>
+      <a href="dropdowns.html">Dropdowns</a>
+      <a href="forms.html">Forms</a>
+      <a href="loaders.html">Loaders</a>
+      <a href="progress-bars.html">Progress Bars</a>
+      <a href="switches.html">Switches</a>
+      <a href="tabs.html">Tabs</a>
+      <a href="tables.html">Tables</a>
+      <a href="utilities.html">Utilities</a>
+      <a href="grid-system.html">Grid System</a>
+      <a href="icons.html">Icons</a>
+      <a href="browser-support.html">Browser Support</a>
+      <a href="attribution.html">Attribution</a>
+    </nav>
+
+    <div id="content">
+      <h2 id="forms">Forms</h2>
+<p>Shoelace gives you beautiful forms without hassle. Most form controls don’t need a special class for styling.</p>
+<h3 id="form-controls">Form Controls</h3>
+<p>Form controls are styled at 100% of the width of their parent element.</p>
+<table class="table table-bordered">
+  <thead>
+    <tr>
+      <th>Input Type</th>
+      <th>Example</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>&lt;input type=&quot;checkbox&quot;&gt;</code></td>
+      <td>
+        <label><input type="checkbox" checked> Checkbox 1</label><br>
+        <label><input type="checkbox"> Checkbox 2</label>
+      </td>
+    </tr>
+    <tr>
+      <td><code>&lt;input type=&quot;color&quot;&gt;</code></td>
+      <td><input type="color" value="#0099dd"></td>
+    </tr>
+    <tr>
+      <td><code>&lt;input type=&quot;date&quot;&gt;</code></td>
+      <td><input type="date"></td>
+    </tr>
+    <tr>
+      <td><code>&lt;input type=&quot;email&quot;&gt;</code></td>
+      <td><input type="email"></td>
+    </tr>
+    <tr>
+      <td>
+        <code>&lt;input type=&quot;file&quot;&gt;</code>
+        <br>
+        <span class="text-small text-secondary">
+          File inputs aren’t supported. Use a <a href="buttons.html#file-buttons">file button</a> instead.
+        </span>
+      </td>
+      <td>
+        <label class="button button-block">Select File <input type="file"></label>
+      </td>
+    </tr>
+    <tr>
+      <td><code>&lt;input type=&quot;number&quot;&gt;</code></td>
+      <td><input type="number"></td>
+    </tr>
+    <tr>
+      <td><code>&lt;input type=&quot;password&quot;&gt;</code></td>
+      <td><input type="password"></td>
+    </tr>
+    <tr>
+      <td><code>&lt;input type=&quot;radio&quot;&gt;</code></td>
+      <td>
+        <label><input type="Radio" name="radio" checked> Radio 1</label><br>
+        <label><input type="Radio" name="radio"> Radio 2</label>
+      </td>
+    </tr>
+    <tr>
+      <td><code>&lt;input type=&quot;range&quot;&gt;</code></td>
+      <td><input type="range"></td>
+    </tr>
+    <tr>
+      <td><code>&lt;input type=&quot;search&quot;&gt;</code></td>
+      <td><input type="search"></td>
+    </tr>
+    <tr>
+      <td><code>&lt;input type=&quot;text&quot;&gt;</code></td>
+      <td><input type="text"></td>
+    </tr>
+    <tr>
+      <td><code>&lt;input type=&quot;time&quot;&gt;</code></td>
+      <td><input type="time"></td>
+    </tr>
+    <tr>
+      <td><code>&lt;select&gt;</code></td>
+      <td>
+        <select>
+          <option>Item 1</option>
+          <option>Item 2</option>
+          <option>Item 3</option>
+        </select>
+      </td>
+    </tr>
+    <tr>
+      <td><code>&lt;textarea&gt;</code></td>
+      <td><textarea rows="4"></textarea></td>
+    </tr>
+  </tbody>
+</table>
+
+<p>You can change the size of most form controls with the <code>input-[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="two-column">
+  <div class="column">
+    <div class="input-single">
+      <input type="text" class="input-xs" placeholder="XS">
+    </div>
+    <div class="input-single">
+      <input type="text" class="input-sm" placeholder="SM">
+    </div>
+    <div class="input-single">
+      <input type="text" placeholder="Default">
+    </div>
+    <div class="input-single">
+      <input type="text" class="input-lg" placeholder="LG">
+    </div>
+    <div class="input-single">
+      <input type="text" class="input-xl" placeholder="XL">
+    </div>
+  </div>
+
+  <div class="column">
+    <div class="input-single">
+      <select class="input-xs"><option>XS</option></select>
+    </div>
+    <div class="input-single">
+      <select class="input-sm"><option>SM</option></select>
+    </div>
+    <div class="input-single">
+      <select><option>Default</option></select>
+    </div>
+    <div class="input-single">
+      <select class="input-lg"><option>LG</option></select>
+    </div>
+    <div class="input-single">
+      <select class="input-xl"><option>XL</option></select>
+    </div>
+  </div>
+</div>
+
+<p>Disabled form controls look like this:</p>
+<div class="input-single">
+  <input type="text" placeholder="Input" disabled>
+</div>
+
+<div class="input-single">
+  <label><input type="checkbox" disabled> Checkbox</label>
+  <label><input type="radio" disabled> Radio</label>
+</div>
+
+<p>Read-only form controls look like this:</p>
+<div class="input-single">
+  <input type="text" readonly value="This is read-only">
+</div>
+
+<h3 id="form-control-spacing">Form Control Spacing</h3>
+<p>For proper spacing of individual form controls, wrap them in <code>input-single</code> containers.</p>
+<pre><code class="lang-html">&lt;div class=&quot;input-single&quot;&gt;
+  &lt;label&gt;Name&lt;/label&gt;
+  &lt;input type=&quot;text&quot;&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;input-single&quot;&gt;
+  &lt;label&gt;Password&lt;/label&gt;
+  &lt;input type=&quot;password&quot;&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;input-single&quot;&gt;
+  &lt;label&gt;&lt;input type=&quot;checkbox&quot;&gt; Remember me&lt;/label&gt;
+&lt;/div&gt;
+</code></pre>
+<div class="input-single">
+  <label>Username</label>
+  <input type="text">
+</div>
+
+<div class="input-single">
+  <label>Password</label>
+  <input type="password">
+</div>
+
+<div class="input-single">
+  <label><input type="checkbox"> Remember me</label>
+</div>
+
+<h3 id="input-groups">Input Groups</h3>
+<p>Form controls and buttons can be grouped by wrapping them in <code>input-group</code> containers.</p>
+<pre><code class="lang-html">&lt;div class=&quot;input-group&quot;&gt;
+  &lt;input type=&quot;text&quot;&gt;
+  &lt;button type=&quot;button&quot; class=&quot;button&quot;&gt;Submit&lt;/button&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;input-group&quot;&gt;
+  &lt;button type=&quot;button&quot; class=&quot;button&quot;&gt;Submit&lt;/button&gt;
+  &lt;input type=&quot;text&quot;&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;input-group&quot;&gt;
+  &lt;input type=&quot;text&quot; placeholder=&quot;First&quot;&gt;
+  &lt;input type=&quot;text&quot; placeholder=&quot;Middle&quot;&gt;
+  &lt;input type=&quot;text&quot; placeholder=&quot;Last&quot;&gt;
+  &lt;button type=&quot;button&quot; class=&quot;button&quot;&gt;Submit&lt;/button&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;input-group&quot;&gt;
+  &lt;button type=&quot;button&quot; class=&quot;button&quot;&gt;Option 1&lt;/button&gt;
+  &lt;button type=&quot;button&quot; class=&quot;button&quot;&gt;Option 2&lt;/button&gt;
+  &lt;button type=&quot;button&quot; class=&quot;button&quot;&gt;Option 3&lt;/button&gt;
+&lt;/div&gt;
+</code></pre>
+<div class="input-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-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-single">
+  <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-single">
+  <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-single">
+  <div class="input-group">
+    <span class="input-addon">$</span>
+    <input type="text">
+    <span class="input-addon">.00</span>
+  </div>
+</div>
+
+<div class="input-single">
+  <div class="input-group">
+    <span class="input-addon input-addon-lg">$</span>
+    <input type="text" class="input-lg">
+    <span class="input-addon input-addon-lg">.00</span>
+  </div>
+</div>
+
+<div class="input-single">
+  <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="form-groups">Form Groups</h3>
+<p>Related form controls can be grouped in a <code>&lt;fieldset&gt;</code>. An optional <code>&lt;legend&gt;</code> can be used to display a name for the group.</p>
+<pre><code class="lang-html">&lt;fieldset&gt;
+  &lt;legend&gt;User&lt;/legend&gt;
+  ...
+&lt;/fieldset&gt;
+</code></pre>
+<fieldset>
+  <legend>Login</legend>
+  <div class="input-single">
+    <label>Username</label>
+    <input type="text">
+  </div>
+  <div class="input-single">
+    <label>Password</label>
+    <input type="password">
+  </div>
+  <div class="input-single">
+    <label>
+      <input type="checkbox"> Remember me
+    </label>
+  </div>
+  <div class="input-single">
+    <button type="button">Login</button>
+  </div>
+</fieldset>
+
+<h3 id="validation">Validation</h3>
+<p>Form controls can be made valid or invalid using the <code>input-valid</code> and <code>input-invalid</code> modifiers. It’s better to apply modifiers to the surrounding <code>input-single</code> so labels will be styled as well, but modifiers can be applied directly to form controls as needed.</p>
+<pre><code class="lang-html">&lt;div class=&quot;input-single input-valid&quot;&gt;
+  &lt;label&gt;Valid&lt;/label&gt;
+  &lt;input type=&quot;text&quot;&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;input-single input-invalid&quot;&gt;
+  &lt;label&gt;Invalid&lt;/label&gt;
+  &lt;input type=&quot;text&quot;&gt;
+&lt;/div&gt;
+</code></pre>
+<div class="two-column">
+  <div class="column">
+    <div class="input-single input-valid">
+      <label>Valid</label>
+      <input type="text">
+    </div>
+  </div>
+
+  <div class="column">
+    <div class="input-single input-invalid">
+      <label>Invalid</label>
+      <input type="text">
+    </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-beta17
+    </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');
+        }
+      });
+    });
+  </script>
+  <script async defer src="https://buttons.github.io/buttons.js"></script>
+</body>
+</html>

docs/grid-system.html

@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <meta name="description" content="Shoelace doesn’t ship with a grid system because you don’t need one!">
+  <link rel="icon" href="../source/img/favicon.png">
+  <link rel="stylesheet" href="../dist/shoelace.css">
+  <link rel="stylesheet" href="../source/css/_docs.css">
+  <link rel="stylesheet" href="https://cdn.rawgit.com/AGMStudio/prism-theme-one-dark/f81fe477/prism-onedark.css">
+  <title>Grid System</title>
+</head>
+<body>
+
+  <header id="head" class="text-center">
+    <h1>
+      <a href="../index.html">
+        <img src="../source/img/wordmark.svg" alt="Shoelace logo">
+      </a>
+    </h1>
+    <p class="text-secondary text-small">
+      A back to the basics CSS starter kit. For when you don’t need the whole boot.
+    </p>
+  </header>
+
+  <main id="wrap">
+    <nav id="nav">
+      <a href="installing.html">Installing</a>
+      <a href="customizing.html">Customizing</a>
+      <a href="content.html">Content</a>
+      <a href="alerts.html">Alerts</a>
+      <a href="badges.html">Badges</a>
+      <a href="buttons.html">Buttons</a>
+      <a href="dropdowns.html">Dropdowns</a>
+      <a href="forms.html">Forms</a>
+      <a href="loaders.html">Loaders</a>
+      <a href="progress-bars.html">Progress Bars</a>
+      <a href="switches.html">Switches</a>
+      <a href="tabs.html">Tabs</a>
+      <a href="tables.html">Tables</a>
+      <a href="utilities.html">Utilities</a>
+      <a href="grid-system.html">Grid System</a>
+      <a href="icons.html">Icons</a>
+      <a href="browser-support.html">Browser Support</a>
+      <a href="attribution.html">Attribution</a>
+    </nav>
+
+    <div id="content">
+      <h2 id="grid-system">Grid System</h2>
+<p>Shoelace doesn’t ship with a grid system because <a href="https://rachelandrew.co.uk/archives/2017/07/01/you-do-not-need-a-css-grid-based-grid-system/">you don’t need one</a>. You should use the <a href="https://gridbyexample.com/">CSS Grid Layout</a> instead.</p>
+<p>This website uses the CSS Grid Layout. It’s really simple!</p>
+<pre><code class="lang-html">&lt;main id=&quot;wrap&quot;&gt;
+  &lt;nav id=&quot;nav&quot;&gt;
+    ...
+  &lt;/nav&gt;
+
+  &lt;div id=&quot;content&quot;&gt;
+    ...
+  &lt;/div&gt;
+&lt;/main&gt;
+</code></pre>
+<p>Now we just need a couple styles to turn the nav and content elements into columns. This will make the nav <code>12rem</code> wide and the content <code>100% - 12rem</code> so it fills the rest of the space.</p>
+<pre><code class="lang-css">#wrap {
+  display: grid;
+  grid-template-columns: 12rem calc(100% - 12rem);
+}
+</code></pre>
+<p>You can use media queries to make grids responsive. This is how we make the nav appear on top of the content on smaller screens.</p>
+<pre><code class="lang-css">@media (max-width: 60rem) {
+  #wrap {
+    display: block;
+  }
+}
+</code></pre>
+<h3 id="for-older-browsers">For Older Browsers</h3>
+<p>Support for CSS Grid Layouts is <a href="http://caniuse.com/css-grid">decent</a>, but if you have an obligation to support Internet Explorer or Edge &lt; 16, consider using the <a href="https://evgenyrodionov.github.io/flexboxgrid2/">Flexbox Grid</a> in combination with Shoelace.</p>
+<p>You can use it as-is or include the source files and customize it with CSS variables in your build process.</p>
+
+    </div>
+  </main>
+
+  <footer id="foot">
+    <a href="../index.html">
+      <img src="../source/img/wordmark.svg" alt="Shoelace logo">
+    </a>
+
+    <p class="text-small text-secondary">
+      1.0.0-beta17
+    </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');
+        }
+      });
+    });
+  </script>
+  <script async defer src="https://buttons.github.io/buttons.js"></script>
+</body>
+</html>

docs/icons.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="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 id="wrap">
+    <nav id="nav">
+      <a href="installing.html">Installing</a>
+      <a href="customizing.html">Customizing</a>
+      <a href="content.html">Content</a>
+      <a href="alerts.html">Alerts</a>
+      <a href="badges.html">Badges</a>
+      <a href="buttons.html">Buttons</a>
+      <a href="dropdowns.html">Dropdowns</a>
+      <a href="forms.html">Forms</a>
+      <a href="loaders.html">Loaders</a>
+      <a href="progress-bars.html">Progress Bars</a>
+      <a href="switches.html">Switches</a>
+      <a href="tabs.html">Tabs</a>
+      <a href="tables.html">Tables</a>
+      <a href="utilities.html">Utilities</a>
+      <a href="grid-system.html">Grid System</a>
+      <a href="icons.html">Icons</a>
+      <a href="browser-support.html">Browser Support</a>
+      <a href="attribution.html">Attribution</a>
+    </nav>
+
+    <div id="content">
+      <h2 id="icons">Icons</h2>
+<p>Shoelace doesn’t bundle its own icons, but you can easily include your favorite library such as <a href="http://fontawesome.io/">Font Awesome</a>. They work superbly together.</p>
+<p>This keeps Shoelace light and makes it more customizable.</p>
+<h3 id="font-awesome">Font Awesome</h3>
+<p>You can load Font Awesome locally or via CDN. To use the CDN version, add this to the <code>&lt;head&gt;</code> section of your page:</p>
+<pre><code class="lang-html">&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css&quot;&gt;
+</code></pre>
+<p>Then add icons as you normally would with <code>&lt;i class=&quot;fa fa-*&quot;&gt;&lt;/i&gt;</code>:</p>
+<div class="input-single text-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-single">
+  <button type="button"><i class="fa fa-star"></i> Star</button>
+  <button type="button" class="button-success"><i class="fa fa-check"></i> Check</button>
+  <button type="button" class="button-warning"><i class="fa fa-pencil"></i> Edit</button>
+  <button type="button" class="button-info"><i class="fa fa-comment"></i> Comment</button>
+</div>
+
+<p>For your convenience, <a href="http://fontawesome.io/icons/">here’s a full list</a> of icons available in Font Awesome.</p>
+
+    </div>
+  </main>
+
+  <footer id="foot">
+    <a href="../index.html">
+      <img src="../source/img/wordmark.svg" alt="Shoelace logo">
+    </a>
+
+    <p class="text-small text-secondary">
+      1.0.0-beta17
+    </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');
+        }
+      });
+    });
+  </script>
+  <script async defer src="https://buttons.github.io/buttons.js"></script>
+</body>
+</html>

docs/installing.html

@@ -0,0 +1,115 @@
+<!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 id="wrap">
+    <nav id="nav">
+      <a href="installing.html">Installing</a>
+      <a href="customizing.html">Customizing</a>
+      <a href="content.html">Content</a>
+      <a href="alerts.html">Alerts</a>
+      <a href="badges.html">Badges</a>
+      <a href="buttons.html">Buttons</a>
+      <a href="dropdowns.html">Dropdowns</a>
+      <a href="forms.html">Forms</a>
+      <a href="loaders.html">Loaders</a>
+      <a href="progress-bars.html">Progress Bars</a>
+      <a href="switches.html">Switches</a>
+      <a href="tabs.html">Tabs</a>
+      <a href="tables.html">Tables</a>
+      <a href="utilities.html">Utilities</a>
+      <a href="grid-system.html">Grid System</a>
+      <a href="icons.html">Icons</a>
+      <a href="browser-support.html">Browser Support</a>
+      <a href="attribution.html">Attribution</a>
+    </nav>
+
+    <div id="content">
+      <h2 id="installing">Installing</h2>
+<p>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-beta17/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-beta17/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 customimakes Shoelace fully customizable.</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 <code>source/css/shoelace.css</code>. This sets core variables and imports all of Shoelace’s components. If you don’t need everything, you’re encouraged to create your own and import only the ones you’re going to use.</p>
+
+    </div>
+  </main>
+
+  <footer id="foot">
+    <a href="../index.html">
+      <img src="../source/img/wordmark.svg" alt="Shoelace logo">
+    </a>
+
+    <p class="text-small text-secondary">
+      1.0.0-beta17
+    </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');
+        }
+      });
+    });
+  </script>
+  <script async defer src="https://buttons.github.io/buttons.js"></script>
+</body>
+</html>

docs/loaders.html

@@ -0,0 +1,164 @@
+<!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 id="wrap">
+    <nav id="nav">
+      <a href="installing.html">Installing</a>
+      <a href="customizing.html">Customizing</a>
+      <a href="content.html">Content</a>
+      <a href="alerts.html">Alerts</a>
+      <a href="badges.html">Badges</a>
+      <a href="buttons.html">Buttons</a>
+      <a href="dropdowns.html">Dropdowns</a>
+      <a href="forms.html">Forms</a>
+      <a href="loaders.html">Loaders</a>
+      <a href="progress-bars.html">Progress Bars</a>
+      <a href="switches.html">Switches</a>
+      <a href="tabs.html">Tabs</a>
+      <a href="tables.html">Tables</a>
+      <a href="utilities.html">Utilities</a>
+      <a href="grid-system.html">Grid System</a>
+      <a href="icons.html">Icons</a>
+      <a href="browser-support.html">Browser Support</a>
+      <a href="attribution.html">Attribution</a>
+    </nav>
+
+    <div id="content">
+      <h2 id="loaders">Loaders</h2>
+<p>Create a pure CSS loader by applying the <code>loader</code> class to an empty <code>&lt;span&gt;</code> element. You can use the <code>loader-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-single">
+  <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>
+  </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-beta17
+    </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');
+        }
+      });
+    });
+  </script>
+  <script async defer src="https://buttons.github.io/buttons.js"></script>
+</body>
+</html>

docs/progress-bars.html

@@ -0,0 +1,206 @@
+<!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 id="wrap">
+    <nav id="nav">
+      <a href="installing.html">Installing</a>
+      <a href="customizing.html">Customizing</a>
+      <a href="content.html">Content</a>
+      <a href="alerts.html">Alerts</a>
+      <a href="badges.html">Badges</a>
+      <a href="buttons.html">Buttons</a>
+      <a href="dropdowns.html">Dropdowns</a>
+      <a href="forms.html">Forms</a>
+      <a href="loaders.html">Loaders</a>
+      <a href="progress-bars.html">Progress Bars</a>
+      <a href="switches.html">Switches</a>
+      <a href="tabs.html">Tabs</a>
+      <a href="tables.html">Tables</a>
+      <a href="utilities.html">Utilities</a>
+      <a href="grid-system.html">Grid System</a>
+      <a href="icons.html">Icons</a>
+      <a href="browser-support.html">Browser Support</a>
+      <a href="attribution.html">Attribution</a>
+    </nav>
+
+    <div id="content">
+      <h2 id="progress-bars">Progress Bars</h2>
+<p>HTML5 introduced the <code>&lt;progress&gt;</code> element, but it’s not currently possible to style consistently in all browsers. As a result, Shoelace offers a custom alternative.</p>
+<p>Create a progress bar with the following markup. Use the <code>progress-[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>
+  </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-beta17
+    </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');
+        }
+      });
+    });
+  </script>
+  <script async defer src="https://buttons.github.io/buttons.js"></script>
+</body>
+</html>

docs/switches.html

@@ -0,0 +1,232 @@
+<!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 id="wrap">
+    <nav id="nav">
+      <a href="installing.html">Installing</a>
+      <a href="customizing.html">Customizing</a>
+      <a href="content.html">Content</a>
+      <a href="alerts.html">Alerts</a>
+      <a href="badges.html">Badges</a>
+      <a href="buttons.html">Buttons</a>
+      <a href="dropdowns.html">Dropdowns</a>
+      <a href="forms.html">Forms</a>
+      <a href="loaders.html">Loaders</a>
+      <a href="progress-bars.html">Progress Bars</a>
+      <a href="switches.html">Switches</a>
+      <a href="tabs.html">Tabs</a>
+      <a href="tables.html">Tables</a>
+      <a href="utilities.html">Utilities</a>
+      <a href="grid-system.html">Grid System</a>
+      <a href="icons.html">Icons</a>
+      <a href="browser-support.html">Browser Support</a>
+      <a href="attribution.html">Attribution</a>
+    </nav>
+
+    <div id="content">
+      <h2 id="switches">Switches</h2>
+<p>Switches provide an alternative to standard checkboxes. Many people find them more intuitive and easier to use, especially on mobile devices. Shoelace provides a way to create beautiful, animated switches with pure CSS.</p>
+<p>Because this is a pure CSS solution, there are a couple important things to remember:</p>
+<ul>
+<li>Each switch must have a unique <code>id</code></li>
+<li>The <code>&lt;label&gt;</code> must have a <code>for</code> attribute that references the switch <code>id</code></li>
+<li>The <code>&lt;label&gt;</code> must come <strong>after</strong> the checkbox, otherwise the control won’t render</li>
+</ul>
+<p>The markup for a switch looks like this:</p>
+<pre><code class="lang-html">&lt;span class=&quot;switch&quot;&gt;
+  &lt;input type=&quot;checkbox&quot; class=&quot;switch&quot; id=&quot;switch-1&quot;&gt;
+  &lt;label for=&quot;switch-1&quot;&gt;Switch 1&lt;/label&gt;
+&lt;/span&gt;
+
+&lt;span class=&quot;switch&quot;&gt;
+  &lt;input type=&quot;checkbox&quot; class=&quot;switch&quot; id=&quot;switch-2&quot; checked&gt;
+  &lt;label for=&quot;switch-2&quot;&gt;Switch 2&lt;/label&gt;
+&lt;/span&gt;
+</code></pre>
+<div class="input-single">
+  <span class="switch">
+    <input type="checkbox" class="switch" id="switch-1">
+    <label for="switch-1">Switch 1</label>
+  </span>
+
+  <span class="switch">
+    <input type="checkbox" class="switch" 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; class=&quot;switch&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; class=&quot;switch&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; class=&quot;switch&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; class=&quot;switch&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; class=&quot;switch&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-single">
+  <span class="switch switch-xs">
+    <input type="checkbox" class="switch" id="switch-xs">
+    <label for="switch-xs">XS</label>
+  </span>
+
+  <span class="switch switch-sm">
+    <input type="checkbox" class="switch" id="switch-sm">
+    <label for="switch-sm">SM</label>
+  </span>
+
+  <span class="switch">
+    <input type="checkbox" class="switch" id="switch-default">
+    <label for="switch-default">Default</label>
+  </span>
+
+  <span class="switch switch-lg">
+    <input type="checkbox" class="switch" id="switch-lg">
+    <label for="switch-lg">LG</label>
+  </span>
+
+  <span class="switch switch-xl">
+    <input type="checkbox" class="switch" 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; class=&quot;switch&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-single">
+  <span class="switch">
+    <input type="checkbox" class="switch" 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" class="switch" id="variation-secondary" checked>
+  <label for="variation-secondary">Secondary</label>
+</span></p>
+<p><span class="switch switch-success">
+  <input type="checkbox" class="switch" id="variation-success" checked>
+  <label for="variation-success">Success</label>
+</span></p>
+<p><span class="switch switch-info">
+  <input type="checkbox" class="switch" id="variation-info" checked>
+  <label for="variation-info">Info</label>
+</span></p>
+<p><span class="switch switch-warning">
+  <input type="checkbox" class="switch" id="variation-warning" checked>
+  <label for="variation-warning">Warning</label>
+</span></p>
+<p><span class="switch switch-danger">
+  <input type="checkbox" class="switch" id="variation-danger" checked>
+  <label for="variation-danger">Danger</label>
+</span></p>
+<p><span class="switch switch-light">
+  <input type="checkbox" class="switch" id="variation-light" checked>
+  <label for="variation-light">Light</label>
+</span></p>
+<p><span class="switch switch-dark">
+  <input type="checkbox" class="switch" id="variation-dark" checked>
+  <label for="variation-dark">Dark</label>
+</span></p>
+
+    </div>
+  </main>
+
+  <footer id="foot">
+    <a href="../index.html">
+      <img src="../source/img/wordmark.svg" alt="Shoelace logo">
+    </a>
+
+    <p class="text-small text-secondary">
+      1.0.0-beta17
+    </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');
+        }
+      });
+    });
+  </script>
+  <script async defer src="https://buttons.github.io/buttons.js"></script>
+</body>
+</html>

docs/tables.html

@@ -0,0 +1,175 @@
+<!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 id="wrap">
+    <nav id="nav">
+      <a href="installing.html">Installing</a>
+      <a href="customizing.html">Customizing</a>
+      <a href="content.html">Content</a>
+      <a href="alerts.html">Alerts</a>
+      <a href="badges.html">Badges</a>
+      <a href="buttons.html">Buttons</a>
+      <a href="dropdowns.html">Dropdowns</a>
+      <a href="forms.html">Forms</a>
+      <a href="loaders.html">Loaders</a>
+      <a href="progress-bars.html">Progress Bars</a>
+      <a href="switches.html">Switches</a>
+      <a href="tabs.html">Tabs</a>
+      <a href="tables.html">Tables</a>
+      <a href="utilities.html">Utilities</a>
+      <a href="grid-system.html">Grid System</a>
+      <a href="icons.html">Icons</a>
+      <a href="browser-support.html">Browser Support</a>
+      <a href="attribution.html">Attribution</a>
+    </nav>
+
+    <div id="content">
+      <h2 id="tables">Tables</h2>
+<p>Tables are styled for you automatically — no special classes required.</p>
+<pre><code class="lang-html">&lt;table&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;&lt;th&gt;Item&lt;/th&gt;&lt;th&gt;Price&lt;/th&gt;&lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;&lt;td&gt;Shoe Freshener&lt;/td&gt;&lt;td&gt;$4.79&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;td&gt;Shoe Glue&lt;/td&gt;&lt;td&gt;$2.50&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;td&gt;Shoe Polish&lt;/td&gt;&lt;td&gt;$5.25&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;td&gt;Shoelaces&lt;/td&gt;&lt;td&gt;$3.99&lt;/td&gt;&lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</code></pre>
+<table>
+  <thead>
+    <tr><th>Item</th><th>Price</th></tr>
+  </thead>
+  <tbody>
+    <tr><td>Shoe Freshener</td><td>$4.79</td></tr>
+    <tr><td>Shoe Glue</td><td>$2.50</td></tr>
+    <tr><td>Shoe Polish</td><td>$5.25</td></tr>
+    <tr><td>Shoelaces</td><td>$3.99</td></tr>
+  </tbody>
+</table>
+
+<h3 id="striped-tables">Striped Tables</h3>
+<p>Use the <code>table-striped</code> modifier to add stripes to alternating rows.</p>
+<pre><code class="lang-html">&lt;table class=&quot;table-striped&quot;&gt;
+  ...
+&lt;/table&gt;
+</code></pre>
+<table class="table-striped">
+  <thead>
+    <tr><th>Item</th><th>Price</th></tr>
+  </thead>
+  <tbody>
+    <tr><td>Shoe Freshener</td><td>$4.79</td></tr>
+    <tr><td>Shoe Glue</td><td>$2.50</td></tr>
+    <tr><td>Shoe Polish</td><td>$5.25</td></tr>
+    <tr><td>Shoelaces</td><td>$3.99</td></tr>
+  </tbody>
+</table>
+
+<h3 id="bordered-tables">Bordered Tables</h3>
+<p>Use the <code>table-bordered</code> modifier to add a border to the table.</p>
+<pre><code class="lang-html">&lt;table class=&quot;table-bordered&quot;&gt;
+  ...
+&lt;/table&gt;
+</code></pre>
+<table class="table-bordered">
+  <thead>
+    <tr><th>Item</th><th>Price</th></tr>
+  </thead>
+  <tbody>
+    <tr><td>Shoe Freshener</td><td>$4.79</td></tr>
+    <tr><td>Shoe Glue</td><td>$2.50</td></tr>
+    <tr><td>Shoe Polish</td><td>$5.25</td></tr>
+    <tr><td>Shoelaces</td><td>$3.99</td></tr>
+  </tbody>
+</table>
+
+<h3 id="hoverable-rows">Hoverable Rows</h3>
+<p>Use the <code>table-hoverable</code> modifier to enable the hover state on table rows.</p>
+<pre><code class="lang-html">&lt;table class=&quot;table-hoverable&quot;&gt;
+  ...
+&lt;/table&gt;
+</code></pre>
+<table class="table-hoverable">
+  <thead>
+    <tr><th>Item</th><th>Price</th></tr>
+  </thead>
+  <tbody>
+    <tr><td>Shoe Freshener</td><td>$4.79</td></tr>
+    <tr><td>Shoe Glue</td><td>$2.50</td></tr>
+    <tr><td>Shoe Polish</td><td>$5.25</td></tr>
+    <tr><td>Shoelaces</td><td>$3.99</td></tr>
+  </tbody>
+</table>
+
+    </div>
+  </main>
+
+  <footer id="foot">
+    <a href="../index.html">
+      <img src="../source/img/wordmark.svg" alt="Shoelace logo">
+    </a>
+
+    <p class="text-small text-secondary">
+      1.0.0-beta17
+    </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');
+        }
+      });
+    });
+  </script>
+  <script async defer src="https://buttons.github.io/buttons.js"></script>
+</body>
+</html>

docs/tabs.html

@@ -0,0 +1,225 @@
+<!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 id="wrap">
+    <nav id="nav">
+      <a href="installing.html">Installing</a>
+      <a href="customizing.html">Customizing</a>
+      <a href="content.html">Content</a>
+      <a href="alerts.html">Alerts</a>
+      <a href="badges.html">Badges</a>
+      <a href="buttons.html">Buttons</a>
+      <a href="dropdowns.html">Dropdowns</a>
+      <a href="forms.html">Forms</a>
+      <a href="loaders.html">Loaders</a>
+      <a href="progress-bars.html">Progress Bars</a>
+      <a href="switches.html">Switches</a>
+      <a href="tabs.html">Tabs</a>
+      <a href="tables.html">Tables</a>
+      <a href="utilities.html">Utilities</a>
+      <a href="grid-system.html">Grid System</a>
+      <a href="icons.html">Icons</a>
+      <a href="browser-support.html">Browser Support</a>
+      <a href="attribution.html">Attribution</a>
+    </nav>
+
+    <div id="content">
+      <h2 id="tabs">Tabs</h2>
+<p>Tab sets can be created using the markup below. By default, Shoelace renders tabs as pills because they respond better than traditional tabs when rendered on smaller screens.</p>
+<p>Note the class names used for the main container, the tab navs, and the tab panes. Also note that each tab links to its respective tab pane’s <code>id</code>.</p>
+<p>To disable a tab, add <code>disabled</code> to the appropriate tab nav.</p>
+<pre><code class="lang-html">&lt;div class=&quot;tabs&quot;&gt;
+  &lt;nav class=&quot;tabs-nav&quot;&gt;
+    &lt;a href=&quot;#tab-1&quot; class=&quot;active&quot;&gt;Tab 1&lt;/a&gt;
+    &lt;a href=&quot;#tab-2&quot;&gt;Tab 2&lt;/a&gt;
+    &lt;a href=&quot;#tab-3&quot;&gt;Tab 3&lt;/a&gt;
+    &lt;a href=&quot;#&quot; class=&quot;disabled&quot;&gt;Disabled&lt;/a&gt;
+  &lt;/nav&gt;
+
+  &lt;div class=&quot;tabs-pane active&quot; id=&quot;tab-1&quot;&gt;
+    ...
+  &lt;/div&gt;
+
+  &lt;div class=&quot;tabs-pane&quot; id=&quot;tab-2&quot;&gt;
+    ...
+  &lt;/div&gt;
+
+  &lt;div class=&quot;tabs-pane&quot; id=&quot;tab-3&quot;&gt;
+    ...
+  &lt;/div&gt;
+&lt;/div&gt;
+</code></pre>
+<div class="tabs">
+  <nav class="tabs-nav">
+    <a href="#tab-1-example-1" class="active">Tab 1</a>
+    <a href="#tab-2-example-1">Tab 2</a>
+    <a href="#tab-3-example-1">Tab 3</a>
+    <a href="#" class="disabled">Disabled</a>
+  </nav>
+
+  <div class="tabs-pane active" id="tab-1-example-1">
+    <h3>Tab 1</h3>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui repellat ea magni magnam
+      assumenda voluptas accusantium nemo. Iusto beatae illum mollitia aut quasi odit facilis
+      officiis, laudantium debitis! Excepturi, quis!
+    </p>
+  </div>
+
+  <div class="tabs-pane" id="tab-2-example-1">
+    <h3>Tab 2</h3>
+    <p>
+      Atque eius voluptatibus ipsa ex totam odit, quidem illo distinctio sit! Quod quae minus,
+      aut itaque. Mollitia, dolore! Facere molestiae necessitatibus sint recusandae incidunt
+      pariatur labore iste vel, velit odit.
+    </p>
+  </div>
+
+  <div class="tabs-pane" id="tab-3-example-1">
+    <h3>Tab 3</h3>
+    <p>
+      Aperiam asperiores optio iusto qui nisi, perspiciatis, ipsum, tenetur explicabo earum et
+      laboriosam odit magni maxime quos molestias aspernatur laudantium harum placeat tempora
+      quae necessitatibus, aut dignissimos totam non! Quod.
+    </p>
+  </div>
+</div>
+
+<h3 id="vertical-tabs">Vertical Tabs</h3>
+<p>Tabs can be made vertical by adding custom CSS rules. Shoelace doesn’t include these styles by default because of the many ways tabs can be positioned, customized, and made responsive.</p>
+<p>Here’s an example of vertical tabs that uses the CSS grid. The markup is exactly the same as the previous example, except the tabs container has a custom class and the following custom styles.</p>
+<pre><code class="lang-css">.tabs-vertical-example {
+  display: grid;
+  grid-template-columns: 30% 70%;
+}
+
+.tabs-vertical-example .tabs-nav {
+  padding-right: 2rem;
+}
+
+.tabs-vertical-example .tabs-nav a {
+  display: block;
+}
+</code></pre>
+<div class="tabs tabs-vertical-example">
+  <nav class="tabs-nav tabs-nav-block">
+    <a href="#tab-1-example-2" class="active">Tab 1</a>
+    <a href="#tab-2-example-2">Tab 2</a>
+    <a href="#tab-3-example-2">Tab 3</a>
+    <a href="#" class="disabled">Disabled</a>
+  </nav>
+
+  <div class="tabs-pane active" id="tab-1-example-2">
+    <h3>Tab 1</h3>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui repellat ea magni magnam
+      assumenda voluptas accusantium nemo. Iusto beatae illum mollitia aut quasi odit facilis
+      officiis, laudantium debitis! Excepturi, quis!
+    </p>
+  </div>
+
+  <div class="tabs-pane" id="tab-2-example-2">
+    <h3>Tab 2</h3>
+    <p>
+      Atque eius voluptatibus ipsa ex totam odit, quidem illo distinctio sit! Quod quae minus,
+      aut itaque. Mollitia, dolore! Facere molestiae necessitatibus sint recusandae incidunt
+      pariatur labore iste vel, velit odit.
+    </p>
+  </div>
+
+  <div class="tabs-pane" id="tab-3-example-2">
+    <h3>Tab 3</h3>
+    <p>
+      Aperiam asperiores optio iusto qui nisi, perspiciatis, ipsum, tenetur explicabo earum et
+      laboriosam odit magni maxime quos molestias aspernatur laudantium harum placeat tempora
+      quae necessitatibus, aut dignissimos totam non! Quod.
+    </p>
+  </div>
+</div>
+
+<h3 id="events">Events</h3>
+<p>Tabs require <code>shoelace.js</code> to make them interactive. You don’t need to initialize them. Simply include the script and everything “just works.”</p>
+<p>There is no JavaScript API. Shoelace’s philosophy believes that custom components should act like native components as much as possible. You can, however, listen for various events:</p>
+<ul>
+<li><code>show</code> – Fires when a tab is shown. The second callback argument is a reference to the respective tab pane.</li>
+<li><code>hide</code> – Fires when a tab is hidden. The second callback argument is a reference to the respective tab pane.</li>
+</ul>
+<p>This example will log both events for the tab set with an id of <code>my-tabs</code>.</p>
+<pre><code class="lang-javascript">$(&#39;#my-tabs&#39;)
+  .on(&#39;show&#39;, function(event, tabPane) {
+    console.log(&#39;show&#39;, event.target, tabPane);
+  })
+  .on(&#39;hide&#39;, function(event, tabPane) {
+    console.log(&#39;hide&#39;, event.target, tabPane);
+  });
+</code></pre>
+
+    </div>
+  </main>
+
+  <footer id="foot">
+    <a href="../index.html">
+      <img src="../source/img/wordmark.svg" alt="Shoelace logo">
+    </a>
+
+    <p class="text-small text-secondary">
+      1.0.0-beta17
+    </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');
+        }
+      });
+    });
+  </script>
+  <script async defer src="https://buttons.github.io/buttons.js"></script>
+</body>
+</html>

docs/utilities.html

@@ -0,0 +1,252 @@
+<!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 id="wrap">
+    <nav id="nav">
+      <a href="installing.html">Installing</a>
+      <a href="customizing.html">Customizing</a>
+      <a href="content.html">Content</a>
+      <a href="alerts.html">Alerts</a>
+      <a href="badges.html">Badges</a>
+      <a href="buttons.html">Buttons</a>
+      <a href="dropdowns.html">Dropdowns</a>
+      <a href="forms.html">Forms</a>
+      <a href="loaders.html">Loaders</a>
+      <a href="progress-bars.html">Progress Bars</a>
+      <a href="switches.html">Switches</a>
+      <a href="tabs.html">Tabs</a>
+      <a href="tables.html">Tables</a>
+      <a href="utilities.html">Utilities</a>
+      <a href="grid-system.html">Grid System</a>
+      <a href="icons.html">Icons</a>
+      <a href="browser-support.html">Browser Support</a>
+      <a href="attribution.html">Attribution</a>
+    </nav>
+
+    <div id="content">
+      <h2 id="utilities">Utilities</h2>
+<p>Shoelace provides a number of helpful utility classes that make prototyping easier.</p>
+<h3 id="text-utilities">Text Utilities</h3>
+<p>Text utility classes can be applied to change an element’s 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-left</code></td>
+      <td class="text-left">This is left-aligned text</td>
+    </tr>
+    <tr>
+      <td><code>text-center</code></td>
+      <td class="text-center">This is centered text</td>
+    </tr>
+    <tr>
+      <td><code>text-right</code></td>
+      <td class="text-right">This is right-aligned text</td>
+    </tr>
+    <tr>
+      <td><code>text-justify</code></td>
+      <td class="text-justify">This is justified text</td>
+    </tr>
+    <tr>
+      <td><code>text-nowrap</code></td>
+      <td class="text-nowrap">This is text that won’t wrap</td>
+    </tr>
+    <tr>
+      <td><code>text-lowercase</code></td>
+      <td class="text-lowercase">This is lowercase text</td>
+    </tr>
+    <tr>
+      <td><code>text-uppercase</code></td>
+      <td class="text-uppercase">This is uppercase text</td>
+    </tr>
+    <tr>
+      <td><code>text-capitalize</code></td>
+      <td class="text-capitalize">This is capitalized text</td>
+    </tr>
+  </tbody>
+</table>
+
+<h3 id="background-utilities">Background Utilities</h3>
+<p>Background utility classes 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="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.</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>
+
+    </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-beta17
+    </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');
+        }
+      });
+    });
+  </script>
+  <script async defer src="https://buttons.github.io/buttons.js"></script>
+</body>
+</html>

index.html

@@ -0,0 +1,89 @@
+<!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="For when you don’t need the whole boot.">
+  <link rel="icon" href="../source/img/favicon.png">
+  <link rel="stylesheet" href="../dist/shoelace.css">
+  <link rel="stylesheet" href="../source/css/_homepage.css">
+  <link rel="stylesheet" href="https://cdn.rawgit.com/AGMStudio/prism-theme-one-dark/f81fe477/prism-onedark.css">
+  <title>Shoelace.css – a back to the basics CSS starter kit</title>
+</head>
+<body>
+
+  <header id="head" class="text-center">
+    <h1><img src="../source/img/wordmark.svg" alt="Shoelace logo"></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 id="wrap">
+    <div id="content">
+      <p>
+        Shoelace.css is a starter kit, not a framework. Think of it as a CSS reset sprinkled with
+        helpful components. Bootstrap users will find it familiar, yet refreshing.
+      </p>
+
+      <p>
+        You can use Shoelace with just about every browser. The CDN version is great for
+        prototyping, but to take full advantage you should
+        <a href="docs/installing.html#building-from-source">build it from source</a>.
+      </p>
+
+      <p>
+        Here is the CSS you <em>could</em> be writing:
+      </p>
+
+<pre><code class="language-css">:root {
+  --info-color: white;
+  --info-bg: color(teal shade(25%));
+}
+
+.info {
+  color: var(--info-color);
+  background: var(--info-bg);
+
+  &amp;.info-big {
+    font-size: 2rem;
+  }
+}
+</code></pre>
+
+      <p>
+        <a href="http://cssnext.io/features/">CSS has a really bright future</a>, and you can use
+        most of its upcoming features <em>today</em> with Shoelace + cssnext. You no longer need
+        Less or Sass to do amazing things with CSS.
+      </p>
+
+      <p>
+        Shoelace was created by <a href="https://twitter.com/claviska">@claviska</a> for
+        <a href="https://www.surrealcms.com/">Surreal CMS</a>. You can use it for free under the
+        terms of the MIT license.
+      </p>
+
+      <div class="mar-y-md text-center">
+        <a href="docs/installing.html" class="button button-xl">Documentation &rarr;</a>
+      </div>
+
+      <p class="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 class="text-center text-small text-secondary">
+        <a href="https://keycdn.com/" class="text-secondary">Accelerated by KeyCDN</a> &middot;
+        &copy; A Beautiful Site, LLC
+      </p>
+    </div>
+  </main>
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js"></script>
+  <script async defer src="https://buttons.github.io/buttons.js"></script>
+</body>
+</html>

package.json

@@ -1,20 +1,34 @@
 {
   "name": "shoelace-css",
   "description": "A back to the basics CSS starter kit.",
-  "version": "1.0.0-beta2",
+  "version": "1.0.0-beta17",
   "author": "Cory LaViska",
-  "homepage": "https://labs.abeautifulsite.net/shoelace-css/docs/",
+  "homepage": "https://shoelace.style/",
   "license": "MIT",
   "repository": {
     "type": "git",
     "url": "https://github.com/claviska/shoelace-css"
   },
-  "scripts": {
-    "build": "node build.js"
-  },
   "devDependencies": {
-    "chalk": "^2.0.1",
-    "clean-css": "^4.1.7",
-    "fs": "0.0.1-security"
-  }
+    "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",
+    "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.9",
+    "postcss-cssnext": "^3.0.2",
+    "postcss-import": "^10.0.0",
+    "s3": "^4.4.0",
+    "stylelint-config-standard": "^17.0.0",
+    "uglify-js": "^3.0.27",
+    "watch": "^1.0.2"
+  },
+  "dependencies": {}
 }

source/css/_docs.css

@@ -0,0 +1,211 @@
+body {
+  border-top: solid .3rem #0074d9;
+}
+
+#head {
+  padding: 0 2rem;
+  margin: 2rem 0;
+}
+
+#head img {
+  width: 24rem;
+  margin: 0 auto;
+  display: inline-block;
+}
+
+#wrap {
+  max-width: 60rem;
+  padding: 0 2rem;
+  margin: 2rem auto;
+  display: grid;
+  grid-template-columns: 12rem calc(100% - 12rem);
+}
+
+#nav {
+  text-align: right;
+  border-right: solid 1px #ddd;
+  padding-right: 1rem;
+  margin-right: 2rem;
+}
+
+#nav a {
+  margin: .5rem 0;
+  display: block;
+}
+
+#nav a.current {
+  color: #aaa;
+  cursor: default;
+}
+
+#foot {
+  text-align: center;
+  margin: 2rem 0;
+}
+
+#foot img {
+  width: 14rem;
+  display: inline-block;
+  margin: .5rem 0;
+}
+
+#homepage #wrap {
+  max-width: 48rem;
+  display: block;
+}
+
+@media (max-width: 60rem) {
+  #head {
+    padding: 0 1rem;
+  }
+
+  #wrap {
+    padding: 0 1rem;
+    display: block;
+  }
+
+  #nav {
+    font-size: .9rem;
+    border: none;
+    text-align: center;
+    margin: 0 0 2rem 0;
+  }
+
+  #nav a {
+    margin: .3rem;
+    display: inline-block;
+  }
+}
+
+/* Fallback to block nav for unsupportive browsers */
+@supports (not (display: grid)) {
+  #nav {
+    border: none;
+    text-align: center;
+    margin: 0 0 2rem 0;
+  }
+
+  #nav a {
+    margin: .5rem;
+    display: inline-block;
+  }
+}
+
+h1[id]:not(:first-child),
+h2[id]:not(:first-child),
+h3[id]:not(:first-child),
+h4[id]:not(:first-child) {
+  margin-top: 3rem;
+}
+
+h3[id],
+h4[id] {
+  color: #aaa;
+}
+
+pre {
+  margin-bottom: 1rem !important; /* Prism overrides our bottom margin */
+}
+
+pre code {
+  white-space: pre;
+  padding: 0;
+  display: block;
+}
+
+a code {
+  color: inherit;
+}
+
+@media (max-width: 45rem) {
+  a.bookmark {
+    width: auto;
+    margin-left: 0;
+  }
+}
+
+.browsers {
+  text-align: center;
+}
+
+.browsers img {
+  max-width: 6rem;
+  display: inline-block;
+  margin: 0 1rem 1rem 0;
+}
+
+/* Column helpers */
+.two-column {
+  display: grid;
+  grid-template-columns: 50% 50%;
+  margin-left: -.5rem;
+  margin-right: -.5rem;
+}
+
+.two-column .column {
+  padding: .5rem;
+}
+
+/* Sizing examples */
+.width-sizing-example {
+  border: solid 1px #ddd;
+  padding: 1rem;
+  margin-bottom: 1rem;
+}
+
+.width-sizing-example div {
+  background: #0074d9;
+  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 #ddd;
+  height: 15rem;
+  padding: 1rem .5rem;
+  margin-bottom: 1rem;
+}
+
+.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;
+}
+
+/* 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;
+}

source/css/_homepage.css

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

source/css/alerts.css

@@ -1,29 +1,115 @@
 /*! Alerts */
+:root {
+  --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%));
+}
 
 .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;
-}
 
-.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

@@ -1,22 +1,180 @@
 /*! Badges */
+:root {
+  --badge-font-size: .8em; /* ems for relative sizing */
+  --badge-border-radius: 1em;  /* ems for relative sizing */
+  --badge-speed: .2s;
+
+  /* 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);
+}
 
 .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 3px 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 3px 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 3px 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 3px 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 3px 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 3px 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 3px 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 3px color(var(--badge-bg-color-dark) alpha(50%));
+    }
+  }
+}

source/css/buttons.css

@@ -1,4 +1,55 @@
 /*! Buttons */
+:root {
+  --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: 2px;
+  --button-speed: .2s;
+  --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%));
+}
 
 button,
 .button {
@@ -8,85 +59,381 @@ 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;
-}
-
-.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);
-}
-
-.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-block {
-  width: 100% !important;
-  display: block;
-}
-
-.button-block + .button-block {
-  margin-top: 1rem;
-}
-
-button:hover,
-.button:hover {
-  color: var(--button-color);
-  text-decoration: none;
-}
-
-button:hover:not(:disabled),
-.button:hover:not(.disabled) {
-  box-shadow: var(--button-box-shadow-hover);
-}
-
-button:active:not(:disabled),
-.button.active:not(.disabled) {
-  color: var(--button-color);
-  box-shadow: var(--button-box-shadow-active);
-}
-
-button:disabled,
-.button.disabled {
-  opacity: .5;
-  cursor: not-allowed;
-}
-
-.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-link:hover:not(:disabled) {
-  background-color: transparent;
-  color: var(--link-color-hover);
-  text-decoration: var(--link-text-decoration-hover);
-  box-shadow: none;
+  transition: var(--button-speed) all;
+
+  &:hover {
+    color: var(--button-color);
+  }
+
+  &:hover:not(:disabled, .disabled) {
+    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:not(:disabled, .disabled),
+  &.active:not(:disabled, .disabled) {
+    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:not(:disabled, .disabled) {
+    outline: none;
+    box-shadow: 0 0 0 3px color(var(--button-bg-color) alpha(50%));
+  }
+
+  &:disabled,
+  &.disabled {
+    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:not(:disabled, .disabled) {
+      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:not(:disabled, .disabled),
+    &.active:not(:disabled, .disabled) {
+      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:not(:disabled, .disabled) {
+      outline: none;
+      box-shadow: 0 0 0 3px color(var(--button-bg-color-secondary) alpha(50%));
+    }
+  }
+
+  &.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:not(:disabled, .disabled) {
+      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:not(:disabled, .disabled),
+    &.active:not(:disabled, .disabled) {
+      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:not(:disabled, .disabled) {
+      outline: none;
+      box-shadow: 0 0 0 3px color(var(--button-bg-color-success) alpha(50%));
+    }
+  }
+
+  &.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:not(:disabled, .disabled) {
+      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:not(:disabled, .disabled),
+    &.active:not(:disabled, .disabled) {
+      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:not(:disabled, .disabled) {
+      outline: none;
+      box-shadow: 0 0 0 3px color(var(--button-bg-color-info) alpha(50%));
+    }
+  }
+
+  &.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:not(:disabled, .disabled) {
+      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:not(:disabled, .disabled),
+    &.active:not(:disabled, .disabled) {
+      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:not(:disabled, .disabled) {
+      outline: none;
+      box-shadow: 0 0 0 3px color(var(--button-bg-color-warning) alpha(50%));
+    }
+  }
+
+  &.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:not(:disabled, .disabled) {
+      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:not(:disabled, .disabled),
+    &.active:not(:disabled, .disabled) {
+      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:not(:disabled, .disabled) {
+      outline: none;
+      box-shadow: 0 0 0 3px color(var(--button-bg-color-danger) alpha(50%));
+    }
+  }
+
+  &.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:not(:disabled, .disabled) {
+      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:not(:disabled, .disabled),
+    &.active:not(:disabled, .disabled) {
+      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:not(:disabled, .disabled) {
+      outline: none;
+      box-shadow: 0 0 0 3px color(var(--button-bg-color-light) alpha(50%));
+    }
+  }
+
+  &.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:not(:disabled, .disabled) {
+      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:not(:disabled, .disabled) {
+      outline: none;
+      box-shadow: 0 0 0 3px color(var(--button-bg-color-dark) alpha(50%));
+    }
+  }
+
+  /* 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:not(:disabled, .disabled),
+  &.button-link:focus:not(:disabled, .disabled) {
+    border-color: transparent;
+    background-color: transparent;
+    color: var(--link-color-hover);
+    text-decoration: var(--link-text-decoration-hover);
+    box-shadow: none;
+  }
 }
 
+/* File buttons */
 label.button input[type="file"] {
   display: none;
 }
+
+/* Loader buttons */
+.button-loader,
+.button-loader:hover {
+  position: relative;
+  min-width: calc(var(--button-loader-size) * 2);
+  color: transparent !important;
+  overflow: hidden;
+}
+
+.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-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-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-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-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-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-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-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);
+}
+
+@keyframes button-loader {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}

source/css/content.css

@@ -1,11 +1,76 @@
 /*! Content */
+:root {
+  --body-bg-color: var(--color-white);
+  --body-color: var(--color-black);
+  --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-weight-light: 300;
+  --font-weight: 400;
+  --font-weight-bold: 700;
+  --line-height: 1.5;
+
+  --code-font-size: 90%;
+  --code-color: var(--color-black);
+  --code-border-radius: var(--component-border-radius);
+  --code-bg-color: var(--component-bg-color);
+  --code-padding-x: calc(var(--font-size) * .4);
+  --code-padding-y: calc(var(--font-size) * .2);
+
+  --headings-font-family: var(--font-system);
+  --headings-font-weight: var(--font-weight-light);
+  --headings-line-height: 1.1;
+  --headings-margin-bottom: .5rem;
+  --headings-color: inherit;
+  --headings-font-size-h1: 2.5rem;
+  --headings-font-size-h2: 2rem;
+  --headings-font-size-h3: 1.75rem;
+  --headings-font-size-h4: 1.5rem;
+  --headings-font-size-h5: 1.25rem;
+  --headings-font-size-h6: 1rem;
+
+  --hr-border-width: 1px;
+  --hr-border-color: var(--component-border-color);
+  --hr-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-padding-x: calc(var(--font-size) * .4);
+  --kbd-padding-y: calc(var(--font-size) * .2);
+
+  --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-padding-x: calc(var(--font-size) * .4);
+  --mark-padding-y: calc(var(--font-size) * .2);
+
+  --placeholder-color: var(--state-secondary);
+
+  --pre-color: var(--code-color);
+  --pre-border-radius: var(--component-border-radius);
+  --pre-bg-color: var(--code-bg-color);
+  --pre-max-height: none;
+
+  --selection-color: var(--color-white);
+  --selection-bg-color: var(--state-primary);
+}
 
 /* Box sizing reset */
 html {
   box-sizing: border-box;
 }
 
-*, *:before, *:after {
+*,
+*::before,
+*::after {
   box-sizing: inherit;
 }
 
@@ -18,7 +83,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,14 +102,11 @@ 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);
   border-left: solid .4rem var(--component-border-color);
@@ -54,13 +115,17 @@ blockquote {
   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 {
@@ -95,9 +160,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,18 +175,18 @@ 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 {
@@ -133,7 +197,7 @@ p {
 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);
@@ -150,14 +214,8 @@ small {
 * Lists
 ***************************************************************************************************/
 
-dl,
-ol,
-ul {
-  line-height: var(--line-height);
-  list-style-position: inside;
-  margin-top: 0;
+dl {
   margin-bottom: 1rem;
-  padding-left: 1rem;
 }
 
 dt {
@@ -169,32 +227,30 @@ dd {
   margin-bottom: 1rem;
 }
 
-ol ol,
-ol ul,
-ul ol,
-ul ul {
-  margin-bottom: 0;
+ol,
+ul {
+  line-height: var(--line-height);
+  margin-top: 0;
+  margin-bottom: 1rem;
+
+  & 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,117 @@
+/*! Dropdowns */
+:root {
+  --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-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: 0 1px 0 rgba(0, 0, 0, .05);
+  --dropdown-divider-color: var(--component-border-color);
+  --dropdown-divider-width: var(--component-border-width);
+  --dropdown-padding-x: 1rem;
+  --dropdown-padding-y: .25rem;
+  --dropdown-offset-x: 0;
+  --dropdown-offset-y: 1px;
+  --dropdown-z-index: 100;
+}
+
+.dropdown {
+  position: relative;
+  display: inline-block;
+
+  /* Trigger */
+  & .dropdown-trigger::after {
+    content: '▼';
+    font-family: var(--font-system);
+    font-size: .6em;
+    vertical-align: middle;
+    margin-left: .5em;
+    display: inline-block;
+    transform: scaleY(.75);
+    margin-top: -.2em;
+  }
+
+  &.dropdown-top .dropdown-trigger::after {
+    transform: scaleY(.75) rotate(180deg);
+  }
+
+  /* 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);
+    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);
+
+    & 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:not(.disabled) {
+        outline: none;
+        color: var(--dropdown-color);
+        background-color: color(var(--dropdown-bg-color) shade(5%));
+      }
+
+      &:hover:not(.disabled) {
+        color: var(--dropdown-color-hover);
+        background-color: var(--dropdown-bg-color-hover);
+      }
+
+      &.disabled {
+        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-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/forms.css

@@ -1,24 +1,63 @@
 /*! Forms */
+:root {
+  --input-height-xs: 1rem;
+  --input-height-sm: 1.5rem;
+  --input-height: 2rem;
+  --input-height-lg: 2.5rem;
+  --input-height-xl: 3rem;
+  --input-font-size-xs: .7rem;
+  --input-font-size-sm: .8rem;
+  --input-font-size: 1rem;
+  --input-font-size-lg: 1.25rem;
+  --input-font-size-xl: 1.5rem;
+  --input-font-family: inherit;
+  --input-font-weight: inherit;
+  --input-color: var(--body-color);
+  --input-border-color: var(--component-border-color);
+  --input-border-color-focus: var(--state-primary);
+  --input-border-width: 1px;
+  --input-border-radius: var(--component-border-radius);
+  --input-bg-color: var(--color-white);
+  --input-box-shadow: inset 0 1px 0 rgba(0, 0, 0, .05);
+  --input-readonly-bg-color: var(--component-bg-color);
+
+  --input-range-track-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-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);
+
+  --fieldset-border-color: var(--component-border-color);
+  --fieldset-border-width: var(--component-border-width);
+  --fieldset-border-radius: var(--component-border-radius);
+  --fieldset-padding-x: 1.5rem;
+  --fieldset-padding-y: 1rem;
+}
 
 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);
+  padding: var(--fieldset-padding-y) var(--fieldset-padding-x);
   margin-bottom: 1rem;
-}
 
-fieldset legend {
-  font-weight: var(--font-weight-bold);
-  padding: 0 .25rem;
+  & legend {
+    font-weight: var(--font-weight-bold);
+    padding: 0 .25rem;
+  }
 }
 
 label {
   display: inline-block;
   margin-bottom: .25rem;
-}
 
-label + label {
-  margin-left: 1rem;
+  & + label {
+    margin-left: 1rem;
+  }
 }
 
 input[type="color"],
@@ -46,33 +85,72 @@ 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;
+  white-space: nowrap;
   -moz-appearance: none;
   -webkit-appearance: none;
-}
 
-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);
+  &:focus {
+    outline: none;
+    border-color: var(--input-border-color-focus);
+  }
+
+  &[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);
+    }
+  }
+
+  &[type="checkbox"],
+  &[type="radio"] {
+    padding: 0;
+  }
+
+  &.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);
+  }
 }
 
 select {
@@ -83,158 +161,134 @@ 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 3px 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 3px 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 3px 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 singles */
 .input-single {
   margin-bottom: 1rem;
 }
@@ -244,92 +298,118 @@ progress {
   width: 100%;
   display: flex;
   margin-bottom: 1rem;
-}
 
-.input-group > input,
-.input-group > button,
-.input-group > .button {
-  border-radius: 0;
-}
+  & > input,
+  & > button,
+  & > .button,
+  & > .dropdown button,
+  & > .dropdown .button {
+    border-radius: 0;
+  }
 
-.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:first-child,
+  & > button:first-child,
+  & > .button:first-child,
+  & > .dropdown:first-child button,
+  & > .dropdown:first-child .button {
+    border-top-left-radius: var(--input-border-radius);
+    border-bottom-left-radius: var(--input-border-radius);
+  }
 
-.input-group > input:last-child,
-.input-group > button:last-child,
-.input-group > .button:last-child {
-  border-top-right-radius: var(--input-border-radius);
-  border-bottom-right-radius: var(--input-border-radius);
-}
+  & > input:last-child,
+  & > button:last-child,
+  & > .button:last-child,
+  & > .dropdown:last-child button,
+  & > .dropdown:last-child .button {
+    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 + 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 + input:focus {
+    border-left-width: var(--input-border-width);
+    margin-left: calc(var(--input-border-width) * -1);
+  }
+
+  & :focus {
+    /* Force a new stacking context so focus rings don't get truncated by adjacent elements */
+    transform: translateZ(0);
+  }
 }
 
 /* Input addons */
 .input-addon {
-  color: var(--text-muted);
+  font-size: var(--input-font-size);
+  color: var(--state-secondary);
   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);
+  padding: 0 .5rem;
   white-space: nowrap;
-}
 
-.input-addon-small {
-  font-size: calc(var(--input-font-size) * .8);
-  height: var(--input-height-small);
-  line-height: var(--input-height-small);
-}
+  &: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-addon-big {
-  font-size: calc(var(--input-font-size) * 1.2);
-  height: var(--input-height-big);
-  line-height: var(--input-height-big);
-}
+  &: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: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-addon-xs {
+    font-size: var(--input-font-size-xs);
+    height: var(--input-height-xs);
+    line-height: var(--input-height-xs);
+  }
 
-.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-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);
+  }
 }
 
 /* Validation */
-.input-invalid label {
-  color: var(--input-invalid-color) !important;
+.input-invalid {
+  & label {
+    color: var(--input-invalid-color) !important;
+  }
+
+  & input,
+  & select {
+    color: var(--input-invalid-color) !important;
+    border-color: var(--input-invalid-border-color) !important;
+  }
 }
 
-.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-valid,
-.input-valid input,
-.input-valid select {
-  color: var(--input-valid-color) !important;
-  border-color: var(--input-valid-border-color) !important;
+  & input,
+  & select {
+    color: var(--input-valid-color) !important;
+    border-color: var(--input-valid-border-color) !important;
+  }
 }

source/css/loaders.css

@@ -1,58 +1,233 @@
 /*! Loaders */
+:root {
+  --loader-thickness: .25rem;
+  --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: 1rem;
+  --loader-size-sm: 2rem;
+  --loader-size: 3rem;
+  --loader-size-lg: 4rem;
+  --loader-size-xl: 5rem;
+  --loader-speed: 750ms;
+  --loader-margin-x: .5em;
+  --loader-margin-y: 0;
 
-@keyframes loader {
-  0%   { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
+  /* Default */
+  --loader-color: var(--state-primary);
+  --loader-bg-color: color(var(--state-primary) lightness(90%));
+
+  /* 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%));
 }
 
-.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,141 @@
+/*! Progress Bars */
+:root {
+  --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: inset 0 1px 1px rgba(0, 0, 0, .05);
+  --progress-speed: .2s;
+  --progress-speed-indeterminate: 3s;
+}
+
+.progress {
+  position: relative;
+  width: 100%;
+  height: var(--progress-height);
+  line-height: var(--progress-height);
+  font-size: var(--progress-font-size);
+  background-color: var(--progress-bg-color);
+  border-radius: var(--progress-border-radius);
+  display: block;
+  overflow: hidden;
+  margin-bottom: 1rem;
+  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,66 @@
 /*!
-  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('forms.css');
 @import url('loaders.css');
+@import url('progress-bars.css');
+@import url('switches.css');
 @import url('tabs.css');
 @import url('tables.css');
 @import url('utilities.css');
+
+:root {
+  /* Fonts */
+  --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-white: white;
+  --color-navy: #001f3f;
+  --color-blue: #0074d9;
+  --color-aqua: #7fdbff;
+  --color-teal: #39cccc;
+  --color-olive: #3d9970;
+  --color-green: #2ecc40;
+  --color-lime: #01ff70;
+  --color-yellow: #ffdc00;
+  --color-orange: #ff851b;
+  --color-red: #ff4136;
+  --color-maroon: #85144b;
+  --color-fuchsia: #f012be;
+  --color-purple: #b10dc9;
+  --color-black: #111;
+  --color-gray: #aaa;
+  --color-silver: #ddd;
+
+  /* States */
+  --state-primary: var(--color-blue);
+  --state-secondary: var(--color-gray);
+  --state-success: var(--color-green);
+  --state-info: var(--color-teal);
+  --state-warning: var(--color-orange);
+  --state-danger: var(--color-red);
+  --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-padding-x: 1rem;
+  --component-padding-y: 1rem;
+}

source/css/switches.css

@@ -0,0 +1,391 @@
+/*! Switches */
+:root {
+  --switch-height: var(--input-height);
+  --switch-height-xs: var(--input-height-xs);
+  --switch-height-sm: var(--input-height-sm);
+  --switch-height-lg: var(--input-height-lg);
+  --switch-height-xl: var(--input-height-xl);
+  --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-speed: .2s;
+
+  /* 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);
+}
+
+.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 3px 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 3px 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 3px 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 3px 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 3px 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 3px 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 3px 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 3px color(var(--switch-color-dark) alpha(50%));
+      }
+    }
+  }
+}

source/css/tables.css

@@ -1,42 +1,63 @@
 /*! Tables */
+:root {
+  --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);
+}
 
-.table {
+table {
   width: 100%;
+  background-color: var(--table-bg-color);
   border-collapse: collapse;
   margin-bottom: 1rem;
-}
 
-.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(--state-secondary);
+    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

@@ -1,52 +1,84 @@
 /*! Tabs */
+:root {
+  --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-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(--state-secondary);
+  --tab-padding-x: var(--component-padding-x);
+  --tab-padding-y: calc(var(--component-padding-y) / 2);
+  --tab-speed: .2s;
+
+  --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-padding-x: var(--component-padding-x);
+  --tab-pane-padding-y: var(--component-padding-y);
+}
 
 .tabs {
   width: 100%;
   margin-bottom: 1rem;
-}
 
-.tabs-nav {
-  margin-bottom: 1rem;
-  user-select: none;
-}
+  & .tabs-nav {
+    margin-bottom: 1rem;
+    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;
-}
+      &:focus {
+        outline: none;
 
-.tabs-nav a.disabled {
-  color: var(--tab-color-disabled);
-  background-color: var(--tab-bg-color-disabled);
-  cursor: not-allowed;
-}
+        &:not(.disabled) {
+          box-shadow: 0 0 0 3px color(var(--tab-bg-color-active) alpha(50%));
 
-.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);
-}
+          /* Force a new stacking context so focus rings don't get truncated by adjacent elements */
+          transform: translateZ(0);
+        }
+      }
 
-.tabs-pane:not(.active) {
-  display: none;
-}
+      &.active {
+        color: var(--tab-color-active);
+        background-color: var(--tab-bg-color-active);
+        cursor: default;
+      }
 
-.tabs-pane :last-child {
-  margin-bottom: 0;
+      &.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-padding-y) var(--tab-pane-padding-x);
+
+    &:not(.active) {
+      display: none;
+    }
+
+    & :last-child {
+      margin-bottom: 0;
+    }
+  }
 }

source/css/utilities.css

@@ -1,4 +1,58 @@
 /*! Utilties */
+:root {
+  --spacing-xs: .5rem;
+  --spacing-sm: 1rem;
+  --spacing-md: 2rem;
+  --spacing-lg: 3rem;
+  --spacing-xl: 4rem;
+}
+
+/***************************************************************************************************
+* 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 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; }
 
 /***************************************************************************************************
 * Float utilities
@@ -26,146 +80,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,220 +0,0 @@
-/*! Variables */
-
-:root {
-  /* 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;
-
-  /* Colors (most courtesy of http://clrs.cc/) */
-  --color-primary: tomato;
-  --color-white: white;
-  --color-navy: #001f3f;
-  --color-blue: #0074d9;
-  --color-aqua: #7fdbff;
-  --color-teal: #39cccc;
-  --color-olive: #3d9970;
-  --color-green: #2ecc40;
-  --color-lime: #01ff70;
-  --color-yellow: #ffdc00;
-  --color-orange: #ff851b;
-  --color-red: #ff4136;
-  --color-maroon: #85144b;
-  --color-fuchsia: #f012be;
-  --color-purple: #b10dc9;
-  --color-black: #111;
-  --color-gray: #aaa;
-  --color-silver: #ddd;
-
-  /* States */
-  --state-success: var(--color-green);
-  --state-info: var(--color-aqua);
-  --state-warning: var(--color-orange);
-  --state-danger: var(--color-red);
-  --state-inverse: var(--color-black);
-
-  /* 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;
-
-  /* Content */
-  --body-bg-color: var(--color-white);
-  --body-color: var(--color-black);
-  --font-family: var(--font-family-system);
-  --font-size: 1rem; /* Most browsers use a default font size of 16px */
-  --font-size-big: 1.25rem;
-  --font-size-small: .875rem;
-  --font-weight-light: 300;
-  --font-weight: 400;
-  --font-weight-bold: 700;
-  --line-height: 1.5;
-  --text-muted: var(--color-gray);
-
-  --code-font-size: 90%;
-  --code-color: var(--color-olive);
-  --code-border-radius: var(--component-border-radius);
-  --code-bg-color: var(--component-bg-color);
-  --code-spacing-x: calc(var(--font-size) * .4);
-  --code-spacing-y: calc(var(--font-size) * .2);
-
-  --headings-font-family: var(--font-family-system);
-  --headings-font-weight: var(--font-weight-light);
-  --headings-line-height: 1.1;
-  --headings-margin-bottom: .5rem;
-  --headings-color: inherit;
-  --headings-font-size-h1: 2.5rem;
-  --headings-font-size-h2: 2rem;
-  --headings-font-size-h3: 1.75rem;
-  --headings-font-size-h4: 1.5rem;
-  --headings-font-size-h5: 1.25rem;
-  --headings-font-size-h6: 1rem;
-
-  --hr-width: 1px;
-
-  --kbd-font-size: 90%;
-  --kbd-color: var(--color-white);
-  --kbd-border-radius: var(--component-border-radius);
-  --kbd-bg-color: var(--color-black);
-  --kbd-spacing-x: calc(var(--font-size) * .4);
-  --kbd-spacing-y: calc(var(--font-size) * .2);
-
-  --link-color: var(--color-primary);
-  --link-text-decoration: none;
-  --link-color-hover: var(--link-color);
-  --link-text-decoration-hover: underline;
-
-  --mark-color: inherit;
-  --mark-bg-color: var(--color-yellow);
-  --mark-spacing-x: calc(var(--font-size) * .4);
-  --mark-spacing-y: calc(var(--font-size) * .2);
-
-  --placeholder-color: var(--text-muted);
-
-  --pre-color: var(--code-color);
-  --pre-border-radius: var(--component-border-radius);
-  --pre-bg-color: var(--code-bg-color);
-  --pre-max-height: none;
-
-  --selection-color: var(--color-white);
-  --selection-bg-color: var(--color-primary);
-
-  /* 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);
-
-  /* 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);
-
-  /* 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);
-
-  /* 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);
-
-  --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-readonly-bg-color: var(--component-bg-color);
-  --input-range-track-color: var(--component-bg-color);
-  --input-range-track-box-shadow: inset 0 1px 0 rgba(0, 0, 0, .05);
-  --input-range-thumb-color: var(--color-primary);
-  --input-range-thumb-height: 2rem;
-
-  --input-invalid-color: var(--state-danger);
-  --input-invalid-border-color: var(--state-danger);
-  --input-valid-color: var(--state-success);
-  --input-valid-border-color: var(--state-success);
-
-  /* Loaders */
-  --loader-bg-color: var(--component-bg-color);
-  --loader-color: var(--color-primary);
-  --loader-size: 2rem;
-  --loader-width: .25rem;
-  --loader-speed: 750ms;
-  --loader-spacing-x: var(--component-spacing-small);
-  --loader-spacing-y: 0;
-
-  /* Spacing Utilties */
-  --spacing-small: var(--component-spacing);
-  --spacing-medium: calc(var(--component-spacing) * 2);
-  --spacing-big: calc(var(--component-spacing) * 4);
-
-  /* Tabs */
-  --tab-bg-color: var(--body-bg);
-  --tab-bg-color-hover: var(--body-bg);
-  --tab-bg-color-active: var(--link-color);
-  --tab-bg-color-disabled: var(--body-bg);
-  --tab-border-radius: var(--component-border-radius);
-  --tab-color: var(--link-color);
-  --tab-color-hover: var(--link-color-hover);
-  --tab-color-active: var(--color-white);
-  --tab-color-disabled: var(--text-muted);
-  --tab-spacing-x: var(--component-spacing);
-  --tab-spacing-y: calc(var(--component-spacing) / 2);
-
-  --tab-pane-border-color: var(--component-border-color);
-  --tab-pane-border-radius: var(--component-border-radius);
-  --tab-pane-border-width: var(--component-border-width);
-  --tab-pane-spacing-x: var(--component-spacing);
-  --tab-pane-spacing-y: var(--component-spacing);
-
-  /* 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);
-}

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.
+- [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,166 @@
+---
+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-single">
+  <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-single">
+  <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-single">
+  <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-single">
+  <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-single">
+  <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-single">
+  <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-single">
+  <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">XS</button>
+<button type="button" class="button-loader button-sm">SM</button>
+<button type="button" class="button-loader">Default</button>
+<button type="button" class="button-loader button-lg">LG</button>
+<button type="button" class="button-loader button-xl">XL</button>
+```
+
+<div class="input-single">
+  <button type="button" class="button-loader button-xs">XS</button>
+  <button type="button" class="button-loader button-sm">SM</button>
+  <button type="button" class="button-loader">Default</button>
+  <button type="button" class="button-loader button-lg">LG</button>
+  <button type="button" class="button-loader button-xl">XL</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-single">
+  <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>
+
+### File Buttons
+
+File inputs are notoriously hard to style properly in every browser. Shoelace offers file buttons as an alternative. These are much easier to style consistently, but come with the caveat that the name (or number) of files selected will not be automatically shown to the user. This aspect of a file button’s UX can be handled effectively with JavaScript, but this is left as an [exercise for the user](https://stackoverflow.com/questions/2189615/how-to-get-file-name-when-user-select-a-file-via-input-type-file).
+
+File buttons are simply `<label>` elements with the `button` class and a nested file input.
+
+```html
+<label class="button">
+  Select File
+  <input type="file">
+</label>
+```
+
+<div class="input-single">
+  <label class="button">Select File <input type="file"></label>
+</div>

source/docs/content.md

@@ -0,0 +1,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 the `:root` block of [`shoelace.css`](../source/css/shoelace.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.
+
+Additional variables can be found in the `:root` block of each component’s stylesheet. For example, to customize alerts, refer to the top of [`alerts.css`](https://github.com/claviska/shoelace-css/blob/master/source/css/alerts.css) for a complete list of variables.
+
+### Using Variables
+
+You can use any of 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-selector {
+  color: var(--state-danger);
+}
+```
+
+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’s 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 in your extension!
+*/
+: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,147 @@
+---
+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.
+
+```html
+<div class="dropdown">
+  <button type="button" class="dropdown-trigger">Dropdown</button>
+  <div class="dropdown-menu">
+    <a href="#">Item 1</a>
+    <a href="#">Item 2</a>
+    <a href="#">Item 3</a>
+    <a href="#" class="checked">Checked</a>
+    <a href="#" class="disabled">Disabled</a>
+    <hr>
+    <a href="#">More...</a>
+  </div>
+</div>
+```
+
+<div class="input-single">
+  <div class="dropdown">
+    <button type="button" class="dropdown-trigger">Dropdown</button>
+    <div class="dropdown-menu">
+      <a href="#">Item 1</a>
+      <a href="#">Item 2</a>
+      <a href="#">Item 3</a>
+      <a href="#" class="checked">Checked</a>
+      <a href="#" class="disabled">Disabled</a>
+      <hr>
+      <a href="#">More...</a>
+    </div>
+  </div>
+</div>
+
+Use the `dropdown-top` and `dropdown-left` modifiers to change the positioning of the menu. You can combine these modifiers as needed.
+
+```html
+<div class="dropdown dropdown-top">
+  ...
+</div>
+
+<div class="dropdown dropdown-left">
+  ...
+</div>
+
+<div class="dropdown dropdown-top dropdown-left">
+  ...
+</div>
+```
+
+<div class="input-single">
+  <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>
+
+### Events
+
+Dropdowns require `shoelace.js` to make them interactive. You don’t need to initialize them. Simply include the script and everything “just works.”
+
+There is no JavaScript API. Shoelace’s philosophy believes that custom components should act like native components as much as possible. You can, however, listen for various events:
+
+- `show` – Fires when a dropdown is shown.
+- `hide` – Fires when a dropdown is hidden.
+- `select` – Fires when a dropdown menu item is selected. The second callback argument is a reference to the respective menu item.
+
+This example will log all three events for a dropdown with an id of `my-dropdown`.
+
+```javascript
+$('#my-dropdown')
+  .on('show', function(event) {
+    console.log('show', event.target);
+  })
+  .on('hide', function(event) {
+    console.log('hide', event.target);
+  })
+  .on('select', function(event, item) {
+    console.log('select', event.target, item);
+  });
+```

source/docs/forms.md

@@ -0,0 +1,396 @@
+---
+layout: default.html
+title: Forms
+description: Default form control styles.
+---
+
+## Forms
+
+Shoelace gives you beautiful forms without hassle. Most form controls don’t need a special class for styling.
+
+### Form Controls
+
+Form controls are styled at 100% of the width of their parent element.
+
+<table class="table table-bordered">
+  <thead>
+    <tr>
+      <th>Input Type</th>
+      <th>Example</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>&lt;input type=&quot;checkbox&quot;&gt;</code></td>
+      <td>
+        <label><input type="checkbox" checked> Checkbox 1</label><br>
+        <label><input type="checkbox"> Checkbox 2</label>
+      </td>
+    </tr>
+    <tr>
+      <td><code>&lt;input type=&quot;color&quot;&gt;</code></td>
+      <td><input type="color" value="#0099dd"></td>
+    </tr>
+    <tr>
+      <td><code>&lt;input type=&quot;date&quot;&gt;</code></td>
+      <td><input type="date"></td>
+    </tr>
+    <tr>
+      <td><code>&lt;input type=&quot;email&quot;&gt;</code></td>
+      <td><input type="email"></td>
+    </tr>
+    <tr>
+      <td>
+        <code>&lt;input type=&quot;file&quot;&gt;</code>
+        <br>
+        <span class="text-small text-secondary">
+          File inputs aren’t supported. Use a [file button](buttons.html#file-buttons) instead.
+        </span>
+      </td>
+      <td>
+        <label class="button button-block">Select File <input type="file"></label>
+      </td>
+    </tr>
+    <tr>
+      <td><code>&lt;input type=&quot;number&quot;&gt;</code></td>
+      <td><input type="number"></td>
+    </tr>
+    <tr>
+      <td><code>&lt;input type=&quot;password&quot;&gt;</code></td>
+      <td><input type="password"></td>
+    </tr>
+    <tr>
+      <td><code>&lt;input type=&quot;radio&quot;&gt;</code></td>
+      <td>
+        <label><input type="Radio" name="radio" checked> Radio 1</label><br>
+        <label><input type="Radio" name="radio"> Radio 2</label>
+      </td>
+    </tr>
+    <tr>
+      <td><code>&lt;input type=&quot;range&quot;&gt;</code></td>
+      <td><input type="range"></td>
+    </tr>
+    <tr>
+      <td><code>&lt;input type=&quot;search&quot;&gt;</code></td>
+      <td><input type="search"></td>
+    </tr>
+    <tr>
+      <td><code>&lt;input type=&quot;text&quot;&gt;</code></td>
+      <td><input type="text"></td>
+    </tr>
+    <tr>
+      <td><code>&lt;input type=&quot;time&quot;&gt;</code></td>
+      <td><input type="time"></td>
+    </tr>
+    <tr>
+      <td><code>&lt;select&gt;</code></td>
+      <td>
+        <select>
+          <option>Item 1</option>
+          <option>Item 2</option>
+          <option>Item 3</option>
+        </select>
+      </td>
+    </tr>
+    <tr>
+      <td><code>&lt;textarea&gt;</code></td>
+      <td><textarea rows="4"></textarea></td>
+    </tr>
+  </tbody>
+</table>
+
+You can change the size of most form controls with the `input-[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="two-column">
+  <div class="column">
+    <div class="input-single">
+      <input type="text" class="input-xs" placeholder="XS">
+    </div>
+    <div class="input-single">
+      <input type="text" class="input-sm" placeholder="SM">
+    </div>
+    <div class="input-single">
+      <input type="text" placeholder="Default">
+    </div>
+    <div class="input-single">
+      <input type="text" class="input-lg" placeholder="LG">
+    </div>
+    <div class="input-single">
+      <input type="text" class="input-xl" placeholder="XL">
+    </div>
+  </div>
+
+  <div class="column">
+    <div class="input-single">
+      <select class="input-xs"><option>XS</option></select>
+    </div>
+    <div class="input-single">
+      <select class="input-sm"><option>SM</option></select>
+    </div>
+    <div class="input-single">
+      <select><option>Default</option></select>
+    </div>
+    <div class="input-single">
+      <select class="input-lg"><option>LG</option></select>
+    </div>
+    <div class="input-single">
+      <select class="input-xl"><option>XL</option></select>
+    </div>
+  </div>
+</div>
+
+Disabled form controls look like this:
+
+<div class="input-single">
+  <input type="text" placeholder="Input" disabled>
+</div>
+
+<div class="input-single">
+  <label><input type="checkbox" disabled> Checkbox</label>
+  <label><input type="radio" disabled> Radio</label>
+</div>
+
+Read-only form controls look like this:
+
+<div class="input-single">
+  <input type="text" readonly value="This is read-only">
+</div>
+
+### Form Control Spacing
+
+For proper spacing of individual form controls, wrap them in `input-single` containers.
+
+```html
+<div class="input-single">
+  <label>Name</label>
+  <input type="text">
+</div>
+
+<div class="input-single">
+  <label>Password</label>
+  <input type="password">
+</div>
+
+<div class="input-single">
+  <label><input type="checkbox"> Remember me</label>
+</div>
+```
+
+<div class="input-single">
+  <label>Username</label>
+  <input type="text">
+</div>
+
+<div class="input-single">
+  <label>Password</label>
+  <input type="password">
+</div>
+
+<div class="input-single">
+  <label><input type="checkbox"> Remember me</label>
+</div>
+
+### Input Groups
+
+Form controls and buttons can be grouped by wrapping them in `input-group` containers.
+
+```html
+<div class="input-group">
+  <input type="text">
+  <button type="button" class="button">Submit</button>
+</div>
+
+<div class="input-group">
+  <button type="button" class="button">Submit</button>
+  <input type="text">
+</div>
+
+<div class="input-group">
+  <input type="text" placeholder="First">
+  <input type="text" placeholder="Middle">
+  <input type="text" placeholder="Last">
+  <button type="button" class="button">Submit</button>
+</div>
+
+<div class="input-group">
+  <button type="button" class="button">Option 1</button>
+  <button type="button" class="button">Option 2</button>
+  <button type="button" class="button">Option 3</button>
+</div>
+```
+
+<div class="input-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 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-single">
+  <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-single">
+  <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-single">
+  <div class="input-group">
+    <span class="input-addon">$</span>
+    <input type="text">
+    <span class="input-addon">.00</span>
+  </div>
+</div>
+
+<div class="input-single">
+  <div class="input-group">
+    <span class="input-addon input-addon-lg">$</span>
+    <input type="text" class="input-lg">
+    <span class="input-addon input-addon-lg">.00</span>
+  </div>
+</div>
+
+<div class="input-single">
+  <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>
+
+### Form Groups
+
+Related form controls can be grouped in a `<fieldset>`. An optional `<legend>` can be used to display a name for the group.
+
+```html
+<fieldset>
+  <legend>User</legend>
+  ...
+</fieldset>
+```
+
+<fieldset>
+  <legend>Login</legend>
+  <div class="input-single">
+    <label>Username</label>
+    <input type="text">
+  </div>
+  <div class="input-single">
+    <label>Password</label>
+    <input type="password">
+  </div>
+  <div class="input-single">
+    <label>
+      <input type="checkbox"> Remember me
+    </label>
+  </div>
+  <div class="input-single">
+    <button type="button">Login</button>
+  </div>
+</fieldset>
+
+### Validation
+
+Form controls can be made valid or invalid using the `input-valid` and `input-invalid` modifiers. It’s better to apply modifiers to the surrounding `input-single` so labels will be styled as well, but modifiers can be applied directly to form controls as needed.
+
+```html
+<div class="input-single input-valid">
+  <label>Valid</label>
+  <input type="text">
+</div>
+
+<div class="input-single input-invalid">
+  <label>Invalid</label>
+  <input type="text">
+</div>
+```
+
+<div class="two-column">
+  <div class="column">
+    <div class="input-single input-valid">
+      <label>Valid</label>
+      <input type="text">
+    </div>
+  </div>
+
+  <div class="column">
+    <div class="input-single input-invalid">
+      <label>Invalid</label>
+      <input type="text">
+    </div>
+  </div>
+</div>

source/docs/grid-system.md

@@ -0,0 +1,48 @@
+---
+layout: default.html
+title: Grid System
+description: Shoelace doesn’t ship with a grid system because you don’t need one!
+---
+
+## Grid System
+
+Shoelace doesn’t ship with a grid system because [you don’t need one](https://rachelandrew.co.uk/archives/2017/07/01/you-do-not-need-a-css-grid-based-grid-system/). You should use the [CSS Grid Layout](https://gridbyexample.com/) instead.
+
+This website uses the CSS Grid Layout. It’s really simple!
+
+```html
+<main id="wrap">
+  <nav id="nav">
+    ...
+  </nav>
+
+  <div id="content">
+    ...
+  </div>
+</main>
+```
+
+Now we just need a couple styles to turn the nav and content elements into columns. This will make the nav `12rem` wide and the content `100% - 12rem` so it fills the rest of the space.
+
+```css
+#wrap {
+  display: grid;
+  grid-template-columns: 12rem calc(100% - 12rem);
+}
+```
+
+You can use media queries to make grids responsive. This is how we make the nav appear on top of the content on smaller screens.
+
+```css
+@media (max-width: 60rem) {
+  #wrap {
+    display: block;
+  }
+}
+```
+
+### For Older Browsers
+
+Support for CSS Grid Layouts is [decent](http://caniuse.com/css-grid), but if you have an obligation to support Internet Explorer or Edge < 16, consider using the [Flexbox Grid](https://evgenyrodionov.github.io/flexboxgrid2/) in combination with Shoelace.
+
+You can use it as-is or include the source files and customize it with CSS variables in your build process.

source/docs/icons.md

@@ -0,0 +1,47 @@
+---
+layout: default.html
+title: Icons
+description: Shoelace doesn’t ship with icons, but you can easily add your own!
+stylesheets:
+ - https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css
+---
+
+## Icons
+
+Shoelace doesn’t bundle its own icons, but you can easily include your favorite library such as [Font Awesome](http://fontawesome.io/). They work superbly together.
+
+This keeps Shoelace light and makes it more customizable.
+
+### Font Awesome
+
+You can load Font Awesome locally or via CDN. To use the CDN version, add this to the `<head>` section of your page:
+
+```html
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
+```
+
+Then add icons as you normally would with `<i class="fa fa-*"></i>`:
+
+<div class="input-single text-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-single">
+  <button type="button"><i class="fa fa-star"></i> Star</button>
+  <button type="button" class="button-success"><i class="fa fa-check"></i> Check</button>
+  <button type="button" class="button-warning"><i class="fa fa-pencil"></i> Edit</button>
+  <button type="button" class="button-info"><i class="fa fa-comment"></i> Comment</button>
+</div>
+
+For your convenience, [here’s a full list](http://fontawesome.io/icons/) of icons available in Font Awesome.

source/docs/installing.md

@@ -0,0 +1,43 @@
+---
+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 customimakes Shoelace fully customizable.
+
+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`. This sets core variables and imports all of Shoelace’s components. If you don’t need everything, you’re encouraged to create your own and import only the ones you’re going to use.

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-single">
+  <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" class="switch" id="switch-1">
+  <label for="switch-1">Switch 1</label>
+</span>
+
+<span class="switch">
+  <input type="checkbox" class="switch" id="switch-2" checked>
+  <label for="switch-2">Switch 2</label>
+</span>
+```
+
+<div class="input-single">
+  <span class="switch">
+    <input type="checkbox" class="switch" id="switch-1">
+    <label for="switch-1">Switch 1</label>
+  </span>
+
+  <span class="switch">
+    <input type="checkbox" class="switch" 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" class="switch" id="switch-xs">
+  <label for="switch-xs">XS</label>
+</span>
+
+<span class="switch switch-sm">
+  <input type="checkbox" class="switch" id="switch-sm">
+  <label for="switch-sm">SM</label>
+</span>
+
+<span class="switch">
+  <input type="checkbox" class="switch" id="switch-default">
+  <label for="switch-default">Default</label>
+</span>
+
+<span class="switch switch-lg">
+  <input type="checkbox" class="switch" id="switch-lg">
+  <label for="switch-lg">LG</label>
+</span>
+
+<span class="switch switch-xl">
+  <input type="checkbox" class="switch" id="switch-xl">
+  <label for="switch-xl">XL</label>
+</span>
+```
+
+<div class="input-single">
+  <span class="switch switch-xs">
+    <input type="checkbox" class="switch" id="switch-xs">
+    <label for="switch-xs">XS</label>
+  </span>
+
+  <span class="switch switch-sm">
+    <input type="checkbox" class="switch" id="switch-sm">
+    <label for="switch-sm">SM</label>
+  </span>
+
+  <span class="switch">
+    <input type="checkbox" class="switch" id="switch-default">
+    <label for="switch-default">Default</label>
+  </span>
+
+  <span class="switch switch-lg">
+    <input type="checkbox" class="switch" id="switch-lg">
+    <label for="switch-lg">LG</label>
+  </span>
+
+  <span class="switch switch-xl">
+    <input type="checkbox" class="switch" 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" class="switch" disabled id="switch-disabled">
+  <label for="switch-disabled">Disabled</label>
+</span>
+```
+
+<div class="input-single">
+  <span class="switch">
+    <input type="checkbox" class="switch" 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" class="switch" id="variation-secondary" checked>
+  <label for="variation-secondary">Secondary</label>
+</span>
+
+<span class="switch switch-success">
+  <input type="checkbox" class="switch" id="variation-success" checked>
+  <label for="variation-success">Success</label>
+</span>
+
+<span class="switch switch-info">
+  <input type="checkbox" class="switch" id="variation-info" checked>
+  <label for="variation-info">Info</label>
+</span>
+
+<span class="switch switch-warning">
+  <input type="checkbox" class="switch" id="variation-warning" checked>
+  <label for="variation-warning">Warning</label>
+</span>
+
+<span class="switch switch-danger">
+  <input type="checkbox" class="switch" id="variation-danger" checked>
+  <label for="variation-danger">Danger</label>
+</span>
+
+<span class="switch switch-light">
+  <input type="checkbox" class="switch" id="variation-light" checked>
+  <label for="variation-light">Light</label>
+</span>
+
+<span class="switch switch-dark">
+  <input type="checkbox" class="switch" 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,150 @@
+---
+layout: default.html
+title: Tabs
+description: Add tabs to your app with the tabs component.
+---
+
+## Tabs
+
+Tab sets can be created using the markup below. By default, Shoelace renders tabs as pills because they respond better than traditional tabs when rendered on smaller screens.
+
+Note the class names used for the main container, the tab navs, and the tab panes. Also note that each tab links to its respective tab pane’s `id`.
+
+To disable a tab, add `disabled` to the appropriate tab nav.
+
+```html
+<div class="tabs">
+  <nav class="tabs-nav">
+    <a href="#tab-1" class="active">Tab 1</a>
+    <a href="#tab-2">Tab 2</a>
+    <a href="#tab-3">Tab 3</a>
+    <a href="#" class="disabled">Disabled</a>
+  </nav>
+
+  <div class="tabs-pane active" id="tab-1">
+    ...
+  </div>
+
+  <div class="tabs-pane" id="tab-2">
+    ...
+  </div>
+
+  <div class="tabs-pane" id="tab-3">
+    ...
+  </div>
+</div>
+```
+
+<div class="tabs">
+  <nav class="tabs-nav">
+    <a href="#tab-1-example-1" class="active">Tab 1</a>
+    <a href="#tab-2-example-1">Tab 2</a>
+    <a href="#tab-3-example-1">Tab 3</a>
+    <a href="#" class="disabled">Disabled</a>
+  </nav>
+
+  <div class="tabs-pane active" id="tab-1-example-1">
+    <h3>Tab 1</h3>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui repellat ea magni magnam
+      assumenda voluptas accusantium nemo. Iusto beatae illum mollitia aut quasi odit facilis
+      officiis, laudantium debitis! Excepturi, quis!
+    </p>
+  </div>
+
+  <div class="tabs-pane" id="tab-2-example-1">
+    <h3>Tab 2</h3>
+    <p>
+      Atque eius voluptatibus ipsa ex totam odit, quidem illo distinctio sit! Quod quae minus,
+      aut itaque. Mollitia, dolore! Facere molestiae necessitatibus sint recusandae incidunt
+      pariatur labore iste vel, velit odit.
+    </p>
+  </div>
+
+  <div class="tabs-pane" id="tab-3-example-1">
+    <h3>Tab 3</h3>
+    <p>
+      Aperiam asperiores optio iusto qui nisi, perspiciatis, ipsum, tenetur explicabo earum et
+      laboriosam odit magni maxime quos molestias aspernatur laudantium harum placeat tempora
+      quae necessitatibus, aut dignissimos totam non! Quod.
+    </p>
+  </div>
+</div>
+
+### Vertical Tabs
+
+Tabs can be made vertical by adding custom CSS rules. Shoelace doesn’t include these styles by default because of the many ways tabs can be positioned, customized, and made responsive.
+
+Here’s an example of vertical tabs that uses the CSS grid. The markup is exactly the same as the previous example, except the tabs container has a custom class and the following custom styles.
+
+```css
+.tabs-vertical-example {
+  display: grid;
+  grid-template-columns: 30% 70%;
+}
+
+.tabs-vertical-example .tabs-nav {
+  padding-right: 2rem;
+}
+
+.tabs-vertical-example .tabs-nav a {
+  display: block;
+}
+```
+
+<div class="tabs tabs-vertical-example">
+  <nav class="tabs-nav tabs-nav-block">
+    <a href="#tab-1-example-2" class="active">Tab 1</a>
+    <a href="#tab-2-example-2">Tab 2</a>
+    <a href="#tab-3-example-2">Tab 3</a>
+    <a href="#" class="disabled">Disabled</a>
+  </nav>
+
+  <div class="tabs-pane active" id="tab-1-example-2">
+    <h3>Tab 1</h3>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui repellat ea magni magnam
+      assumenda voluptas accusantium nemo. Iusto beatae illum mollitia aut quasi odit facilis
+      officiis, laudantium debitis! Excepturi, quis!
+    </p>
+  </div>
+
+  <div class="tabs-pane" id="tab-2-example-2">
+    <h3>Tab 2</h3>
+    <p>
+      Atque eius voluptatibus ipsa ex totam odit, quidem illo distinctio sit! Quod quae minus,
+      aut itaque. Mollitia, dolore! Facere molestiae necessitatibus sint recusandae incidunt
+      pariatur labore iste vel, velit odit.
+    </p>
+  </div>
+
+  <div class="tabs-pane" id="tab-3-example-2">
+    <h3>Tab 3</h3>
+    <p>
+      Aperiam asperiores optio iusto qui nisi, perspiciatis, ipsum, tenetur explicabo earum et
+      laboriosam odit magni maxime quos molestias aspernatur laudantium harum placeat tempora
+      quae necessitatibus, aut dignissimos totam non! Quod.
+    </p>
+  </div>
+</div>
+
+### Events
+
+Tabs require `shoelace.js` to make them interactive. You don’t need to initialize them. Simply include the script and everything “just works.”
+
+There is no JavaScript API. Shoelace’s philosophy believes that custom components should act like native components as much as possible. You can, however, listen for various events:
+
+- `show` – Fires when a tab is shown. The second callback argument is a reference to the respective tab pane.
+- `hide` – Fires when a tab is hidden. The second callback argument is a reference to the respective tab pane.
+
+This example will log both events for the tab set with an id of `my-tabs`.
+
+```javascript
+$('#my-tabs')
+  .on('show', function(event, tabPane) {
+    console.log('show', event.target, tabPane);
+  })
+  .on('hide', function(event, tabPane) {
+    console.log('hide', event.target, tabPane);
+  });
+```

source/docs/utilities.md

@@ -0,0 +1,194 @@
+---
+layout: default.html
+title: Utilities
+description: Use these utilities for quick prototyping.
+---
+
+## Utilities
+
+Shoelace provides a number of helpful utility classes that make prototyping easier.
+
+### Text Utilities
+
+Text utility classes can be applied to change an element’s 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-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>
+
+### Background Utilities
+
+Background utility classes 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>
+
+### 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.
+
+```
+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.

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

source/js/tabs.js

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

source/layouts/default.html

@@ -0,0 +1,102 @@
+<!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 id="wrap">
+    <nav id="nav">
+      <a href="installing.html">Installing</a>
+      <a href="customizing.html">Customizing</a>
+      <a href="content.html">Content</a>
+      <a href="alerts.html">Alerts</a>
+      <a href="badges.html">Badges</a>
+      <a href="buttons.html">Buttons</a>
+      <a href="dropdowns.html">Dropdowns</a>
+      <a href="forms.html">Forms</a>
+      <a href="loaders.html">Loaders</a>
+      <a href="progress-bars.html">Progress Bars</a>
+      <a href="switches.html">Switches</a>
+      <a href="tabs.html">Tabs</a>
+      <a href="tables.html">Tables</a>
+      <a href="utilities.html">Utilities</a>
+      <a href="grid-system.html">Grid System</a>
+      <a href="icons.html">Icons</a>
+      <a href="browser-support.html">Browser Support</a>
+      <a href="attribution.html">Attribution</a>
+    </nav>
+
+    <div id="content">
+      {{{contents}}}
+    </div>
+  </main>
+
+  <footer id="foot">
+    <a href="../index.html">
+      <img src="../source/img/wordmark.svg" alt="Shoelace logo">
+    </a>
+
+    <p class="text-small text-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');
+        }
+      });
+    });
+  </script>
+  {{#each scripts}}
+  <script src="{{.}}"></script>
+  {{/each}}
+  <script async defer src="https://buttons.github.io/buttons.js"></script>
+</body>
+</html>