twitter/bootstrap — pull request #8246 by baer (2013-06-21 04:03:28+00:00)
Title: Added an interactive color swatch to customize page

#### 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](https://github.com/twitter/bootstrap/issues/2804), [2578](https://github.com/twitter/bootstrap/issues/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.