YONS
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 .button
or .my-cool-component
or .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.
CSS-in-JS: Uses glamor under the hood, so doesn't have all the issues of inline-styles. Writing a web app without using JavaScript? This library ain't for you.
Example
;; ; // Reactconst FooBar = <div className=> White text on black! </div>; // Or notdocumentbodyclassName = // now your body tag will be bold, uppercase, massive, and green
Installing
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).