Developer Quick Start

Sass How To

If you'd like to contribute back to the project, you'll want to become familiar with the files in the ./sass/* directory. Please see the following resources for more information if you're new to Sass (or just go ahead and edit the CSS directly if you're looking for a quick one-off solution and don't have time for all this Sass stuff!):

• Setting up for Sass development
• Compass/Sass chapter

If you just want to edit and go and you've obtained this via git clone, you'll need to enable the submodule for [color-me-sass][color-me-sass] and Zurb [Foundation] as follows:

git submodule update --init --recursive

Then simply do the following to set up Compass / Sass:

# Windows
$ gem install compass
# Linux/OS X
$ sudo gem install compass

Now, while in this project's root directory, open a new terminal tab and watch for any changes (or use the free tool Scout if you're more GUI inclined) with:

compass watch

Syncing Colors

To optionally sync [ditbi][ditbi] with the latest [color-me-sass][color-me-sass] submodule update, we have a Node.js script: ./scripts/create-colors-config.js that will ensure that the very latest color-me-sass variables are being used from within ditbi (of course this requires Node.js!) If you're going to do this you should have cd'd to the submodule directory and pulled in a later version of [color-me-sass][color-me-sass] and finally commited the new submodule reference to ditbi before doing the following.

./scripts/create-colors-config.js
# ... output omitted for brevity
--- Writing out Colors JavaScript ---
Colors JavaScript written to:  /Users/rlevin/programming/labs/ditbi/scripts/js/colors.js

The above colors.js defines the variables that are used in the dynamic color-pickers (the dropdowns you see on the index.htm page for selecting colors).

Really, this only needs to be done by the maintainer but I'm putting here in docs so it's not a mystery how these are kept in sync.