CSS Atoms
=========

A legal way of doing inline css

A low-level, configurable CSS toolkit.

---

Browser support

Default support is last 2 versions of each browser. However, you can compile atoms yourself and extend browser support.

Preprocessor support

* Sass
* Less
* Stylus

What is this?

A simple set of configurable via atoms config css classes that repeats most of the css properties.

Why?

CSS Atoms can be useful when you need to apply a simple css rule on a single element without inline css and without creating dedicated css file.

Using atoms are good because:

* DRY Rule. When you reuse CSS class created once you don't create duplicated code.
* Quicker to style/prototype. Instead of creating separate anchor class/id for an element and style it you can simply apply class on your element without going into styles at all.
* No more inline styles. Instead of doing inline CSS you can apply class.
* Easy to override and change. Atoms have flat structure which allows easily overwrite them.

How to setup?

You have 2 options:

$3

_(Allows to configure and extend atoms)_

Sass (in your styles.scss)
``scss
// use original
@import '/css-atoms/src/sass/atoms.config';

// or create your config
@import '/atoms.config';

@import '/css-atoms/src/sass/atoms';
`

Less (in your styles.less)
`less
// use original
@import '/css-atoms/src/less/atoms-config';

// or create your config
@import '/atoms-config';

@import '/css-atoms/src/less/atoms';
`

Stylus (in your styles.styl)
`stylus
// use original
@import '/css-atoms/src/stylus/atoms.config.styl';

// or create your config
@import '/atoms.config.styl';

@import '/css-atoms/src/stylus/atoms.styl';
`

$3

_(When not using any preprocessor)_

In your index.html
`html

`

How to use?

$3


`html

User Name

Simple layout

Hello world!

Click


`

$3


`html

User Name

Simple layout

Hello world!

Click

`

How to contribute

1. Install all dependencies

npm install

2. To run in dev mode

npm start

3. To update dist file

npm run build`

$3

- If you have something preprocessor specific, then use one of the preprocessors branches (sass/less/stylus).
- For each new atom create new branch.
- Please, try to add new atoms for each preprocessor (sass, less, stylus)
- Pull request changes and new atoms, never work on master.
- If you can't fix issue or can't add new atom, then create an issue on github.