Atomizer is a tool that helps you create Atomic CSS rules (acss.io).
Atomic CSS is a collection of single purpose styling units for maximum reuse that fits well with components in templated frameworks such as React, Ember or Angular. For more information we recommend that you read "Challenging CSS best practices", watch the Atomic CSS presentation, or check this deck.
npm install atomizer -gUsage: atomizer [options] [path]
Options:
-h, --help output usage information
-V, --version output the version number
-R, --recursive process all files recursively in the path.
-c, --config [file] source config file if any.
-r, --rules [file] custom rules file (argument may be passed multiple times)
-o, --outfile [file] destination config file.
-n, --namespace [namespace] adds the given namespace to all generated Atomic CSS selectors.
-H, --helpersNamespace [namespace] adds the given namespace to all helper selectors.
--rtl swaps `start` and `end` keyword replacements with `right` and `left`.
--ie adds old IE hacks to the output.
--verbose show additional log info (warnings).
Example:
atomizer -o atomic.css ./site/*.html
atomizer -c config.js -R ./site/ > atomic.css
atomizer -c config.js -n \#myrootclass > atomic.css
var Atomizer = require('atomizer');
var defaultConfig = {
"breakPoints": {
'sm': '@media(min-width=750px)',
'md': '@media(min-width=1000px)',
'lg': '@media(min-width=1200px)'
},
"custom": {
"1": "1px solid #000",
"foo": "2px dotted #f00"
},
"classNames": [
'Bd(1)',
'Bd(foo)',
'Bd(foo)--sm',
'Bd(foo)--md',
'D(n)!'
]
};
var atomizer = new Atomizer({verbose: true});
// Parse text to find Atomic CSS classes
var foundClasses = atomizer.findClassNames('<div class="D(n)! P(10px) M(20%) Bd(1) Bd(foo)--sm"></div>');
// Generate Atomizer configuration from an array of Atomic classnames
var finalConfig = atomizer.getConfig(foundClasses, defaultConfig);
// Generate Atomic CSS from configuration
var css = atomizer.getCss(finalConfig);- Grunt: grunt-atomizer
We have wiki docs for contributors who want to help with the maintenance and development of this tool.
This software is free to use under the Yahoo Inc. BSD license. See the LICENSE file for license text and copyright information.
Third-party open source code used are listed in our package.json file.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent