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 ; // or create your config ; ;
Less (in your styles.less)
// use original '<path-to-node_modules-folder>/css-atoms/src/less/atoms-config'; // or create your config '<path-to-your-config-file>/atoms-config'; '<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
How to use?
Without CSS Atoms:
User Name Simple layout Hello world! Click
With CSS Atoms:
User Name Simple layout Hello world! Click
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.