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.
- 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
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