Skip to content

Instantly share code, notes, and snippets.

@SteveBenner

SteveBenner/_color-palette.slim

Created October 29, 2015 14:32
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save SteveBenner/d46724e9428611658e32 to your computer and use it in GitHub Desktop.
Save SteveBenner/d46724e9428611658e32 to your computer and use it in GitHub Desktop.
Download ZIP
Slim partial - renders a color palette on your web page to aid in graphic design
Raw
_color-palette.slim
/ 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.
ruby:
square_size ||= '20px'
colors ||= []
#color-palette
.colorbox
- for color_val in colors
div style="background-color: #{color_val}"
style == ".colorbox > div { width: #{square_size}; height: #{square_size}; }"
sass:
#color-palette
position: fixed
bottom: 0
width: 60%
.colorbox
margin: 4px
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment