Introduction

Design tokens at your fingertips

Classy-UI is CSS properties abstracted to design tokens. This abstraction does not only make your design consistent, but also discoverable and documented at your fingertips in the IDE.

Features

  • No runtime in production*

  • The application starts without a single line of CSS. Based on the API usage Classy-UI will automatically generate the CSS they represent

  • Add decorators (pseudo selectors and media queries) directly on your tokens, and again Classy-UI will automatically build the necessary CSS

  • Classy-UI completely gets rid of specificity issues

  • When you write tokens you can search them right in the code. You also get documentation of what CSS the token produces, even without Typescript

  • An excellent developer experience as your IDE writes the tokens for you, you just select them from the intellisense

  • If you use invalid tokens Classy-UI will yell at you

  • When adding themes that overrides tokens, they automatically become CSS variables

  • In production Classy-UI will shorten all the CSS classnames, group media queries and themes, creating a highly optimized bundle

* The only trace Classy-UI leaves in production is a tiny function which runs on compositions in risk of specificity issues

A quick look

Classy-UI is a babel-plugin, and when you write something like this:

import { compose, tokens } from 'classy-ui';
‚Äč
export const button = compose(
tokens.color.GRAY_80,
tokens.borderWidth.WIDTH_0,
tokens.borderRadius.RADIUS_10,
tokens.padding.SPACE_20,
tokens.color.GRAY_50.hover
);

It evaluates the code to:

export const button = 'color__GRAY_80 border-width__WIDTH_0 border-radius__RADIUS_10 padding-top__SPACE_20 padding-right__SPACE_20 padding-bottom__SPACE_20 padding-left__SPACE_20 hover:color__GRAY_80';

Using the configuration it will create the classnames and their accompanying CSS and expose it to your application automatically. To understand better what Classy-UI is doing, and why, read more about How it works.