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

import React from 'react';
import c from 'classnames';
 
import y from 'yons';
 
// React
const FooBar = () => (
  <div className={c(y.bg_black, y.fg_white)}>
    White text on black!
  </div>
);
 
// Or not
document.body.className = c(y.b,y.ttu,y.f1,y.fg_green)
// 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).