CSS
html {
overflow: hidden;
}
body, html {
margin: 0;
height: 100%;
}
body {
background-color: #222;
}
#colors {
display: table;
width: 100%;
height: 100%;
}
.color-row {
display: table-row;
}
.color {
display: table-cell;
color: white;
box-sizing: border-box;
padding: 8px;
font-weight: 100;
-webkit-transition: opacity 200ms;
transition: opacity 200ms;
cursor: pointer;
text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
font-size: 16px;
text-transform: uppercase;
vertical-align: bottom;
text-align: right;
letter-spacing: 1px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.color:hover {
opacity: 0.9;
}
.color .input {
text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
width: 100%;
box-sizing: border-box;
outline: none;
-webkit-user-select: all;
-moz-user-select: all;
-ms-user-select: all;
user-select: all;
}
.color .input::-moz-selection {
background-color: rgba(0, 0, 0, 0.9);
}
.color .input::selection {
background-color: rgba(0, 0, 0, 0.9);
}
.color .input::-moz-selection {
background-color: rgba(0, 0, 0, 0.9);
}
COFFEE
# how many columns do you want?
cols = 5
# modify with your color list
colors = [
["Turquoise", "#1abc9c"]
["Emerald", "#2ecc71"]
["Peter River", "#3498db"]
["Amethyst", "#9b59b6"]
["Wet Asphalt", "#34495e"]
["Green Sea", "#16a085"]
["Nephritis", "#27ae60"]
["Belize Hole", "#2980b9"]
["Wisteria", "#8e44ad"]
["Midnight Blue", "#2c3e50"]
["Sun Flower", "#f1c40f"]
["Carrot", "#e67e22"]
["Alizarin", "#e74c3c"]
["Clouds", "#ecf0f1"]
["Concrete", "#95a5a6"]
["Orange", "#f39c12"]
["Pumpkin", "#d35400"]
["Pomegranate", "#c0392b"]
["Silver", "#bdc3c7"]
["Asbestos", "#7f8c8d"]
]
#
# the actual stuff (dont need to edit):
#
# column width %
col_width = 100 / cols + '%'
# how many colors
color_count = colors.length
# how many rows
row_count = Math.ceil(color_count / cols)
# how tall the rows will be
row_height = 100 / row_count + '%'
# empty html string to add to dom
html = ''
# for each color
for color, i in colors
# start row if first
html += if (i == 0) then '<div class="color-row" style="height:'+row_height+'">' else ''
# add color
html += '<div class="color" data-clipboard-text="'+color[1]+'" style="width: '+col_width+'; background-color:'+color[1]+'">'+color[0]+'<br>'+
'<div class="input" contenteditable>'+ color[1]+'</div>'+
'</div>'
# close row if end of row or last
html += if ((i+1) % cols == 0) then '</div><div class="color-row" style="height:'+row_height+'">' else if ((i+1) == color_count) then '</div>' else ''
# add html to dom
$('#colors').append html
# select contents of each color on click
$('.color').each ->
$(this).click ->
selectText $(this).find('.input')
# select text from http://stackoverflow.com/questions/8802857/select-all-contents-of-a-div
selectText = (element) ->
doc = document
text = $(element)[0]
if doc.body.createTextRange
range = document.body.createTextRange()
range.moveToElementText text
range.select()
else if window.getSelection
selection = window.getSelection()
range = document.createRange()
range.selectNodeContents text
selection.removeAllRanges()
selection.addRange range
return
