Atomicss / uh-tom'-iks /
A composable library of atomic, functional CSS-in-JS styles.
Install
$ npm install --save atomicss
Include
; /* OR */ ;
Usage
inline styles
React's; const shyDiv = <div style=Object > 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 = <button style=Object > 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; // { display: 'none' } console; // { marginTop: '0.5em' } console; // { 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.