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.