imarc/boilerplate — pull request #25 by khamer (2013-05-08 17:52:00+00:00)
Title: Handbook-inspired Refinements

This pull request includes all the updates I've made as a result of using the current boilerplate on Handbook.

I've also forked Handbook and applied these styles - http://khamer.github.io/handbook/

#### SASS
I did this work after rewriting Boilerplate into SASS, as it felt like it would make some of this easier. I also found styling navigation in particular, to be much clearer with SASS than the CSS itself was. We don't have to continue with the SASS version, but if we like the SASS version more perhaps that is something we want to consider. I did follow very specific conventions when writing SASS, but that's a separate topic.

I've done some post-SASS formatting just to make the CSS more pleasant, but I'm sure more could happen.

#### Header Color
I switched these to dark grays, which was the direction Jeff was headed. I used two dark gray colors inspired by the colors used [here](http://windows.microsoft.com/en-us/windows-8/meet).

#### Navigation
I've changed the navigation to only change text colors with active state and removed the 'tab-like' background so that even in places where there is no secondary navigation (such as Handbook), the navigation doesn't look awkward.

#### Menus
I change the DOM structure for the dropdown menus slightly. I've introduced a `.dropdown` class, which allows for the dropdown menu to contain more than a single `ul`. This seems to match better with the sites we build. Also, it allows for crazier things, like full width (wider than `.container`) dropdowns, etc.

I **did not change** the DOM per Jeff's suggestion, as I wanted to keep the implementation for the secondary navigation and primary navigation separate, for sites that either want to implement only one or the other.

#### Fonts
I tried out some fonts and talked to Creative. I'm going to switch back to Open Sans, which is what I was using before we switched to Georgia. Open Sans is popular, clean, and very generic.

I also changed our body font-family back to `Arial, Helvetica, sans-serif`, as this is the font stack we should be using for body content, as its considered a best practice, web safe font stack.

Lastly, Creative pointed out that Handbook, being an iMarc site and iMarc branded, should be using iMarc fonts, so we should use Fjord instead of Open Sans there.

#### Polish
I did some basic polish here and there. I tweaked some colors, added a box-shadow to the dropdowns, and fixed a bug with button margins (that we accidentally introduced in the first place.)