docs/installing.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="description" content="How to install Shoelace.css.">
  <link rel="icon" href="../source/img/favicon.png">
  <link rel="stylesheet" href="../dist/shoelace.css">
  <link rel="stylesheet" href="../source/css/_docs.css">
  <link rel="stylesheet" href="https://unpkg.com/prism-theme-one-dark@1.0.0/prism-onedark.css" integrity="sha384-WBhzd+87GQqNnqPLNAn5C7FAa8F/UuNpjW2vcLo8iVyvvT3LxuGZh6xoQYPTq0Tw" crossorigin="anonymous">
  <title>Installing</title>
</head>
<body>
  <a href="#content" class="skip">Skip to content</a>

  <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">
      <nav 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>
      </nav>

      <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 lets you use future CSS features <em>today</em>.</p>
<p><strong>Note:</strong> To make certain components interactive (e.g. dropdowns and tabs), you’ll need to load <a href="https://cdnjs.com/libraries/jquery/">jQuery</a> or <a href="https://cdnjs.com/libraries/zepto/">Zepto</a> before <code>shoelace.js</code>.</p>
<h3 id="cdn">CDN</h3>
<p>This is the best approach for prototyping, however, this version isn’t customizable and doesn’t support future CSS features. To load Shoelace via CDN, add this to your <code>&lt;head&gt;</code>:</p>
<pre><code class="lang-html">&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.shoelace.style/1.0.0-beta24/shoelace.css&quot;&gt;
</code></pre>
<p>And this before <code>&lt;/body&gt;</code> but after jQuery/Zepto:</p>
<pre><code class="lang-html">&lt;script src=&quot;https://cdn.shoelace.style/1.0.0-beta24/shoelace.js&quot;&gt;&lt;/script&gt;
</code></pre>
<p>This service is provided free, courtesy of <a href="https://keycdn.com/">KeyCDN</a>.</p>
<h3 id="building-from-source">Building From Source</h3>
<p>To make the most out of Shoelace, you should build it from source. This will let you use future CSS features <em>today</em>, such as <a href="https://www.w3.org/TR/css-variables/">CSS variables</a>, <a href="http://tabatkins.github.io/specs/css-nesting/">nesting</a>, <a href="https://drafts.csswg.org/css-color/#modifying-colors">color functions</a>, <a href="http://cssnext.io/features/">and more</a>. It also gives you complete control over customizing Shoelace.</p>
<p>The recommended way to build Shoelace is with <a href="http://cssnext.io/">cssnext</a>. There are instructions for webpack, gulp, grunt, browserify, and others located on the <a href="http://cssnext.io/setup/">setup page</a>.</p>
<p>You can <a href="https://github.com/claviska/shoelace-css/releases">download Shoelace</a> from GitHub, but it’s probably better to use the npm version:</p>
<pre><code class="lang-text">npm install shoelace-css
</code></pre>
<p>The main source file is <a href="../source/css/shoelace.css"><code>source/css/shoelace.css</code></a>. This bootstraps the entire project by importing core variables and all of Shoelace’s components.</p>
<p>If you don’t need everything, just load <a href="../source/css/variables.css"><code>source/css/variables.css</code></a> along with the components you want.</p>

        </div>
      </div>
  </main>

  <footer id="foot" role="contentinfo">
    <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>
-												Split website up

											
										
										
											2017-08-08 17:41:40 -04:00
+								<!DOCTYPE html>
 								<html lang="en">
 								<head>
 								  <meta charset="UTF-8">
 								  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 								  <meta http-equiv="X-UA-Compatible" content="ie=edge">
 								  <meta name="description" content="How to install Shoelace.css.">
 								  <link rel="icon" href="../source/img/favicon.png">
-												Use the dist stylesheet/script

											
										
										
											2017-08-09 11:22:09 -04:00
+								  <link rel="stylesheet" href="../dist/shoelace.css">
-												Split website up

											
										
										
											2017-08-08 17:41:40 -04:00
+								  <link rel="stylesheet" href="../source/css/_docs.css">
-												Switch RawGit to unpkg (#85)

* Switch RawGit to unpkg

* Switch RawGit to unpkg in docs

* Switch RawGit to unpkg in layout

											
										
										
											2019-08-05 15:53:37 +02:00
+								  <link rel="stylesheet" href="https://unpkg.com/prism-theme-one-dark@1.0.0/prism-onedark.css" integrity="sha384-WBhzd+87GQqNnqPLNAn5C7FAa8F/UuNpjW2vcLo8iVyvvT3LxuGZh6xoQYPTq0Tw" crossorigin="anonymous">
-												Split website up

											
										
										
											2017-08-08 17:41:40 -04:00
+								  <title>Installing</title>
 								</head>
 								<body>
-												Keyboard accessibility updates for docs (#69)

* Adds skip to link for keyboard users

* Makes navigation wrapper a nav element for screenreader support

* Adds role contentinfo to footer for screenreader support

* Built doc files

											
										
										
											2017-12-11 10:43:09 -05:00
+								  <a href="#content" class="skip">Skip to content</a>
-												Split website up

											
										
										
											2017-08-08 17:41:40 -04:00
 								  <header id="head" class="text-center">
 								    <h1>
 								      <a href="../index.html">
 								        <img src="../source/img/wordmark.svg" alt="Shoelace logo">
 								      </a>
 								    </h1>
-												Make homepage header consistent with docs

											
										
										
											2017-08-29 17:54:27 -04:00
-.0.0-beta14

											
										
										
											2017-08-13 15:41:38 -04:00
+								    <p class="text-secondary text-small">
-												Split website up

											
										
										
											2017-08-08 17:41:40 -04:00
+								      A back to the basics CSS starter kit. For when you don’t need the whole boot.
 								    </p>
 								  </header>
-												Updated docs to use grid system

											
										
										
											2017-08-26 10:04:07 -04:00
+								  <main class="container">
 								    <div class="row">
-												Keyboard accessibility updates for docs (#69)

* Adds skip to link for keyboard users

* Makes navigation wrapper a nav element for screenreader support

* Adds role contentinfo to footer for screenreader support

* Built doc files

											
										
										
											2017-12-11 10:43:09 -05:00
+								      <nav class="col-md-3">
-												Updated docs to use grid system

											
										
										
											2017-08-26 10:04:07 -04:00
+								        <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>
-												Make file buttons a component; fix #40

											
										
										
											2017-08-30 11:58:46 -04:00
+								          <li><a href="file-buttons.html">File Buttons</a></li>
-												Updated docs to use grid system

											
										
										
											2017-08-26 10:04:07 -04:00
+								          <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>
-												Keyboard accessibility updates for docs (#69)

* Adds skip to link for keyboard users

* Makes navigation wrapper a nav element for screenreader support

* Adds role contentinfo to footer for screenreader support

* Built doc files

											
										
										
											2017-12-11 10:43:09 -05:00
+								      </nav>
-												Split website up

											
										
										
											2017-08-08 17:41:40 -04:00
-												Updated docs to use grid system

											
										
										
											2017-08-26 10:04:07 -04:00
+								      <div class="col-md-9">
 								        <div id="content">
 								          <h2 id="installing">Installing</h2>
-												Update installation docs

											
										
										
											2017-08-18 13:54:53 -04:00
+								<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>
-												Keyboard accessibility updates for docs (#69)

* Adds skip to link for keyboard users

* Makes navigation wrapper a nav element for screenreader support

* Adds role contentinfo to footer for screenreader support

* Built doc files

											
										
										
											2017-12-11 10:43:09 -05:00
+								<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 lets you use future CSS features <em>today</em>.</p>
-												Update installation docs

											
										
										
											2017-08-18 13:54:53 -04:00
+								<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>
-												Split website up

											
										
										
											2017-08-08 17:41:40 -04:00
+								<h3 id="cdn">CDN</h3>
-												Update installation docs

											
										
										
											2017-08-18 13:54:53 -04:00
+								<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>
-.0.0-beta24

											
										
										
											2017-10-10 20:58:00 -04:00
+								<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;
-												Split website up

											
										
										
											2017-08-08 17:41:40 -04:00
+								</code></pre>
 								<p>And this before <code>&lt;/body&gt;</code> but after jQuery/Zepto:</p>
-.0.0-beta24

											
										
										
											2017-10-10 20:58:00 -04:00
+								<pre><code class="lang-html">&lt;script src=&quot;https://cdn.shoelace.style/1.0.0-beta24/shoelace.js&quot;&gt;&lt;/script&gt;
-												Split website up

											
										
										
											2017-08-08 17:41:40 -04:00
+								</code></pre>
-												Move back to KeyCDN

											
										
										
											2017-08-18 14:57:46 -04:00
+								<p>This service is provided free, courtesy of <a href="https://keycdn.com/">KeyCDN</a>.</p>
-												Update installation docs

											
										
										
											2017-08-18 13:54:53 -04:00
+								<h3 id="building-from-source">Building From Source</h3>
-												Fixed strange typo

											
										
										
											2017-08-18 23:11:13 -04:00
+								<p>To make the most out of Shoelace, you should build it from source. This will let you use future CSS features <em>today</em>, such as <a href="https://www.w3.org/TR/css-variables/">CSS variables</a>, <a href="http://tabatkins.github.io/specs/css-nesting/">nesting</a>, <a href="https://drafts.csswg.org/css-color/#modifying-colors">color functions</a>, <a href="http://cssnext.io/features/">and more</a>. It also gives you complete control over customizing Shoelace.</p>
-												Update installation docs

											
										
										
											2017-08-18 13:54:53 -04:00
+								<p>The recommended way to build Shoelace is with <a href="http://cssnext.io/">cssnext</a>. There are instructions for webpack, gulp, grunt, browserify, and others located on the <a href="http://cssnext.io/setup/">setup page</a>.</p>
 								<p>You can <a href="https://github.com/claviska/shoelace-css/releases">download Shoelace</a> from GitHub, but it’s probably better to use the npm version:</p>
 								<pre><code class="lang-text">npm install shoelace-css
-												Split website up

											
										
										
											2017-08-08 17:41:40 -04:00
+								</code></pre>
-												Updated docs

											
										
										
											2017-08-26 12:54:07 -04:00
+								<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>
-												Update installation docs

											
										
										
											2017-08-18 13:54:53 -04:00
-												Updated docs to use grid system

											
										
										
											2017-08-26 10:04:07 -04:00
+								        </div>
 								      </div>
-												Split website up

											
										
										
											2017-08-08 17:41:40 -04:00
+								  </main>
-												Keyboard accessibility updates for docs (#69)

* Adds skip to link for keyboard users

* Makes navigation wrapper a nav element for screenreader support

* Adds role contentinfo to footer for screenreader support

* Built doc files

											
										
										
											2017-12-11 10:43:09 -05:00
+								  <footer id="foot" role="contentinfo">
-												Split website up

											
										
										
											2017-08-08 17:41:40 -04:00
+								    <a href="../index.html">
 								      <img src="../source/img/wordmark.svg" alt="Shoelace logo">
 								    </a>
-												Move back to KeyCDN

											
										
										
											2017-08-18 14:57:46 -04:00
-.0.0-beta14

											
										
										
											2017-08-13 15:41:38 -04:00
+								    <p class="text-small text-secondary">
-.0.0-beta24

											
										
										
											2017-10-10 20:58:00 -04:00
+.0.0-beta24
-												Split website up

											
										
										
											2017-08-08 17:41:40 -04:00
+								    </p>
-												Rework padding- and margin-

											
										
										
											2017-08-16 21:34:27 -04:00
+								    <p class="mar-y-sm text-center">
-												Split website up

											
										
										
											2017-08-08 17:41:40 -04:00
+								      <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>
-												Move back to KeyCDN

											
										
										
											2017-08-18 14:57:46 -04:00
-												Split website up

											
										
										
											2017-08-08 17:41:40 -04:00
+								    <p>
-												Remove text class

											
										
										
											2017-08-13 15:57:30 -04:00
+								      <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>
-												Split website up

											
										
										
											2017-08-08 17:41:40 -04:00
+								    </p>
-												Move back to KeyCDN

											
										
										
											2017-08-18 14:57:46 -04:00
 								    <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>
-												Split website up

											
										
										
											2017-08-08 17:41:40 -04:00
+								  </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>
-												Use the dist stylesheet/script

											
										
										
											2017-08-09 11:22:09 -04:00
+								  <script src="../dist/shoelace.js"></script>
-												Split website up

											
										
										
											2017-08-08 17:41:40 -04:00
+								  <script>
 								    $(function() {
 								      // Highlight current nav item
 								      $('#nav a').each(function() {
 								        if(this.pathname === location.pathname) {
 								          $(this).addClass('current');
 								        }
 								      });
-												Intercept dropdown clicks for demos

											
										
										
											2017-09-01 23:59:53 -04:00
 								      // Intercept dropdown clicks for the demo
 								      $('.dropdown').on('select', function(event) {
 								        event.preventDefault();
 								      });
-												Split website up

											
										
										
											2017-08-08 17:41:40 -04:00
+								    });
 								  </script>
 								  <script async defer src="https://buttons.github.io/buttons.js"></script>
 								</body>
 								</html>