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.