I made this little open source experiment to see how difficult it would be to programatically parse a CSS file and find the colours used. From here you could sort by count or hue. Rename what you felt mattered on the fly. Download your output. Whatever.
It turns out I wasn’t the only one to be inspired by Nicole’s talk, and Tom Genomi went on to produce CSSDig (albeit in python). It parses files and identifies redundancy.
A colleague also put me on to CSS2Compass, which takes what I was trying to achieve to the extreme. And while it may lack some interactivity, it certainly makes up for it in features.
Building my experiment was relatively simple. Open source scripts and libraries greatly accelerated the process, so the time I spent tying the loose threads together was minimal.
- Flat UI dictates the look and feel (Bootstrap dependent)
- Dropzone handles the file drop
- Filesaver produces the downloadable blobs
- The colour match RegExp and array magic come from Stack Overflow
- Eventually I’ll port the code to Knockout or Angular
Basically, don’t write code that’s already been written.
All things said and done, there are still a few bugs and edge cases. I really don’t want to spend much time fixing them if this script isn’t particularly of value, so I’ll wait and see how it’s received.