Shoelace.css – 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.

Author avatar

About the author

New Hampshirite building web apps in Florida. Creator of Surreal CMS, Postleaf, and DirtyMarkup.

Need to get in touch? Catch me on Twitter.