js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Updated docs to use grid system

Browse Source
This commit is contained in:
Cory LaViska
2017-08-26 10:04:07 -04:00
parent c93da5d123
commit ab2de70b8d
21 changed files with 686 additions and 585 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
docs/alerts.html
View File

@@ -24,30 +24,34 @@
</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="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 +77,8 @@
<div class="alert alert-light">Light</div>
<div class="alert alert-dark">Dark</div>
</div>
</div>
</div>
</main>
<footer id="foot">

55
docs/attribution.html
View File

@@ -24,41 +24,46 @@
</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="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">

53
docs/badges.html
View File

@@ -24,30 +24,34 @@
</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="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 +106,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">

53
docs/browser-support.html
View File

@@ -24,30 +24,34 @@
</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="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 +67,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">

53
docs/buttons.html
View File

@@ -24,30 +24,34 @@
</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="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>
@@ -171,7 +175,8 @@
<label class="button">Select File <input type="file"></label>
</div>
</div>
</div>
</div>
</main>
<footer id="foot">

53
docs/content.html
View File

@@ -24,30 +24,34 @@
</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="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 +190,8 @@ PRINT &quot;SHOELACE IS AWESOME&quot;
</tbody>
</table>
</div>
</div>
</div>
</main>
<footer id="foot">

53
docs/customizing.html
View File

@@ -24,30 +24,34 @@
</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="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>
<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 the <code>:root</code> block of <a href="../source/css/shoelace.css"><code>source/css/shoelace.css</code></a>.</p>
<p>For example, you can customize the default text color, background color, and the primary color by adding this to your stylesheet:</p>
<pre><code class="lang-css">:root {
@@ -99,7 +103,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">

53
docs/dropdowns.html
View File

@@ -24,30 +24,34 @@
</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="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>
@@ -173,7 +177,8 @@
});
</code></pre>
</div>
</div>
</div>
</main>
<footer id="foot">

72
docs/forms.html
View File

@@ -24,30 +24,34 @@
</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="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>
@@ -151,8 +155,8 @@
&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="row">
<div class="col-sm-6">
<div class="input-field">
<input type="text" class="input-xs" placeholder="XS">
</div>
@@ -169,8 +173,7 @@
<input type="text" class="input-xl" placeholder="XL">
</div>
</div>
<div class="column">
<div class="col-sm-6">
<div class="input-field">
<select class="input-xs"><option>XS</option></select>
</div>
@@ -393,23 +396,22 @@
&lt;input type=&quot;text&quot;&gt;
&lt;/div&gt;
</code></pre>
<div class="two-column">
<div class="column">
<div class="row">
<div class="col-sm-6">
<div class="input-field input-valid">
<label>Valid</label>
<input type="text">
</div>
</div>
<div class="column">
<div class="col-sm-6">
<div class="input-field input-invalid">
<label>Invalid</label>
<input type="text">
</div>
<label>Invalid</label>
<input type="text">
</div>
</div>
</div>
</div>
</div>
</main>
<footer id="foot">

53
docs/icons.html
View File

@@ -25,30 +25,34 @@
</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="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>
@@ -80,7 +84,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">

53
docs/installing.html
View File

@@ -24,30 +24,34 @@
</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="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>
@@ -67,7 +71,8 @@
</code></pre>
<p>The main source file is <code>source/css/shoelace.css</code>. This sets core variables and imports all of Shoelace’s components. If you don’t need everything, you’re encouraged to create your own and import only the ones you’re going to use.</p>
</div>
</div>
</div>
</main>
<footer id="foot">

53
docs/loaders.html
View File

@@ -24,30 +24,34 @@
</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="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;
@@ -116,7 +120,8 @@
<div class="loader-bg loader-bg-dark"></div>
</div>
</div>
</div>
</div>
</main>
<footer id="foot">

53
docs/progress-bars.html
View File

@@ -24,30 +24,34 @@
</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="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 +162,8 @@
<div class="progress-bar w-50">50%</div>
</div>
</div>
</div>
</div>
</main>
<footer id="foot">

53
docs/switches.html
View File

@@ -24,30 +24,34 @@
</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="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>
@@ -184,7 +188,8 @@
<label for="variation-dark">Dark</label>
</span></p>
</div>
</div>
</div>
</main>
<footer id="foot">

53
docs/tables.html
View File

@@ -24,30 +24,34 @@
</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="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 +131,8 @@
</tbody>
</table>
</div>
</div>
</div>
</main>
<footer id="foot">

151
docs/tabs.html
View File

@@ -24,30 +24,34 @@
</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="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>
@@ -109,54 +113,62 @@
</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 along with the <a href="grid-system.html">grid system</a>.</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&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="row">
<div class="col-4">
<nav class="tabs-nav">
<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>
@@ -177,7 +189,8 @@
});
</code></pre>
</div>
</div>
</div>
</main>
<footer id="foot">

53
docs/utilities.html
View File

@@ -24,30 +24,34 @@
</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="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>
<div class="col-md-9">
<div id="content">
<h2 id="utilities">Utilities</h2>
<p>Shoelace provides a number of helpful utility classes that make prototyping easier.</p>
<h3 id="text-utilities">Text Utilities</h3>
<p>Text utility classes can be applied to change an element’s text.</p>
@@ -204,7 +208,8 @@ mar-[t|r|b|l|x|y]-[0|xs|sm|md|lg|xl]
</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">

78
index.html
View File

@@ -21,22 +21,23 @@
</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 starter kit, not a framework. Think of it as a CSS reset sprinkled with
helpful components. Bootstrap users will find it familiar, yet refreshing.
</p>
<p>
You can use Shoelace with just about every browser. The CDN version is great for
prototyping, but to take advantage of all its features you should
<a href="docs/installing.html#building-from-source">build Shoelace from source</a>.
</p>
<p>
You can use Shoelace with just about every 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 {
/* Use CSS variables */
@@ -58,33 +59,34 @@
}
</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>

19
source/docs/forms.md
View File

@@ -115,8 +115,8 @@ 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="row">
<div class="col-sm-6">
<div class="input-field">
<input type="text" class="input-xs" placeholder="XS">
</div>
@@ -133,8 +133,7 @@ You can change the size of most form controls with the `input-[xs|sm|lg|xl]` mod
<input type="text" class="input-xl" placeholder="XL">
</div>
</div>
<div class="column">
<div class="col-sm-6">
<div class="input-field">
<select class="input-xs"><option>XS</option></select>
</div>
@@ -379,18 +378,16 @@ Form controls can be made valid or invalid using the `input-valid` and `input-in
</div>
```
<div class="two-column">
<div class="column">
<div class="row">
<div class="col-sm-6">
<div class="input-field input-valid">
<label>Valid</label>
<input type="text">
</div>
</div>
<div class="column">
<div class="col-sm-6">
<div class="input-field input-invalid">
<label>Invalid</label>
<input type="text">
</div>
<label>Invalid</label>
<input type="text">
</div>
</div>

101
source/docs/tabs.md
View File

@@ -73,58 +73,65 @@ 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 along with the [grid system](grid-system.html).
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">
<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="row">
<div class="col-4">
<nav class="tabs-nav">
<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>

53
source/layouts/default.html
View File

@@ -27,31 +27,36 @@
</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="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">