Iestyn's atomic, functional, CSS-in-JS library
Atomic: Each rule defines one (or very few) styles, which you then compose together to create the UI you want. Instead of
.i__love--bem classnames, you have
.fg_white (which sets the foreground to white), or
.pam (which sets medium padding on each axis of the element) etc.
Functional: Forget about the cascade, forget about side effects. Yons classnames do what they say on the tin and nothing else.
;;;// Reactconst FooBar =<div className=>White text on black!</div>;// Or notdocumentbodyclassName =// now your body tag will be bold, uppercase, massive, and green
Install with yarn (or npm if that's what you fancy).
You also need to install
glamor as it's a peerDependancy of this module (this is because glamor must be used as a singleton).
$ yarn add yons$ yarn add glamor
What's in the box?
Take a look inside the
src folder. It's all pretty self-documenting.
Of particular note are
skin.js (for setting colours of stuff) and
spacing.js (for setting margins and padding).