Atomic Sass
Generators that make atomic design with SASS easy.
Installation
gem install atomic_sass
Usage
Initialize your project
atom init
This creates a yaml file where you can specify:
- the source directory
- the destination directory
- your preferred sass syntax (scss or sass)
After the settings are set the way you like you can build the initial file structure with
atom build
Now you are ready to start styling.
Generate your documents by passing the appropriate flag then an array of new document names
- quark
atom generate --quark header nav footer aside
- utility
atom generate -u clearfix
- atom
atom g --atom input button
- molecules
atom g -m seachbar top_nav
or a few at once
atom g -a input button -q header nav footer -m seachbar top_nav
specify which molecules will use your atom at generation ( -i is short for --include )
atom g -a input button -i seachbar
or include some atoms in a quark (or quarks)
atom g -q header
atom g -a text_shadow --include-quark header
nested routes are automatically resolved too, so nest all you like
atom g -m header/searchbar
atom g -a typography/textfields/input -i header/searchbar
Compile to css with
atom compile
or compile and watch for changes with
atom compile --watch