SmoothCSS

SmoothCSS is a design system, CSS framework and extendable UI kit for building good-looking, consistent websites and apps.

The reason SmoothCSS can do all these things is because it has a design system, and design tokens, at its core. Out of the box you get a set of options to easily build a cohesive and coherent website. And any changes you make to the design tokens simply flow through your site.

But it wouldn't be complete without a CSS framework and UI kit to help you build fast. And best of all, as SmoothCSS works with the web platform, you can use it with your favourite HTML templating language or framework.

Design approach

SmoothCSS is constructed in layers, each building upon, or changing, the layers below. Most of the work is done in the lower layers so there is less to do at the higher levels.

SmoothCSS has five layers:

1. Design tokens
2. Global styles
3. Layouts
4. Styling skins
5. Utilities

Design tokens

Design tokens keep the overall design of your website or app consistent, ensuring the parts work together and look good.

Design tokens in SmoothCSS are implemented with CSS custom properties (also called CSS variables). As these design tokens are used in every level of SmoothCSS you can change the look of the entire site by tweaking or changing a small set of variables.

Global styles

The workhorse layer, global styles set us up for success by giving us good design defaults for a wide selection of HTML elements.

Instead of applying a reset, then building up the design one style (or utility class) at a time, with global styles we write semantic HTML and get the styling for free. And when we do need to change a style we can use the styling skin and utility layers.

Layouts

SmoothCSS layouts are systems to dictate the size and shape of content, and where on the page it will be displayed.

Layouts in SmoothCSS are fluid and flexible, adapting to their container (without container or media queries). This approach drastically simplifies the amount of work needed to create responsive sites (you can learn more about it here).

As layouts work for all types of content they are used at both the macro and micro level – from adding a sidebar to the page, to adding space between blocks of text in a card.

Styling skins

Styling skins come in two forms:

• Styles independent of a HTML element, like a button style that can be used for a <button>, <a>, or <input type="submit"> (sometimes called an affordance).
• Specific styles for a block of HTML, such as a banner or a card.

Utilities

Because so much of the styling is already done in the lower layers, there are times when you just need to change one property. And that's where SmoothCSS utilities shine – they do one thing, and they do it well.

Compared to utility-first approaches you'll find the set of SmoothCSS utilities limited, and the class names long.

This is by design.

Unlike utility-first approaches SmoothCSS isn't trying to recreate every CSS feature as a class. The global and styling skin layers of SmoothCSS are used for generic or complex styles.

And the class names are long because they are similar to the CSS they implement, making them easy to remember. You'll also find that the effort to write out a long list of utility classes will help you know when a styling skin class may be a better fit.

Customisation

An explanation of how to customise SmoothCSS will be added soon.

About the creator

SmoothCSS was created by Rob McCormick, and was born from the frustration of trying to get Bootstrap to look less like Bootstrap. And fighting to keep a design consistent when it's spread across thousands of utility classes.

Acknowledgements

SmoothCSS is built on the ideas of Andy Bell (CUBE CSS, Every Layout, Complete CSS course), Heydon Pickering (Every Layout), and countless other kind people who shared their knowledge.

I was also heavily influenced by Rich Hickey's classic talk Simple Made Easy.