Skip to content

Instantly share code, notes, and snippets.

Created October 29, 2015 14:32
What would you like to do?
Slim partial - renders a color palette on your web page to aid in graphic design
/ This is a humble web design tool inspired by the eyedropper functionality in Google Chrome's
color picker interface (part of the dev tools panel) which allows one to choose any pixel of
the current web page to set as a color property's value. Though hugely convenient for visual
design, color selection being limited to the context of the page leaves much to be desired.
/ This partial solves the limitation by affixing an unobtrusive panel to your page to act as
a makeshift color palette to use in conjunction with the eyedropper. The panel is populated
with small squares representing a list of colors passed into the partial via local. Viola!
/ @local [Array<String>] colors List of values valid for `background-color` CSS property
@local [Fixnum] square_size Width of the generated squares, in pixels (default: 20)
@note This partial should be inserted as a child of the <body> element.
square_size ||= '20px'
colors ||= []
- for color_val in colors
div style="background-color: #{color_val}"
style == ".colorbox > div { width: #{square_size}; height: #{square_size}; }"
position: fixed
bottom: 0
width: 60%
margin: 4px
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment