SmoothCSS

A design system, CSS framework and UI kit – all in a single 7.2kB file.

Read the docs
www.business-upfront.com

Home

Length

Perm

Business Upfront

For the discerning business person with a wild side.

Join today.

Home

Length

Perm

Business Upfront

For the discerning business person with a wild side.

Join today.

Building and maintaining a design can be overwhelming

Have you ever thought:

  • My site looks like every other site – why did I pick this UI kit?
  • Why is it so complicated to make anything look unique?
  • Is it gray-200 or gray-300? Does it even matter any more?
A man in shock and horror, holding the sides of his head. Illustration of a menacing witch. Illustration of opinionated cowboy sitting in chair.

I've been there too

SmoothCSS 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 Tailwind utility classes.

There is a simpler way.

Man who is calm and connected, who has everything under control. Illustration of Frankenstein's monster fighting through trees. Illustration of happy cowgirl loving life.

Set up for success

Get great default styles when you write HTML, and use a set of layout, styling skins and utility classes to build fast. 

<div class="stack">
  <h2>Mullet of the week</h2>
  <p>Ignore the rest – we'll send you the best</p>
  <form>
    <div>
      <label for="email">Your email address</label>
      <input type="email" id="email" />
    </div>
    <button type="submit" class="button primary">
      Subscribe
    </button>
  </form>
</div>

Fluid responsive design

Forget about breakpoints – with fluid type, spacing and layouts your site will look good on every screen.

Simple to customise

Transform your site by changing a handful of design tokens, and extend SmoothCSS by writing a bit of CSS. 

:root {
    --font-weight-body-emphasis: var(--font-weight-bold);
    --site-max-inline-size: 80rem;
    --border-form-input: 1px solid var(--color-outline);
    --border-radius-form-input: var(--border-radius-2);
    --color-light-primary: #7ecbfe;
    --color-light-surface-lowest: #f9f9f9;
    --color-light-surface-mid: #e8e8e8;
    --color-light-surface-highest: #d5d5d5;
    --color-dark-surface-lowest: #141414;
    --color-dark-surface-mid: #333333;
    --color-dark-surface-highest: #525252;
  }

Everyone wants their website to look good. But making it stand out? That's the hard part.

Maybe you've tried a UI kit. Out of the box it gives you a good looking website. But it also gives you a site that looks the same as every other site using the same kit.

So you start making changes. Try to tweak the design to make it your own.

But you end up fighting through the source code, trying to find what's overriding your style. Or using find-and-replace and multiple cursors to update class names. Or, worse still, both.

And you need to put your design somewhere. Do you write your own CSS – or litter your HTML with utility classes?

Either way, little by little, your design breaks down.

It's impossible to keep track of all the styles. Small differences creep in. Parts of your site don't match. Things look off. While you fix one bad style you find two more.

It's not your fault. It's inevitable. Because there is a disconnect between the design and the code.

SmoothCSS brings the design and code together. With design tokens at its core, you get a set of options that makes it easy to build a cohesive and consistent website. And any changes you make simply flow through your site.

You can see it for yourself by changing the theme. Or get started by reading the docs.

– Rob