trulia/hologram — pull request #114 by bigethan (2014-05-20 21:24:18+00:00)
Title: CSS Classname Helpers

Adding the ability to click on css classnames and see the rules that they represent.

Sometimes when you're looking at a classname in a style guide, it'd be nice to know exactly what rules that class applies. This commit adds ~136 lines of native JS to the footer template and enables the ability to click on css classnames in `` tags as well as when they are in `.s` elements and see their applied rules.

It doesn't do the whole tree, the way the devtools do, but it's nice to quickly to know that `overlayContainer hover` means:

![screenshot 2014-05-20 13 25 55](https://cloud.githubusercontent.com/assets/627/3033465/98e28e1c-e064-11e3-967c-0a3dabe3afc6.png)

Or that `hideFully` does all this:

![screenshot 2014-05-20 13 25 12](https://cloud.githubusercontent.com/assets/627/3033469/ab5c0730-e064-11e3-967f-879859bf6c4e.png)

Very open to suggestions on implementation here. Hologram doesn't currently do more than just style things, so adding interactions is something that should be approached with a bit of caution.

I've been running this as a browser addon for a week now. It's quite helpful, and not at all slow to run.