Installing

There are two ways to use Shoelace. If you want to get things up and running quickly, use the dist/ version or the CDN version. This version isn’t customizable, nor can you use future CSS features with it. It’s primarily intended for prototyping.

If you’re developing a production app, you should build Shoelace from source. This version is completely customizable, modular, and let’s you use future CSS features today.

Note: To make certain components interactive (e.g. dropdowns and tabs), you’ll need to load jQuery or Zepto before shoelace.js.

CDN

This is the best approach for prototyping, however, this version isn’t customizable and doesn’t support future CSS features. To load Shoelace via CDN, add this to your <head>:

<link rel="stylesheet" href="https://cdn.shoelace.style/1.0.0-beta24/shoelace.css">

And this before </body> but after jQuery/Zepto:

<script src="https://cdn.shoelace.style/1.0.0-beta24/shoelace.js"></script>

This service is provided free, courtesy of KeyCDN.

Building From Source

To make the most out of Shoelace, you should build it from source. This will let you use future CSS features today, such as CSS variables, nesting, color functions, and more. It also gives you complete control over customizing Shoelace.

The recommended way to build Shoelace is with cssnext. There are instructions for webpack, gulp, grunt, browserify, and others located on the setup page.

You can download Shoelace from GitHub, but it’s probably better to use the npm version:

npm install shoelace-css

The main source file is 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 along with the components you want.