Shoelace.css is a starter kit, not a framework. Think of it as a CSS reset sprinkled with helpful components. Bootstrap users will find it familiar, yet refreshing.

You can use Shoelace with just about every 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 {
  /* Use CSS variables */
  --state-primary: #09d;

  /* Use color functions instead of hard-coding values */
  --alert-bg-color: color(var(--state-primary) tint(75%));
  --alert-color: color(var(--state-primary) lightness(25%));

/* Nest selectors for better legibility */
.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