18F/peacecorps-site — pull request #104 by msecret (2014-11-19 23:41:30+00:00)
Title: refc Typography refactor

@noahmanger @meiqimichelle if you guys have time, I'd appreciate a frontend review of this as I had discussed earlier this week.

I refactored the typography into a clean system.

There's a class for each type "style". Some of these are similar, this
is due to basing the classes not only on the actual style but also
the context. So if you have to change all the icons but not the
single-nav elements, you can change one separate from the other, even
if now they are styled similiarly.

Not everything uses strict OOCSS. This can be seen with color. Color
is purposely not defined in the text classes (except for p, which I may
change later). This is because I found color is usually controlled by
the context of what the text is in. If the text is in a red button,
the red button should set the color to white, and etc. By not setting
color, the different components that wrap text can set color themselves,
which can be seen in full_banner and buttons.

I used rems for font-size to ensure theres no issues with setting nested
elements to 1em. There are ems used elsewhere for margins in the code.

Weights seem to somewhat match up to the actual Archer font. I found
that extra-light was not available though.

I separated out the idea of headings and titles, due partially because
the design called for separate styles for different places. Headings
are meant to go with the content, in that they are not uppercased.
Titles are used most other places. This distinction will be hard to
maintain in the future, which might be ok.

TODO
- The actual Archer property has to be fixed on non-dev sites
to use the correct font.
- Figure out margins between text elements, as well as line-height is
all accurate.