Color Branding & Moods Strategy Implementation

[ebollens]

This is the implementation of the color strategy as discussed in #33 and defined here:
https://github.com/ucla/WebBlocks/wiki/Color-Strategy

[ebollens]

Boy this implementation is trickier than it looked at first...

[ebollens]

Mood-based backgrounds are now pretty much implemented.

[ebollens]

The changes I made to tables killed performance unreasonably, raising the total size from 135 KB to 190 KB - which is crazy! As such, I'm removed them in favor of a strategy that requires you to you to state td.background.warning instead of td.warning.

[ebollens]

As an aside, the code changes in here have increased the total size to 170 KB from approximately 130 KB. HOWEVER, using https://github.com/ebollens/CSSOptimizer, that size is reduced to 135 KB by removing redundant rules and joining duplicate selector sets with the same rules in them that don't have the class*= selector problem - which I guess is a majorly good reason for us to include such an optimizer.

[ebollens]

I've moved this to milestone 1.0.02 since there are a lot of things still to be done that won't get finished in a day. Turned out to be quite a beast of a task.

[ebollens]

I have completed the branding and moods color implementation.

To use one of these as a background, simply cast it directly on an element such as td.primary or button.success. To instead only style the color on text, use it instead as span.required.text. I also provided some default values, but of course we'll want to redefine these later as a WebBlocks pallet (and each university will almost certainly build their own extension that redefines them further).