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