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.
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
<link rel="stylesheet" href="https://cdn.shoelace.style/1.0.0-beta24/shoelace.css">
And this before
</body> but after jQuery/Zepto:
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.
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.