SmoothCSS

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

The idea for SmoothCSS began forming while I was researching what it would take to finally move the Clearscope marketing site and app off Bootstrap. Despite my enthusiasm for CUBE CSS we decided Tailwind was a better fit for the team. A large part of that was Tailwind's documentation and UI kit versus creating and documenting our own system with CUBE CSS.

During the migration from Bootstrap to Tailwind I got to know their strengths and pain points, and wanted to create a better option for small teams like ours. SmoothCSS is my attempt to do this (it's still a work in progress and I'm actively developing it).

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 websites or apps 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 you up for success by giving you 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 you write semantic HTML and get the styling for free. And when you do need to change a style you 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 (learn more about fluid type and space, and flexible layouts).

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">.
• Specific styles for a block of HTML, such as an alert 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 new styling skin class may be a better fit.