Shoelace.css: A Back to the Basics CSS Starter Kit

By  on  

CSS frameworks such as Bootstrap and Semantic UI have become an essential part of web design. They provide the necessary resets, default styles, and components that save us hours and hours of work.

Most CSS frameworks are built using preprocessors such as Less or Sass, which is great, except when folks include the entire library like this:

<!-- Bootstrap 4 - 192KB -->
<link rel="stylesheet" href="bootstrap.min.css">

Or this:

<!-- Semantic UI 2.2 - 567KB --> 
<link rel="stylesheet" href="semantic.min.css">

Note the file sizes for the minified versions. And that doesn't even include scripts.

There are a couple problems here:

One, you don't need most of the things frameworks ship with. They weren't designed for you to use the bundled version, except perhaps for building a really quick prototype.

Two, when you use the bundled version you lose what makes preprocessors so great, such as customizing everything with variables. For example, in Bootstrap 4 you'll need to update at least 30 styles just to change the primary color globally. Fail!

Of course, the reason most people load everything is because it's easier. You don't have to worry about Less, Sass, Stylus, or setting up a build script.

What if you could have the best of both worlds?

Introducing Shoelace.css

I created Shoelace.css to solve this very problem. It's a highly customizable, pure CSS starter kit that weighs in at only 31KB minified (7.9KB gzipped). You can load it locally or via CDN, yet still customize everything with variables. And it's completely free.

Shoelace uses a well-supported feature of CSS called Custom Properties. Many people like to call them "CSS variables." Either way, they're incredibly useful.

You define custom properties in your stylesheet like this:

:root {
  --body-color: #000;
  --body-bg-color: #fff;
  --link-color: blue;
}

And then use them later on like this:

body {
  color: var(--body-color);
  background-color: var(--body-bg-color);  
}

a {
  color: var(--link-color);  
}

The nice thing about custom properties is that they cascade, so you can override them as needed. To customize Shoelace, just override a few variables and you're done. No preprocessing required!

Check out this demo on CodePen to see Shoelace in action. You can change the variables and watch components update right in the browser.

No magic. Just CSS.

What's in the Box

I like to think of Shoelace as a CSS reset sprinkled with helpful components. It doesn't do quite as much as a full blown framework, but that's intentional. It ships with the essentials because that's usually all you really need. Of course, you can extend Shoelace with your own components as needed.

Here's what you get out of the box:

  • CSS Reset
  • Default Content Styles
  • Alerts
  • Badges
  • Buttons
  • Forms
  • Loaders
  • Tabs
  • Tables
  • Text Utilities
  • Float Utilities
  • Sizing Utilities
  • Spacing Utilities

One thing that Shoelace doesn't ship with is a grid system. This is also intentional, as support for the CSS Grid has improved significantly and you really don't need one anymore. If you haven't explored the CSS Grid yet, Rachel Andrew has created Grid By Example to bring you up to speed.

If you have an obligation to support older browsers, you're encouraged to include your favorite grid system on top of Shoelace.

The Future of CSS frameworks

I don't like to call Shoelace a framework. It's more of a "CSS starter kit" that lets you build things without the overhead preprocessors require. The fact that you can <link> to it with one line and immediately have access to a fully customizable CSS boilerplate is incredible.

I think Shoelace is the future of CSS frameworks. Preprocessors still have a place in the world of web design, and they will at least until color modifiers and custom media queries land, but CSS is catching up fast — and Shoelace is taking full advantage of it.

Shoelace was created by @claviska. You can learn more about this project by visiting shoelace.style.

Cory LaViska

About Cory LaViska

Cory LaViska is the founder of A Beautiful Site, LLC, a small development studio in New Hampshire. He’s responsible for Shoelace and Surreal CMS, as well as a handful of open source projects on GitHub.

Recent Features

  • By
    CSS vs. JS Animation: Which is Faster?

    How is it possible that JavaScript-based animation has secretly always been as fast — or faster — than CSS transitions? And, how is it possible that Adobe and Google consistently release media-rich mobile sites that rival the performance of native apps? This article serves as a point-by-point...

  • By
    Designing for Simplicity

    Before we get started, it's worth me spending a brief moment introducing myself to you. My name is Mark (or @integralist if Twitter happens to be your communication tool of choice) and I currently work for BBC News in London England as a principal engineer/tech...

Incredible Demos

  • By
    Editable Content Using MooTools 1.2, PHP, and MySQL

    Everybody and their aerobics instructor wants to be able to edit their own website these days. And why wouldn't they? I mean, they have a $500 budget, no HTML/CSS experience, and extraordinary expectations. Enough ranting though. Having a website that allows for...

  • By
    Use Custom Missing Image Graphics Using MooTools

    Missing images on your website can make you or your business look completely amateur. Unfortunately sometimes an image gets deleted or corrupted without your knowledge. You'd agree with me that IE's default "red x" icon looks awful, so why not use your own missing image graphic? The MooTools JavaScript Note that...

Discussion

  1. Just a heads up that Shoelace is on Twitter as of yesterday. Follow for updates and more info: https://twitter.com/shoelacecss

  2. Hi, why don’t you use partials of bootstrap? e.g. you can just import grid in order to use just grids of bootstrap.

  3. I’ve done that in other projects, but then you have to setup a preprocessor, strip everything out, and finally apply your customizations. With Shoelace, you just link it and start building. That and it’s much more lightweight (~31KB compared to ~192KB minified).

    I’ve been waiting for BS4 to move into beta for two years, but the reality is there are so many extra things in it now that I end up spending more time stripping/customizing things I don’t need.

    As far as grids, the argument for them is becoming less and less relevant with CSS Grid. You can include one if you need it, but unless I have a specific requirement to support older browsers, I prefer to move forward :)

  4. It wont support MS EDGE :s (v 38.14393.0.0)

  5. Edge supports CSS variables since version 15, with a couple known bugs (http://caniuse.com/#feat=css-variables) and support is improving constantly. Shoelace will only get more relevant as support continues to improve :)

  6. This is great- love how lightweight it is.

    Any plans to use flex? Seems like there’s not a lot of concern for older browsers anyway.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!