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:

Compile yourself (recommended)

(Allows to configure and extend atoms)

Sass (in your styles.scss)

// use original
@import '<path-to-node_modules-folder>/css-atoms/src/sass/atoms.config';

// or create your config
@import '<path-to-your-config-file>/atoms.config';

@import '<path-to-node_modules-folder>/css-atoms/src/sass/atoms';

Less (in your styles.less)

// use original
@import '<path-to-node_modules-folder>/css-atoms/src/less/atoms-config';

// or create your config
@import '<path-to-your-config-file>/atoms-config';

@import '<path-to-node_modules-folder>/css-atoms/src/less/atoms';

Stylus (in your styles.styl)

// use original
@import '<path-to-node_modules-folder>/css-atoms/src/stylus/atoms.config.styl';

// or create your config
@import '<path-to-your-config-file>/atoms.config.styl';

@import '<path-to-node_modules-folder>/css-atoms/src/stylus/atoms.styl';

Use compiled version in HTML

(When not using any preprocessor)

In your index.html

<link rel="stylesheet" href="../node_modules/css-atoms/dist/css-atoms.css">

How to use?

Without CSS Atoms:

<div class="some-class">
    <h1>User Name</h1>
    <img src="avatar.png" alt="avatar">
</div>

<div class="another-class">
    <h3>Simple layout</h3>
    <p>Hello world!</p>
</div>

<div class="more-class">
    <button>Click</button>
</div>

<style>
    .some-class {
        display: flex;
    }
    
    .another-class {
        display: flex;
    }
    
    .more-class {
        position: relative;
        
        button {
            position: absolute;
            font-weight: 700;
        }
    }
</style>

With CSS Atoms:

<div class="flex">
    <h1>User Name</h1>
    <img src="avatar.png" alt="avatar">
</div>

<div class="flex">
    <h3>Simple layout</h3>
    <p>Hello world!</p>
</div>

<div class="relative">
    <button class="absolute font-weight--bold">Click</button>
</div>

How to contribute

Install all dependencies

npm install
To run in dev mode

npm start
To update dist file

npm run build

Other recommendation

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.

kersh / css-atoms