1.0.0-beta24

* Typo fix

* Shoelace fix?

.stylelintrc

@@ -6,6 +6,7 @@
     "custom-property-empty-line-before": null,
     "declaration-block-single-line-max-declarations": null,
     "number-leading-zero": "never",
+    "selector-list-comma-newline-after": null,
     "shorthand-property-no-redundant-values": null
   }
 }

.vscode/settings.json

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

dist/shoelace.js

@@ -1,15 +1,15 @@
 /*!
-  Shoelace.css dropdowns 1.0.0-beta18
+  Shoelace.css dropdowns 1.0.0-beta24
   (c) A Beautiful Site, LLC
 
   Released under the MIT license
   Source: https://github.com/claviska/shoelace-css
 */
-!function(){"use strict";if("undefined"==typeof jQuery&&"undefined"==typeof Zepto)throw new Error("Shoelace dropdowns require either jQuery or Zepto.");("function"==typeof jQuery?jQuery:Zepto)(function(e){e(document).on("click",function(t){var i,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-beta18
+!function(){"use strict";if("undefined"==typeof jQuery&&"undefined"==typeof Zepto)throw new Error("Shoelace dropdowns require either jQuery or Zepto.");("function"==typeof jQuery?jQuery:Zepto)(function(e){e(document).on("click",function(t){var i=e(t.target).closest(".dropdown").get(0),r=i?e(t.target).closest(".dropdown-trigger").get(0):null,o=(i?e(t.target).closest(".dropdown-menu").get(0):null)?e(t.target).closest("a").get(0):null;if(r){if(e(".dropdown.active").not(i).removeClass("active").trigger("hide"),e(r).is(".disabled, :disabled"))return;e(i).toggleClass("active").trigger(e(i).is(".active")?"show":"hide")}else{if(o)return e(o).is(".disabled")?void t.preventDefault():void e(i).removeClass("active").trigger("hide").trigger(e.Event("select",t),o);i||e(".dropdown.active").removeClass("active").trigger("hide")}}).on("keydown",function(t){27===t.keyCode&&e(".dropdown.active").removeClass("active").trigger("hide")})})}(),/*!
+  Shoelace.css tabs 1.0.0-beta24
   (c) A Beautiful Site, LLC
 
   Released under the MIT license
   Source: https://github.com/claviska/shoelace-css
 */
-function(){"use strict";if("undefined"==typeof jQuery&&"undefined"==typeof Zepto)throw new Error("Shoelace tabs require either jQuery or Zepto.");(window.jQuery||window.Zepto)(function(e){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)))})})}();
+function(){"use strict";if("undefined"==typeof jQuery&&"undefined"==typeof Zepto)throw new Error("Shoelace tabs require either jQuery or Zepto.");(window.jQuery||window.Zepto)(function(e){new MutationObserver(function(t){t.forEach(function(t){if("attributes"===t.type&&"class"===t.attributeName){var i=e(t.target).get(0),r=e(t.target).closest(".tabs").get(0),o=e(t.target).closest(".tabs-nav").get(0),a="A"===i.tagName?e(r).find(i.hash):null;if(!e(i).is("a")||!r||!o)return;if(e(i).is(".disabled.active"))return void e(i).removeClass("active");e(i).is(".active")?(e(i).siblings(".active").removeClass("active"),e(a).addClass("active"),e(r).trigger("show",a)):(e(a).removeClass("active"),e(r).trigger("hide",a))}})}).observe(document.body,{attributes:!0,attributeFilter:["class"],attributeOldValue:!0,subtree:!0}),e(document).on("click",".tabs-nav a",function(t){e(this).addClass("active"),t.preventDefault()})})}();

docs/alerts.html

@@ -19,35 +19,41 @@
         <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>
+  <main class="container">
+    <div class="row">
+      <div class="col-md-3">
+        <ul id="nav">
+          <li><a href="installing.html">Installing</a></li>
+          <li><a href="customizing.html">Customizing</a></li>
+          <li><a href="content.html">Content</a></li>
+          <li><a href="alerts.html">Alerts</a></li>
+          <li><a href="badges.html">Badges</a></li>
+          <li><a href="buttons.html">Buttons</a></li>
+          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="file-buttons.html">File Buttons</a></li>
+          <li><a href="forms.html">Forms</a></li>
+          <li><a href="grid-system.html">Grid System</a></li>
+          <li><a href="loaders.html">Loaders</a></li>
+          <li><a href="progress-bars.html">Progress Bars</a></li>
+          <li><a href="switches.html">Switches</a></li>
+          <li><a href="tabs.html">Tabs</a></li>
+          <li><a href="tables.html">Tables</a></li>
+          <li><a href="utilities.html">Utilities</a></li>
+          <li><a href="icons.html">Icons</a></li>
+          <li><a href="browser-support.html">Browser Support</a></li>
+          <li><a href="attribution.html">Attribution</a></li>
+        </ul>
+      </div>
 
-    <div id="content">
-      <h2 id="alerts">Alerts</h2>
+      <div class="col-md-9">
+        <div id="content">
+          <h2 id="alerts">Alerts</h2>
 <p>Create an alert by applying the <code>alert</code> class to an element such as a <code>&lt;div&gt;</code>.</p>
 <pre><code class="lang-html">&lt;div class=&quot;alert&quot;&gt;This is an alert&lt;/div&gt;
 </code></pre>
@@ -73,7 +79,8 @@
 <div class="alert alert-light">Light</div>
 <div class="alert alert-dark">Dark</div>
 
-    </div>
+        </div>
+      </div>
   </main>
 
   <footer id="foot">
@@ -82,7 +89,7 @@
     </a>
 
     <p class="text-small text-secondary">
-      1.0.0-beta18
+      1.0.0-beta24
     </p>
 
     <p class="mar-y-sm text-center">
@@ -114,6 +121,11 @@
           $(this).addClass('current');
         }
       });
+
+      // Intercept dropdown clicks for the demo
+      $('.dropdown').on('select', function(event) {
+        event.preventDefault();
+      });
     });
   </script>
   <script async defer src="https://buttons.github.io/buttons.js"></script>

docs/attribution.html

@@ -19,46 +19,53 @@
         <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>
+  <main class="container">
+    <div class="row">
+      <div class="col-md-3">
+        <ul id="nav">
+          <li><a href="installing.html">Installing</a></li>
+          <li><a href="customizing.html">Customizing</a></li>
+          <li><a href="content.html">Content</a></li>
+          <li><a href="alerts.html">Alerts</a></li>
+          <li><a href="badges.html">Badges</a></li>
+          <li><a href="buttons.html">Buttons</a></li>
+          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="file-buttons.html">File Buttons</a></li>
+          <li><a href="forms.html">Forms</a></li>
+          <li><a href="grid-system.html">Grid System</a></li>
+          <li><a href="loaders.html">Loaders</a></li>
+          <li><a href="progress-bars.html">Progress Bars</a></li>
+          <li><a href="switches.html">Switches</a></li>
+          <li><a href="tabs.html">Tabs</a></li>
+          <li><a href="tables.html">Tables</a></li>
+          <li><a href="utilities.html">Utilities</a></li>
+          <li><a href="icons.html">Icons</a></li>
+          <li><a href="browser-support.html">Browser Support</a></li>
+          <li><a href="attribution.html">Attribution</a></li>
+        </ul>
+      </div>
 
-    <div id="content">
-      <h2 id="attribution">Attribution</h2>
+      <div class="col-md-9">
+        <div id="content">
+          <h2 id="attribution">Attribution</h2>
 <p>Special thanks to the following individuals and organizations for their contributions to Shoelace.css.</p>
 <ul>
 <li><a href="https://twitter.com/claviska">Cory LaViska</a> – for creating this project.</li>
 <li><a href="https://twitter.com/adamkolson">Adam K Olson</a> – for designing the logo with a single shoelaces.</li>
-<li><a href="https://getbootstrap.com/">Bootstrap</a> – for inspiration.</li>
+<li><a href="https://getbootstrap.com/">Bootstrap</a> – for inspiration and an amazing grid system.</li>
 <li><a href="https://keycdn.com/">KeyCDN</a> – for providing an awesome CDN service.</li>
 <li><a href="https://github.com/">GitHub</a> – for hosting this and many other open source projects.</li>
 <li><a href="https://www.surrealcms.com/">Surreal CMS</a> – for sponsoring development.</li>
 </ul>
 
-    </div>
+        </div>
+      </div>
   </main>
 
   <footer id="foot">
@@ -67,7 +74,7 @@
     </a>
 
     <p class="text-small text-secondary">
-      1.0.0-beta18
+      1.0.0-beta24
     </p>
 
     <p class="mar-y-sm text-center">
@@ -99,6 +106,11 @@
           $(this).addClass('current');
         }
       });
+
+      // Intercept dropdown clicks for the demo
+      $('.dropdown').on('select', function(event) {
+        event.preventDefault();
+      });
     });
   </script>
   <script async defer src="https://buttons.github.io/buttons.js"></script>

docs/badges.html

@@ -19,35 +19,41 @@
         <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>
+  <main class="container">
+    <div class="row">
+      <div class="col-md-3">
+        <ul id="nav">
+          <li><a href="installing.html">Installing</a></li>
+          <li><a href="customizing.html">Customizing</a></li>
+          <li><a href="content.html">Content</a></li>
+          <li><a href="alerts.html">Alerts</a></li>
+          <li><a href="badges.html">Badges</a></li>
+          <li><a href="buttons.html">Buttons</a></li>
+          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="file-buttons.html">File Buttons</a></li>
+          <li><a href="forms.html">Forms</a></li>
+          <li><a href="grid-system.html">Grid System</a></li>
+          <li><a href="loaders.html">Loaders</a></li>
+          <li><a href="progress-bars.html">Progress Bars</a></li>
+          <li><a href="switches.html">Switches</a></li>
+          <li><a href="tabs.html">Tabs</a></li>
+          <li><a href="tables.html">Tables</a></li>
+          <li><a href="utilities.html">Utilities</a></li>
+          <li><a href="icons.html">Icons</a></li>
+          <li><a href="browser-support.html">Browser Support</a></li>
+          <li><a href="attribution.html">Attribution</a></li>
+        </ul>
+      </div>
 
-    <div id="content">
-      <h2 id="badges">Badges</h2>
+      <div class="col-md-9">
+        <div id="content">
+          <h2 id="badges">Badges</h2>
 <p>Create a badge by applying the <code>badge</code> class to an element such as a <code>&lt;span&gt;</code>.</p>
 <pre><code class="lang-html">&lt;span class=&quot;badge&quot;&gt;Badge&lt;/span&gt;
 </code></pre>
@@ -102,7 +108,8 @@
 <a href="#" class="badge badge-light">Light</a>
 <a href="#" class="badge badge-dark">Dark</a></p>
 
-    </div>
+        </div>
+      </div>
   </main>
 
   <footer id="foot">
@@ -111,7 +118,7 @@
     </a>
 
     <p class="text-small text-secondary">
-      1.0.0-beta18
+      1.0.0-beta24
     </p>
 
     <p class="mar-y-sm text-center">
@@ -143,6 +150,11 @@
           $(this).addClass('current');
         }
       });
+
+      // Intercept dropdown clicks for the demo
+      $('.dropdown').on('select', function(event) {
+        event.preventDefault();
+      });
     });
   </script>
   <script async defer src="https://buttons.github.io/buttons.js"></script>

docs/browser-support.html

@@ -19,35 +19,41 @@
         <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>
+  <main class="container">
+    <div class="row">
+      <div class="col-md-3">
+        <ul id="nav">
+          <li><a href="installing.html">Installing</a></li>
+          <li><a href="customizing.html">Customizing</a></li>
+          <li><a href="content.html">Content</a></li>
+          <li><a href="alerts.html">Alerts</a></li>
+          <li><a href="badges.html">Badges</a></li>
+          <li><a href="buttons.html">Buttons</a></li>
+          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="file-buttons.html">File Buttons</a></li>
+          <li><a href="forms.html">Forms</a></li>
+          <li><a href="grid-system.html">Grid System</a></li>
+          <li><a href="loaders.html">Loaders</a></li>
+          <li><a href="progress-bars.html">Progress Bars</a></li>
+          <li><a href="switches.html">Switches</a></li>
+          <li><a href="tabs.html">Tabs</a></li>
+          <li><a href="tables.html">Tables</a></li>
+          <li><a href="utilities.html">Utilities</a></li>
+          <li><a href="icons.html">Icons</a></li>
+          <li><a href="browser-support.html">Browser Support</a></li>
+          <li><a href="attribution.html">Attribution</a></li>
+        </ul>
+      </div>
 
-    <div id="content">
-      <h2 id="browser-support">Browser Support</h2>
+      <div class="col-md-9">
+        <div id="content">
+          <h2 id="browser-support">Browser Support</h2>
 <p>You can use Shoelace <em>today</em> in just about every browser. If you’re using the <a href="installing.html#cdn">CDN version</a> for prototyping, you’re good. If you’re <a href="installing.html#building-from-source">building from source</a>, you’re good.</p>
 <div class="browsers">
   <img src="../source/img/chrome.svg" alt="Chrome">
@@ -63,7 +69,8 @@
 <p>I believe we should focus on the future. Preprocessors had a place when the evolution of CSS seemed stagnant, but things have changed and it’s time to move forward. Instead of learning a different syntax, let’s just learn the <em>future syntax</em>.</p>
 <p>Unfortunately, many people aren’t aware of the great things happening with CSS these days. Shoelace aims to raise awareness by bringing us back to the basics and using tomorrow’s CSS today.</p>
 
-    </div>
+        </div>
+      </div>
   </main>
 
   <footer id="foot">
@@ -72,7 +79,7 @@
     </a>
 
     <p class="text-small text-secondary">
-      1.0.0-beta18
+      1.0.0-beta24
     </p>
 
     <p class="mar-y-sm text-center">
@@ -104,6 +111,11 @@
           $(this).addClass('current');
         }
       });
+
+      // Intercept dropdown clicks for the demo
+      $('.dropdown').on('select', function(event) {
+        event.preventDefault();
+      });
     });
   </script>
   <script async defer src="https://buttons.github.io/buttons.js"></script>

docs/buttons.html

@@ -19,39 +19,45 @@
         <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>
+  <main class="container">
+    <div class="row">
+      <div class="col-md-3">
+        <ul id="nav">
+          <li><a href="installing.html">Installing</a></li>
+          <li><a href="customizing.html">Customizing</a></li>
+          <li><a href="content.html">Content</a></li>
+          <li><a href="alerts.html">Alerts</a></li>
+          <li><a href="badges.html">Badges</a></li>
+          <li><a href="buttons.html">Buttons</a></li>
+          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="file-buttons.html">File Buttons</a></li>
+          <li><a href="forms.html">Forms</a></li>
+          <li><a href="grid-system.html">Grid System</a></li>
+          <li><a href="loaders.html">Loaders</a></li>
+          <li><a href="progress-bars.html">Progress Bars</a></li>
+          <li><a href="switches.html">Switches</a></li>
+          <li><a href="tabs.html">Tabs</a></li>
+          <li><a href="tables.html">Tables</a></li>
+          <li><a href="utilities.html">Utilities</a></li>
+          <li><a href="icons.html">Icons</a></li>
+          <li><a href="browser-support.html">Browser Support</a></li>
+          <li><a href="attribution.html">Attribution</a></li>
+        </ul>
+      </div>
 
-    <div id="content">
-      <h2 id="buttons">Buttons</h2>
+      <div class="col-md-9">
+        <div id="content">
+          <h2 id="buttons">Buttons</h2>
 <p>To create a button, use the <code>&lt;button&gt;</code> element or apply the <code>button</code> class to an <code>&lt;a&gt;</code>.</p>
 <pre><code class="lang-html">&lt;button type=&quot;button&quot;&gt;Button&lt;/button&gt;
 </code></pre>
-<div class="input-single">
+<div class="input-field">
   <button type="button">Button</button>
 </div>
 
@@ -62,7 +68,7 @@
 &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">
+<div class="input-field">
   <button type="button" class="button-xs">XS Button</button>
   <button type="button" class="button-sm">SM Button</button>
   <button type="button">Default Button</button>
@@ -74,7 +80,7 @@
 <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">
+<div class="input-field">
   <button type="button" disabled>Disabled Button</button>
   <a href="#" class="button disabled">Disabled Link</a>
 </div>
@@ -83,7 +89,7 @@
 <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">
+<div class="input-field">
   <button type="button" class="active">Active Button</button>
   <a href="#" class="button active">Active Link</a>
 </div>
@@ -98,7 +104,7 @@
 &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">
+<div class="input-field">
   <button type="button" class="button-secondary">Secondary</button>
   <button type="button" class="button-success">Success</button>
   <button type="button" class="button-info">Info</button>
@@ -112,7 +118,7 @@
 <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">
+<div class="input-field">
   <button type="button" class="button-block">Block Button</button>
 </div>
 
@@ -120,24 +126,24 @@
 <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">
+<div class="input-field">
   <a href="#" class="button button-link">Link Button</a>
 </div>
 
 <h3 id="loader-buttons">Loader Buttons</h3>
 <p>Buttons can be given a loading state with the <code>button-loader</code> modifier. This will make the button text invisible and display a loader using the <code>::after</code> pseudo-element. The button’s width will not be affected.</p>
-<pre><code class="lang-html">&lt;button type=&quot;button&quot; class=&quot;button-loader button-xs&quot;&gt;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;
+<pre><code class="lang-html">&lt;button type=&quot;button&quot; class=&quot;button-loader button-xs&quot;&gt;Button&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;button-loader button-sm&quot;&gt;Button&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;button-loader&quot;&gt;Button&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;button-loader button-lg&quot;&gt;Button&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;button-loader button-xl&quot;&gt;Button&lt;/button&gt;
 </code></pre>
-<div class="input-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 class="input-field">
+  <button type="button" class="button-loader button-xs">Button</button>
+  <button type="button" class="button-loader button-sm">Button</button>
+  <button type="button" class="button-loader">Button</button>
+  <button type="button" class="button-loader button-lg">Button</button>
+  <button type="button" class="button-loader button-xl">Button</button>
 </div>
 
 <p>Loader buttons also work with button variations.</p>
@@ -149,7 +155,7 @@
 &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">
+<div class="input-field">
   <button type="button" class="button-loader button-secondary">Button</button>
   <button type="button" class="button-loader button-success">Button</button>
   <button type="button" class="button-loader button-info">Button</button>
@@ -159,19 +165,8 @@
   <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>
+        </div>
+      </div>
   </main>
 
   <footer id="foot">
@@ -180,7 +175,7 @@
     </a>
 
     <p class="text-small text-secondary">
-      1.0.0-beta18
+      1.0.0-beta24
     </p>
 
     <p class="mar-y-sm text-center">
@@ -212,6 +207,11 @@
           $(this).addClass('current');
         }
       });
+
+      // Intercept dropdown clicks for the demo
+      $('.dropdown').on('select', function(event) {
+        event.preventDefault();
+      });
     });
   </script>
   <script async defer src="https://buttons.github.io/buttons.js"></script>

docs/content.html

@@ -19,35 +19,41 @@
         <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>
+  <main class="container">
+    <div class="row">
+      <div class="col-md-3">
+        <ul id="nav">
+          <li><a href="installing.html">Installing</a></li>
+          <li><a href="customizing.html">Customizing</a></li>
+          <li><a href="content.html">Content</a></li>
+          <li><a href="alerts.html">Alerts</a></li>
+          <li><a href="badges.html">Badges</a></li>
+          <li><a href="buttons.html">Buttons</a></li>
+          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="file-buttons.html">File Buttons</a></li>
+          <li><a href="forms.html">Forms</a></li>
+          <li><a href="grid-system.html">Grid System</a></li>
+          <li><a href="loaders.html">Loaders</a></li>
+          <li><a href="progress-bars.html">Progress Bars</a></li>
+          <li><a href="switches.html">Switches</a></li>
+          <li><a href="tabs.html">Tabs</a></li>
+          <li><a href="tables.html">Tables</a></li>
+          <li><a href="utilities.html">Utilities</a></li>
+          <li><a href="icons.html">Icons</a></li>
+          <li><a href="browser-support.html">Browser Support</a></li>
+          <li><a href="attribution.html">Attribution</a></li>
+        </ul>
+      </div>
 
-    <div id="content">
-      <h2 id="content">Content</h2>
+      <div class="col-md-9">
+        <div id="content">
+          <h2 id="content">Content</h2>
 <p>Shoelace provides default content styles that are easy to customize. You don’t need to apply any classes to achieve these styles — just use the appropriate tags.</p>
 <p>For easy spacing, Shoelace removes top margins and applies a bottom margin to block elements. By default, text sizing and spacing is measured in <code>rem</code> units. Shoelace also sets <code>box-sizing: border-box</code> globally to make it easier to properly size elements.</p>
 <h3 id="headings-h1-h6-">Headings <code>&lt;h1&gt; – &lt;h6&gt;</code></h3>
@@ -186,7 +192,8 @@ PRINT &quot;SHOELACE IS AWESOME&quot;
   </tbody>
 </table>
 
-    </div>
+        </div>
+      </div>
   </main>
 
   <footer id="foot">
@@ -195,7 +202,7 @@ PRINT &quot;SHOELACE IS AWESOME&quot;
     </a>
 
     <p class="text-small text-secondary">
-      1.0.0-beta18
+      1.0.0-beta24
     </p>
 
     <p class="mar-y-sm text-center">
@@ -227,6 +234,11 @@ PRINT &quot;SHOELACE IS AWESOME&quot;
           $(this).addClass('current');
         }
       });
+
+      // Intercept dropdown clicks for the demo
+      $('.dropdown').on('select', function(event) {
+        event.preventDefault();
+      });
     });
   </script>
   <script async defer src="https://buttons.github.io/buttons.js"></script>

docs/customizing.html

@@ -19,36 +19,42 @@
         <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>
+  <main class="container">
+    <div class="row">
+      <div class="col-md-3">
+        <ul id="nav">
+          <li><a href="installing.html">Installing</a></li>
+          <li><a href="customizing.html">Customizing</a></li>
+          <li><a href="content.html">Content</a></li>
+          <li><a href="alerts.html">Alerts</a></li>
+          <li><a href="badges.html">Badges</a></li>
+          <li><a href="buttons.html">Buttons</a></li>
+          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="file-buttons.html">File Buttons</a></li>
+          <li><a href="forms.html">Forms</a></li>
+          <li><a href="grid-system.html">Grid System</a></li>
+          <li><a href="loaders.html">Loaders</a></li>
+          <li><a href="progress-bars.html">Progress Bars</a></li>
+          <li><a href="switches.html">Switches</a></li>
+          <li><a href="tabs.html">Tabs</a></li>
+          <li><a href="tables.html">Tables</a></li>
+          <li><a href="utilities.html">Utilities</a></li>
+          <li><a href="icons.html">Icons</a></li>
+          <li><a href="browser-support.html">Browser Support</a></li>
+          <li><a href="attribution.html">Attribution</a></li>
+        </ul>
+      </div>
 
-    <div 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>source/css/shoelace.css</code></a>.</p>
+      <div class="col-md-9">
+        <div id="content">
+          <h2 id="customizing">Customizing</h2>
+<p>If you’re using the source version of Shoelace (i.e. not the CDN or <code>/dist</code> version), you can customize components using CSS variables. To add customizations, simply override one or more of the variables found in <a href="../source/css/variables.css"><code>source/css/variables.css</code></a>.</p>
 <p>For example, you can customize the default text color, background color, and the primary color by adding this to your stylesheet:</p>
 <pre><code class="lang-css">:root {
   --body-color: white;
@@ -57,22 +63,23 @@
 }
 </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="../source/css/alerts.css"><code>source/css/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);
+<h3 id="using-css-variables">Using CSS Variables</h3>
+<p>You’re encouraged to use Shoelace’s variables in your own stylesheet. This makes it easy to reuse values without hardcoding them. It also provides a foundation for extending Shoelace with your own <a href="#creating-custom-components">custom components</a>.</p>
+<pre><code class="lang-css">.your-component {
+  background-color: var(--component-bg-color);
+  border-color: var(--component-border-color);
+  color: var(--state-secondary);
 }
 </code></pre>
 <p>If you’re not familiar with CSS variables, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables">this article</a> will bring you up to speed.</p>
 <h3 id="creating-custom-components">Creating Custom Components</h3>
-<p>You can create custom components to extend Shoelace’s functionality. Here’s what a component’s stylesheet looks like.</p>
+<p>You can create custom components to extend Shoelace’s functionality. Here’s what a component stylesheet looks like.</p>
 <pre><code class="lang-css">/* Set default variables in a :root block. It&#39;s a good idea to
    base them off core variables when possible. This makes it
    easier to customize the library as a whole but still lets
    users change individual components.
 
-   Never change or override core variables in your extension!
+   Never change or override core variables!
 */
 :root {
   --accordion-bg-color: var(--component-bg-color);
@@ -99,7 +106,8 @@
 <p><strong>Provide source and dist versions.</strong> Many people use Shoelace as a tool for prototyping. If you’re open sourcing your component, it’s best to provide both source and dist versions. The dist version is just a minified version of the source after it’s been processed by cssnext.</p>
 <p><strong>Semantic markup is strongly encouraged.</strong> Custom components should use the most appropriate elements and the minimal amount of markup required.</p>
 
-    </div>
+        </div>
+      </div>
   </main>
 
   <footer id="foot">
@@ -108,7 +116,7 @@
     </a>
 
     <p class="text-small text-secondary">
-      1.0.0-beta18
+      1.0.0-beta24
     </p>
 
     <p class="mar-y-sm text-center">
@@ -140,6 +148,11 @@
           $(this).addClass('current');
         }
       });
+
+      // Intercept dropdown clicks for the demo
+      $('.dropdown').on('select', function(event) {
+        event.preventDefault();
+      });
     });
   </script>
   <script async defer src="https://buttons.github.io/buttons.js"></script>

docs/dropdowns.html

@@ -19,38 +19,45 @@
         <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>
+  <main class="container">
+    <div class="row">
+      <div class="col-md-3">
+        <ul id="nav">
+          <li><a href="installing.html">Installing</a></li>
+          <li><a href="customizing.html">Customizing</a></li>
+          <li><a href="content.html">Content</a></li>
+          <li><a href="alerts.html">Alerts</a></li>
+          <li><a href="badges.html">Badges</a></li>
+          <li><a href="buttons.html">Buttons</a></li>
+          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="file-buttons.html">File Buttons</a></li>
+          <li><a href="forms.html">Forms</a></li>
+          <li><a href="grid-system.html">Grid System</a></li>
+          <li><a href="loaders.html">Loaders</a></li>
+          <li><a href="progress-bars.html">Progress Bars</a></li>
+          <li><a href="switches.html">Switches</a></li>
+          <li><a href="tabs.html">Tabs</a></li>
+          <li><a href="tables.html">Tables</a></li>
+          <li><a href="utilities.html">Utilities</a></li>
+          <li><a href="icons.html">Icons</a></li>
+          <li><a href="browser-support.html">Browser Support</a></li>
+          <li><a href="attribution.html">Attribution</a></li>
+        </ul>
+      </div>
 
-    <div id="content">
-      <h2 id="dropdowns">Dropdowns</h2>
+      <div class="col-md-9">
+        <div id="content">
+          <h2 id="dropdowns">Dropdowns</h2>
 <p>Dropdowns can be created using the markup below. You can use a <code>&lt;button&gt;</code> or an <code>&lt;a&gt;</code> as a trigger. Dropdown indicators (i.e. carets) are added for you. Menu items are simply <code>&lt;a&gt;</code> elements. Dividers are simply <code>&lt;hr&gt;</code> elements.</p>
 <p>Note the class names used for the main container, the trigger, and the menu. Additionally, menu items can be disabled by adding the <code>disabled</code> class. Menu items can also be given a checked state using the <code>checked</code> class.</p>
 <p>To disable a dropdown entirely, add the <code>disabled</code> property to the dropdown trigger if it’s a button. If it’s a link, add the <code>disabled</code> class instead. When a dropdown is activated, it will receive the <code>active</code> class and the menu will show.</p>
+<p>Headings can be created with the <code>dropdown-heading</code> class.</p>
 <pre><code class="lang-html">&lt;div class=&quot;dropdown&quot;&gt;
   &lt;button type=&quot;button&quot; class=&quot;dropdown-trigger&quot;&gt;Dropdown&lt;/button&gt;
   &lt;div class=&quot;dropdown-menu&quot;&gt;
@@ -60,11 +67,12 @@
     &lt;a href=&quot;#&quot; class=&quot;checked&quot;&gt;Checked&lt;/a&gt;
     &lt;a href=&quot;#&quot; class=&quot;disabled&quot;&gt;Disabled&lt;/a&gt;
     &lt;hr&gt;
+    &lt;div class=&quot;dropdown-heading&quot;&gt;Heading&lt;/div&gt;
     &lt;a href=&quot;#&quot;&gt;More...&lt;/a&gt;
   &lt;/div&gt;
 &lt;/div&gt;
 </code></pre>
-<div class="input-single">
+<div class="input-field">
   <div class="dropdown">
     <button type="button" class="dropdown-trigger">Dropdown</button>
     <div class="dropdown-menu">
@@ -74,6 +82,7 @@
       <a href="#" class="checked">Checked</a>
       <a href="#" class="disabled">Disabled</a>
       <hr>
+      <div class="dropdown-heading">Heading</div>
       <a href="#">More...</a>
     </div>
   </div>
@@ -92,7 +101,7 @@
   ...
 &lt;/div&gt;
 </code></pre>
-<div class="input-single">
+<div class="input-field">
   <div class="dropdown dropdown-top">
     <button type="button" class="dropdown-trigger">Top</button>
     <div class="dropdown-menu">
@@ -152,9 +161,9 @@
   </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>
+<h3 id="interactivity">Interactivity</h3>
+<p>Dropdowns require <code>shoelace.js</code> for interactivity. You don’t need to initialize anything. Just include the script and everything “just works.”</p>
+<p>There is no JavaScript API. Shoelace’s philosophy believes that custom components should act like native components as much as possible. You can, however, listen for various events.</p>
 <ul>
 <li><code>show</code> – Fires when a dropdown is shown.</li>
 <li><code>hide</code> – Fires when a dropdown is hidden.</li>
@@ -170,10 +179,21 @@
   })
   .on(&#39;select&#39;, function(event, item) {
     console.log(&#39;select&#39;, event.target, item);
+
+    // Tip: Use event.preventDefault() to
+    // intercept the original click event.
   });
 </code></pre>
+<p>To show or hide a dropdown programmatically, just add or remove the <code>active</code> class to the dropdown.</p>
+<pre><code class="lang-javascript">// Show the dropdown
+$(&#39;#my-dropdown&#39;).addClass(&#39;active&#39;);
 
-    </div>
+// Hide the dropdown
+$(&#39;#my-dropdown&#39;).removeClass(&#39;active&#39;);
+</code></pre>
+
+        </div>
+      </div>
   </main>
 
   <footer id="foot">
@@ -182,7 +202,7 @@
     </a>
 
     <p class="text-small text-secondary">
-      1.0.0-beta18
+      1.0.0-beta24
     </p>
 
     <p class="mar-y-sm text-center">
@@ -214,6 +234,11 @@
           $(this).addClass('current');
         }
       });
+
+      // Intercept dropdown clicks for the demo
+      $('.dropdown').on('select', function(event) {
+        event.preventDefault();
+      });
     });
   </script>
   <script async defer src="https://buttons.github.io/buttons.js"></script>

docs/file-buttons.html

@@ -0,0 +1,195 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <meta name="description" content="Add buttons to let users select files in your app.">
+  <link rel="icon" href="../source/img/favicon.png">
+  <link rel="stylesheet" href="../dist/shoelace.css">
+  <link rel="stylesheet" href="../source/css/_docs.css">
+  <link rel="stylesheet" href="https://cdn.rawgit.com/AGMStudio/prism-theme-one-dark/f81fe477/prism-onedark.css">
+  <title>File Buttons</title>
+</head>
+<body>
+
+  <header id="head" class="text-center">
+    <h1>
+      <a href="../index.html">
+        <img src="../source/img/wordmark.svg" alt="Shoelace logo">
+      </a>
+    </h1>
+
+    <p class="text-secondary text-small">
+      A back to the basics CSS starter kit. For when you don’t need the whole boot.
+    </p>
+  </header>
+
+  <main class="container">
+    <div class="row">
+      <div class="col-md-3">
+        <ul id="nav">
+          <li><a href="installing.html">Installing</a></li>
+          <li><a href="customizing.html">Customizing</a></li>
+          <li><a href="content.html">Content</a></li>
+          <li><a href="alerts.html">Alerts</a></li>
+          <li><a href="badges.html">Badges</a></li>
+          <li><a href="buttons.html">Buttons</a></li>
+          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="file-buttons.html">File Buttons</a></li>
+          <li><a href="forms.html">Forms</a></li>
+          <li><a href="grid-system.html">Grid System</a></li>
+          <li><a href="loaders.html">Loaders</a></li>
+          <li><a href="progress-bars.html">Progress Bars</a></li>
+          <li><a href="switches.html">Switches</a></li>
+          <li><a href="tabs.html">Tabs</a></li>
+          <li><a href="tables.html">Tables</a></li>
+          <li><a href="utilities.html">Utilities</a></li>
+          <li><a href="icons.html">Icons</a></li>
+          <li><a href="browser-support.html">Browser Support</a></li>
+          <li><a href="attribution.html">Attribution</a></li>
+        </ul>
+      </div>
+
+      <div class="col-md-9">
+        <div id="content">
+          <h2 id="file-buttons">File Buttons</h2>
+<p>File inputs are notoriously hard to style consistently in every browser. Shoelace offers file buttons as an alternative.</p>
+<p>File buttons are much easier to style, but come with the caveat that the name and number of files selected will not be automatically shown to the user. This aspect of a file button’s UX can be handled effectively with JavaScript, but this is left as an <a href="https://stackoverflow.com/questions/2189615/how-to-get-file-name-when-user-select-a-file-via-input-type-file">exercise for the user</a>.</p>
+<p>To create a file button, use the following markup. Note that the input needs to have an <code>id</code> and the label needs to have a matching <code>for</code> attribute. The label also needs to have the <code>button</code> class.</p>
+<pre><code class="lang-html">&lt;span class=&quot;file-button&quot;&gt;
+  &lt;input type=&quot;file&quot; id=&quot;my-file&quot;&gt;
+  &lt;label class=&quot;button&quot; for=&quot;my-file&quot;&gt;Select File&lt;/label&gt;
+&lt;/span&gt;
+</code></pre>
+<p><span class="file-button">
+  <input type="file" id="file-input">
+  <label class="button" for="file-input">Select File</label>
+</span></p>
+<p>This approach is a bit more verbose than simply wrapping the input with a label, but the extra markup makes file buttons accessible via keyboard.</p>
+<p>You can allow multiple files to be selected by adding the <code>multiple</code> attribute:</p>
+<pre><code class="lang-html">&lt;span class=&quot;file-button&quot;&gt;
+  &lt;input type=&quot;file&quot; id=&quot;my-files&quot; multiple&gt;
+  &lt;label class=&quot;button&quot; for=&quot;my-files&quot;&gt;Select Files&lt;/label&gt;
+&lt;/span&gt;
+</code></pre>
+<p><span class="file-button">
+  <input type="file" id="my-files" multiple>
+  <label class="button" for="my-files">Select Files</label>
+</span></p>
+<h3 id="variations">Variations</h3>
+<p>File buttons can use <a href="buttons.html">button modifiers</a>. Just apply the appropriate classes to the label.</p>
+<p><span class="file-button">
+  <input type="file" id="file-input-xs">
+  <label class="button button-xs" for="file-input-xs">Browse</label>
+</span>
+<span class="file-button">
+  <input type="file" id="file-input-sm">
+  <label class="button button-sm" for="file-input-sm">Browse</label>
+</span>
+<span class="file-button">
+  <input type="file" id="file-input-default">
+  <label class="button" for="file-input-default">Browse</label>
+</span>
+<span class="file-button">
+  <input type="file" id="file-input-lg">
+  <label class="button button-lg" for="file-input-lg">Browse</label>
+</span>
+<span class="file-button">
+  <input type="file" id="file-input-xl">
+  <label class="button button-xl" for="file-input-xl">Browse</label>
+</span></p>
+<p><span class="file-button">
+  <input type="file" id="file-input-default">
+  <label class="button" for="file-input-default">Browse</label>
+</span>
+<span class="file-button">
+  <input type="file" id="file-input-secondary">
+  <label class="button button-secondary" for="file-input-secondary">Browse</label>
+</span>
+<span class="file-button">
+  <input type="file" id="file-input-success">
+  <label class="button button-success" for="file-input-success">Browse</label>
+</span>
+<span class="file-button">
+  <input type="file" id="file-input-info">
+  <label class="button button-info" for="file-input-info">Browse</label>
+</span>
+<span class="file-button">
+  <input type="file" id="file-input-warning">
+  <label class="button button-warning" for="file-input-warning">Browse</label>
+</span>
+<span class="file-button">
+  <input type="file" id="file-input-danger">
+  <label class="button button-danger" for="file-input-danger">Browse</label>
+</span>
+<span class="file-button">
+  <input type="file" id="file-input-light">
+  <label class="button button-light" for="file-input-light">Browse</label>
+</span>
+<span class="file-button">
+  <input type="file" id="file-input-dark">
+  <label class="button button-dark" for="file-input-dark">Browse</label>
+</span></p>
+<p>You can also use file buttons in <a href="forms.html#input-groups">input groups</a>.</p>
+<div class="input-group">
+  <span class="file-button">
+    <input type="file" id="file-input-group">
+    <label class="button" for="file-input-group">Select File</label>
+  </span>
+  <input type="text">
+  <button type="button">Submit</button>
+</div>
+
+        </div>
+      </div>
+  </main>
+
+  <footer id="foot">
+    <a href="../index.html">
+      <img src="../source/img/wordmark.svg" alt="Shoelace logo">
+    </a>
+
+    <p class="text-small text-secondary">
+      1.0.0-beta24
+    </p>
+
+    <p class="mar-y-sm text-center">
+      <a class="github-button" href="https://github.com/claviska/shoelace-css/fork" data-size="large" aria-label="Fork claviska/shoelace-css on GitHub">Fork</a>
+      <a class="github-button" href="https://github.com/claviska/shoelace-css/releases" data-icon="octicon-cloud-download" data-size="large" aria-label="Download claviska/shoelace-css on GitHub">Download</a>
+      <a class="github-button" href="https://github.com/claviska/shoelace-css/issues" data-icon="octicon-issue-opened" data-size="large" aria-label="Issue claviska/shoelace-css on GitHub">Report a Bug</a>
+      <a class="github-button" href="https://github.com/claviska/shoelace-css" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star claviska/shoelace-css on GitHub">Star</a>
+    </p>
+
+    <p>
+      <a href="https://twitter.com/shoelacecss" class="button button-info" style="margin-bottom: 1.2rem;">Follow</a>
+      <a href="https://paypal.me/claviska" class="button button-success" style="margin-bottom: 1.2rem;">Donate</a>
+    </p>
+
+    <p class="text-small text-secondary">
+      <a href="https://keycdn.com/" class="text-secondary">Accelerated by KeyCDN</a> &middot;
+      &copy; A Beautiful Site, LLC
+    </p>
+  </footer>
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js"></script>
+  <script src="../dist/shoelace.js"></script>
+  <script>
+    $(function() {
+      // Highlight current nav item
+      $('#nav a').each(function() {
+        if(this.pathname === location.pathname) {
+          $(this).addClass('current');
+        }
+      });
+
+      // Intercept dropdown clicks for the demo
+      $('.dropdown').on('select', function(event) {
+        event.preventDefault();
+      });
+    });
+  </script>
+  <script async defer src="https://buttons.github.io/buttons.js"></script>
+</body>
+</html>

docs/forms.html

@@ -9,6 +9,7 @@
   <link rel="stylesheet" href="../dist/shoelace.css">
   <link rel="stylesheet" href="../source/css/_docs.css">
   <link rel="stylesheet" href="https://cdn.rawgit.com/AGMStudio/prism-theme-one-dark/f81fe477/prism-onedark.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
   <title>Forms</title>
 </head>
 <body>
@@ -19,35 +20,41 @@
         <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>
+  <main class="container">
+    <div class="row">
+      <div class="col-md-3">
+        <ul id="nav">
+          <li><a href="installing.html">Installing</a></li>
+          <li><a href="customizing.html">Customizing</a></li>
+          <li><a href="content.html">Content</a></li>
+          <li><a href="alerts.html">Alerts</a></li>
+          <li><a href="badges.html">Badges</a></li>
+          <li><a href="buttons.html">Buttons</a></li>
+          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="file-buttons.html">File Buttons</a></li>
+          <li><a href="forms.html">Forms</a></li>
+          <li><a href="grid-system.html">Grid System</a></li>
+          <li><a href="loaders.html">Loaders</a></li>
+          <li><a href="progress-bars.html">Progress Bars</a></li>
+          <li><a href="switches.html">Switches</a></li>
+          <li><a href="tabs.html">Tabs</a></li>
+          <li><a href="tables.html">Tables</a></li>
+          <li><a href="utilities.html">Utilities</a></li>
+          <li><a href="icons.html">Icons</a></li>
+          <li><a href="browser-support.html">Browser Support</a></li>
+          <li><a href="attribution.html">Attribution</a></li>
+        </ul>
+      </div>
 
-    <div id="content">
-      <h2 id="forms">Forms</h2>
+      <div class="col-md-9">
+        <div id="content">
+          <h2 id="forms">Forms</h2>
 <p>Shoelace gives you beautiful forms without hassle. Most form controls don’t need a special class for styling.</p>
 <h3 id="form-controls">Form Controls</h3>
 <p>Form controls are styled at 100% of the width of their parent element.</p>
@@ -83,11 +90,14 @@
         <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.
+          File inputs aren’t supported. Use a <a href="file-buttons.html">file button</a> instead.
         </span>
       </td>
       <td>
-        <label class="button button-block">Select File <input type="file"></label>
+        <span class="file-button">
+          <input type="file" id="file-button-ex">
+          <label class="button button-block" for="file-button-ex">Select File</label>
+        </span>
       </td>
     </tr>
     <tr>
@@ -151,86 +161,85 @@
 &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">
+<div class="row">
+  <div class="col-sm-6">
+    <div class="input-field">
       <input type="text" class="input-xs" placeholder="XS">
     </div>
-    <div class="input-single">
+    <div class="input-field">
       <input type="text" class="input-sm" placeholder="SM">
     </div>
-    <div class="input-single">
+    <div class="input-field">
       <input type="text" placeholder="Default">
     </div>
-    <div class="input-single">
+    <div class="input-field">
       <input type="text" class="input-lg" placeholder="LG">
     </div>
-    <div class="input-single">
+    <div class="input-field">
       <input type="text" class="input-xl" placeholder="XL">
     </div>
   </div>
-
-  <div class="column">
-    <div class="input-single">
+  <div class="col-sm-6">
+    <div class="input-field">
       <select class="input-xs"><option>XS</option></select>
     </div>
-    <div class="input-single">
+    <div class="input-field">
       <select class="input-sm"><option>SM</option></select>
     </div>
-    <div class="input-single">
+    <div class="input-field">
       <select><option>Default</option></select>
     </div>
-    <div class="input-single">
+    <div class="input-field">
       <select class="input-lg"><option>LG</option></select>
     </div>
-    <div class="input-single">
+    <div class="input-field">
       <select class="input-xl"><option>XL</option></select>
     </div>
   </div>
 </div>
 
 <p>Disabled form controls look like this:</p>
-<div class="input-single">
+<div class="input-field">
   <input type="text" placeholder="Input" disabled>
 </div>
 
-<div class="input-single">
+<div class="input-field">
   <label><input type="checkbox" disabled> Checkbox</label>
   <label><input type="radio" disabled> Radio</label>
 </div>
 
 <p>Read-only form controls look like this:</p>
-<div class="input-single">
+<div class="input-field">
   <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;
+<h3 id="input-fields">Input Fields</h3>
+<p>For proper spacing of individual form controls, wrap them in <code>input-field</code> containers.</p>
+<pre><code class="lang-html">&lt;div class=&quot;input-field&quot;&gt;
   &lt;label&gt;Name&lt;/label&gt;
   &lt;input type=&quot;text&quot;&gt;
 &lt;/div&gt;
 
-&lt;div class=&quot;input-single&quot;&gt;
+&lt;div class=&quot;input-field&quot;&gt;
   &lt;label&gt;Password&lt;/label&gt;
   &lt;input type=&quot;password&quot;&gt;
 &lt;/div&gt;
 
-&lt;div class=&quot;input-single&quot;&gt;
+&lt;div class=&quot;input-field&quot;&gt;
   &lt;label&gt;&lt;input type=&quot;checkbox&quot;&gt; Remember me&lt;/label&gt;
 &lt;/div&gt;
 </code></pre>
-<div class="input-single">
+<div class="input-field">
   <label>Username</label>
   <input type="text">
 </div>
 
-<div class="input-single">
+<div class="input-field">
   <label>Password</label>
   <input type="password">
 </div>
 
-<div class="input-single">
+<div class="input-field">
   <label><input type="checkbox"> Remember me</label>
 </div>
 
@@ -282,6 +291,37 @@
   <button type="button">Option 3</button>
 </div>
 
+<h3 id="input-hints">Input Hints</h3>
+<p>You can add textual hints below form controls with the <code>input-hint</code> class.</p>
+<pre><code class="lang-html">&lt;div class=&quot;input-field&quot;&gt;
+  &lt;label&gt;Name&lt;/label&gt;
+  &lt;input type=&quot;text&quot;&gt;
+  &lt;p class=&quot;input-hint&quot;&gt;What do people call you?&lt;/p&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;input-field&quot;&gt;
+  &lt;label&gt;Age&lt;/label&gt;
+  &lt;input type=&quot;number&quot;&gt;
+  &lt;p class=&quot;input-hint&quot;&gt;Enter your age in years&lt;/p&gt;
+&lt;/div&gt;
+</code></pre>
+<div class="row">
+  <div class="col-sm-6">
+    <div class="input-field">
+      <label>Name</label>
+      <input type="text">
+      <p class="input-hint">What do people call you?</p>
+    </div>
+  </div>
+  <div class="col-sm-6">
+    <div class="input-field">
+      <label>Age</label>
+      <input type="number">
+      <p class="input-hint">Enter your age in years</p>
+    </div>
+  </div>
+</div>
+
 <h3 id="input-addons">Input Addons</h3>
 <p>To create an input addon, use <code>&lt;span class=&quot;input-addon&quot;&gt;</code>. Addons can appear anywhere inside an input group. Use the <code>input-addon-[xs|sm|lg|xl]</code> modifiers to change the size to match adjacent form controls.</p>
 <pre><code class="lang-html">&lt;div class=&quot;input-group&quot;&gt;
@@ -314,7 +354,7 @@
   &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-field">
   <div class="input-group">
     <span class="input-addon input-addon-xs">$</span>
     <input type="text" class="input-xs">
@@ -322,7 +362,7 @@
   </div>
 </div>
 
-<div class="input-single">
+<div class="input-field">
   <div class="input-group">
     <span class="input-addon input-addon-sm">$</span>
     <input type="text" class="input-sm">
@@ -330,7 +370,7 @@
   </div>
 </div>
 
-<div class="input-single">
+<div class="input-field">
   <div class="input-group">
     <span class="input-addon">$</span>
     <input type="text">
@@ -338,7 +378,7 @@
   </div>
 </div>
 
-<div class="input-single">
+<div class="input-field">
   <div class="input-group">
     <span class="input-addon input-addon-lg">$</span>
     <input type="text" class="input-lg">
@@ -346,7 +386,7 @@
   </div>
 </div>
 
-<div class="input-single">
+<div class="input-field">
   <div class="input-group">
     <span class="input-addon input-addon-xl">$</span>
     <input type="text" class="input-xl">
@@ -354,6 +394,150 @@
   </div>
 </div>
 
+<h3 id="input-icons">Input Icons</h3>
+<p>Input icons add visual context to form controls. To add icons to a form control, wrap it with an <code>input-icon</code> element and add icons before and after it.</p>
+<p>This example uses Font Awesome, but you can use whatever icon library you want. For consistency, use fixed with icons if your icon library supports them.</p>
+<pre><code class="lang-html">&lt;div class=&quot;input-icon&quot;&gt;
+  &lt;i class=&quot;fa fa-fw fa-phone&quot;&gt;&lt;/i&gt;
+  &lt;input type=&quot;text&quot;&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;input-icon&quot;&gt;
+  &lt;input type=&quot;text&quot;&gt;
+  &lt;i class=&quot;fa fa-fw fa-envelope-o&quot;&gt;&lt;/i&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;input-icon&quot;&gt;
+  &lt;i class=&quot;fa fa-fw fa-user&quot;&gt;&lt;/i&gt;
+  &lt;input type=&quot;text&quot;&gt;
+  &lt;i class=&quot;fa fa-check&quot;&gt;&lt;/i&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;input-icon&quot;&gt;
+  &lt;i class=&quot;fa fa-fw fa-map-marker&quot;&gt;&lt;/i&gt;
+  &lt;select&gt;&lt;option&gt;United States&lt;/option&gt;&lt;/select&gt;
+&lt;/div&gt;
+</code></pre>
+<div class="row">
+  <div class="col-md-6 mar-b-md">
+    <div class="input-icon">
+      <i class="fa fa-fw fa-phone"></i>
+      <input type="text">
+    </div>
+  </div>
+  <div class="col-md-6 mar-b-md">
+    <div class="input-icon">
+      <input type="text">
+      <i class="fa fa-fw fa-envelope-o"></i>
+    </div>
+  </div>
+  <div class="col-md-6 mar-b-md">
+    <div class="input-icon">
+      <i class="fa fa-fw fa-user"></i>
+      <input type="text">
+      <i class="fa fa-check"></i>
+    </div>
+  </div>
+  <div class="col-md-6 mar-b-md">
+    <div class="input-icon">
+      <i class="fa fa-fw fa-map-marker"></i>
+      <select><option>United States</option></select>
+    </div>
+  </div>
+</div>
+
+<p>Input icons can be used inside form groups.</p>
+<pre><code class="lang-html">&lt;div class=&quot;input-group&quot;&gt;
+  &lt;span class=&quot;input-addon&quot;&gt;Location&lt;/span&gt;
+  &lt;div class=&quot;input-icon&quot;&gt;
+    &lt;i class=&quot;fa fa-fw fa-map-marker&quot;&gt;&lt;/i&gt;
+    &lt;input type=&quot;text&quot;&gt;
+    &lt;i class=&quot;fa fa-fw fa-check&quot;&gt;&lt;/i&gt;
+  &lt;/div&gt;
+  &lt;button type=&quot;button&quot;&gt;Submit&lt;/button&gt;
+&lt;/div&gt;
+</code></pre>
+<div class="input-group">
+  <span class="input-addon">Location</span>
+  <div class="input-icon">
+    <i class="fa fa-fw fa-map-marker"></i>
+    <input type="text">
+    <i class="fa fa-fw fa-check"></i>
+  </div>
+  <button type="button">Submit</button>
+</div>
+
+<p>Use the <code>input-icon-[xs|sm|lg|xs]</code> modifiers to change the size of input icons to match form controls.</p>
+<pre><code class="lang-html">&lt;div class=&quot;input-icon input-icon-xs&quot;&gt;
+  &lt;i class=&quot;fa fa-fw fa-user&quot;&gt;&lt;/i&gt;
+  &lt;input class=&quot;input-xs&quot; type=&quot;text&quot;&gt;
+  &lt;i class=&quot;fa fa-check&quot;&gt;&lt;/i&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;input-icon input-icon-sm&quot;&gt;
+  &lt;i class=&quot;fa fa-fw fa-user&quot;&gt;&lt;/i&gt;
+  &lt;input class=&quot;input-sm&quot; type=&quot;text&quot;&gt;
+  &lt;i class=&quot;fa fa-check&quot;&gt;&lt;/i&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;input-icon&quot;&gt;
+  &lt;i class=&quot;fa fa-fw fa-user&quot;&gt;&lt;/i&gt;
+  &lt;input type=&quot;text&quot;&gt;
+  &lt;i class=&quot;fa fa-check&quot;&gt;&lt;/i&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;input-icon input-icon-lg&quot;&gt;
+  &lt;i class=&quot;fa fa-fw fa-user&quot;&gt;&lt;/i&gt;
+  &lt;input class=&quot;input-lg&quot; type=&quot;text&quot;&gt;
+  &lt;i class=&quot;fa fa-check&quot;&gt;&lt;/i&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;input-icon input-icon-xl&quot;&gt;
+  &lt;i class=&quot;fa fa-fw fa-user&quot;&gt;&lt;/i&gt;
+  &lt;input class=&quot;input-xl&quot; type=&quot;text&quot;&gt;
+  &lt;i class=&quot;fa fa-check&quot;&gt;&lt;/i&gt;
+&lt;/div&gt;
+</code></pre>
+<div class="input-field">
+  <div class="input-icon input-icon-xs">
+    <i class="fa fa-fw fa-user"></i>
+    <input class="input-xs" type="text">
+    <i class="fa fa-check"></i>
+  </div>
+</div>
+
+<div class="input-field">
+  <div class="input-icon input-icon-sm">
+    <i class="fa fa-fw fa-user"></i>
+    <input class="input-sm" type="text">
+    <i class="fa fa-check"></i>
+  </div>
+</div>
+
+<div class="input-field">
+  <div class="input-icon">
+    <i class="fa fa-fw fa-user"></i>
+    <input type="text">
+    <i class="fa fa-check"></i>
+  </div>
+</div>
+
+<div class="input-field">
+  <div class="input-icon input-icon-lg">
+    <i class="fa fa-fw fa-user"></i>
+    <input class="input-lg" type="text">
+    <i class="fa fa-check"></i>
+  </div>
+</div>
+
+<div class="input-field">
+  <div class="input-icon input-icon-xl">
+    <i class="fa fa-fw fa-user"></i>
+    <input class="input-xl" type="text">
+    <i class="fa fa-check"></i>
+  </div>
+</div>
+
 <h3 id="form-groups">Form Groups</h3>
 <p>Related form controls can be grouped in a <code>&lt;fieldset&gt;</code>. An optional <code>&lt;legend&gt;</code> can be used to display a name for the group.</p>
 <pre><code class="lang-html">&lt;fieldset&gt;
@@ -363,53 +547,95 @@
 </code></pre>
 <fieldset>
   <legend>Login</legend>
-  <div class="input-single">
+  <div class="input-field">
     <label>Username</label>
     <input type="text">
   </div>
-  <div class="input-single">
+  <div class="input-field">
     <label>Password</label>
     <input type="password">
   </div>
-  <div class="input-single">
+  <div class="input-field">
     <label>
       <input type="checkbox"> Remember me
     </label>
   </div>
-  <div class="input-single">
+  <div class="input-field">
     <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;
+<p>A form control can be made valid or invalid by adding the <code>input-valid</code> or <code>input-invalid</code> modifiers to the surrounding <code>input-field</code>.</p>
+<pre><code class="lang-html">&lt;div class=&quot;input-field input-valid&quot;&gt;
   &lt;label&gt;Valid&lt;/label&gt;
   &lt;input type=&quot;text&quot;&gt;
 &lt;/div&gt;
 
-&lt;div class=&quot;input-single input-invalid&quot;&gt;
+&lt;div class=&quot;input-field input-invalid&quot;&gt;
   &lt;label&gt;Invalid&lt;/label&gt;
   &lt;input type=&quot;text&quot;&gt;
 &lt;/div&gt;
 </code></pre>
-<div class="two-column">
-  <div class="column">
-    <div class="input-single input-valid">
+<div class="row">
+  <div class="col-12 col-sm-6">
+    <div class="input-field input-valid">
       <label>Valid</label>
       <input type="text">
     </div>
   </div>
-
-  <div class="column">
-    <div class="input-single input-invalid">
+  <div class="col-12 col-sm-6">
+    <div class="input-field input-invalid">
       <label>Invalid</label>
       <input type="text">
     </div>
   </div>
 </div>
 
+<p>Never apply validation modifiers directly to a form control, as some components (e.g. input icons) wrap inputs with additional elements that won’t be able to inherit the correct styles.</p>
+<pre><code class="lang-html">&lt;div class=&quot;input-field input-valid&quot;&gt;
+  &lt;label&gt;Valid with Icons&lt;/label&gt;
+  &lt;div class=&quot;input-icon&quot;&gt;
+    &lt;i class=&quot;fa fa-fw fa-user&quot;&gt;&lt;/i&gt;
+    &lt;input type=&quot;text&quot;&gt;
+    &lt;i class=&quot;fa fa-fw fa-check&quot;&gt;&lt;/i&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;input-field input-invalid&quot;&gt;
+  &lt;label&gt;Invalid with Icons&lt;/label&gt;
+  &lt;div class=&quot;input-icon&quot;&gt;
+    &lt;i class=&quot;fa fa-fw fa-user&quot;&gt;&lt;/i&gt;
+    &lt;input type=&quot;text&quot;&gt;
+    &lt;i class=&quot;fa fa-fw fa-times&quot;&gt;&lt;/i&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</code></pre>
+<div class="row">
+  <div class="col-12 col-sm-6">
+    <div class="input-field input-valid">
+      <label>Valid with Icons</label>
+      <div class="input-icon">
+        <i class="fa fa-fw fa-user"></i>
+        <input type="text">
+        <i class="fa fa-fw fa-check"></i>
+      </div>
     </div>
+  </div>
+  <div class="col-12 col-sm-6">
+    <div class="input-field input-invalid">
+      <label>Invalid with Icons</label>
+      <div class="input-icon">
+        <i class="fa fa-fw fa-user"></i>
+        <input type="text">
+        <i class="fa fa-fw fa-times"></i>
+      </div>
+    </div>
+  </div>
+</div>
+
+        </div>
+      </div>
   </main>
 
   <footer id="foot">
@@ -418,7 +644,7 @@
     </a>
 
     <p class="text-small text-secondary">
-      1.0.0-beta18
+      1.0.0-beta24
     </p>
 
     <p class="mar-y-sm text-center">
@@ -450,6 +676,11 @@
           $(this).addClass('current');
         }
       });
+
+      // Intercept dropdown clicks for the demo
+      $('.dropdown').on('select', function(event) {
+        event.preventDefault();
+      });
     });
   </script>
   <script async defer src="https://buttons.github.io/buttons.js"></script>

docs/grid-system.html

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

docs/icons.html

@@ -20,35 +20,41 @@
         <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>
+  <main class="container">
+    <div class="row">
+      <div class="col-md-3">
+        <ul id="nav">
+          <li><a href="installing.html">Installing</a></li>
+          <li><a href="customizing.html">Customizing</a></li>
+          <li><a href="content.html">Content</a></li>
+          <li><a href="alerts.html">Alerts</a></li>
+          <li><a href="badges.html">Badges</a></li>
+          <li><a href="buttons.html">Buttons</a></li>
+          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="file-buttons.html">File Buttons</a></li>
+          <li><a href="forms.html">Forms</a></li>
+          <li><a href="grid-system.html">Grid System</a></li>
+          <li><a href="loaders.html">Loaders</a></li>
+          <li><a href="progress-bars.html">Progress Bars</a></li>
+          <li><a href="switches.html">Switches</a></li>
+          <li><a href="tabs.html">Tabs</a></li>
+          <li><a href="tables.html">Tables</a></li>
+          <li><a href="utilities.html">Utilities</a></li>
+          <li><a href="icons.html">Icons</a></li>
+          <li><a href="browser-support.html">Browser Support</a></li>
+          <li><a href="attribution.html">Attribution</a></li>
+        </ul>
+      </div>
 
-    <div id="content">
-      <h2 id="icons">Icons</h2>
+      <div class="col-md-9">
+        <div id="content">
+          <h2 id="icons">Icons</h2>
 <p>Shoelace doesn’t bundle its own icons, but you can easily include your favorite library such as <a href="http://fontawesome.io/">Font Awesome</a>. They work superbly together.</p>
 <p>This keeps Shoelace light and makes it more customizable.</p>
 <h3 id="font-awesome">Font Awesome</h3>
@@ -56,7 +62,7 @@
 <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;">
+<div class="input-field text-secondary" style="font-size: 2rem;">
   <i class="fa fa-magic"></i>
   <i class="fa fa-briefcase"></i>
   <i class="fa fa-cog"></i>
@@ -71,7 +77,7 @@
   <i class="fa fa-warning"></i>
 </div>
 
-<div class="input-single">
+<div class="input-field">
   <button type="button"><i class="fa fa-star"></i> Star</button>
   <button type="button" class="button-success"><i class="fa fa-check"></i> Check</button>
   <button type="button" class="button-warning"><i class="fa fa-pencil"></i> Edit</button>
@@ -80,7 +86,8 @@
 
 <p>For your convenience, <a href="http://fontawesome.io/icons/">here’s a full list</a> of icons available in Font Awesome.</p>
 
-    </div>
+        </div>
+      </div>
   </main>
 
   <footer id="foot">
@@ -89,7 +96,7 @@
     </a>
 
     <p class="text-small text-secondary">
-      1.0.0-beta18
+      1.0.0-beta24
     </p>
 
     <p class="mar-y-sm text-center">
@@ -121,6 +128,11 @@
           $(this).addClass('current');
         }
       });
+
+      // Intercept dropdown clicks for the demo
+      $('.dropdown').on('select', function(event) {
+        event.preventDefault();
+      });
     });
   </script>
   <script async defer src="https://buttons.github.io/buttons.js"></script>

docs/installing.html

@@ -19,44 +19,50 @@
         <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>
+  <main class="container">
+    <div class="row">
+      <div class="col-md-3">
+        <ul id="nav">
+          <li><a href="installing.html">Installing</a></li>
+          <li><a href="customizing.html">Customizing</a></li>
+          <li><a href="content.html">Content</a></li>
+          <li><a href="alerts.html">Alerts</a></li>
+          <li><a href="badges.html">Badges</a></li>
+          <li><a href="buttons.html">Buttons</a></li>
+          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="file-buttons.html">File Buttons</a></li>
+          <li><a href="forms.html">Forms</a></li>
+          <li><a href="grid-system.html">Grid System</a></li>
+          <li><a href="loaders.html">Loaders</a></li>
+          <li><a href="progress-bars.html">Progress Bars</a></li>
+          <li><a href="switches.html">Switches</a></li>
+          <li><a href="tabs.html">Tabs</a></li>
+          <li><a href="tables.html">Tables</a></li>
+          <li><a href="utilities.html">Utilities</a></li>
+          <li><a href="icons.html">Icons</a></li>
+          <li><a href="browser-support.html">Browser Support</a></li>
+          <li><a href="attribution.html">Attribution</a></li>
+        </ul>
+      </div>
 
-    <div id="content">
-      <h2 id="installing">Installing</h2>
+      <div class="col-md-9">
+        <div id="content">
+          <h2 id="installing">Installing</h2>
 <p>There are two ways to use Shoelace. If you want to get things up and running quickly, use the <code>dist/</code> version or the <a href="#cdn">CDN version</a>. This version isn’t customizable, nor can you use future CSS features with it. It’s primarily intended for prototyping.</p>
 <p>If you’re developing a production app, you should <a href="#building-from-source">build Shoelace from source</a>. This version is completely customizable, modular, and let’s you use future CSS features <em>today</em>.</p>
 <p><strong>Note:</strong> To make certain components interactive (e.g. dropdowns and tabs), you’ll need to load <a href="https://cdnjs.com/libraries/jquery/">jQuery</a> or <a href="https://cdnjs.com/libraries/zepto/">Zepto</a> before <code>shoelace.js</code>.</p>
 <h3 id="cdn">CDN</h3>
 <p>This is the best approach for prototyping, however, this version isn’t customizable and doesn’t support future CSS features. To load Shoelace via CDN, add this to your <code>&lt;head&gt;</code>:</p>
-<pre><code class="lang-html">&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.shoelace.style/1.0.0-beta18/shoelace.css&quot;&gt;
+<pre><code class="lang-html">&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.shoelace.style/1.0.0-beta24/shoelace.css&quot;&gt;
 </code></pre>
 <p>And this before <code>&lt;/body&gt;</code> but after jQuery/Zepto:</p>
-<pre><code class="lang-html">&lt;script src=&quot;https://cdn.shoelace.style/1.0.0-beta18/shoelace.js&quot;&gt;&lt;/script&gt;
+<pre><code class="lang-html">&lt;script src=&quot;https://cdn.shoelace.style/1.0.0-beta24/shoelace.js&quot;&gt;&lt;/script&gt;
 </code></pre>
 <p>This service is provided free, courtesy of <a href="https://keycdn.com/">KeyCDN</a>.</p>
 <h3 id="building-from-source">Building From Source</h3>
@@ -65,9 +71,11 @@
 <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>
+<p>The main source file is <a href="../source/css/shoelace.css"><code>source/css/shoelace.css</code></a>. This bootstraps the entire project by importing core variables and all of Shoelace’s components.</p>
+<p>If you don’t need everything, just load <a href="../source/css/variables.css"><code>source/css/variables.css</code></a> along with the components you want.</p>
 
-    </div>
+        </div>
+      </div>
   </main>
 
   <footer id="foot">
@@ -76,7 +84,7 @@
     </a>
 
     <p class="text-small text-secondary">
-      1.0.0-beta18
+      1.0.0-beta24
     </p>
 
     <p class="mar-y-sm text-center">
@@ -108,6 +116,11 @@
           $(this).addClass('current');
         }
       });
+
+      // Intercept dropdown clicks for the demo
+      $('.dropdown').on('select', function(event) {
+        event.preventDefault();
+      });
     });
   </script>
   <script async defer src="https://buttons.github.io/buttons.js"></script>

docs/loaders.html

@@ -19,35 +19,41 @@
         <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>
+  <main class="container">
+    <div class="row">
+      <div class="col-md-3">
+        <ul id="nav">
+          <li><a href="installing.html">Installing</a></li>
+          <li><a href="customizing.html">Customizing</a></li>
+          <li><a href="content.html">Content</a></li>
+          <li><a href="alerts.html">Alerts</a></li>
+          <li><a href="badges.html">Badges</a></li>
+          <li><a href="buttons.html">Buttons</a></li>
+          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="file-buttons.html">File Buttons</a></li>
+          <li><a href="forms.html">Forms</a></li>
+          <li><a href="grid-system.html">Grid System</a></li>
+          <li><a href="loaders.html">Loaders</a></li>
+          <li><a href="progress-bars.html">Progress Bars</a></li>
+          <li><a href="switches.html">Switches</a></li>
+          <li><a href="tabs.html">Tabs</a></li>
+          <li><a href="tables.html">Tables</a></li>
+          <li><a href="utilities.html">Utilities</a></li>
+          <li><a href="icons.html">Icons</a></li>
+          <li><a href="browser-support.html">Browser Support</a></li>
+          <li><a href="attribution.html">Attribution</a></li>
+        </ul>
+      </div>
 
-    <div id="content">
-      <h2 id="loaders">Loaders</h2>
+      <div class="col-md-9">
+        <div id="content">
+          <h2 id="loaders">Loaders</h2>
 <p>Create a pure CSS loader by applying the <code>loader</code> class to an empty <code>&lt;span&gt;</code> element. You can use the <code>loader-xs|sm|lg|xl</code> modifiers to change the size.</p>
 <pre><code class="lang-html">&lt;span class=&quot;loader loader-xs&quot;&gt;&lt;/span&gt;
 &lt;span class=&quot;loader loader-sm&quot;&gt;&lt;/span&gt;
@@ -55,7 +61,7 @@
 &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">
+<div class="input-field">
   <span class="loader loader-xs"></span>
   <span class="loader loader-sm"></span>
   <span class="loader"></span>
@@ -116,7 +122,8 @@
   <div class="loader-bg loader-bg-dark"></div>
 </div>
 
-    </div>
+        </div>
+      </div>
   </main>
 
   <footer id="foot">
@@ -125,7 +132,7 @@
     </a>
 
     <p class="text-small text-secondary">
-      1.0.0-beta18
+      1.0.0-beta24
     </p>
 
     <p class="mar-y-sm text-center">
@@ -157,6 +164,11 @@
           $(this).addClass('current');
         }
       });
+
+      // Intercept dropdown clicks for the demo
+      $('.dropdown').on('select', function(event) {
+        event.preventDefault();
+      });
     });
   </script>
   <script async defer src="https://buttons.github.io/buttons.js"></script>

docs/progress-bars.html

@@ -19,35 +19,41 @@
         <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>
+  <main class="container">
+    <div class="row">
+      <div class="col-md-3">
+        <ul id="nav">
+          <li><a href="installing.html">Installing</a></li>
+          <li><a href="customizing.html">Customizing</a></li>
+          <li><a href="content.html">Content</a></li>
+          <li><a href="alerts.html">Alerts</a></li>
+          <li><a href="badges.html">Badges</a></li>
+          <li><a href="buttons.html">Buttons</a></li>
+          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="file-buttons.html">File Buttons</a></li>
+          <li><a href="forms.html">Forms</a></li>
+          <li><a href="grid-system.html">Grid System</a></li>
+          <li><a href="loaders.html">Loaders</a></li>
+          <li><a href="progress-bars.html">Progress Bars</a></li>
+          <li><a href="switches.html">Switches</a></li>
+          <li><a href="tabs.html">Tabs</a></li>
+          <li><a href="tables.html">Tables</a></li>
+          <li><a href="utilities.html">Utilities</a></li>
+          <li><a href="icons.html">Icons</a></li>
+          <li><a href="browser-support.html">Browser Support</a></li>
+          <li><a href="attribution.html">Attribution</a></li>
+        </ul>
+      </div>
 
-    <div id="content">
-      <h2 id="progress-bars">Progress Bars</h2>
+      <div class="col-md-9">
+        <div id="content">
+          <h2 id="progress-bars">Progress Bars</h2>
 <p>HTML5 introduced the <code>&lt;progress&gt;</code> element, but it’s not currently possible to style consistently in all browsers. As a result, Shoelace offers a custom alternative.</p>
 <p>Create a progress bar with the following markup. Use the <code>progress-[xs|sm|lg|xl]</code> modifiers to change the size. To set the state, use a <a href="utilities.html#sizing-utilities">sizing utility</a> or set the width explicitly on the <code>progress-bar</code> element.</p>
 <p>An optional text label can be included inside the <code>progress-bar</code> element.</p>
@@ -158,7 +164,8 @@
   <div class="progress-bar w-50">50%</div>
 </div>
 
-    </div>
+        </div>
+      </div>
   </main>
 
   <footer id="foot">
@@ -167,7 +174,7 @@
     </a>
 
     <p class="text-small text-secondary">
-      1.0.0-beta18
+      1.0.0-beta24
     </p>
 
     <p class="mar-y-sm text-center">
@@ -199,6 +206,11 @@
           $(this).addClass('current');
         }
       });
+
+      // Intercept dropdown clicks for the demo
+      $('.dropdown').on('select', function(event) {
+        event.preventDefault();
+      });
     });
   </script>
   <script async defer src="https://buttons.github.io/buttons.js"></script>

docs/switches.html

@@ -19,35 +19,41 @@
         <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>
+  <main class="container">
+    <div class="row">
+      <div class="col-md-3">
+        <ul id="nav">
+          <li><a href="installing.html">Installing</a></li>
+          <li><a href="customizing.html">Customizing</a></li>
+          <li><a href="content.html">Content</a></li>
+          <li><a href="alerts.html">Alerts</a></li>
+          <li><a href="badges.html">Badges</a></li>
+          <li><a href="buttons.html">Buttons</a></li>
+          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="file-buttons.html">File Buttons</a></li>
+          <li><a href="forms.html">Forms</a></li>
+          <li><a href="grid-system.html">Grid System</a></li>
+          <li><a href="loaders.html">Loaders</a></li>
+          <li><a href="progress-bars.html">Progress Bars</a></li>
+          <li><a href="switches.html">Switches</a></li>
+          <li><a href="tabs.html">Tabs</a></li>
+          <li><a href="tables.html">Tables</a></li>
+          <li><a href="utilities.html">Utilities</a></li>
+          <li><a href="icons.html">Icons</a></li>
+          <li><a href="browser-support.html">Browser Support</a></li>
+          <li><a href="attribution.html">Attribution</a></li>
+        </ul>
+      </div>
 
-    <div id="content">
-      <h2 id="switches">Switches</h2>
+      <div class="col-md-9">
+        <div id="content">
+          <h2 id="switches">Switches</h2>
 <p>Switches provide an alternative to standard checkboxes. Many people find them more intuitive and easier to use, especially on mobile devices. Shoelace provides a way to create beautiful, animated switches with pure CSS.</p>
 <p>Because this is a pure CSS solution, there are a couple important things to remember:</p>
 <ul>
@@ -57,89 +63,89 @@
 </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;input type=&quot;checkbox&quot; id=&quot;switch-1&quot;&gt;
   &lt;label for=&quot;switch-1&quot;&gt;Switch 1&lt;/label&gt;
 &lt;/span&gt;
 
 &lt;span class=&quot;switch&quot;&gt;
-  &lt;input type=&quot;checkbox&quot; class=&quot;switch&quot; id=&quot;switch-2&quot; checked&gt;
+  &lt;input type=&quot;checkbox&quot; id=&quot;switch-2&quot; checked&gt;
   &lt;label for=&quot;switch-2&quot;&gt;Switch 2&lt;/label&gt;
 &lt;/span&gt;
 </code></pre>
-<div class="input-single">
+<div class="input-field">
   <span class="switch">
-    <input type="checkbox" class="switch" id="switch-1">
+    <input type="checkbox" id="switch-1">
     <label for="switch-1">Switch 1</label>
   </span>
 
   <span class="switch">
-    <input type="checkbox" class="switch" id="switch-2" checked>
+    <input type="checkbox" id="switch-2" checked>
     <label for="switch-2">Switch 2</label>
   </span>
 </div>
 
 <p>Use the <code>switch-[xs|sm|lg|xl]</code> modifiers to change the size of a switch.</p>
 <pre><code class="lang-html">&lt;span class=&quot;switch switch-xs&quot;&gt;
-  &lt;input type=&quot;checkbox&quot; class=&quot;switch&quot; id=&quot;switch-xs&quot;&gt;
+  &lt;input type=&quot;checkbox&quot; id=&quot;switch-xs&quot;&gt;
   &lt;label for=&quot;switch-xs&quot;&gt;XS&lt;/label&gt;
 &lt;/span&gt;
 
 &lt;span class=&quot;switch switch-sm&quot;&gt;
-  &lt;input type=&quot;checkbox&quot; class=&quot;switch&quot; id=&quot;switch-sm&quot;&gt;
+  &lt;input type=&quot;checkbox&quot; id=&quot;switch-sm&quot;&gt;
   &lt;label for=&quot;switch-sm&quot;&gt;SM&lt;/label&gt;
 &lt;/span&gt;
 
 &lt;span class=&quot;switch&quot;&gt;
-  &lt;input type=&quot;checkbox&quot; class=&quot;switch&quot; id=&quot;switch-default&quot;&gt;
+  &lt;input type=&quot;checkbox&quot; id=&quot;switch-default&quot;&gt;
   &lt;label for=&quot;switch-default&quot;&gt;Default&lt;/label&gt;
 &lt;/span&gt;
 
 &lt;span class=&quot;switch switch-lg&quot;&gt;
-  &lt;input type=&quot;checkbox&quot; class=&quot;switch&quot; id=&quot;switch-lg&quot;&gt;
+  &lt;input type=&quot;checkbox&quot; id=&quot;switch-lg&quot;&gt;
   &lt;label for=&quot;switch-lg&quot;&gt;LG&lt;/label&gt;
 &lt;/span&gt;
 
 &lt;span class=&quot;switch switch-xl&quot;&gt;
-  &lt;input type=&quot;checkbox&quot; class=&quot;switch&quot; id=&quot;switch-xl&quot;&gt;
+  &lt;input type=&quot;checkbox&quot; id=&quot;switch-xl&quot;&gt;
   &lt;label for=&quot;switch-xl&quot;&gt;XL&lt;/label&gt;
 &lt;/span&gt;
 </code></pre>
-<div class="input-single">
+<div class="input-field">
   <span class="switch switch-xs">
-    <input type="checkbox" class="switch" id="switch-xs">
+    <input type="checkbox" id="switch-xs">
     <label for="switch-xs">XS</label>
   </span>
 
   <span class="switch switch-sm">
-    <input type="checkbox" class="switch" id="switch-sm">
+    <input type="checkbox" id="switch-sm">
     <label for="switch-sm">SM</label>
   </span>
 
   <span class="switch">
-    <input type="checkbox" class="switch" id="switch-default">
+    <input type="checkbox" id="switch-default">
     <label for="switch-default">Default</label>
   </span>
 
   <span class="switch switch-lg">
-    <input type="checkbox" class="switch" id="switch-lg">
+    <input type="checkbox" id="switch-lg">
     <label for="switch-lg">LG</label>
   </span>
 
   <span class="switch switch-xl">
-    <input type="checkbox" class="switch" id="switch-xl">
+    <input type="checkbox" id="switch-xl">
     <label for="switch-xl">XL</label>
   </span>
 </div>
 
 <p>Disabled switches are dimmed out. To disable a switch, add the <code>disabled</code> attribute to the checkbox (not the wrapper).</p>
 <pre><code class="lang-html">&lt;span class=&quot;switch&quot;&gt;
-  &lt;input type=&quot;checkbox&quot; class=&quot;switch&quot; disabled id=&quot;switch-disabled&quot;&gt;
+  &lt;input type=&quot;checkbox&quot; disabled id=&quot;switch-disabled&quot;&gt;
   &lt;label for=&quot;switch-disabled&quot;&gt;Disabled&lt;/label&gt;
 &lt;/span&gt;
 </code></pre>
-<div class="input-single">
+<div class="input-field">
   <span class="switch">
-    <input type="checkbox" class="switch" disabled id="switch-disabled">
+    <input type="checkbox" disabled id="switch-disabled">
     <label for="switch-disabled">Disabled</label>
   </span>
 </div>
@@ -156,35 +162,36 @@
 &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>
+  <input type="checkbox" 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>
+  <input type="checkbox" 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>
+  <input type="checkbox" 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>
+  <input type="checkbox" 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>
+  <input type="checkbox" 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>
+  <input type="checkbox" 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>
+  <input type="checkbox" id="variation-dark" checked>
   <label for="variation-dark">Dark</label>
 </span></p>
 
-    </div>
+        </div>
+      </div>
   </main>
 
   <footer id="foot">
@@ -193,7 +200,7 @@
     </a>
 
     <p class="text-small text-secondary">
-      1.0.0-beta18
+      1.0.0-beta24
     </p>
 
     <p class="mar-y-sm text-center">
@@ -225,6 +232,11 @@
           $(this).addClass('current');
         }
       });
+
+      // Intercept dropdown clicks for the demo
+      $('.dropdown').on('select', function(event) {
+        event.preventDefault();
+      });
     });
   </script>
   <script async defer src="https://buttons.github.io/buttons.js"></script>

docs/tables.html

@@ -19,35 +19,41 @@
         <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>
+  <main class="container">
+    <div class="row">
+      <div class="col-md-3">
+        <ul id="nav">
+          <li><a href="installing.html">Installing</a></li>
+          <li><a href="customizing.html">Customizing</a></li>
+          <li><a href="content.html">Content</a></li>
+          <li><a href="alerts.html">Alerts</a></li>
+          <li><a href="badges.html">Badges</a></li>
+          <li><a href="buttons.html">Buttons</a></li>
+          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="file-buttons.html">File Buttons</a></li>
+          <li><a href="forms.html">Forms</a></li>
+          <li><a href="grid-system.html">Grid System</a></li>
+          <li><a href="loaders.html">Loaders</a></li>
+          <li><a href="progress-bars.html">Progress Bars</a></li>
+          <li><a href="switches.html">Switches</a></li>
+          <li><a href="tabs.html">Tabs</a></li>
+          <li><a href="tables.html">Tables</a></li>
+          <li><a href="utilities.html">Utilities</a></li>
+          <li><a href="icons.html">Icons</a></li>
+          <li><a href="browser-support.html">Browser Support</a></li>
+          <li><a href="attribution.html">Attribution</a></li>
+        </ul>
+      </div>
 
-    <div id="content">
-      <h2 id="tables">Tables</h2>
+      <div class="col-md-9">
+        <div id="content">
+          <h2 id="tables">Tables</h2>
 <p>Tables are styled for you automatically — no special classes required.</p>
 <pre><code class="lang-html">&lt;table&gt;
   &lt;thead&gt;
@@ -127,7 +133,8 @@
   </tbody>
 </table>
 
-    </div>
+        </div>
+      </div>
   </main>
 
   <footer id="foot">
@@ -136,7 +143,7 @@
     </a>
 
     <p class="text-small text-secondary">
-      1.0.0-beta18
+      1.0.0-beta24
     </p>
 
     <p class="mar-y-sm text-center">
@@ -168,6 +175,11 @@
           $(this).addClass('current');
         }
       });
+
+      // Intercept dropdown clicks for the demo
+      $('.dropdown').on('select', function(event) {
+        event.preventDefault();
+      });
     });
   </script>
   <script async defer src="https://buttons.github.io/buttons.js"></script>

docs/tabs.html

@@ -19,38 +19,44 @@
         <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>
+  <main class="container">
+    <div class="row">
+      <div class="col-md-3">
+        <ul id="nav">
+          <li><a href="installing.html">Installing</a></li>
+          <li><a href="customizing.html">Customizing</a></li>
+          <li><a href="content.html">Content</a></li>
+          <li><a href="alerts.html">Alerts</a></li>
+          <li><a href="badges.html">Badges</a></li>
+          <li><a href="buttons.html">Buttons</a></li>
+          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="file-buttons.html">File Buttons</a></li>
+          <li><a href="forms.html">Forms</a></li>
+          <li><a href="grid-system.html">Grid System</a></li>
+          <li><a href="loaders.html">Loaders</a></li>
+          <li><a href="progress-bars.html">Progress Bars</a></li>
+          <li><a href="switches.html">Switches</a></li>
+          <li><a href="tabs.html">Tabs</a></li>
+          <li><a href="tables.html">Tables</a></li>
+          <li><a href="utilities.html">Utilities</a></li>
+          <li><a href="icons.html">Icons</a></li>
+          <li><a href="browser-support.html">Browser Support</a></li>
+          <li><a href="attribution.html">Attribution</a></li>
+        </ul>
+      </div>
 
-    <div id="content">
-      <h2 id="tabs">Tabs</h2>
+      <div class="col-md-9">
+        <div id="content">
+          <h2 id="tabs">Tabs</h2>
 <p>Tab sets can be created using the markup below. By default, Shoelace renders tabs as pills because they respond better than traditional tabs when rendered on smaller screens.</p>
-<p>Note the class names used for the main container, the 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>
+<p>Note the class names used for the main container, the tabs, and the tab panes. Also note that each tab links to its respective tab pane’s <code>id</code>.</p>
+<p>For initial rendering, make sure the appropriate tab and tab pane have the <code>active</code> class.</p>
 <pre><code class="lang-html">&lt;div class=&quot;tabs&quot;&gt;
   &lt;nav class=&quot;tabs-nav&quot;&gt;
     &lt;a href=&quot;#tab-1&quot; class=&quot;active&quot;&gt;Tab 1&lt;/a&gt;
@@ -109,60 +115,68 @@
 </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%;
-}
+<p>Tabs can be made vertical when used with the <a href="grid-system.html">grid system</a> and <code>tabs-nav-block</code>.</p>
+<pre><code class="lang-html">&lt;div class=&quot;tabs&quot;&gt;
+  &lt;div class=&quot;row&quot;&gt;
+    &lt;div class=&quot;col-4&quot;&gt;
+      &lt;nav class=&quot;tabs-nav tabs-nav-block&quot;&gt;
+        &lt;a href=&quot;#tab-1-example-2&quot; class=&quot;active&quot;&gt;Tab 1&lt;/a&gt;
+        &lt;a href=&quot;#tab-2-example-2&quot;&gt;Tab 2&lt;/a&gt;
+        &lt;a href=&quot;#tab-3-example-2&quot;&gt;Tab 3&lt;/a&gt;
+        &lt;a href=&quot;#&quot; class=&quot;disabled&quot;&gt;Disabled&lt;/a&gt;
+      &lt;/nav&gt;
+    &lt;/div&gt;
 
-.tabs-vertical-example .tabs-nav {
-  padding-right: 2rem;
-}
-
-.tabs-vertical-example .tabs-nav a {
-  display: block;
-}
+    &lt;div class=&quot;col-8&quot;&gt;
+      &lt;div class=&quot;tabs-pane active&quot; id=&quot;tab-1-example-2&quot;&gt;...&lt;/div&gt;
+      &lt;div class=&quot;tabs-pane&quot; id=&quot;tab-2-example-2&quot;&gt;...&lt;/div&gt;
+      &lt;div class=&quot;tabs-pane&quot; id=&quot;tab-3-example-2&quot;&gt;...&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
 </code></pre>
-<div class="tabs 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 class="tabs">
+  <div class="row">
+    <div class="col-4">
+      <nav class="tabs-nav tabs-nav-block">
+        <a href="#tab-1-example-2" class="active">Tab 1</a>
+        <a href="#tab-2-example-2">Tab 2</a>
+        <a href="#tab-3-example-2">Tab 3</a>
+        <a href="#" class="disabled">Disabled</a>
+      </nav>
+    </div>
+    <div class="col-8">
+      <div class="tabs-pane active" id="tab-1-example-2">
+        <h3>Tab 1</h3>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui repellat ea magni magnam
+          assumenda voluptas accusantium nemo. Iusto beatae illum mollitia aut quasi odit facilis
+          officiis, laudantium debitis! Excepturi, quis!
+        </p>
+      </div>
+      <div class="tabs-pane" id="tab-2-example-2">
+        <h3>Tab 2</h3>
+        <p>
+          Atque eius voluptatibus ipsa ex totam odit, quidem illo distinctio sit! Quod quae minus,
+          aut itaque. Mollitia, dolore! Facere molestiae necessitatibus sint recusandae incidunt
+          pariatur labore iste vel, velit odit.
+        </p>
+      </div>
+      <div class="tabs-pane" id="tab-3-example-2">
+        <h3>Tab 3</h3>
+        <p>
+          Aperiam asperiores optio iusto qui nisi, perspiciatis, ipsum, tenetur explicabo earum et
+          laboriosam odit magni maxime quos molestias aspernatur laudantium harum placeat tempora
+          quae necessitatibus, aut dignissimos totam non! Quod.
+        </p>
+      </div>
+    </div>
   </div>
 </div>
 
-<h3 id="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>
+<h3 id="interactivity">Interactivity</h3>
+<p>Tabs require <code>shoelace.js</code> for interactivity. You don’t need to initialize anything. Just include the script and everything “just works.”</p>
+<p>There is no JavaScript API. Shoelace’s philosophy believes that custom components should act like native components as much as possible. You can, however, listen for various events.</p>
 <ul>
 <li><code>show</code> – Fires when a tab is shown. The second callback argument is a reference to the respective tab pane.</li>
 <li><code>hide</code> – Fires when a tab is hidden. The second callback argument is a reference to the respective tab pane.</li>
@@ -176,8 +190,13 @@
     console.log(&#39;hide&#39;, event.target, tabPane);
   });
 </code></pre>
+<p>To activate a tab programmatically, just add the <code>active</code> class to it. We use a <a href="https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver">mutation observer</a> to remove the active class on other tabs and to show/hide the appropriate tab panes automatically.</p>
+<pre><code class="lang-javascript">$(&#39;#tab-id&#39;).addClass(&#39;active&#39;);
+</code></pre>
+<p>To disable a tab, add the <code>disabled</code> class to the appropriate tab.</p>
 
-    </div>
+        </div>
+      </div>
   </main>
 
   <footer id="foot">
@@ -186,7 +205,7 @@
     </a>
 
     <p class="text-small text-secondary">
-      1.0.0-beta18
+      1.0.0-beta24
     </p>
 
     <p class="mar-y-sm text-center">
@@ -218,6 +237,11 @@
           $(this).addClass('current');
         }
       });
+
+      // Intercept dropdown clicks for the demo
+      $('.dropdown').on('select', function(event) {
+        event.preventDefault();
+      });
     });
   </script>
   <script async defer src="https://buttons.github.io/buttons.js"></script>

docs/utilities.html

@@ -19,38 +19,157 @@
         <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>
+  <main class="container">
+    <div class="row">
+      <div class="col-md-3">
+        <ul id="nav">
+          <li><a href="installing.html">Installing</a></li>
+          <li><a href="customizing.html">Customizing</a></li>
+          <li><a href="content.html">Content</a></li>
+          <li><a href="alerts.html">Alerts</a></li>
+          <li><a href="badges.html">Badges</a></li>
+          <li><a href="buttons.html">Buttons</a></li>
+          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="file-buttons.html">File Buttons</a></li>
+          <li><a href="forms.html">Forms</a></li>
+          <li><a href="grid-system.html">Grid System</a></li>
+          <li><a href="loaders.html">Loaders</a></li>
+          <li><a href="progress-bars.html">Progress Bars</a></li>
+          <li><a href="switches.html">Switches</a></li>
+          <li><a href="tabs.html">Tabs</a></li>
+          <li><a href="tables.html">Tables</a></li>
+          <li><a href="utilities.html">Utilities</a></li>
+          <li><a href="icons.html">Icons</a></li>
+          <li><a href="browser-support.html">Browser Support</a></li>
+          <li><a href="attribution.html">Attribution</a></li>
+        </ul>
+      </div>
 
-    <div id="content">
-      <h2 id="utilities">Utilities</h2>
-<p>Shoelace provides a number of helpful utility classes that make prototyping easier.</p>
+      <div class="col-md-9">
+        <div id="content">
+          <h2 id="utilities">Utilities</h2>
+<p>Shoelace provides a number of helpful utilities that make designing and prototyping easier.</p>
+<h3 id="background-utilities">Background Utilities</h3>
+<p>Background utilities can be applied to change an element’s background color.</p>
+<pre><code class="lang-html">&lt;div class=&quot;bg-primary&quot;&gt;Primary&lt;/div&gt;
+&lt;div class=&quot;bg-secondary&quot;&gt;Secondary&lt;/div&gt;
+&lt;div class=&quot;bg-success&quot;&gt;Success&lt;/div&gt;
+&lt;div class=&quot;bg-info&quot;&gt;Info&lt;/div&gt;
+&lt;div class=&quot;bg-warning&quot;&gt;Warning&lt;/div&gt;
+&lt;div class=&quot;bg-danger&quot;&gt;Danger&lt;/div&gt;
+&lt;div class=&quot;bg-light&quot;&gt;Light&lt;/div&gt;
+&lt;div class=&quot;bg-dark&quot;&gt;Dark&lt;/div&gt;
+</code></pre>
+<div class="mar-b-sm pad-sm bg-primary text-light">Primary</div>
+<div class="mar-b-sm pad-sm bg-secondary text-light">Secondary</div>
+<div class="mar-b-sm pad-sm bg-success text-light">Success</div>
+<div class="mar-b-sm pad-sm bg-info text-light">Info</div>
+<div class="mar-b-sm pad-sm bg-warning text-light">Warning</div>
+<div class="mar-b-sm pad-sm bg-danger text-light">Danger</div>
+<div class="mar-b-sm pad-sm bg-light text-dark">Light</div>
+<div class="mar-b-sm pad-sm bg-dark text-light">Dark</div>
+
+<h3 id="breakpoint-utilities">Breakpoint Utilities</h3>
+<p>Responsive breakpoints exist for five tiers of screen sizes. By default, the breakpoints are:</p>
+<ul>
+<li><code>xs</code> &rarr; 575px and below</li>
+<li><code>sm</code> &rarr; 576px – 767px</li>
+<li><code>md</code> &rarr; 768px – 991px</li>
+<li><code>lg</code> &rarr; 992px - 1199px</li>
+<li><code>xl</code> &rarr; 1200px and above</li>
+</ul>
+<p>If you’re building Shoelace from source, you can use the custom media queries found in <a href="../source/css/variables.css"><code>source/css/variables.css</code></a> to easily target various breakpoints without hard-coding screen sizes in your stylesheet.</p>
+<pre><code class="lang-css">@media (--breakpoint-xs-up) { /* xs screens and above */ }
+@media (--breakpoint-sm-up) { /* sm screens and above */ }
+@media (--breakpoint-md-up) { /* md screens and above */ }
+@media (--breakpoint-lg-up) { /* lg screens and above */ }
+@media (--breakpoint-xl-up) { /* xl screens and above */ }
+
+@media (--breakpoint-xs-down) { /* xs screens and below */ }
+@media (--breakpoint-sm-down) { /* sm screens and below */ }
+@media (--breakpoint-md-down) { /* md screens and below */ }
+@media (--breakpoint-lg-down) { /* lg screens and below */ }
+@media (--breakpoint-xl-down) { /* xl screens and below */ }
+
+@media (--breakpoint-xs-only) { /* xs screens only */ }
+@media (--breakpoint-sm-only) { /* sm screens only */ }
+@media (--breakpoint-md-only) { /* md screens only */ }
+@media (--breakpoint-lg-only) { /* lg screens only */ }
+@media (--breakpoint-xl-only) { /* xl screens only */ }
+</code></pre>
+<h3 id="display-utilities">Display Utilities</h3>
+<p>Display utilities let you hide elements based on the current breakpoint. Use <code>hide-[xs|sm|md|lg|xl]</code> to hide an element only at a specific viewport. Use <code>hide-*-up</code> to hide an element at and above a specific breakpoint. Use <code>hide-*-down</code> to hide an element at and below a specific breakpoint.</p>
+<pre><code class="lang-html">&lt;div class=&quot;row&quot;&gt;
+  &lt;div class=&quot;col-2 hide-xs&quot;&gt;hide-xs&lt;/div&gt;
+  &lt;div class=&quot;col-2 hide-sm&quot;&gt;hide-sm&lt;/div&gt;
+  &lt;div class=&quot;col-2 hide-md&quot;&gt;hide-md&lt;/div&gt;
+  &lt;div class=&quot;col-2 hide-lg&quot;&gt;hide-lg&lt;/div&gt;
+  &lt;div class=&quot;col-2 hide-xl&quot;&gt;hide-xl&lt;/div&gt;
+&lt;/div&gt;
+</code></pre>
+<div class="container grid-example">
+  <div class="row">
+    <div class="col-2 hide-xs">hide-xs</div>
+    <div class="col-2 hide-sm">hide-sm</div>
+    <div class="col-2 hide-md">hide-md</div>
+    <div class="col-2 hide-lg">hide-lg</div>
+    <div class="col-2 hide-xl">hide-xl</div>
+  </div>
+</div>
+
+<h3 id="float-utilities">Float Utilities</h3>
+<p>Float utilities are provided to easily float elements to the left or right. Just apply the <code>float-left</code> or <code>float-right</code> class to an element to float it left or right.</p>
+<p>A clearfix utility is also available to clear floated elements. Just apply the <code>clearfix</code> class to the appropriate element.</p>
+<h3 id="sizing-utilities">Sizing Utilities</h3>
+<p>Sizing utilities can be used to set a relative width or height on any element. Just apply a <code>w-*</code> or <code>h-*</code> class and the appropriate element will be sized accordingly. Sizes are available as percentages from 0 – 100 in multiples of five.</p>
+<p>You can also use the <code>w-max-100</code> and <code>h-max-100</code> classes to set a max width and height of 100%.</p>
+<pre><code class="lang-html">&lt;div class=&quot;w-25&quot;&gt;25%&lt;/div&gt;
+&lt;div class=&quot;w-50&quot;&gt;50%&lt;/div&gt;
+&lt;div class=&quot;w-75&quot;&gt;75%&lt;/div&gt;
+&lt;div class=&quot;w-100&quot;&gt;100%&lt;/div&gt;
+
+&lt;div class=&quot;h-25&quot;&gt;25%&lt;/div&gt;
+&lt;div class=&quot;h-50&quot;&gt;50%&lt;/div&gt;
+&lt;div class=&quot;h-75&quot;&gt;75%&lt;/div&gt;
+&lt;div class=&quot;h-100&quot;&gt;100%&lt;/div&gt;
+</code></pre>
+<div class="width-sizing-example">
+  <div class="w-25">25%</div>
+  <div class="w-50">50%</div>
+  <div class="w-75">75%</div>
+  <div class="w-100">100%</div>
+</div>
+
+<div class="height-sizing-example">
+  <div class="h-25">25%</div>
+  <div class="h-50">50%</div>
+  <div class="h-75">75%</div>
+  <div class="h-100">100%</div>
+</div>
+
+<h3 id="spacing-utilities">Spacing Utilities</h3>
+<p>Spacing utilities can be used to add or remove paddings and margins to any element. Just apply the desired class and the appropriate element will receive the respective padding/margin.</p>
+<p>Class names are prefixed with <code>pad-</code> or <code>mar-</code> for padding and margin, respectively. To apply spacing to all sides of an element, use the following classes.</p>
+<pre><code>pad-[0|xs|sm|md|lg|xl]
+mar-[0|xs|sm|md|lg|xl]
+</code></pre><p>Example:</p>
+<pre><code class="lang-html">&lt;div class=&quot;pad-0 mar-xl&quot;&gt;
+</code></pre>
+<p>To apply spacing to a specific side of an element, use one or more of the following classes indicating top, right, bottom, left, x (horizontal), and y (vertical):</p>
+<pre><code>pad-[t|r|b|l|x|y]-[0|xs|sm|md|lg|xl]
+mar-[t|r|b|l|x|y]-[0|xs|sm|md|lg|xl]
+</code></pre><p>Example:</p>
+<pre><code class="lang-html">&lt;div class=&quot;pad-l-md mar-b-0&quot;&gt;
+</code></pre>
+<p>You can also use <code>mar-[x|y|xy]-auto</code> to set automatic margins horizontally and/or vertically.</p>
 <h3 id="text-utilities">Text Utilities</h3>
-<p>Text utility classes can be applied to change an element’s text.</p>
+<p>Text utility classes can be applied to change the appearance of text.</p>
 <table class="table">
   <thead>
     <tr>
@@ -103,6 +222,10 @@
       <td><code>text-italic</code></td>
       <td class="text-italic">This is italic text</td>
     </tr>
+    <tr>
+      <td><code>text-muted</code></td>
+      <td class="text-muted">This is muted text</td>
+    </tr>
     <tr>
       <td><code>text-left</code></td>
       <td class="text-left">This is left-aligned text</td>
@@ -138,73 +261,8 @@
   </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>
+        </div>
+      </div>
   </main>
 
   <footer id="foot">
@@ -213,7 +271,7 @@ mar-[t|r|b|l|x|y]-[0|xs|sm|md|lg|xl]
     </a>
 
     <p class="text-small text-secondary">
-      1.0.0-beta18
+      1.0.0-beta24
     </p>
 
     <p class="mar-y-sm text-center">
@@ -245,6 +303,11 @@ mar-[t|r|b|l|x|y]-[0|xs|sm|md|lg|xl]
           $(this).addClass('current');
         }
       });
+
+      // Intercept dropdown clicks for the demo
+      $('.dropdown').on('select', function(event) {
+        event.preventDefault();
+      });
     });
   </script>
   <script async defer src="https://buttons.github.io/buttons.js"></script>

index.html

@@ -21,65 +21,73 @@
     </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>
+  <main class="container">
+    <div class="row">
+      <div class="col-lg-8 offset-lg-2">
+        <p>
+          Shoelace.css is a lightweight, forward-thinking CSS library built with future CSS syntax.
+          It’s easy to use and highly customizable. 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>
+          You can use Shoelace with just about any browser. The CDN version is great for
+          prototyping, but to take advantage of all its features you should
+          <a href="docs/installing.html#building-from-source">build Shoelace from source</a>.
+        </p>
 
-      <p>
-        Here is the CSS you <em>could</em> be writing:
-      </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%));
+  /* CSS variables */
+  --state-primary: #09d;
+
+  /* Color functions */
+  --alert-bg-color: color(var(--state-primary) tint(75%));
+  --alert-color: color(var(--state-primary) lightness(25%));
 }
 
-.info {
-  color: var(--info-color);
-  background: var(--info-bg);
+/* Nested selectors */
+.alert {
+  background-color: var(--alert-bg-color);
+  color: var(--alert-color);
 
-  &amp;.info-big {
+  &amp;.alert-lg {
     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>
+          <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>
+        <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 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>
-
-      <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>
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "shoelace-css",
   "description": "A back to the basics CSS starter kit.",
-  "version": "1.0.0-beta18",
+  "version": "1.0.0-beta24",
   "author": "Cory LaViska",
   "homepage": "https://shoelace.style/",
   "license": "MIT",
@@ -22,12 +22,13 @@
     "metalsmith-in-place": "^3.0.1",
     "metalsmith-layouts": "^1.8.1",
     "metalsmith-markdown": "^0.2.1",
-    "postcss": "^6.0.9",
+    "postcss": "^6.0.11",
     "postcss-cssnext": "^3.0.2",
     "postcss-import": "^10.0.0",
     "s3": "^4.4.0",
+    "stylelint": "^8.1.1",
     "stylelint-config-standard": "^17.0.0",
-    "uglify-js": "^3.0.27",
+    "uglify-js": "^3.1.1",
     "watch": "^1.0.2"
   },
   "dependencies": {}

source/css/_docs.css

@@ -13,22 +13,14 @@ body {
   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;
+  list-style: none;
   border-right: solid 1px #ddd;
   padding-right: 1rem;
-  margin-right: 2rem;
 }
 
-#nav a {
+#nav li {
   margin: .5rem 0;
   display: block;
 }
@@ -38,6 +30,20 @@ body {
   cursor: default;
 }
 
+@media screen and (max-width: 767px) {
+  #nav {
+    border: none;
+    text-align: center;
+    padding: 0;
+    margin: 0 0 2rem 0;
+  }
+
+  #nav li {
+    margin: .5rem;
+    display: inline-block;
+  }
+}
+
 #foot {
   text-align: center;
   margin: 2rem 0;
@@ -49,48 +55,6 @@ body {
   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),
@@ -117,13 +81,6 @@ a code {
   color: inherit;
 }
 
-@media (max-width: 45rem) {
-  a.bookmark {
-    width: auto;
-    margin-left: 0;
-  }
-}
-
 .browsers {
   text-align: center;
 }
@@ -134,18 +91,6 @@ a code {
   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;
@@ -196,16 +141,24 @@ a code {
   margin: 0 .5rem 1rem .5rem;
 }
 
-/* Tabs example */
-.tabs-vertical-example {
-  display: grid;
-  grid-template-columns: 30% 70%;
+/* Grid example */
+.grid-example {
+  margin-bottom: 1.5rem;
 }
 
-.tabs-vertical-example .tabs-nav {
-  padding-right: 2rem;
+.grid-example .row .col,
+.grid-example .row [class*="col-"] {
+  background: #0074d9;
+  border: solid 1px white;
+  color: white;
+  text-align: center;
+  padding-top: .5rem;
+  padding-bottom: .5rem;
 }
 
-.tabs-vertical-example .tabs-nav a {
-  display: block;
+.grid-example .row .row .col,
+.grid-example .row .row [class*="col-"] {
+  background: tomato;
+  margin-top: .5rem;
+  margin-bottom: .5rem;
 }

source/css/_homepage.css

@@ -13,12 +13,6 @@ body {
   display: inline-block;
 }
 
-#wrap {
-  max-width: 48rem;
-  padding: 0 2rem;
-  margin: 2rem auto;
-}
-
 pre {
   margin-bottom: 1rem !important; /* Prism overrides our bottom margin */
 }
@@ -28,14 +22,3 @@ pre code {
   padding: 0;
   display: block;
 }
-
-@media (max-width: 60rem) {
-  #head {
-    padding: 0 1rem;
-  }
-
-  #wrap {
-    padding: 0 1rem;
-    display: block;
-  }
-}

source/css/alerts.css

@@ -1,50 +1,4 @@
 /*! 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);
@@ -66,7 +20,7 @@
     font-weight: var(--font-weight-bold);
   }
 
-  & :last-child {
+  & > :last-child {
     margin-bottom: 0;
   }
 

source/css/badges.css

@@ -1,42 +1,4 @@
 /*! Badges */
-:root {
-  --badge-font-size: .8em; /* ems for relative sizing */
-  --badge-border-radius: 1em;  /* ems for relative sizing */
-  --badge-focus-width: var(--input-focus-width);
-  --badge-speed: var(--component-speed);
-
-  /* Default */
-  --badge-color: var(--color-white);
-  --badge-bg-color: var(--state-primary);
-
-  /* Secondary */
-  --badge-color-secondary: var(--color-white);
-  --badge-bg-color-secondary: var(--state-secondary);
-
-  /* Success */
-  --badge-color-success: var(--color-white);
-  --badge-bg-color-success: var(--state-success);
-
-  /* Info */
-  --badge-color-info: var(--color-white);
-  --badge-bg-color-info: var(--state-info);
-
-  /* Warning */
-  --badge-color-warning: var(--color-white);
-  --badge-bg-color-warning: var(--state-warning);
-
-  /* Danger */
-  --badge-color-danger: var(--color-white);
-  --badge-bg-color-danger: var(--state-danger);
-
-  /* Light */
-  --badge-color-light: var(--state-dark);
-  --badge-bg-color-light: var(--state-light);
-
-  /* Dark */
-  --badge-color-dark: var(--state-light);
-  --badge-bg-color-dark: var(--state-dark);
-}
 
 .badge {
   font-size: var(--badge-font-size);

source/css/buttons.css

@@ -1,56 +1,4 @@
 /*! 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: var(--component-border-width);
-  --button-focus-width: var(--input-focus-width);
-  --button-speed: var(--component-speed);
-  --button-loader-size: 1em;
-  --button-loader-border-width: .15em;
-
-  /* Default */
-  --button-color: var(--color-white);
-  --button-bg-color: var(--state-primary);
-
-  /* Secondary */
-  --button-color-secondary: var(--color-white);
-  --button-bg-color-secondary: var(--state-secondary);
-
-  /* Success */
-  --button-color-success: var(--color-white);
-  --button-bg-color-success: var(--state-success);
-
-  /* Info */
-  --button-color-info: var(--color-white);
-  --button-bg-color-info: var(--state-info);
-
-  /* Warning */
-  --button-color-warning: var(--color-white);
-  --button-bg-color-warning: var(--state-warning);
-
-  /* Danger */
-  --button-color-danger: var(--color-white);
-  --button-bg-color-danger: var(--state-danger);
-
-  /* Light */
-  --button-color-light: var(--state-dark);
-  --button-bg-color-light: color(var(--state-light) shade(10%));
-
-  /* Dark */
-  --button-color-dark: var(--state-light);
-  --button-bg-color-dark: color(var(--state-dark) tint(10%));
-}
 
 button,
 .button {
@@ -79,9 +27,6 @@ button,
 
   &: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%));
@@ -89,21 +34,25 @@ button,
     border-bottom-color: color(var(--button-bg-color) shade(20%));
   }
 
-  &:active:not(:disabled, .disabled),
-  &.active:not(:disabled, .disabled) {
+  &:active,
+  &.active {
     background-color: color(var(--button-bg-color) shade(10%));
     border-color: color(var(--button-bg-color) shade(10%));
     border-top-color: color(var(--button-bg-color) shade(20%));
     border-bottom-color: color(var(--button-bg-color) shade(10%));
   }
 
-  &:focus:not(:disabled, .disabled) {
+  &:focus {
     outline: none;
     box-shadow: 0 0 0 var(--button-focus-width) color(var(--button-bg-color) alpha(50%));
   }
 
   &:disabled,
   &.disabled {
+    background-color: color(var(--button-bg-color) shade(10%));
+    border-top-color: color(var(--button-bg-color) tint(10%));
+    border-bottom-color: color(var(--button-bg-color) shade(10%));
+    box-shadow: none;
     text-decoration: none;
     opacity: .5;
     cursor: not-allowed;
@@ -142,7 +91,7 @@ button,
     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) {
+    &:hover {
       color: var(--button-color-secondary);
       background-color: color(var(--button-bg-color-secondary) shade(10%));
       border-color: color(var(--button-bg-color-secondary) shade(10%));
@@ -150,18 +99,26 @@ button,
       border-bottom-color: color(var(--button-bg-color-secondary) shade(20%));
     }
 
-    &:active:not(:disabled, .disabled),
-    &.active:not(:disabled, .disabled) {
+    &:active,
+    &.active {
       background-color: color(var(--button-bg-color-secondary) shade(10%));
       border-color: color(var(--button-bg-color-secondary) shade(10%));
       border-top-color: color(var(--button-bg-color-secondary) shade(20%));
       border-bottom-color: color(var(--button-bg-color-secondary) shade(10%));
     }
 
-    &:focus:not(:disabled, .disabled) {
+    &:focus {
       outline: none;
       box-shadow: 0 0 0 var(--button-focus-width) color(var(--button-bg-color-secondary) alpha(50%));
     }
+
+    &:disabled,
+    &.disabled {
+      background-color: color(var(--button-bg-color-secondary) shade(10%));
+      border-top-color: color(var(--button-bg-color-secondary) tint(10%));
+      border-bottom-color: color(var(--button-bg-color-secondary) shade(10%));
+      box-shadow: none;
+    }
   }
 
   &.button-success {
@@ -171,7 +128,7 @@ button,
     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) {
+    &:hover {
       color: var(--button-color-success);
       background-color: color(var(--button-bg-color-success) shade(10%));
       border-color: color(var(--button-bg-color-success) shade(10%));
@@ -179,18 +136,26 @@ button,
       border-bottom-color: color(var(--button-bg-color-success) shade(20%));
     }
 
-    &:active:not(:disabled, .disabled),
-    &.active:not(:disabled, .disabled) {
+    &:active,
+    &.active {
       background-color: color(var(--button-bg-color-success) shade(10%));
       border-color: color(var(--button-bg-color-success) shade(10%));
       border-top-color: color(var(--button-bg-color-success) shade(20%));
       border-bottom-color: color(var(--button-bg-color-success) shade(10%));
     }
 
-    &:focus:not(:disabled, .disabled) {
+    &:focus {
       outline: none;
       box-shadow: 0 0 0 var(--button-focus-width) color(var(--button-bg-color-success) alpha(50%));
     }
+
+    &:disabled,
+    &.disabled {
+      background-color: color(var(--button-bg-color-success) shade(10%));
+      border-top-color: color(var(--button-bg-color-success) tint(10%));
+      border-bottom-color: color(var(--button-bg-color-success) shade(10%));
+      box-shadow: none;
+    }
   }
 
   &.button-info {
@@ -200,7 +165,7 @@ button,
     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) {
+    &:hover {
       color: var(--button-color-info);
       background-color: color(var(--button-bg-color-info) shade(10%));
       border-color: color(var(--button-bg-color-info) shade(10%));
@@ -208,18 +173,26 @@ button,
       border-bottom-color: color(var(--button-bg-color-info) shade(20%));
     }
 
-    &:active:not(:disabled, .disabled),
-    &.active:not(:disabled, .disabled) {
+    &:active,
+    &.active {
       background-color: color(var(--button-bg-color-info) shade(10%));
       border-color: color(var(--button-bg-color-info) shade(10%));
       border-top-color: color(var(--button-bg-color-info) shade(20%));
       border-bottom-color: color(var(--button-bg-color-info) shade(10%));
     }
 
-    &:focus:not(:disabled, .disabled) {
+    &:focus {
       outline: none;
       box-shadow: 0 0 0 var(--button-focus-width) color(var(--button-bg-color-info) alpha(50%));
     }
+
+    &:disabled,
+    &.disabled {
+      background-color: color(var(--button-bg-color-info) shade(10%));
+      border-top-color: color(var(--button-bg-color-info) tint(10%));
+      border-bottom-color: color(var(--button-bg-color-info) shade(10%));
+      box-shadow: none;
+    }
   }
 
   &.button-warning {
@@ -229,7 +202,7 @@ button,
     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) {
+    &:hover {
       color: var(--button-color-warning);
       background-color: color(var(--button-bg-color-warning) shade(10%));
       border-color: color(var(--button-bg-color-warning) shade(10%));
@@ -237,18 +210,26 @@ button,
       border-bottom-color: color(var(--button-bg-color-warning) shade(20%));
     }
 
-    &:active:not(:disabled, .disabled),
-    &.active:not(:disabled, .disabled) {
+    &:active,
+    &.active {
       background-color: color(var(--button-bg-color-warning) shade(10%));
       border-color: color(var(--button-bg-color-warning) shade(10%));
       border-top-color: color(var(--button-bg-color-warning) shade(20%));
       border-bottom-color: color(var(--button-bg-color-warning) shade(10%));
     }
 
-    &:focus:not(:disabled, .disabled) {
+    &:focus {
       outline: none;
       box-shadow: 0 0 0 var(--button-focus-width) color(var(--button-bg-color-warning) alpha(50%));
     }
+
+    &:disabled,
+    &.disabled {
+      background-color: color(var(--button-bg-color-warning) shade(10%));
+      border-top-color: color(var(--button-bg-color-warning) tint(10%));
+      border-bottom-color: color(var(--button-bg-color-warning) shade(10%));
+      box-shadow: none;
+    }
   }
 
   &.button-danger {
@@ -258,7 +239,7 @@ button,
     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) {
+    &:hover {
       color: var(--button-color-danger);
       background-color: color(var(--button-bg-color-danger) shade(10%));
       border-color: color(var(--button-bg-color-danger) shade(10%));
@@ -266,18 +247,26 @@ button,
       border-bottom-color: color(var(--button-bg-color-danger) shade(20%));
     }
 
-    &:active:not(:disabled, .disabled),
-    &.active:not(:disabled, .disabled) {
+    &:active,
+    &.active {
       background-color: color(var(--button-bg-color-danger) shade(10%));
       border-color: color(var(--button-bg-color-danger) shade(10%));
       border-top-color: color(var(--button-bg-color-danger) shade(20%));
       border-bottom-color: color(var(--button-bg-color-danger) shade(10%));
     }
 
-    &:focus:not(:disabled, .disabled) {
+    &:focus {
       outline: none;
       box-shadow: 0 0 0 var(--button-focus-width) color(var(--button-bg-color-danger) alpha(50%));
     }
+
+    &:disabled,
+    &.disabled {
+      background-color: color(var(--button-bg-color-danger) shade(10%));
+      border-top-color: color(var(--button-bg-color-danger) tint(10%));
+      border-bottom-color: color(var(--button-bg-color-danger) shade(10%));
+      box-shadow: none;
+    }
   }
 
   &.button-light {
@@ -287,7 +276,7 @@ button,
     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) {
+    &:hover {
       color: var(--button-color-light);
       background-color: color(var(--button-bg-color-light) shade(10%));
       border-color: color(var(--button-bg-color-light) shade(10%));
@@ -295,18 +284,26 @@ button,
       border-bottom-color: color(var(--button-bg-color-light) shade(20%));
     }
 
-    &:active:not(:disabled, .disabled),
-    &.active:not(:disabled, .disabled) {
+    &:active,
+    &.active {
       background-color: color(var(--button-bg-color-light) shade(10%));
       border-color: color(var(--button-bg-color-light) shade(10%));
       border-top-color: color(var(--button-bg-color-light) shade(20%));
       border-bottom-color: color(var(--button-bg-color-light) shade(10%));
     }
 
-    &:focus:not(:disabled, .disabled) {
+    &:focus {
       outline: none;
       box-shadow: 0 0 0 var(--button-focus-width) color(var(--button-bg-color-light) alpha(50%));
     }
+
+    &:disabled,
+    &.disabled {
+      background-color: color(var(--button-bg-color-light) shade(10%));
+      border-top-color: color(var(--button-bg-color-light) tint(10%));
+      border-bottom-color: color(var(--button-bg-color-light) shade(10%));
+      box-shadow: none;
+    }
   }
 
   &.button-dark {
@@ -316,7 +313,7 @@ button,
     border-top-color: color(var(--button-bg-color-dark) tint(10%));
     border-bottom-color: color(var(--button-bg-color-dark) shade(10%));
 
-    &:hover:not(:disabled, .disabled) {
+    &: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%));
@@ -324,18 +321,26 @@ button,
       border-bottom-color: color(var(--button-bg-color-dark) shade(20%));
     }
 
-    &:active:not(:disabled, .disabled),
-    &.active:not(:disabled, .disabled) {
+    &:active,
+    &.active {
       background-color: color(var(--button-bg-color-dark) shade(10%));
       border-color: color(var(--button-bg-color-dark) shade(10%));
       border-top-color: color(var(--button-bg-color-dark) shade(20%));
       border-bottom-color: color(var(--button-bg-color-dark) shade(10%));
     }
 
-    &:focus:not(:disabled, .disabled) {
+    &:focus {
       outline: none;
       box-shadow: 0 0 0 var(--button-focus-width) color(var(--button-bg-color-dark) alpha(50%));
     }
+
+    &:disabled,
+    &.disabled {
+      background-color: color(var(--button-bg-color-dark) shade(10%));
+      border-top-color: color(var(--button-bg-color-dark) tint(10%));
+      border-bottom-color: color(var(--button-bg-color-dark) shade(10%));
+      box-shadow: none;
+    }
   }
 
   /* Block buttons */
@@ -353,8 +358,8 @@ button,
     box-shadow: none;
   }
 
-  &.button-link:hover:not(:disabled, .disabled),
-  &.button-link:focus:not(:disabled, .disabled) {
+  &.button-link:hover,
+  &.button-link:focus {
     border-color: transparent;
     background-color: transparent;
     color: var(--link-color-hover);
@@ -363,11 +368,6 @@ button,
   }
 }
 
-/* File buttons */
-label.button input[type="file"] {
-  display: none;
-}
-
 /* Loader buttons */
 .button-loader,
 .button-loader:hover {

source/css/content.css

@@ -1,67 +1,8 @@
 /*! 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);
-}
+/***************************************************************************************************
+* Resets
+***************************************************************************************************/
 
 /* Box sizing reset */
 html {
@@ -74,6 +15,11 @@ html {
   box-sizing: inherit;
 }
 
+/* Hidden property reset */
+[hidden] {
+  display: none !important;
+}
+
 /***************************************************************************************************
 * The basics
 ***************************************************************************************************/
@@ -108,7 +54,7 @@ strong {
 }
 
 blockquote {
-  font-size: var(--font-size-big);
+  font-size: 120%;
   border-left: solid .4rem var(--component-border-color);
   padding: .5rem .5rem .5rem 1rem;
   margin-bottom: 1.5rem;

source/css/dropdowns.css

@@ -1,43 +1,25 @@
 /*! 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: var(--component-box-shadow-outer);
-  --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;
+    content: '';
+    width: var(--dropdown-caret-size);
+    height: var(--dropdown-caret-size);
+    border-top: solid var(--dropdown-caret-width) var(--dropdown-caret-color);
+    border-right: solid var(--dropdown-caret-width) var(--dropdown-caret-color);
+    margin-left: var(--dropdown-caret-size);
+    margin-top: calc(var(--dropdown-caret-size) * -1);
+    transform: rotate(135deg);
     display: inline-block;
-    transform: scaleY(.75);
-    margin-top: -.2em;
+    vertical-align: middle;
   }
 
   &.dropdown-top .dropdown-trigger::after {
-    transform: scaleY(.75) rotate(180deg);
+    transform: rotate(315deg);
+    margin-top: 0;
   }
 
   /* Menu */
@@ -49,6 +31,10 @@
     min-width: var(--dropdown-min-width);
     max-width: var(--dropdown-max-width);
     max-height: var(--dropdown-max-height);
+    line-height: var(--dropdown-line-height);
+    font-size: var(--dropdown-font-size);
+    font-weight: var(--dropdown-font-weight);
+    text-align: left;
     background-color: var(--dropdown-bg-color);
     border: solid var(--dropdown-border-width) var(--dropdown-border-color);
     border-radius: var(--dropdown-border-radius);
@@ -57,6 +43,7 @@
     padding: var(--dropdown-padding-y) 0;
     overflow-y: auto;
     transform: translateZ(0);
+    user-select: none;
 
     & a {
       position: relative;
@@ -68,18 +55,20 @@
       overflow-x: hidden;
       text-overflow: ellipsis;
 
-      &:focus:not(.disabled) {
+      &:focus {
         outline: none;
         color: var(--dropdown-color);
         background-color: color(var(--dropdown-bg-color) shade(5%));
       }
 
-      &:hover:not(.disabled) {
+      &:hover {
         color: var(--dropdown-color-hover);
         background-color: var(--dropdown-bg-color-hover);
       }
 
       &.disabled {
+        background-color: transparent;
+        color: var(--dropdown-color);
         outline: none;
         cursor: not-allowed;
         opacity: .5;
@@ -99,6 +88,14 @@
       border-top: solid var(--dropdown-divider-width) var(--dropdown-divider-color);
       margin: var(--dropdown-padding-y) 0;
     }
+
+    & .dropdown-heading {
+      font-size: var(--dropdown-heading-font-size);
+      font-weight: var(--dropdown-heading-font-weight);
+      color: var(--dropdown-heading-color);
+      padding: var(--dropdown-padding-y) calc(var(--dropdown-padding-x) + .5em);
+      cursor: default;
+    }
   }
 
   &.dropdown-top .dropdown-menu {

source/css/file-buttons.css

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

source/css/forms.css

@@ -1,45 +1,4 @@
 /*! Forms */
-:root {
-  --input-height-xs: 1.25rem;
-  --input-height-sm: 1.75rem;
-  --input-height: 2.25rem;
-  --input-height-lg: 2.75rem;
-  --input-height-xl: 3.25rem;
-  --input-font-size-xs: .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: var(--component-box-shadow-inner);
-  --input-readonly-bg-color: var(--component-bg-color);
-  --input-focus-width: 2px;
-  --input-speed: var(--component-speed);
-
-  --input-range-track-height: .5rem;
-  --input-range-track-color: var(--component-bg-color);
-  --input-range-track-box-shadow: var(--component-box-shadow-inner);
-  --input-range-thumb-height: 1.25rem;
-  --input-range-thumb-color: var(--state-primary);
-
-  --input-invalid-color: var(--state-danger);
-  --input-invalid-border-color: var(--state-danger);
-  --input-valid-color: var(--state-success);
-  --input-valid-border-color: var(--state-success);
-
-  --fieldset-border-color: var(--component-border-color);
-  --fieldset-border-width: var(--component-border-width);
-  --fieldset-border-radius: var(--component-border-radius);
-  --fieldset-padding-x: 2rem;
-  --fieldset-padding-y: 1.5rem;
-}
 
 fieldset {
   border: solid var(--fieldset-border-width) var(--fieldset-border-color);
@@ -52,12 +11,13 @@ fieldset {
     padding: 0 .25rem;
   }
 
-  & :last-child {
+  & > :last-child {
     margin-bottom: 0;
   }
 }
 
 label {
+  color: var(--label-color);
   display: inline-block;
   margin-bottom: .25rem;
 
@@ -107,7 +67,7 @@ textarea {
 
   &:focus {
     outline: none;
-    border-color: var(--input-border-color-focus);
+    border-color: var(--input-focus-color);
   }
 
   &[disabled] {
@@ -132,11 +92,6 @@ textarea {
     }
   }
 
-  &[type="checkbox"],
-  &[type="radio"] {
-    padding: 0;
-  }
-
   &.input-xs {
     font-size: var(--input-font-size-xs);
     height: var(--input-height-xs);
@@ -162,6 +117,11 @@ textarea {
   }
 }
 
+input[type="checkbox"],
+input[type="radio"] {
+  vertical-align: 1px;
+}
+
 select {
   position: relative;
   background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='41px' height='26px' viewBox='0 0 41 26' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3C/defs%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cpolygon id='Path-3' fill='%23000000' points='0 5.38215461 19.9830489 25.3652035 40.1398855 5.20836689 34.9315186 0 19.8691842 15.0623344 4.83971338 0.0328636246'%3E%3C/polygon%3E%3C/g%3E%3C/svg%3E%0A");
@@ -224,7 +184,7 @@ input[type="range"] {
     }
 
     &::-webkit-slider-thumb {
-      box-shadow: 0 0 0 var(--input-focus-width) color(var(--input-range-thumb-color) alpha(50%));
+      box-shadow: 0 0 0 var(--component-focus-width) color(var(--input-range-thumb-color) alpha(50%));
     }
   }
 
@@ -249,7 +209,7 @@ input[type="range"] {
   }
 
   &:focus::-moz-range-thumb {
-    box-shadow: 0 0 0 var(--input-focus-width) color(var(--input-range-thumb-color) alpha(50%));
+    box-shadow: 0 0 0 var(--component-focus-width) color(var(--input-range-thumb-color) alpha(50%));
   }
 
   /* IE / Edge */
@@ -285,7 +245,7 @@ input[type="range"] {
   }
 
   &:focus::-ms-thumb {
-    box-shadow: 0 0 0 var(--input-focus-width) color(var(--input-range-thumb-color) alpha(50%));
+    box-shadow: 0 0 0 var(--component-focus-width) color(var(--input-range-thumb-color) alpha(50%));
   }
 
   &:focus::-ms-fill-lower {
@@ -297,8 +257,8 @@ input[type="range"] {
   }
 }
 
-/* Input singles */
-.input-single {
+/* Input fields */
+.input-field {
   margin-bottom: 1.5rem;
 }
 
@@ -312,7 +272,10 @@ input[type="range"] {
   & > button,
   & > .button,
   & > .dropdown button,
-  & > .dropdown .button {
+  & > .dropdown .button,
+  & > .file-button label,
+  & > .input-icon input,
+  & > .input-icon select {
     border-radius: 0;
   }
 
@@ -320,7 +283,10 @@ input[type="range"] {
   & > button:first-child,
   & > .button:first-child,
   & > .dropdown:first-child button,
-  & > .dropdown:first-child .button {
+  & > .dropdown:first-child .button,
+  & > .file-button:first-child label,
+  & > .input-icon:first-child input,
+  & > .input-icon:first-child select {
     border-top-left-radius: var(--input-border-radius);
     border-bottom-left-radius: var(--input-border-radius);
   }
@@ -329,7 +295,10 @@ input[type="range"] {
   & > button:last-child,
   & > .button:last-child,
   & > .dropdown:last-child button,
-  & > .dropdown:last-child .button {
+  & > .dropdown:last-child .button,
+  & > .file-button:last-child label,
+  & > .input-icon:last-child input,
+  & > .input-icon:last-child select {
     border-top-right-radius: var(--input-border-radius);
     border-bottom-right-radius: var(--input-border-radius);
   }
@@ -343,21 +312,37 @@ input[type="range"] {
     margin-left: calc(var(--input-border-width) * -1);
   }
 
-  & :focus {
-    /* Force a new stacking context so focus rings don't get truncated by adjacent elements */
+  /* Force a new stacking context so focus rings don't get truncated by adjacent elements */
+  & button:focus,
+  & .button:focus,
+  & .file-button input[type="file"]:focus + label {
     transform: translateZ(0);
   }
 }
 
+/* Input hints */
+.input-hint {
+  font-size: var(--input-hint-font-size);
+  color: var(--input-hint-color);
+  margin: .25rem 0 0 0;
+  display: block;
+}
+
+/* Input groups can have input hints, but we need to adjust margins a bit */
+.input-group + .input-hint {
+  margin-top: -1.25rem; /* input group margin - input hint margin */
+  margin-bottom: 1.5rem;
+}
+
 /* Input addons */
 .input-addon {
   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;
+  background: var(--input-addon-bg-color);
+  color: var(--input-addon-color);
   padding: 0 .5rem;
   white-space: nowrap;
 
@@ -398,6 +383,79 @@ input[type="range"] {
   }
 }
 
+/* Input icons */
+.input-icon {
+  position: relative;
+  width: 100%;
+
+  /* Change default position for select controls so icons don't get hidden */
+  & select {
+    position: static;
+  }
+
+  & input:not(:first-child),
+  & select:not(:first-child) {
+    padding-left: var(--input-icon-width);
+  }
+
+  & input:not(:last-child) {
+    padding-right: var(--input-icon-width);
+  }
+
+  & :first-child:not(input, select),
+  & :last-child:not(input, select) {
+    position: absolute;
+    top: 0;
+    left: var(--input-icon-offset);
+    height: var(--input-height);
+    line-height: var(--input-height);
+    color: var(--input-icon-color);
+    vertical-align: middle;
+    pointer-events: none;
+  }
+
+  & :last-child:not(input, select) {
+    left: auto;
+    right: var(--input-icon-offset);
+  }
+
+  &.input-icon-xs {
+    & :first-child:not(input, select),
+    & :last-child:not(input, select) {
+      font-size: var(--input-font-size-xs);
+      height: var(--input-height-xs);
+      line-height: var(--input-height-xs);
+    }
+  }
+
+  &.input-icon-sm {
+    & :first-child:not(input, select),
+    & :last-child:not(input, select) {
+      font-size: var(--input-font-size-sm);
+      height: var(--input-height-sm);
+      line-height: var(--input-height-sm);
+    }
+  }
+
+  &.input-icon-lg {
+    & :first-child:not(input, select),
+    & :last-child:not(input, select) {
+      font-size: var(--input-font-size-lg);
+      height: var(--input-height-lg);
+      line-height: var(--input-height-lg);
+    }
+  }
+
+  &.input-icon-xl {
+    & :first-child:not(input, select),
+    & :last-child:not(input, select) {
+      font-size: var(--input-font-size-xl);
+      height: var(--input-height-xl);
+      line-height: var(--input-height-xl);
+    }
+  }
+}
+
 /* Validation */
 .input-invalid {
   & label {
@@ -405,10 +463,16 @@ input[type="range"] {
   }
 
   & input,
-  & select {
+  & select,
+  & textarea {
     color: var(--input-invalid-color) !important;
     border-color: var(--input-invalid-border-color) !important;
   }
+
+  & .input-icon :first-child:not(input, select),
+  & .input-icon :last-child:not(input, select) {
+    color: var(--input-invalid-color);
+  }
 }
 
 .input-valid {
@@ -417,8 +481,14 @@ input[type="range"] {
   }
 
   & input,
-  & select {
+  & select,
+  & textarea {
     color: var(--input-valid-color) !important;
     border-color: var(--input-valid-border-color) !important;
   }
+
+  & .input-icon :first-child:not(input, select),
+  & .input-icon :last-child:not(input, select) {
+    color: var(--input-valid-color);
+  }
 }

source/css/grid.css

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

source/css/loaders.css

@@ -1,51 +1,4 @@
 /*! Loaders */
-:root {
-  --loader-thickness: .2rem;
-  --loader-thickness-xs: calc(var(--loader-thickness) / 2);
-  --loader-thickness-sm: calc(var(--loader-thickness) / 1.5);
-  --loader-thickness-lg: calc(var(--loader-thickness) * 1.5);
-  --loader-thickness-xl: calc(var(--loader-thickness) * 2);
-  --loader-size-xs: var(--input-height-xs);
-  --loader-size-sm: var(--input-height-sm);
-  --loader-size: var(--input-height);
-  --loader-size-lg: var(--input-height-lg);
-  --loader-size-xl: var(--input-height-xl);
-  --loader-speed: 750ms;
-  --loader-margin-x: .5em;
-  --loader-margin-y: 0;
-
-  /* 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 {
   width: var(--loader-size);

source/css/progress-bars.css

@@ -1,23 +1,4 @@
 /*! 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: var(--component-box-shadow-inner);
-  --progress-speed: var(--component-speed);
-  --progress-speed-indeterminate: 3s;
-}
 
 .progress {
   position: relative;

source/css/shoelace.css

@@ -12,58 +12,13 @@
 @import url('badges.css');
 @import url('buttons.css');
 @import url('dropdowns.css');
+@import url('file-buttons.css');
 @import url('forms.css');
+@import url('grid.css');
 @import url('loaders.css');
 @import url('progress-bars.css');
 @import url('switches.css');
 @import url('tabs.css');
 @import url('tables.css');
 @import url('utilities.css');
-
-: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;
-  --component-speed: .1s;
-  --component-box-shadow-inner: inset 0 1px 1px rgba(0, 0, 0, .05);
-  --component-box-shadow-outer: 0 1px 0 rgba(0, 0, 0, .05);
-}
+@import url('variables.css');

source/css/switches.css

@@ -1,61 +1,4 @@
 /*! 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-focus-width: var(--input-focus-width);
-  --switch-speed: var(--component-speed);
-
-  /* Default */
-  --switch-color: var(--state-primary);
-  --switch-bg-color: var(--component-border-color);
-  --switch-thumb-color: var(--color-white);
-
-  /* Secondary */
-  --switch-color-secondary: var(--state-secondary);
-  --switch-bg-color-secondary: var(--component-border-color);
-  --switch-thumb-color-secondary: var(--color-white);
-
-  /* Success */
-  --switch-color-success: var(--state-success);
-  --switch-bg-color-success: var(--component-border-color);
-  --switch-thumb-color-success: var(--color-white);
-
-  /* Info */
-  --switch-color-info: var(--state-info);
-  --switch-bg-color-info: var(--component-border-color);
-  --switch-thumb-color-info: var(--color-white);
-
-  /* Warning */
-  --switch-color-warning: var(--state-warning);
-  --switch-bg-color-warning: var(--component-border-color);
-  --switch-thumb-color-warning: var(--color-white);
-
-  /* Danger */
-  --switch-color-danger: var(--state-danger);
-  --switch-bg-color-danger: var(--component-border-color);
-  --switch-thumb-color-danger: var(--color-white);
-
-  /* Light */
-  --switch-color-light: color(var(--state-light) shade(25%));
-  --switch-bg-color-light: color(var(--state-light) shade(10%));
-  --switch-thumb-color-light: var(--color-white);
-
-  /* Dark */
-  --switch-color-dark: color(var(--state-dark) tint(10%));
-  --switch-bg-color-dark: color(var(--state-dark) tint(25%));
-  --switch-thumb-color-dark: var(--color-white);
-}
 
 .switch {
   font-size: var(--switch-font-size);

source/css/tables.css

@@ -1,15 +1,4 @@
 /*! 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 {
   width: 100%;
@@ -20,7 +9,7 @@ table {
   & caption {
     caption-side: bottom;
     font-size: var(--font-size-small);
-    color: var(--state-secondary);
+    color: var(--body-color-muted);
     text-align: center;
     padding-top: var(--table-spacing-y);
   }

source/css/tabs.css

@@ -1,25 +1,4 @@
 /*! 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-focus-width: var(--input-focus-width);
-  --tab-speed: var(--component-speed);
-
-  --tab-pane-border-color: var(--component-border-color);
-  --tab-pane-border-radius: var(--component-border-radius);
-  --tab-pane-border-width: var(--component-border-width);
-  --tab-pane-padding-x: var(--component-padding-x);
-  --tab-pane-padding-y: var(--component-padding-y);
-}
 
 .tabs {
   width: 100%;
@@ -44,17 +23,6 @@
         text-decoration: none;
       }
 
-      &:focus {
-        outline: none;
-
-        &:not(.disabled) {
-          box-shadow: 0 0 0 var(--tab-focus-width) color(var(--tab-bg-color-active) alpha(50%));
-
-          /* Force a new stacking context so focus rings don't get truncated by adjacent elements */
-          transform: translateZ(0);
-        }
-      }
-
       &.active {
         color: var(--tab-color-active);
         background-color: var(--tab-bg-color-active);
@@ -67,6 +35,10 @@
         cursor: not-allowed;
       }
     }
+
+    &.tabs-nav-block a {
+      display: block;
+    }
   }
 
   & .tabs-pane {
@@ -78,7 +50,7 @@
       display: none;
     }
 
-    & :last-child {
+    & > :last-child {
       margin-bottom: 0;
     }
   }

source/css/utilities.css

@@ -1,11 +1,4 @@
 /*! Utilties */
-:root {
-  --spacing-xs: .5rem;
-  --spacing-sm: 1rem;
-  --spacing-md: 1.5rem;
-  --spacing-lg: 2rem;
-  --spacing-xl: 2.5rem;
-}
 
 /***************************************************************************************************
 * Text utilities
@@ -26,6 +19,7 @@
 .text-small { font-size: var(--font-size-small) !important; }
 .text-bold { font-weight: var(--font-weight-bold) !important; }
 .text-italic { font-style: italic !important; }
+.text-muted { color: var(--body-color-muted) !important; }
 
 /* Text alignment */
 .text-left { text-align: left !important; }
@@ -54,6 +48,30 @@
 .bg-light { background-color: var(--state-light) !important; }
 .bg-dark { background-color: var(--state-dark) !important; }
 
+/***************************************************************************************************
+* Display utilities
+***************************************************************************************************/
+
+@media (--breakpoint-xs-only) { .hide-xs { display: none !important; } }
+@media (--breakpoint-xs-up) { .hide-xs-up { display: none !important; } }
+@media (--breakpoint-xs-down) { .hide-xs-down { display: none !important; } }
+
+@media (--breakpoint-sm-only) { .hide-sm { display: none !important; } }
+@media (--breakpoint-sm-up) { .hide-sm-up { display: none !important; } }
+@media (--breakpoint-sm-down) { .hide-sm-down { display: none !important; } }
+
+@media (--breakpoint-md-only) { .hide-md { display: none !important; } }
+@media (--breakpoint-md-up) { .hide-md-up { display: none !important; } }
+@media (--breakpoint-md-down) { .hide-md-down { display: none !important; } }
+
+@media (--breakpoint-lg-only) { .hide-lg { display: none !important; } }
+@media (--breakpoint-lg-up) { .hide-lg-up { display: none !important; } }
+@media (--breakpoint-lg-down) { .hide-lg-down { display: none !important; } }
+
+@media (--breakpoint-xl-only) { .hide-xl { display: none !important; } }
+@media (--breakpoint-xl-up) { .hide-xl-up { display: none !important; } }
+@media (--breakpoint-xl-down) { .hide-xl-down { display: none !important; } }
+
 /***************************************************************************************************
 * Float utilities
 ***************************************************************************************************/

source/css/variables.css

@@ -0,0 +1,563 @@
+:root {
+  /*************************************************************************************************
+  * Core variables
+  *************************************************************************************************/
+
+  /* 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-focus-width: 2px;
+  --component-padding-x: 1rem;
+  --component-padding-y: 1rem;
+  --component-speed: .1s;
+  --component-box-shadow-inner: inset 0 1px 1px rgba(0, 0, 0, .05);
+  --component-box-shadow-outer: 0 1px 0 rgba(0, 0, 0, .05);
+
+  /*************************************************************************************************
+  * Alerts
+  *************************************************************************************************/
+
+  --alert-border-radius: var(--component-border-radius);
+  --alert-border-width: 1px;
+  --alert-padding-x: var(--component-padding-x);
+  --alert-padding-y: var(--component-padding-y);
+
+  /* Default */
+  --alert-bg-color: color(var(--state-primary) tint(75%));
+  --alert-color: color(var(--state-primary) lightness(25%));
+  --alert-border-color: color(var(--alert-bg-color) shade(5%));
+
+  /* Secondary */
+  --alert-bg-color-secondary: color(var(--state-secondary) tint(75%));
+  --alert-color-secondary: color(var(--state-secondary) lightness(25%));
+  --alert-border-color-secondary: color(var(--alert-bg-color-secondary) shade(5%));
+
+  /* Success */
+  --alert-bg-color-success: color(var(--state-success) tint(75%));
+  --alert-color-success: color(var(--state-success) lightness(25%));
+  --alert-border-color-success: color(var(--alert-bg-color-success) shade(5%));
+
+  /* Info */
+  --alert-bg-color-info: color(var(--state-info) tint(75%));
+  --alert-color-info: color(var(--state-info) lightness(25%));
+  --alert-border-color-info: color(var(--alert-bg-color-info) shade(5%));
+
+  /* Warning */
+  --alert-bg-color-warning: color(var(--state-warning) tint(75%));
+  --alert-color-warning: color(var(--state-warning) lightness(25%));
+  --alert-border-color-warning: color(var(--alert-bg-color-warning) shade(5%));
+
+  /* Danger */
+  --alert-bg-color-danger: color(var(--state-danger) tint(75%));
+  --alert-color-danger: color(var(--state-danger) lightness(25%));
+  --alert-border-color-danger: color(var(--alert-bg-color-danger) shade(5%));
+
+  /* Light */
+  --alert-bg-color-light: color(var(--state-light) tint(75%));
+  --alert-color-light: color(var(--state-dark) lightness(50%));
+  --alert-border-color-light: color(var(--alert-bg-color-light) shade(5%));
+
+  /* Dark */
+  --alert-bg-color-dark: color(var(--state-dark) tint(75%));
+  --alert-color-dark: color(var(--state-light) lightness(25%));
+  --alert-border-color-dark: color(var(--alert-bg-color-dark) shade(5%));
+
+  /*************************************************************************************************
+  * Badges
+  *************************************************************************************************/
+
+  --badge-font-size: .8em; /* ems for relative sizing */
+  --badge-border-radius: 1em;  /* ems for relative sizing */
+  --badge-focus-width: var(--component-focus-width);
+  --badge-speed: var(--component-speed);
+
+  /* Default */
+  --badge-color: var(--color-white);
+  --badge-bg-color: var(--state-primary);
+
+  /* Secondary */
+  --badge-color-secondary: var(--color-white);
+  --badge-bg-color-secondary: var(--state-secondary);
+
+  /* Success */
+  --badge-color-success: var(--color-white);
+  --badge-bg-color-success: var(--state-success);
+
+  /* Info */
+  --badge-color-info: var(--color-white);
+  --badge-bg-color-info: var(--state-info);
+
+  /* Warning */
+  --badge-color-warning: var(--color-white);
+  --badge-bg-color-warning: var(--state-warning);
+
+  /* Danger */
+  --badge-color-danger: var(--color-white);
+  --badge-bg-color-danger: var(--state-danger);
+
+  /* Light */
+  --badge-color-light: var(--state-dark);
+  --badge-bg-color-light: var(--state-light);
+
+  /* Dark */
+  --badge-color-dark: var(--state-light);
+  --badge-bg-color-dark: var(--state-dark);
+
+  /*************************************************************************************************
+  * Buttons
+  *************************************************************************************************/
+
+  --button-height-xs: var(--input-height-xs);
+  --button-height-sm: var(--input-height-sm);
+  --button-height: var(--input-height);
+  --button-height-lg: var(--input-height-lg);
+  --button-height-xl: var(--input-height-xl);
+  --button-font-size-xs: var(--input-font-size-xs);
+  --button-font-size-sm: var(--input-font-size-sm);
+  --button-font-size: var(--input-font-size);
+  --button-font-size-lg: var(--input-font-size-lg);
+  --button-font-size-xl: var(--input-font-size-xl);
+  --button-font-family: var(--input-font-family);
+  --button-font-weight: var(--input-font-weight);
+  --button-border-radius: var(--component-border-radius);
+  --button-border-width: var(--component-border-width);
+  --button-focus-width: var(--component-focus-width);
+  --button-speed: var(--component-speed);
+  --button-loader-size: 1em;
+  --button-loader-border-width: .15em;
+
+  /* Default */
+  --button-color: var(--color-white);
+  --button-bg-color: var(--state-primary);
+
+  /* Secondary */
+  --button-color-secondary: var(--color-white);
+  --button-bg-color-secondary: var(--state-secondary);
+
+  /* Success */
+  --button-color-success: var(--color-white);
+  --button-bg-color-success: var(--state-success);
+
+  /* Info */
+  --button-color-info: var(--color-white);
+  --button-bg-color-info: var(--state-info);
+
+  /* Warning */
+  --button-color-warning: var(--color-white);
+  --button-bg-color-warning: var(--state-warning);
+
+  /* Danger */
+  --button-color-danger: var(--color-white);
+  --button-bg-color-danger: var(--state-danger);
+
+  /* Light */
+  --button-color-light: var(--state-dark);
+  --button-bg-color-light: color(var(--state-light) shade(10%));
+
+  /* Dark */
+  --button-color-dark: var(--state-light);
+  --button-bg-color-dark: color(var(--state-dark) tint(10%));
+
+  /*************************************************************************************************
+  * Content
+  *************************************************************************************************/
+
+  --body-bg-color: var(--color-white);
+  --body-color: var(--color-black);
+  --body-color-muted: var(--color-gray);
+
+  --font-family: var(--font-system);
+  --font-size: 1rem; /* Most browsers use a default font size of 16px */
+  --font-size-small: 80%;
+  --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(--body-color-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(--state-primary);
+
+  /*************************************************************************************************
+  * Dropdowns
+  *************************************************************************************************/
+
+  --dropdown-min-width: 10rem;
+  --dropdown-max-width: 25rem;
+  --dropdown-max-height: none;
+  --dropdown-border-color: var(--component-border-color);
+  --dropdown-border-radius: var(--component-border-radius);
+  --dropdown-border-width: var(--component-border-width);
+  --dropdown-font-size: inherit;
+  --dropdown-font-weight: inherit;
+  --dropdown-color: var(--body-color);
+  --dropdown-color-hover: var(--color-white);
+  --dropdown-bg-color: var(--color-white);
+  --dropdown-bg-color-hover: var(--state-primary);
+  --dropdown-box-shadow: var(--component-box-shadow-outer);
+  --dropdown-line-height: var(--line-height);
+  --dropdown-padding-x: 1rem;
+  --dropdown-padding-y: .25rem;
+  --dropdown-offset-x: 0;
+  --dropdown-offset-y: 1px;
+  --dropdown-z-index: 100;
+
+  --dropdown-caret-color: currentcolor;
+  --dropdown-caret-size: .5em;
+  --dropdown-caret-width: 2px;
+
+  --dropdown-divider-color: var(--component-border-color);
+  --dropdown-divider-width: var(--component-border-width);
+
+  --dropdown-heading-font-size: var(--font-size-small);
+  --dropdown-heading-font-weight: inherit;
+  --dropdown-heading-color: var(--body-color-muted);
+
+  /*************************************************************************************************
+  * Forms
+  *************************************************************************************************/
+
+  --input-height-xs: 1.25rem;
+  --input-height-sm: 1.75rem;
+  --input-height: 2.25rem;
+  --input-height-lg: 2.75rem;
+  --input-height-xl: 3.25rem;
+  --input-font-size-xs: .625rem;
+  --input-font-size-sm: .875rem;
+  --input-font-size: 1rem;
+  --input-font-size-lg: 1.25rem;
+  --input-font-size-xl: 1.5rem;
+  --input-font-family: inherit;
+  --input-font-weight: inherit;
+  --input-color: var(--body-color);
+  --input-border-color: var(--component-border-color);
+  --input-border-width: 1px;
+  --input-border-radius: var(--component-border-radius);
+  --input-bg-color: var(--color-white);
+  --input-box-shadow: var(--component-box-shadow-inner);
+  --input-readonly-bg-color: var(--component-bg-color);
+  --input-focus-color: var(--state-primary);
+  --input-speed: var(--component-speed);
+
+  --input-addon-bg-color: var(--component-bg-color);
+  --input-addon-color: var(--body-color-muted);
+
+  --input-hint-color: var(--body-color-muted);
+  --input-hint-font-size: var(--font-size-small);
+
+  --input-icon-width: 2em;
+  --input-icon-offset: .5em;
+  --input-icon-color: var(--state-secondary);
+
+  --input-range-track-height: .5rem;
+  --input-range-track-color: var(--component-bg-color);
+  --input-range-track-box-shadow: var(--component-box-shadow-inner);
+  --input-range-thumb-height: 1.25rem;
+  --input-range-thumb-color: var(--state-primary);
+
+  --input-invalid-color: var(--state-danger);
+  --input-invalid-border-color: var(--state-danger);
+  --input-valid-color: var(--state-success);
+  --input-valid-border-color: var(--state-success);
+
+  --fieldset-border-color: var(--component-border-color);
+  --fieldset-border-width: var(--component-border-width);
+  --fieldset-border-radius: var(--component-border-radius);
+  --fieldset-padding-x: 2rem;
+  --fieldset-padding-y: 1.5rem;
+
+  --label-color: inherit;
+
+  /*************************************************************************************************
+  * Grid
+  *************************************************************************************************/
+
+  --container-max-width-sm: 540px;
+  --container-max-width-md: 720px;
+  --container-max-width-lg: 960px;
+  --container-max-width-xl: 1140px;
+
+  --grid-gutter-width: 2rem;
+
+  /*************************************************************************************************
+  * Loaders
+  *************************************************************************************************/
+
+  --loader-thickness: .2rem;
+  --loader-thickness-xs: calc(var(--loader-thickness) / 2);
+  --loader-thickness-sm: calc(var(--loader-thickness) / 1.5);
+  --loader-thickness-lg: calc(var(--loader-thickness) * 1.5);
+  --loader-thickness-xl: calc(var(--loader-thickness) * 2);
+  --loader-size-xs: var(--input-height-xs);
+  --loader-size-sm: var(--input-height-sm);
+  --loader-size: var(--input-height);
+  --loader-size-lg: var(--input-height-lg);
+  --loader-size-xl: var(--input-height-xl);
+  --loader-speed: 750ms;
+  --loader-margin-x: .5em;
+  --loader-margin-y: 0;
+
+  /* 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%));
+
+  /*************************************************************************************************
+  * Progress Bars
+  *************************************************************************************************/
+
+  --progress-height: var(--input-height);
+  --progress-height-xs: var(--input-height-xs);
+  --progress-height-sm: var(--input-height-sm);
+  --progress-height-lg: var(--input-height-lg);
+  --progress-height-xl: var(--input-height-xl);
+  --progress-font-size: var(--input-font-size);
+  --progress-font-size-xs: var(--input-font-size-xs);
+  --progress-font-size-sm: var(--input-font-size-sm);
+  --progress-font-size-lg: var(--input-font-size-lg);
+  --progress-font-size-xl: var(--input-font-size-xl);
+  --progress-color: var(--color-white);
+  --progress-bg-color: var(--component-bg-color);
+  --progress-bar-color: var(--state-primary);
+  --progress-border-radius: var(--component-border-radius);
+  --progress-box-shadow: var(--component-box-shadow-inner);
+  --progress-speed: var(--component-speed);
+  --progress-speed-indeterminate: 3s;
+
+  /*************************************************************************************************
+  * Switches
+  *************************************************************************************************/
+
+  --switch-height: calc(var(--input-height) * .75);
+  --switch-height-xs: calc(var(--input-height-xs) * .75);
+  --switch-height-sm: calc(var(--input-height-sm) * .75);
+  --switch-height-lg: calc(var(--input-height-lg) * .75);
+  --switch-height-xl: calc(var(--input-height-xl) * .75);
+  --switch-font-size: var(--input-font-size);
+  --switch-font-size-xs: var(--input-font-size-xs);
+  --switch-font-size-sm: var(--input-font-size-sm);
+  --switch-font-size-lg: var(--input-font-size-lg);
+  --switch-font-size-xl: var(--input-font-size-xl);
+  --switch-border-radius: var(--switch-height);
+  --switch-thumb-border-radius: 50%;
+  --switch-thumb-spacing: 2px;
+  --switch-focus-width: var(--component-focus-width);
+  --switch-speed: var(--component-speed);
+
+  /* Default */
+  --switch-color: var(--state-primary);
+  --switch-bg-color: var(--component-border-color);
+  --switch-thumb-color: var(--color-white);
+
+  /* Secondary */
+  --switch-color-secondary: var(--state-secondary);
+  --switch-bg-color-secondary: var(--component-border-color);
+  --switch-thumb-color-secondary: var(--color-white);
+
+  /* Success */
+  --switch-color-success: var(--state-success);
+  --switch-bg-color-success: var(--component-border-color);
+  --switch-thumb-color-success: var(--color-white);
+
+  /* Info */
+  --switch-color-info: var(--state-info);
+  --switch-bg-color-info: var(--component-border-color);
+  --switch-thumb-color-info: var(--color-white);
+
+  /* Warning */
+  --switch-color-warning: var(--state-warning);
+  --switch-bg-color-warning: var(--component-border-color);
+  --switch-thumb-color-warning: var(--color-white);
+
+  /* Danger */
+  --switch-color-danger: var(--state-danger);
+  --switch-bg-color-danger: var(--component-border-color);
+  --switch-thumb-color-danger: var(--color-white);
+
+  /* Light */
+  --switch-color-light: color(var(--state-light) shade(25%));
+  --switch-bg-color-light: color(var(--state-light) shade(10%));
+  --switch-thumb-color-light: var(--color-white);
+
+  /* Dark */
+  --switch-color-dark: color(var(--state-dark) tint(10%));
+  --switch-bg-color-dark: color(var(--state-dark) tint(25%));
+  --switch-thumb-color-dark: var(--color-white);
+
+  /*************************************************************************************************
+  * Tables
+  *************************************************************************************************/
+
+  --table-bg-color: var(--color-white);
+  --table-border-color: var(--component-border-color);
+  --table-border-width: var(--component-border-width);
+  --table-header-bg-color: transparent;
+  --table-spacing-x: .75rem;
+  --table-spacing-y: .5rem;
+  --table-hover-color: var(--color-white);
+  --table-hover-bg-color: var(--state-primary);
+  --table-stripe-bg-color: var(--component-bg-color);
+
+  /*************************************************************************************************
+  * Tabs
+  *************************************************************************************************/
+
+  --tab-bg-color: var(--body-bg-color);
+  --tab-bg-color-hover: var(--body-bg-color);
+  --tab-bg-color-active: var(--link-color);
+  --tab-bg-color-disabled: var(--body-bg-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(--body-color-muted);
+  --tab-padding-x: var(--component-padding-x);
+  --tab-padding-y: calc(var(--component-padding-y) / 2);
+  --tab-speed: var(--component-speed);
+
+  --tab-pane-border-color: var(--component-border-color);
+  --tab-pane-border-radius: var(--component-border-radius);
+  --tab-pane-border-width: var(--component-border-width);
+  --tab-pane-padding-x: var(--component-padding-x);
+  --tab-pane-padding-y: var(--component-padding-y);
+
+  /*************************************************************************************************
+  * Utilities
+  *************************************************************************************************/
+
+  --spacing-xs: .5rem;
+  --spacing-sm: 1rem;
+  --spacing-md: 1.5rem;
+  --spacing-lg: 2rem;
+  --spacing-xl: 2.5rem;
+}
+
+/* Core breakpoints */
+@custom-media --breakpoint-xs-up only screen and (min-width: 0);
+@custom-media --breakpoint-sm-up only screen and (min-width: 576px);
+@custom-media --breakpoint-md-up only screen and (min-width: 768px);
+@custom-media --breakpoint-lg-up only screen and (min-width: 992px);
+@custom-media --breakpoint-xl-up only screen and (min-width: 1200px);
+
+@custom-media --breakpoint-xs-down only screen and (max-width: 575px);
+@custom-media --breakpoint-sm-down only screen and (max-width: 767px);
+@custom-media --breakpoint-md-down only screen and (max-width: 991px);
+@custom-media --breakpoint-lg-down only screen and (max-width: 1199px);
+@custom-media --breakpoint-xl-down only screen and (min-width: 0);
+
+@custom-media --breakpoint-xs-only only screen and (min-width: 0) and (max-width: 575px);
+@custom-media --breakpoint-sm-only only screen and (min-width: 576px) and (max-width: 767px);
+@custom-media --breakpoint-md-only only screen and (min-width: 768px) and (max-width: 991px);
+@custom-media --breakpoint-lg-only only screen and (min-width: 992px) and (max-width: 1199px);
+@custom-media --breakpoint-xl-only only screen and (min-width: 1200px);

source/docs/attribution.md

@@ -10,7 +10,7 @@ Special thanks to the following individuals and organizations for their contribu
 
 - [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.
+- [Bootstrap](https://getbootstrap.com/) – for inspiration and an amazing grid system.
 - [KeyCDN](https://keycdn.com/) – for providing an awesome CDN service.
 - [GitHub](https://github.com/) – for hosting this and many other open source projects.
 - [Surreal CMS](https://www.surrealcms.com/) – for sponsoring development.

source/docs/buttons.md

@@ -12,7 +12,7 @@ To create a button, use the `<button>` element or apply the `button` class to an
 <button type="button">Button</button>
 ```
 
-<div class="input-single">
+<div class="input-field">
   <button type="button">Button</button>
 </div>
 
@@ -26,7 +26,7 @@ Use the `button-[xs|sm|lg|xl]` modifiers to change the size of a button.
 <button type="button" class="button-xl">XL Button</button>
 ```
 
-<div class="input-single">
+<div class="input-field">
   <button type="button" class="button-xs">XS Button</button>
   <button type="button" class="button-sm">SM Button</button>
   <button type="button">Default Button</button>
@@ -41,7 +41,7 @@ To disable a button set the `disabled` property on `<button>` elements. You can
 <a href="#" class="button disabled">Disabled Link</a>
 ```
 
-<div class="input-single">
+<div class="input-field">
   <button type="button" disabled>Disabled Button</button>
   <a href="#" class="button disabled">Disabled Link</a>
 </div>
@@ -53,7 +53,7 @@ You can force buttons to have an active state by applying the `active` class.
 <a href="#" class="button active">Active Link</a>
 ```
 
-<div class="input-single">
+<div class="input-field">
   <button type="button" class="active">Active Button</button>
   <a href="#" class="button active">Active Link</a>
 </div>
@@ -72,7 +72,7 @@ Use the `button-*` modifier to create variations.
 <button type="button" class="button-dark">Dark</button>
 ```
 
-<div class="input-single">
+<div class="input-field">
   <button type="button" class="button-secondary">Secondary</button>
   <button type="button" class="button-success">Success</button>
   <button type="button" class="button-info">Info</button>
@@ -90,7 +90,7 @@ Use the `button-block` modifier to make a button span the entire width of its pa
 <button type="button" class="button-block">Block Button</button>
 ```
 
-<div class="input-single">
+<div class="input-field">
   <button type="button" class="button-block">Block Button</button>
 </div>
 
@@ -102,7 +102,7 @@ Buttons can be styled to look like normal links with the `button-link` modifier.
 <a href="#" class="button button-link">Link Button</a>
 ```
 
-<div class="input-single">
+<div class="input-field">
   <a href="#" class="button button-link">Link Button</a>
 </div>
 
@@ -111,19 +111,19 @@ Buttons can be styled to look like normal links with the `button-link` modifier.
 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>
+<button type="button" class="button-loader button-xs">Button</button>
+<button type="button" class="button-loader button-sm">Button</button>
+<button type="button" class="button-loader">Button</button>
+<button type="button" class="button-loader button-lg">Button</button>
+<button type="button" class="button-loader button-xl">Button</button>
 ```
 
-<div class="input-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 class="input-field">
+  <button type="button" class="button-loader button-xs">Button</button>
+  <button type="button" class="button-loader button-sm">Button</button>
+  <button type="button" class="button-loader">Button</button>
+  <button type="button" class="button-loader button-lg">Button</button>
+  <button type="button" class="button-loader button-xl">Button</button>
 </div>
 
 Loader buttons also work with button variations.
@@ -138,7 +138,7 @@ Loader buttons also work with button variations.
 <button type="button" class="button-loader button-dark">Button</button>
 ```
 
-<div class="input-single">
+<div class="input-field">
   <button type="button" class="button-loader button-secondary">Button</button>
   <button type="button" class="button-loader button-success">Button</button>
   <button type="button" class="button-loader button-info">Button</button>
@@ -147,20 +147,3 @@ Loader buttons also work with button variations.
   <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/customizing.md

@@ -6,7 +6,7 @@ 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 [`source/css/shoelace.css`](../source/css/shoelace.css).
+If you’re using the source version of Shoelace (i.e. not the CDN or `/dist` version), you can customize components using CSS variables. To add customizations, simply override one or more of the variables found in [`source/css/variables.css`](../source/css/variables.css).
 
 For example, you can customize the default text color, background color, and the primary color by adding this to your stylesheet:
 
@@ -20,15 +20,15 @@ For example, you can customize the default text color, background color, and the
 
 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 [`source/css/alerts.css`](../source/css/alerts.css) for a complete list of variables.
+### Using CSS 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).
+You’re encouraged to use Shoelace’s variables in your own stylesheet. This makes it easy to reuse values without hardcoding them. It also provides a foundation for extending Shoelace with your own [custom components](#creating-custom-components).
 
 ```css
-.your-selector {
-  color: var(--state-danger);
+.your-component {
+  background-color: var(--component-bg-color);
+  border-color: var(--component-border-color);
+  color: var(--state-secondary);
 }
 ```
 
@@ -36,7 +36,7 @@ If you’re not familiar with CSS variables, [this article](https://developer.mo
 
 ### Creating Custom Components
 
-You can create custom components to extend Shoelace’s functionality. Here’s what a component’s stylesheet looks like.
+You can create custom components to extend Shoelace’s functionality. Here’s what a component stylesheet looks like.
 
 ```css
 /* Set default variables in a :root block. It's a good idea to
@@ -44,7 +44,7 @@ You can create custom components to extend Shoelace’s functionality. Here’s
    easier to customize the library as a whole but still lets
    users change individual components.
 
-   Never change or override core variables in your extension!
+   Never change or override core variables!
 */
 :root {
   --accordion-bg-color: var(--component-bg-color);

source/docs/dropdowns.md

@@ -12,6 +12,8 @@ Note the class names used for the main container, the trigger, and the menu. Add
 
 To disable a dropdown entirely, add the `disabled` property to the dropdown trigger if it’s a button. If it’s a link, add the `disabled` class instead. When a dropdown is activated, it will receive the `active` class and the menu will show.
 
+Headings can be created with the `dropdown-heading` class.
+
 ```html
 <div class="dropdown">
   <button type="button" class="dropdown-trigger">Dropdown</button>
@@ -22,12 +24,13 @@ To disable a dropdown entirely, add the `disabled` property to the dropdown trig
     <a href="#" class="checked">Checked</a>
     <a href="#" class="disabled">Disabled</a>
     <hr>
+    <div class="dropdown-heading">Heading</div>
     <a href="#">More...</a>
   </div>
 </div>
 ```
 
-<div class="input-single">
+<div class="input-field">
   <div class="dropdown">
     <button type="button" class="dropdown-trigger">Dropdown</button>
     <div class="dropdown-menu">
@@ -37,6 +40,7 @@ To disable a dropdown entirely, add the `disabled` property to the dropdown trig
       <a href="#" class="checked">Checked</a>
       <a href="#" class="disabled">Disabled</a>
       <hr>
+      <div class="dropdown-heading">Heading</div>
       <a href="#">More...</a>
     </div>
   </div>
@@ -58,7 +62,7 @@ Use the `dropdown-top` and `dropdown-left` modifiers to change the positioning o
 </div>
 ```
 
-<div class="input-single">
+<div class="input-field">
   <div class="dropdown dropdown-top">
     <button type="button" class="dropdown-trigger">Top</button>
     <div class="dropdown-menu">
@@ -121,11 +125,11 @@ Dropdowns with button triggers can be used inside input groups.
   </div>
 </div>
 
-### Events
+### Interactivity
 
-Dropdowns require `shoelace.js` to make them interactive. You don’t need to initialize them. Simply include the script and everything “just works.”
+Dropdowns require `shoelace.js` for interactivity. You don’t need to initialize anything. Just include the script and everything “just works.”
 
-There is no JavaScript API. Shoelace’s philosophy believes that custom components should act like native components as much as possible. You can, however, listen for various events:
+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.
@@ -143,5 +147,18 @@ $('#my-dropdown')
   })
   .on('select', function(event, item) {
     console.log('select', event.target, item);
+
+    // Tip: Use event.preventDefault() to
+    // intercept the original click event.
   });
 ```
+
+To show or hide a dropdown programmatically, just add or remove the `active` class to the dropdown.
+
+```javascript
+// Show the dropdown
+$('#my-dropdown').addClass('active');
+
+// Hide the dropdown
+$('#my-dropdown').removeClass('active');
+```

source/docs/file-buttons.md

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

source/docs/forms.md

@@ -2,6 +2,8 @@
 layout: default.html
 title: Forms
 description: Default form control styles.
+stylesheets:
+ - https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css
 ---
 
 ## Forms
@@ -44,11 +46,14 @@ Form controls are styled at 100% of the width of their parent element.
         <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.
+          File inputs aren’t supported. Use a [file button](file-buttons.html) instead.
         </span>
       </td>
       <td>
-        <label class="button button-block">Select File <input type="file"></label>
+        <span class="file-button">
+          <input type="file" id="file-button-ex">
+          <label class="button button-block" for="file-button-ex">Select File</label>
+        </span>
       </td>
     </tr>
     <tr>
@@ -115,39 +120,38 @@ You can change the size of most form controls with the `input-[xs|sm|lg|xl]` mod
 <select class="input-xl"><option>Item</option></select>
 ```
 
-<div class="two-column">
-  <div class="column">
-    <div class="input-single">
+<div class="row">
+  <div class="col-sm-6">
+    <div class="input-field">
       <input type="text" class="input-xs" placeholder="XS">
     </div>
-    <div class="input-single">
+    <div class="input-field">
       <input type="text" class="input-sm" placeholder="SM">
     </div>
-    <div class="input-single">
+    <div class="input-field">
       <input type="text" placeholder="Default">
     </div>
-    <div class="input-single">
+    <div class="input-field">
       <input type="text" class="input-lg" placeholder="LG">
     </div>
-    <div class="input-single">
+    <div class="input-field">
       <input type="text" class="input-xl" placeholder="XL">
     </div>
   </div>
-
-  <div class="column">
-    <div class="input-single">
+  <div class="col-sm-6">
+    <div class="input-field">
       <select class="input-xs"><option>XS</option></select>
     </div>
-    <div class="input-single">
+    <div class="input-field">
       <select class="input-sm"><option>SM</option></select>
     </div>
-    <div class="input-single">
+    <div class="input-field">
       <select><option>Default</option></select>
     </div>
-    <div class="input-single">
+    <div class="input-field">
       <select class="input-lg"><option>LG</option></select>
     </div>
-    <div class="input-single">
+    <div class="input-field">
       <select class="input-xl"><option>XL</option></select>
     </div>
   </div>
@@ -155,52 +159,52 @@ You can change the size of most form controls with the `input-[xs|sm|lg|xl]` mod
 
 Disabled form controls look like this:
 
-<div class="input-single">
+<div class="input-field">
   <input type="text" placeholder="Input" disabled>
 </div>
 
-<div class="input-single">
+<div class="input-field">
   <label><input type="checkbox" disabled> Checkbox</label>
   <label><input type="radio" disabled> Radio</label>
 </div>
 
 Read-only form controls look like this:
 
-<div class="input-single">
+<div class="input-field">
   <input type="text" readonly value="This is read-only">
 </div>
 
-### Form Control Spacing
+### Input Fields
 
-For proper spacing of individual form controls, wrap them in `input-single` containers.
+For proper spacing of individual form controls, wrap them in `input-field` containers.
 
 ```html
-<div class="input-single">
+<div class="input-field">
   <label>Name</label>
   <input type="text">
 </div>
 
-<div class="input-single">
+<div class="input-field">
   <label>Password</label>
   <input type="password">
 </div>
 
-<div class="input-single">
+<div class="input-field">
   <label><input type="checkbox"> Remember me</label>
 </div>
 ```
 
-<div class="input-single">
+<div class="input-field">
   <label>Username</label>
   <input type="text">
 </div>
 
-<div class="input-single">
+<div class="input-field">
   <label>Password</label>
   <input type="password">
 </div>
 
-<div class="input-single">
+<div class="input-field">
   <label><input type="checkbox"> Remember me</label>
 </div>
 
@@ -256,6 +260,41 @@ Form controls and buttons can be grouped by wrapping them in `input-group` conta
   <button type="button">Option 3</button>
 </div>
 
+### Input Hints
+
+You can add textual hints below form controls with the `input-hint` class.
+
+```html
+<div class="input-field">
+  <label>Name</label>
+  <input type="text">
+  <p class="input-hint">What do people call you?</p>
+</div>
+
+<div class="input-field">
+  <label>Age</label>
+  <input type="number">
+  <p class="input-hint">Enter your age in years</p>
+</div>
+```
+
+<div class="row">
+  <div class="col-sm-6">
+    <div class="input-field">
+      <label>Name</label>
+      <input type="text">
+      <p class="input-hint">What do people call you?</p>
+    </div>
+  </div>
+  <div class="col-sm-6">
+    <div class="input-field">
+      <label>Age</label>
+      <input type="number">
+      <p class="input-hint">Enter your age in years</p>
+    </div>
+  </div>
+</div>
+
 ### Input Addons
 
 To create an input addon, use `<span class="input-addon">`. Addons can appear anywhere inside an input group. Use the `input-addon-[xs|sm|lg|xl]` modifiers to change the size to match adjacent form controls.
@@ -292,7 +331,7 @@ To create an input addon, use `<span class="input-addon">`. Addons can appear an
 </div>
 ```
 
-<div class="input-single">
+<div class="input-field">
   <div class="input-group">
     <span class="input-addon input-addon-xs">$</span>
     <input type="text" class="input-xs">
@@ -300,7 +339,7 @@ To create an input addon, use `<span class="input-addon">`. Addons can appear an
   </div>
 </div>
 
-<div class="input-single">
+<div class="input-field">
   <div class="input-group">
     <span class="input-addon input-addon-sm">$</span>
     <input type="text" class="input-sm">
@@ -308,7 +347,7 @@ To create an input addon, use `<span class="input-addon">`. Addons can appear an
   </div>
 </div>
 
-<div class="input-single">
+<div class="input-field">
   <div class="input-group">
     <span class="input-addon">$</span>
     <input type="text">
@@ -316,7 +355,7 @@ To create an input addon, use `<span class="input-addon">`. Addons can appear an
   </div>
 </div>
 
-<div class="input-single">
+<div class="input-field">
   <div class="input-group">
     <span class="input-addon input-addon-lg">$</span>
     <input type="text" class="input-lg">
@@ -324,7 +363,7 @@ To create an input addon, use `<span class="input-addon">`. Addons can appear an
   </div>
 </div>
 
-<div class="input-single">
+<div class="input-field">
   <div class="input-group">
     <span class="input-addon input-addon-xl">$</span>
     <input type="text" class="input-xl">
@@ -332,6 +371,161 @@ To create an input addon, use `<span class="input-addon">`. Addons can appear an
   </div>
 </div>
 
+### Input Icons
+
+Input icons add visual context to form controls. To add icons to a form control, wrap it with an `input-icon` element and add icons before and after it.
+
+This example uses Font Awesome, but you can use whatever icon library you want. For consistency, use fixed with icons if your icon library supports them.
+
+```html
+<div class="input-icon">
+  <i class="fa fa-fw fa-phone"></i>
+  <input type="text">
+</div>
+
+<div class="input-icon">
+  <input type="text">
+  <i class="fa fa-fw fa-envelope-o"></i>
+</div>
+
+<div class="input-icon">
+  <i class="fa fa-fw fa-user"></i>
+  <input type="text">
+  <i class="fa fa-check"></i>
+</div>
+
+<div class="input-icon">
+  <i class="fa fa-fw fa-map-marker"></i>
+  <select><option>United States</option></select>
+</div>
+```
+
+<div class="row">
+  <div class="col-md-6 mar-b-md">
+    <div class="input-icon">
+      <i class="fa fa-fw fa-phone"></i>
+      <input type="text">
+    </div>
+  </div>
+  <div class="col-md-6 mar-b-md">
+    <div class="input-icon">
+      <input type="text">
+      <i class="fa fa-fw fa-envelope-o"></i>
+    </div>
+  </div>
+  <div class="col-md-6 mar-b-md">
+    <div class="input-icon">
+      <i class="fa fa-fw fa-user"></i>
+      <input type="text">
+      <i class="fa fa-check"></i>
+    </div>
+  </div>
+  <div class="col-md-6 mar-b-md">
+    <div class="input-icon">
+      <i class="fa fa-fw fa-map-marker"></i>
+      <select><option>United States</option></select>
+    </div>
+  </div>
+</div>
+
+Input icons can be used inside form groups.
+
+```html
+<div class="input-group">
+  <span class="input-addon">Location</span>
+  <div class="input-icon">
+    <i class="fa fa-fw fa-map-marker"></i>
+    <input type="text">
+    <i class="fa fa-fw fa-check"></i>
+  </div>
+  <button type="button">Submit</button>
+</div>
+```
+
+<div class="input-group">
+  <span class="input-addon">Location</span>
+  <div class="input-icon">
+    <i class="fa fa-fw fa-map-marker"></i>
+    <input type="text">
+    <i class="fa fa-fw fa-check"></i>
+  </div>
+  <button type="button">Submit</button>
+</div>
+
+Use the `input-icon-[xs|sm|lg|xs]` modifiers to change the size of input icons to match form controls.
+
+```html
+<div class="input-icon input-icon-xs">
+  <i class="fa fa-fw fa-user"></i>
+  <input class="input-xs" type="text">
+  <i class="fa fa-check"></i>
+</div>
+
+<div class="input-icon input-icon-sm">
+  <i class="fa fa-fw fa-user"></i>
+  <input class="input-sm" type="text">
+  <i class="fa fa-check"></i>
+</div>
+
+<div class="input-icon">
+  <i class="fa fa-fw fa-user"></i>
+  <input type="text">
+  <i class="fa fa-check"></i>
+</div>
+
+<div class="input-icon input-icon-lg">
+  <i class="fa fa-fw fa-user"></i>
+  <input class="input-lg" type="text">
+  <i class="fa fa-check"></i>
+</div>
+
+<div class="input-icon input-icon-xl">
+  <i class="fa fa-fw fa-user"></i>
+  <input class="input-xl" type="text">
+  <i class="fa fa-check"></i>
+</div>
+```
+
+<div class="input-field">
+  <div class="input-icon input-icon-xs">
+    <i class="fa fa-fw fa-user"></i>
+    <input class="input-xs" type="text">
+    <i class="fa fa-check"></i>
+  </div>
+</div>
+
+<div class="input-field">
+  <div class="input-icon input-icon-sm">
+    <i class="fa fa-fw fa-user"></i>
+    <input class="input-sm" type="text">
+    <i class="fa fa-check"></i>
+  </div>
+</div>
+
+<div class="input-field">
+  <div class="input-icon">
+    <i class="fa fa-fw fa-user"></i>
+    <input type="text">
+    <i class="fa fa-check"></i>
+  </div>
+</div>
+
+<div class="input-field">
+  <div class="input-icon input-icon-lg">
+    <i class="fa fa-fw fa-user"></i>
+    <input class="input-lg" type="text">
+    <i class="fa fa-check"></i>
+  </div>
+</div>
+
+<div class="input-field">
+  <div class="input-icon input-icon-xl">
+    <i class="fa fa-fw fa-user"></i>
+    <input class="input-xl" type="text">
+    <i class="fa fa-check"></i>
+  </div>
+</div>
+
 ### Form Groups
 
 Related form controls can be grouped in a `<fieldset>`. An optional `<legend>` can be used to display a name for the group.
@@ -345,52 +539,96 @@ Related form controls can be grouped in a `<fieldset>`. An optional `<legend>` c
 
 <fieldset>
   <legend>Login</legend>
-  <div class="input-single">
+  <div class="input-field">
     <label>Username</label>
     <input type="text">
   </div>
-  <div class="input-single">
+  <div class="input-field">
     <label>Password</label>
     <input type="password">
   </div>
-  <div class="input-single">
+  <div class="input-field">
     <label>
       <input type="checkbox"> Remember me
     </label>
   </div>
-  <div class="input-single">
+  <div class="input-field">
     <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.
+A form control can be made valid or invalid by adding the `input-valid` or `input-invalid` modifiers to the surrounding `input-field`.
 
 ```html
-<div class="input-single input-valid">
+<div class="input-field input-valid">
   <label>Valid</label>
   <input type="text">
 </div>
 
-<div class="input-single input-invalid">
+<div class="input-field input-invalid">
   <label>Invalid</label>
   <input type="text">
 </div>
 ```
 
-<div class="two-column">
-  <div class="column">
-    <div class="input-single input-valid">
+<div class="row">
+  <div class="col-12 col-sm-6">
+    <div class="input-field input-valid">
       <label>Valid</label>
       <input type="text">
     </div>
   </div>
-
-  <div class="column">
-    <div class="input-single input-invalid">
+  <div class="col-12 col-sm-6">
+    <div class="input-field input-invalid">
       <label>Invalid</label>
       <input type="text">
     </div>
   </div>
 </div>
+
+Never apply validation modifiers directly to a form control, as some components (e.g. input icons) wrap inputs with additional elements that won’t be able to inherit the correct styles.
+
+```html
+<div class="input-field input-valid">
+  <label>Valid with Icons</label>
+  <div class="input-icon">
+    <i class="fa fa-fw fa-user"></i>
+    <input type="text">
+    <i class="fa fa-fw fa-check"></i>
+  </div>
+</div>
+
+<div class="input-field input-invalid">
+  <label>Invalid with Icons</label>
+  <div class="input-icon">
+    <i class="fa fa-fw fa-user"></i>
+    <input type="text">
+    <i class="fa fa-fw fa-times"></i>
+  </div>
+</div>
+```
+
+<div class="row">
+  <div class="col-12 col-sm-6">
+    <div class="input-field input-valid">
+      <label>Valid with Icons</label>
+      <div class="input-icon">
+        <i class="fa fa-fw fa-user"></i>
+        <input type="text">
+        <i class="fa fa-fw fa-check"></i>
+      </div>
+    </div>
+  </div>
+  <div class="col-12 col-sm-6">
+    <div class="input-field input-invalid">
+      <label>Invalid with Icons</label>
+      <div class="input-icon">
+        <i class="fa fa-fw fa-user"></i>
+        <input type="text">
+        <i class="fa fa-fw fa-times"></i>
+      </div>
+    </div>
+  </div>
+</div>

source/docs/grid-system.md

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

source/docs/icons.md

@@ -22,7 +22,7 @@ You can load Font Awesome locally or via CDN. To use the CDN version, add this t
 
 Then add icons as you normally would with `<i class="fa fa-*"></i>`:
 
-<div class="input-single text-secondary" style="font-size: 2rem;">
+<div class="input-field text-secondary" style="font-size: 2rem;">
   <i class="fa fa-magic"></i>
   <i class="fa fa-briefcase"></i>
   <i class="fa fa-cog"></i>
@@ -37,7 +37,7 @@ Then add icons as you normally would with `<i class="fa fa-*"></i>`:
   <i class="fa fa-warning"></i>
 </div>
 
-<div class="input-single">
+<div class="input-field">
   <button type="button"><i class="fa fa-star"></i> Star</button>
   <button type="button" class="button-success"><i class="fa fa-check"></i> Check</button>
   <button type="button" class="button-warning"><i class="fa fa-pencil"></i> Edit</button>

source/docs/installing.md

@@ -40,4 +40,6 @@ You can [download Shoelace](https://github.com/claviska/shoelace-css/releases) f
 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.
+The main source file is [`source/css/shoelace.css`](../source/css/shoelace.css). This bootstraps the entire project by importing core variables and all of Shoelace’s components.
+
+If you don’t need everything, just load [`source/css/variables.css`](../source/css/variables.css) along with the components you want.

source/docs/loaders.md

@@ -15,7 +15,7 @@ Create a pure CSS loader by applying the `loader` class to an empty `<span>` ele
 <span class="loader loader-lg"></span>
 <span class="loader loader-xl"></span>
 ```
-<div class="input-single">
+<div class="input-field">
   <span class="loader loader-xs"></span>
   <span class="loader loader-sm"></span>
   <span class="loader"></span>

source/docs/switches.md

@@ -18,24 +18,24 @@ The markup for a switch looks like this:
 
 ```html
 <span class="switch">
-  <input type="checkbox" class="switch" id="switch-1">
+  <input type="checkbox" id="switch-1">
   <label for="switch-1">Switch 1</label>
 </span>
 
 <span class="switch">
-  <input type="checkbox" class="switch" id="switch-2" checked>
+  <input type="checkbox" id="switch-2" checked>
   <label for="switch-2">Switch 2</label>
 </span>
 ```
 
-<div class="input-single">
+<div class="input-field">
   <span class="switch">
-    <input type="checkbox" class="switch" id="switch-1">
+    <input type="checkbox" id="switch-1">
     <label for="switch-1">Switch 1</label>
   </span>
 
   <span class="switch">
-    <input type="checkbox" class="switch" id="switch-2" checked>
+    <input type="checkbox" id="switch-2" checked>
     <label for="switch-2">Switch 2</label>
   </span>
 </div>
@@ -44,54 +44,54 @@ 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">
+  <input type="checkbox" id="switch-xs">
   <label for="switch-xs">XS</label>
 </span>
 
 <span class="switch switch-sm">
-  <input type="checkbox" class="switch" id="switch-sm">
+  <input type="checkbox" id="switch-sm">
   <label for="switch-sm">SM</label>
 </span>
 
 <span class="switch">
-  <input type="checkbox" class="switch" id="switch-default">
+  <input type="checkbox" id="switch-default">
   <label for="switch-default">Default</label>
 </span>
 
 <span class="switch switch-lg">
-  <input type="checkbox" class="switch" id="switch-lg">
+  <input type="checkbox" id="switch-lg">
   <label for="switch-lg">LG</label>
 </span>
 
 <span class="switch switch-xl">
-  <input type="checkbox" class="switch" id="switch-xl">
+  <input type="checkbox" id="switch-xl">
   <label for="switch-xl">XL</label>
 </span>
 ```
 
-<div class="input-single">
+<div class="input-field">
   <span class="switch switch-xs">
-    <input type="checkbox" class="switch" id="switch-xs">
+    <input type="checkbox" id="switch-xs">
     <label for="switch-xs">XS</label>
   </span>
 
   <span class="switch switch-sm">
-    <input type="checkbox" class="switch" id="switch-sm">
+    <input type="checkbox" id="switch-sm">
     <label for="switch-sm">SM</label>
   </span>
 
   <span class="switch">
-    <input type="checkbox" class="switch" id="switch-default">
+    <input type="checkbox" id="switch-default">
     <label for="switch-default">Default</label>
   </span>
 
   <span class="switch switch-lg">
-    <input type="checkbox" class="switch" id="switch-lg">
+    <input type="checkbox" id="switch-lg">
     <label for="switch-lg">LG</label>
   </span>
 
   <span class="switch switch-xl">
-    <input type="checkbox" class="switch" id="switch-xl">
+    <input type="checkbox" id="switch-xl">
     <label for="switch-xl">XL</label>
   </span>
 </div>
@@ -100,14 +100,14 @@ Disabled switches are dimmed out. To disable a switch, add the `disabled` attrib
 
 ```html
 <span class="switch">
-  <input type="checkbox" class="switch" disabled id="switch-disabled">
+  <input type="checkbox" disabled id="switch-disabled">
   <label for="switch-disabled">Disabled</label>
 </span>
 ```
 
-<div class="input-single">
+<div class="input-field">
   <span class="switch">
-    <input type="checkbox" class="switch" disabled id="switch-disabled">
+    <input type="checkbox" disabled id="switch-disabled">
     <label for="switch-disabled">Disabled</label>
   </span>
 </div>
@@ -128,36 +128,36 @@ Use the `switch-*` modifier to create variations.
 ```
 
 <span class="switch switch-secondary">
-  <input type="checkbox" class="switch" id="variation-secondary" checked>
+  <input type="checkbox" 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>
+  <input type="checkbox" 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>
+  <input type="checkbox" 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>
+  <input type="checkbox" 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>
+  <input type="checkbox" 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>
+  <input type="checkbox" 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>
+  <input type="checkbox" id="variation-dark" checked>
   <label for="variation-dark">Dark</label>
 </span>

source/docs/tabs.md

@@ -8,9 +8,9 @@ description: Add tabs to your app with the tabs component.
 
 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`.
+Note the class names used for the main container, the tabs, and the tab panes. Also note that each tab links to its respective tab pane’s `id`.
 
-To disable a tab, add `disabled` to the appropriate tab nav.
+For initial rendering, make sure the appropriate tab and tab pane have the `active` class.
 
 ```html
 <div class="tabs">
@@ -73,66 +73,73 @@ To disable a tab, add `disabled` to the appropriate tab nav.
 
 ### 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.
+Tabs can be made vertical when used with the [grid system](grid-system.html) and `tabs-nav-block`.
 
-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.
+```html
+<div class="tabs">
+  <div class="row">
+    <div class="col-4">
+      <nav class="tabs-nav tabs-nav-block">
+        <a href="#tab-1-example-2" class="active">Tab 1</a>
+        <a href="#tab-2-example-2">Tab 2</a>
+        <a href="#tab-3-example-2">Tab 3</a>
+        <a href="#" class="disabled">Disabled</a>
+      </nav>
+    </div>
 
-```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="col-8">
+      <div class="tabs-pane active" id="tab-1-example-2">...</div>
+      <div class="tabs-pane" id="tab-2-example-2">...</div>
+      <div class="tabs-pane" id="tab-3-example-2">...</div>
+    </div>
+  </div>
+</div>
 ```
 
-<div class="tabs 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 class="tabs">
+  <div class="row">
+    <div class="col-4">
+      <nav class="tabs-nav tabs-nav-block">
+        <a href="#tab-1-example-2" class="active">Tab 1</a>
+        <a href="#tab-2-example-2">Tab 2</a>
+        <a href="#tab-3-example-2">Tab 3</a>
+        <a href="#" class="disabled">Disabled</a>
+      </nav>
+    </div>
+    <div class="col-8">
+      <div class="tabs-pane active" id="tab-1-example-2">
+        <h3>Tab 1</h3>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui repellat ea magni magnam
+          assumenda voluptas accusantium nemo. Iusto beatae illum mollitia aut quasi odit facilis
+          officiis, laudantium debitis! Excepturi, quis!
+        </p>
+      </div>
+      <div class="tabs-pane" id="tab-2-example-2">
+        <h3>Tab 2</h3>
+        <p>
+          Atque eius voluptatibus ipsa ex totam odit, quidem illo distinctio sit! Quod quae minus,
+          aut itaque. Mollitia, dolore! Facere molestiae necessitatibus sint recusandae incidunt
+          pariatur labore iste vel, velit odit.
+        </p>
+      </div>
+      <div class="tabs-pane" id="tab-3-example-2">
+        <h3>Tab 3</h3>
+        <p>
+          Aperiam asperiores optio iusto qui nisi, perspiciatis, ipsum, tenetur explicabo earum et
+          laboriosam odit magni maxime quos molestias aspernatur laudantium harum placeat tempora
+          quae necessitatibus, aut dignissimos totam non! Quod.
+        </p>
+      </div>
+    </div>
   </div>
 </div>
 
-### Events
+### Interactivity
 
-Tabs require `shoelace.js` to make them interactive. You don’t need to initialize them. Simply include the script and everything “just works.”
+Tabs require `shoelace.js` for interactivity. You don’t need to initialize anything. Just include the script and everything “just works.”
 
-There is no JavaScript API. Shoelace’s philosophy believes that custom components should act like native components as much as possible. You can, however, listen for various events:
+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.
@@ -148,3 +155,11 @@ $('#my-tabs')
     console.log('hide', event.target, tabPane);
   });
 ```
+
+To activate a tab programmatically, just add the `active` class to it. We use a [mutation observer](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) to remove the active class on other tabs and to show/hide the appropriate tab panes automatically.
+
+```javascript
+$('#tab-id').addClass('active');
+```
+
+To disable a tab, add the `disabled` class to the appropriate tab.

source/docs/utilities.md

@@ -6,102 +6,11 @@ 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>
+Shoelace provides a number of helpful utilities that make designing and prototyping easier.
 
 ### Background Utilities
 
-Background utility classes can be applied to change an element’s background color.
+Background utilities can be applied to change an element’s background color.
 
 ```html
 <div class="bg-primary">Primary</div>
@@ -123,6 +32,62 @@ Background utility classes can be applied to change an element’s background co
 <div class="mar-b-sm pad-sm bg-light text-dark">Light</div>
 <div class="mar-b-sm pad-sm bg-dark text-light">Dark</div>
 
+### Breakpoint Utilities
+
+Responsive breakpoints exist for five tiers of screen sizes. By default, the breakpoints are:
+
+- `xs` &rarr; 575px and below
+- `sm` &rarr; 576px – 767px
+- `md` &rarr; 768px – 991px
+- `lg` &rarr; 992px - 1199px
+- `xl` &rarr; 1200px and above
+
+If you’re building Shoelace from source, you can use the custom media queries found in [`source/css/variables.css`](../source/css/variables.css) to easily target various breakpoints without hard-coding screen sizes in your stylesheet.
+
+```css
+@media (--breakpoint-xs-up) { /* xs screens and above */ }
+@media (--breakpoint-sm-up) { /* sm screens and above */ }
+@media (--breakpoint-md-up) { /* md screens and above */ }
+@media (--breakpoint-lg-up) { /* lg screens and above */ }
+@media (--breakpoint-xl-up) { /* xl screens and above */ }
+
+@media (--breakpoint-xs-down) { /* xs screens and below */ }
+@media (--breakpoint-sm-down) { /* sm screens and below */ }
+@media (--breakpoint-md-down) { /* md screens and below */ }
+@media (--breakpoint-lg-down) { /* lg screens and below */ }
+@media (--breakpoint-xl-down) { /* xl screens and below */ }
+
+@media (--breakpoint-xs-only) { /* xs screens only */ }
+@media (--breakpoint-sm-only) { /* sm screens only */ }
+@media (--breakpoint-md-only) { /* md screens only */ }
+@media (--breakpoint-lg-only) { /* lg screens only */ }
+@media (--breakpoint-xl-only) { /* xl screens only */ }
+```
+
+### Display Utilities
+
+Display utilities let you hide elements based on the current breakpoint. Use `hide-[xs|sm|md|lg|xl]` to hide an element only at a specific viewport. Use `hide-*-up` to hide an element at and above a specific breakpoint. Use `hide-*-down` to hide an element at and below a specific breakpoint.
+
+```html
+<div class="row">
+  <div class="col-2 hide-xs">hide-xs</div>
+  <div class="col-2 hide-sm">hide-sm</div>
+  <div class="col-2 hide-md">hide-md</div>
+  <div class="col-2 hide-lg">hide-lg</div>
+  <div class="col-2 hide-xl">hide-xl</div>
+</div>
+```
+
+<div class="container grid-example">
+  <div class="row">
+    <div class="col-2 hide-xs">hide-xs</div>
+    <div class="col-2 hide-sm">hide-sm</div>
+    <div class="col-2 hide-md">hide-md</div>
+    <div class="col-2 hide-lg">hide-lg</div>
+    <div class="col-2 hide-xl">hide-xl</div>
+  </div>
+</div>
+
 ### Float Utilities
 
 Float utilities are provided to easily float elements to the left or right. Just apply the `float-left` or `float-right` class to an element to float it left or right.
@@ -178,7 +143,7 @@ Example:
 <div class="pad-0 mar-xl">
 ```
 
-To apply spacing to a specific side of an element, use one or more of the following classes.
+To apply spacing to a specific side of an element, use one or more of the following classes indicating top, right, bottom, left, x (horizontal), and y (vertical):
 
 ```
 pad-[t|r|b|l|x|y]-[0|xs|sm|md|lg|xl]
@@ -192,3 +157,98 @@ Example:
 ```
 
 You can also use `mar-[x|y|xy]-auto` to set automatic margins horizontally and/or vertically.
+
+### Text Utilities
+
+Text utility classes can be applied to change the appearance of text.
+
+<table class="table">
+  <thead>
+    <tr>
+      <th>Class</th>
+      <th>Example</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>`text-primary`</td>
+      <td class="text-primary">This is primary text</td>
+    </tr>
+    <tr>
+      <td>`text-secondary`</td>
+      <td class="text-secondary">This is secondary text</td>
+    </tr>
+    <tr>
+      <td>`text-success`</td>
+      <td class="text-success">This is success text</td>
+    </tr>
+    <tr>
+      <td>`text-info`</td>
+      <td class="text-info">This is info text</td>
+    </tr>
+    <tr>
+      <td>`text-warning`</td>
+      <td class="text-warning">This is warning text</td>
+    </tr>
+    <tr>
+      <td>`text-danger`</td>
+      <td class="text-danger">This is danger text</td>
+    </tr>
+    <tr>
+      <td>`text-light`</td>
+      <td class="text-light">This is light text</td>
+    </tr>
+    <tr>
+      <td>`text-dark`</td>
+      <td class="text-dark">This is dark text</td>
+    </tr>
+    <tr>
+      <td>`text-small`</td>
+      <td class="text-small">This is small text</td>
+    </tr>
+    <tr>
+      <td>`text-bold`</td>
+      <td class="text-bold">This is bold text</td>
+    </tr>
+    <tr>
+      <td>`text-italic`</td>
+      <td class="text-italic">This is italic text</td>
+    </tr>
+    <tr>
+      <td>`text-muted`</td>
+      <td class="text-muted">This is muted text</td>
+    </tr>
+    <tr>
+      <td>`text-left`</td>
+      <td class="text-left">This is left-aligned text</td>
+    </tr>
+    <tr>
+      <td>`text-center`</td>
+      <td class="text-center">This is centered text</td>
+    </tr>
+    <tr>
+      <td>`text-right`</td>
+      <td class="text-right">This is right-aligned text</td>
+    </tr>
+    <tr>
+      <td>`text-justify`</td>
+      <td class="text-justify">This is justified text</td>
+    </tr>
+    <tr>
+      <td>`text-nowrap`</td>
+      <td class="text-nowrap">This is text that won’t wrap</td>
+    </tr>
+    <tr>
+      <td>`text-lowercase`</td>
+      <td class="text-lowercase">This is lowercase text</td>
+    </tr>
+    <tr>
+      <td>`text-uppercase`</td>
+      <td class="text-uppercase">This is uppercase text</td>
+    </tr>
+    <tr>
+      <td>`text-capitalize`</td>
+      <td class="text-capitalize">This is capitalized text</td>
+    </tr>
+  </tbody>
+</table>

source/js/dropdowns.js

@@ -37,16 +37,13 @@
   (typeof jQuery === 'function' ? jQuery : Zepto)(function($) {
     $(document)
       .on('click', function(event) {
-        var dropdown;
-        var menu;
-        var selectedItem;
-        var trigger;
+        var dropdown = $(event.target).closest('.dropdown').get(0);
+        var trigger = dropdown ? $(event.target).closest('.dropdown-trigger').get(0) : null;
+        var menu = dropdown ? $(event.target).closest('.dropdown-menu').get(0) : null;
+        var selectedItem = menu ? $(event.target).closest('a').get(0) : null;
 
         // Watch for clicks on dropdown triggers
-        if($(event.target).is('.dropdown-trigger')) {
-          dropdown = $(event.target).closest('.dropdown');
-          trigger = event.target;
-
+        if(trigger) {
           // Close other dropdowns
           $('.dropdown.active')
             .not(dropdown)
@@ -62,24 +59,30 @@
           $(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);
+          return;
+        }
 
-            // 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
+        // If the user selected a menu item, close the dropdown and fire the select event
+        if(selectedItem) {
+          // Don't select disabled menu items
+          if($(selectedItem).is('.disabled')) {
             event.preventDefault();
+            return;
           }
 
-          // Close dropdowns on all other clicks
+          // Close the dropdown and trigger the select event. The original click event is exposed to
+          // the handler so it can be prevented as needed.
+          $(dropdown)
+            .removeClass('active')
+            .trigger('hide')
+            .trigger($.Event('select', event), selectedItem);
+
+          return;
+        }
+
+        // If the click wasn't in a dropdown, hide any active dropdowns
+        if(!dropdown) {
           $('.dropdown.active')
             .removeClass('active')
             .trigger('hide');

source/js/tabs.js

@@ -23,7 +23,7 @@
 // Tabs not toggling?
 //   - Make sure you've loaded jQuery or Zepto before this script
 //   - Make sure your tabs are structured properly per the docs
-//   - Make sure your tab navs and tab panes have the correct IDs
+//   - Make sure your tab navs and tab panes have the correct href and id attributes
 //
 (function() {
   /* eslint-env browser, jquery */
@@ -35,34 +35,57 @@
   }
 
   (window.jQuery || window.Zepto)(function($) {
+    // Watch for mutations on tabs and show the appropriate tab pane
+    var observer = new MutationObserver(function(mutations) {
+      mutations.forEach(function(mutation) {
+        // Only observe class changes
+        if(mutation.type === 'attributes' && mutation.attributeName === 'class') {
+          var tab = $(mutation.target).get(0);
+          var tabs = $(mutation.target).closest('.tabs').get(0);
+          var tabsNav = $(mutation.target).closest('.tabs-nav').get(0);
+          var tabPane = tab.tagName === 'A' ? $(tabs).find(tab.hash) : null;
+
+          // The mutation must be on a tab
+          if(!$(tab).is('a') || !tabs || !tabsNav) return;
+
+          // Disabled tabs can't receive the active class, so we just remove it
+          if($(tab).is('.disabled.active')) {
+            $(tab).removeClass('active');
+            return;
+          }
+
+          // Toggle the tab pane based on the tab's active state
+          if($(tab).is('.active')) {
+            // Remove the active class from other tabs
+            $(tab).siblings('.active').removeClass('active');
+
+            // Show the selected tab
+            $(tabPane).addClass('active');
+            $(tabs).trigger('show', tabPane);
+          } else {
+            // Hide the previously selected tab
+            $(tabPane).removeClass('active');
+            $(tabs).trigger('hide', tabPane);
+          }
+        }
+      });
+    });
+
+    // Observe the body so we can handle dynamically created elements
+    observer.observe(document.body, {
+      attributes: true,
+      attributeFilter: ['class'],
+      attributeOldValue: true,
+      subtree: true
+    });
+
     // Watch for clicks on tabs
     $(document).on('click', '.tabs-nav a', function(event) {
-      var tabs = $(this).closest('.tabs');
-      var tabNav = this;
-      var selectedPane = $(tabs).find(tabNav.hash).get(0);
+      // Make the selected tab active. No need to worry about disabled tabs, showing the tab pane,
+      // or making other tabs inactive because the mutation observer handles everything.
+      $(this).addClass('active');
 
       event.preventDefault();
-
-      // Ignore tabs without an href or with the "disabled" class
-      if(!tabNav.hash || $(tabNav).is('.disabled')) {
-        return;
-      }
-
-      // 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

@@ -22,36 +22,43 @@
         <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>
+  <main class="container">
+    <div class="row">
+      <div class="col-md-3">
+        <ul id="nav">
+          <li><a href="installing.html">Installing</a></li>
+          <li><a href="customizing.html">Customizing</a></li>
+          <li><a href="content.html">Content</a></li>
+          <li><a href="alerts.html">Alerts</a></li>
+          <li><a href="badges.html">Badges</a></li>
+          <li><a href="buttons.html">Buttons</a></li>
+          <li><a href="dropdowns.html">Dropdowns</a></li>
+          <li><a href="file-buttons.html">File Buttons</a></li>
+          <li><a href="forms.html">Forms</a></li>
+          <li><a href="grid-system.html">Grid System</a></li>
+          <li><a href="loaders.html">Loaders</a></li>
+          <li><a href="progress-bars.html">Progress Bars</a></li>
+          <li><a href="switches.html">Switches</a></li>
+          <li><a href="tabs.html">Tabs</a></li>
+          <li><a href="tables.html">Tables</a></li>
+          <li><a href="utilities.html">Utilities</a></li>
+          <li><a href="icons.html">Icons</a></li>
+          <li><a href="browser-support.html">Browser Support</a></li>
+          <li><a href="attribution.html">Attribution</a></li>
+        </ul>
+      </div>
 
-    <div id="content">
-      {{{contents}}}
-    </div>
+      <div class="col-md-9">
+        <div id="content">
+          {{{contents}}}
+        </div>
+      </div>
   </main>
 
   <footer id="foot">
@@ -92,6 +99,11 @@
           $(this).addClass('current');
         }
       });
+
+      // Intercept dropdown clicks for the demo
+      $('.dropdown').on('select', function(event) {
+        event.preventDefault();
+      });
     });
   </script>
   {{#each scripts}}