Links

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.
Last modified 2yr ago