ff0000/caboose — pull request #3 by doctyper (2012-10-19 19:51:01+00:00)
Title: Restructuring Caboose

As discussed, several updates in this pull request.

#### Updated the project directory structure. It now looks like the following:

+ scss
| + caboose
| | + caboose
| | + mixins
| | + placeholders
| | + rosy
| | | + custom-form-field
| | | + google-chrome-frame
| | | + ios-page-control
| + _caboose.scss
| + project
| | + base
| | + fonts
| | + mixins
| | + modules
| | + placeholders
| | + views
| + _site-settings.scss
| + ie.scss
| + style.scss
+ config.rb

#### `config.rb`
I've re-added a `config.rb` for standalone purposes. That is, when used by itself, Caboose requires a `config.rb` settings file. However, for our purposes we will be importing Caboose via [RED Boilerplate](https://github.com/ff0000/red-boilerplate), and the file will be removed during the import process.

#### A note on the Compass Grunt tasks
Per @dannyx0, there exist some cases where we needed more config options than [`grunt-compass`](https://github.com/kahlil/grunt-compass/) could provide. The fault lies in Compass proper, as it does not have CLI options for all of its `config.rb` options.

Taking that into account, I've written a custom grunt task that provides this functionality. You can see a preview here. The compass object now takes [any configurable option](http://compass-style.org/help/tutorials/configuration-reference/) found in Compass' `config.rb`.

Additionally, I've taken the opportunity to improve the `grunt watch:compass` and `grunt compass:foo` commands:

##### `grunt watch:compass`
Rather than piping this through Grunt's watcher, this command now starts Compass' built-in watch command. Now, instead of running `compass compile` on every file change, the watcher handles detection much more efficiently and compiles only when necessary.

An unfortunate side-effect is that this task is no longer coupled with the `grunt watch` multitask. Running `grunt watch` will not compile Compass anymore, you'll have to run a separate `grunt watch:compass` command.

##### `grunt compass:foo`
Behaves as normal.

Behind the scenes, running this task compiles a temporary config file when needed and feeds this file to Compass for compilation.

#### The `scss/caboose` folder
This folder should be considered pristine. Unless necessary, you should avoid restructuring or adding files to this folder.

All Caboose-specific files have been scoped to the caboose folder. This includes our custom mixins and placeholders, reset strategies, easing values, etc.

I've also imported the Rosy-dependent modules into the caboose folder. Per @timrwood, it made more sense to scope these to Caboose rather than leave orphan `*.scss` files inside of Rosy proper. If this pull request goes through, I'll be removing these files from Rosy. There are currently three Rosy modules you can import:

- [`@import "rosy/google-chrome-frame/chrome-frame"`](https://github.com/ff0000/rosy/tree/master/rosy/modules/google-chrome-frame)
- [`@import "rosy/custom-form-field/custom-form-field"`](https://github.com/ff0000/rosy/tree/master/rosy/modules/custom-form-field)
- [`@import "rosy/ios-page-control/page-control"`](https://github.com/ff0000/rosy/tree/master/rosy/modules/ios-page-control)

Like Compass, Caboose provides specific modules you can import in your project:

- `@import "caboose/easings"` - Robert Penner's easing values ported to CSS
- `@import "caboose/exports"` - For use with [Rosy's Caboose module](https://github.com/ff0000/rosy/tree/master/rosy/modules/caboose).
- `@import "caboose/reset"` - Caboose's custom HTML5 reset.

#### The `scss/project` folder
Files in this folder should be considered fully configurable. You may edit these files depending on your project's needs. However, you should avoid restructuring this folder.

##### `scss/project/_site-settings.scss`
Your project's default settings. Customize to your liking.

##### `scss/project/ie.scss`
Your IE-specific rules.

##### `scss/project/style.scss`
This is your base project file. All of your base, font, mixin, module, placeholder and view files should route through here.

##### `scss/project/base`
These rules define the default styling for how elements should look in all occurrences on the site. They should be considered global rules and should require no special casing. Default files: `_body.scss`, `_header.scss`, `_footer.scss`.

##### `scss/project/fonts`
A folder for your font files. You should create a file for each font you embed. Ex: `_proxima-nova.scss`, `_icons.scss`

##### `scss/project/mixins`
A folder for your mixins. A `_mixins.scss` file is provided as a catch-all. You should create a file for each prominent mixin.

##### `scss/project/modules`
A module is a more discrete component of the page. It is your navigation bars and your carousels and your dialogs and your widgets and so on. This is the meat of the page. Each module should be designed to exist as a standalone component. In doing so, the page will be more flexible.

##### `scss/project/placeholders`
A folder for your placeholders. A `_placeholders.scss` file is provided as a catch-all. You should create a file for each prominent placeholders.

##### `scss/project/views`
A view is, in essence, a page. Your Home, About, and Contact pages would all be considered views. Default files: `_home.scss`