A Beautiful Site

Shoelace.style — A back to the basics CSS starter kit

I spent some time last week working on a free CSS boilerplate I'm calling Shoelace.css. It's kinda like Bootstrap, but a lot leaner and pure CSS. You don't need a preprocessor like Sass or Less to use it, but it's still highly customizable with CSS variables.

I'm calling Shoelace a "starter kit", not a framework. The goal was to create a lightweight, fully customizable, and extensible boilerplate for building websites and web apps.

What makes Shoelace really awesome is that you can <link> to it with just one line of code and start using it. Customizations can be made in your own stylesheet by simply overriding variables:

:root {
  --body-bg-color: black;
  --body-color: white;
}

Shoelace is only ~31KB minified and comes in at about 7.9KB gzipped. For comparison, Bootstrap 4 alpha 6 is 192KB CSS + 47KB JavaScript. And, starting today, you can use Shoelace via CDN courtesy of KeyCDN.

For more info and to grab the source, head over to shoelace.style.

July 24, 2020: Shoelace 2.0 has been released. The library has become a collection of professionally-designed web components and is much different than the original version.