Shoelace.css is a lightweight, forward-thinking CSS library built with future CSS syntax. It’s easy to use and highly customizable. Bootstrap users will find it familiar, yet refreshing.

You can use Shoelace with just about any browser. The CDN version is great for prototyping, but to take advantage of all its features you should build Shoelace from source.

Here is the CSS you could be writing:

:root {
  /* CSS variables */
  --state-primary: #09d;

  /* Color functions */
  --alert-bg-color: color(var(--state-primary) tint(75%));
  --alert-color: color(var(--state-primary) lightness(25%));

/* Nested selectors */
.alert {
  background-color: var(--alert-bg-color);
  color: var(--alert-color);

  &.alert-lg {
    font-size: 2rem;

CSS has a really bright future, and you can use most of its upcoming features today with Shoelace + cssnext. You no longer need Less or Sass to do amazing things with CSS.

Shoelace was created by @claviska for Surreal CMS. You can use it for free under the terms of the MIT license.

Fork Download Report a Bug Star

Accelerated by KeyCDN · © A Beautiful Site, LLC