US6646 - Add footer to DDK

[seancdavis]

Given a designer/developer using the DDK
When I need to reference styles for the cr.net footer
Then I should find the markup within the molecules section of the DDK that matches the reskin

---

Connected to crdschurch/crds-styleguide#52 and crdschurch/SS-CMS#48.

[seancdavis]

@tcmacdonald: Not sure how I troubleshoot failing builds.

[seancdavis]

Here's an instance where I've added a utility so it could be used elsewhere. In cases like this, should I also be documenting this in the DDK?

[seancdavis]

@tcmacdonald: This is ready for another review, but I have a few concerns/issues:

1. The suggestion on coloring SVGs wouldn't work as you described here when using the i or .icon approach because they aren't treated as SVGs, but as background images.

   The best way I could get around this was to use masks, which I'm now thinking isn't a good approach. Otherwise, this may require a more in-depth discussion about SVG implementation strategies to be able to adjust color easily. (I feel like we're going to want the i or .icon approach.)

2. There were a few times where I used i.icon to be the higher specificity. That feels too rigid, but I also don't like using !important when I don't have to.

3. I moved the colors into a map so we can iterate through them and write cleaner Sass when we have color variations. Ultimately what I'd like to do is make this map nested so that the light and dark variations on a particular hue are nested in a second level, giving you more flexibility to use only the main colors and skip the variations.

   That being said, the downside to this is that Sass does not have an instance_variable_set sort of function, so now when we define a color, we have to add its associated variable to the bottom of the variables partial.

4. I'm now getting those dang lines underneath the icons at their smallest sizes. Not sure this was happening before. But this may not matter as much if we are going to ditch masks.