Skip to content

kersh/css-atoms

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

40 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

  2. To run in dev mode

    npm start

  3. 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.