Spectrum Colorpicker In Foliotek Presentation
by Brian Grinstead
Foliotek Getting Involved
We decided to add (and expand on) functionality and improve the design for use in Foliotek Presentation.
Geoff Leigh and I worked together, thinking about the color picking process from scratch and came up with a good workflow, I think.
The palettes on the top are commonly used colors that are ‘sticky’. These are easy ways to grab a color that looks about right, and makes it easy to reuse colors. Clicking on any element from a palette instantly chooses the color and closes the colorpicker.
Part of what makes Foliotek Presentation cool is that we know so much about the designs that people use by analyzing the CSS and color changes that they do in our template editor. With this information, we bind a list of colors that are being used in their template. This opens up possibilities like reusing a heading color to accent a certain word in their portfolio.
This is a list that remembers which colors you have chosen. It uses the localStorage object. It will automatically add any color you select that isn’t in the above palettes.
Since it is automatic, users do not need to add/remove/edit the custom palette. Right now, we think this is better than presenting the user with an interface for setting custom colors. We originally had some designs that handled this management, but we decided to go with the simpler solution for now.
- Good UX
- Cross Browser Compatible (IE6 and up)
- Doesn’t use any images
- Easy to skin via CSS
- Simple interface / easy to integrate with app
I am very happy with the changes and excited to be working on projects like these! You can follow development of the plugin, suggest features, or report bugs here: https://github.com/bgrins/spectrum.