Atomicss   ^{_{/ uh-tom'-iks /}}

A composable library of atomic, functional CSS-in-JS styles.

Install

$ npm install --save atomicss

Include

import atoms from 'atomicss';

/* OR */

import { margin } from 'atomicss';

Usage

React's inline styles

import { display } from 'atomicss';

const shyDiv = ({ hidden }) => (
  <div
    style={Object.assign({},
      hidden ? display.block : display.none,
    )}
  >
    I am shy!
  </div>
);

Principles

Composability

Atomicss strongly believes in composition over inheritance. It's more useful to be able to describe exactly what you need than having to extend and/or make exceptions for pre-defined, opinionated classes.

const SubmitButton = ({ validInput }) => (
  <button
    style={Object.assign({},
      textAlign.center,
      margin.medium,
      validInput ? backgroundColor.green : backgroundColor.red,
    )}
  >
    Submit
  </button>
);

Functional Programming

Composability works best when the building blocks are small, stateless, and predictable. Atomicss exposes objects of a single styling rule for you to compose together:

console.log(display.none); // { display: 'none' }

console.log(margin.bottom.small); // { marginTop: '0.5em' }

console.log(Object.assign({}, display.block, margin.medium)); // { display: 'block', margin: '1em' }

Developer Experience (DX)

Using Atomicss is incredibly fun, as modern editors are able to expose the entire export tree via auto-complete.

Code of Conduct

This project adheres to the Open Code of Conduct. By participating, you are expected to honor this code.