FarmBot/OpenFarm — pull request #329 by warpling (2014-12-01 01:40:59+00:00)
Title: CSS Refactor

# CSS Refactor
Alright guys. This is a fat PR you were promised. I hope it doesn't break too many things you've all been working on… :grin:

Here's how CSS has been reorganized
*(I tried doing this in ascii but it was an ugly mess)*
![screen shot 2014-11-30 at 5 22 41 pm](https://cloud.githubusercontent.com/assets/220240/5240314/aa5cf0e4-78b5-11e4-9e23-6f5183de3a80.png)

## Your Stylesheets and You!

### application.css
Never need to touch this again! It simply requires itself and main.
(note that it's not a scss file)

### main.css.scss
This is where **everything** gets included from Foundation to presets to font-awesome to all of the partials…
This is also where **global variables** like colors and sizes can be stored

### _presets.css.scss
This is where **custom mixins** and **global styles** go.

### _anything.css.scss
Anything using our global variables *must* be a partial by way of using this underscore syntax. New partials must be explicitly included in `main.css.scss`. When you add new CSS and it's not showing up, this is probably why.

#### partial dependencies
With fat partials like `_guides.css.scss` it's a great idea to break it up. Using _guides as an example, we break it up into `_new_guides.css.scss` and `_edit_guides.css.scss`. These are both stored in the `guides` folder and explicitly included at the bottom of `_guides.css.scss`.

Whenever you're in doubt, use other files as examples!

Please please *please* look over this PR (at least the functional, non stylish bits). There is still more to clean-up but I want to try to avoid realizing any dumb mistakes too far down the line.

Thanks guys!

*Mmmm… burning CSS*
![giphy-1](https://cloud.githubusercontent.com/assets/220240/5240375/76ac9022-78b7-11e4-8631-e9142ef3c56f.gif)

cc @simonv3 @rickcarlino @roryaronson @emily-plummer