From my description in the 10K Apart entry:
ColorStash lets you pick, convert, save, and share colors and schemes. Use the custom built colorpicker, permissive text parsing, and color scheme generators. Stash colors in localStorage or share them from the URL.
Responsive: Different layouts for widths < 600px and > 1200px to maximize available space.
You’ll be amazed at how much this does in under 10k!
Read more at http://www.briangrinstead.com/blog/colorstash. I explain the responsive design decisions and components I built for this project.
One of the main goals of the contest this year was that the app had to be “responsive”. It was a cool way to learn about this new trend in web development. I had to spend extra time thinking about how it should work at different resolutions, but I think the outcome was better for not only those different resolutions, but even the normal one.
- Less than 600px: and everything is moved into a vertical line. Additionally, schemes get vertical layout – otherwise they would be too small (since they are a percentage width).
- Greater than 1200px: everything is moved into one row. This is to make better use of available horizontal space, and because of a unique problem that the colorpicker presents. It must keep a 1:1 aspect ratio for the middle area (where you drag around to control saturation and value). By moving the schemes into the row, the picker only takes up 33% of the width, which helps keep it from becoming way too tall to fit on a widescreen monitor.
- On iPhone / iPad: The colorpicker hue slider gets wider to make sliding easier with touch events. Also, the ‘pallet’ options at the top become wider. I think it is just harder to tap on a small area than click. Also, you probably don’t need as many saved colors visible in a mobile environment. Open up the site in an iPhone, and also inside a normal browser scaled down to 480px to see the difference between the two!
- Other mobile environments: Unfortunately, I don’t have the resources to test other mobile phones, so I’m not sure if it works… If anyone knows of a good way to test this, please let me know!</ul>
Compressed, crunched, and zipped ColorStash weighs in at 10,210 bytes. Obviously, this is cutting it close to the 10K limit!
I wrote the first version without worrying about size. It came it at maybe 20k. Once I minified the resources, it got down to about 15. Now it was time to start optimizing code (the fun part)!
I built the spectrum colorpicker just for this contest. One of the cool parts about it is that it uses CSS gradients / IE filters instead of images or canvas. This makes it supported in a wide range of browsers, and very small!
- Full Support: IE8+, Firefox 3.5+, Chrome, Safari, Opera, works on iPhone
- Limited: IE6/7 (no localStorage)