Created by: baer
UX Problem
The Customize page does not provide an effective interface for interacting with the variables.less file.
Proposed Solution
Add a simple color swatch next to each of the options in the Bootstrap 3.x color selection section.
Motivation
There have been a number of requests both on the 2.x and 3.x branches to add interactivity but thus far there have been no pull requests that I have seen. E.g. 2804, 2578 etc.
Complexity
There is slightly more complex markup but it's only from using a bootstrap row/col to controll collapsing in different viewports.
JavaScript: +9 lines
CSS: +11 lines
HTML: +7 lines/color
Drawbacks
Since the attr(data-color px)
style CSS selectors are still not that well implemented I had to use a little inline styling. Maybe the community can help find a better solution.