css-atoms

A legal way of doing inline css

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
css-atoms
211.1.25 years ago6 years agoMinified + gzip package size for css-atoms in KB

Readme

npm version
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

  1. Install all dependencies
`npm install`
  1. To run in dev mode
`npm start`
  1. 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.