.rack 
  .tile[data-letter='s']
  .tile[data-letter='c']
  .tile[data-letter='r']
  .tile[data-letter='a']
  .tile[data-letter='b']
  .tile[data-letter='b']
  .tile[data-letter='l']
  .tile[data-letter='e']
  
.all
  .tile[data-letter='a']
  .tile[data-letter='a']
  .tile[data-letter='a']
  .tile[data-letter='a']
  .tile[data-letter='a']
  .tile[data-letter='a']
  .tile[data-letter='a']
  .tile[data-letter='a']
  .tile[data-letter='a']
  .tile[data-letter='b']
  .tile[data-letter='b']
  .tile[data-letter='c']
  .tile[data-letter='c']
  .tile[data-letter='d']
  .tile[data-letter='d']
  .tile[data-letter='d']
  .tile[data-letter='d']
  .tile[data-letter='e']
  .tile[data-letter='e']
  .tile[data-letter='e']
  .tile[data-letter='e']
  .tile[data-letter='e']
  .tile[data-letter='e']
  .tile[data-letter='e']
  .tile[data-letter='e']
  .tile[data-letter='e']
  .tile[data-letter='e']
  .tile[data-letter='e']
  .tile[data-letter='e']
  .tile[data-letter='f']
  .tile[data-letter='f']
  .tile[data-letter='g']
  .tile[data-letter='g']
  .tile[data-letter='g']
  .tile[data-letter='h']
  .tile[data-letter='h']
  .tile[data-letter='i']
  .tile[data-letter='i']
  .tile[data-letter='i']
  .tile[data-letter='i']
  .tile[data-letter='i']
  .tile[data-letter='i']
  .tile[data-letter='i']
  .tile[data-letter='i']
  .tile[data-letter='i']
  .tile[data-letter='j']
  .tile[data-letter='k']
  .tile[data-letter='l']
  .tile[data-letter='l']
  .tile[data-letter='l']
  .tile[data-letter='l']
  .tile[data-letter='m']
  .tile[data-letter='m']
  .tile[data-letter='n']
  .tile[data-letter='n']
  .tile[data-letter='n']
  .tile[data-letter='n']
  .tile[data-letter='n']
  .tile[data-letter='n']
  .tile[data-letter='o']
  .tile[data-letter='o']
  .tile[data-letter='o']
  .tile[data-letter='o']
  .tile[data-letter='o']
  .tile[data-letter='o']
  .tile[data-letter='o']
  .tile[data-letter='o']
  .tile[data-letter='p']
  .tile[data-letter='p']
  .tile[data-letter='q']
  .tile[data-letter='r']
  .tile[data-letter='r']
  .tile[data-letter='r']
  .tile[data-letter='r']
  .tile[data-letter='r']
  .tile[data-letter='r']
  .tile[data-letter='s']
  .tile[data-letter='s']
  .tile[data-letter='s']
  .tile[data-letter='s']
  .tile[data-letter='t']
  .tile[data-letter='t']
  .tile[data-letter='t']
  .tile[data-letter='t']
  .tile[data-letter='t']
  .tile[data-letter='t']
  .tile[data-letter='u']
  .tile[data-letter='u']
  .tile[data-letter='u']
  .tile[data-letter='u']
  .tile[data-letter='v']
  .tile[data-letter='v']
  .tile[data-letter='w']
  .tile[data-letter='w']
  .tile[data-letter='x']
  .tile[data-letter='y']
  .tile[data-letter='y']
  .tile[data-letter='z']
  .tile
  .tile
  
View Compiled
@import url(https://fonts.googleapis.com/css?family=Oswald);

@unit: 1mm;
:root { 
  @base: desaturate(#F3CC8B, 20%);
  @darker: desaturate(darken(@base, 33%), 45%);
  padding: 5vh 5vw;
  background-color: @base;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-image:
    radial-gradient(center,
      @darker,
      transparent);
}

:root::before {
  position: fixed;
  content: "";
  top: 0; bottom: 0; 
  right: 0; left: 0;
  opacity: 0.80;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/49914/grit-fs8.png);
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 90vh; width: 90vw;
  box-sizing: border-box;
}



.rack {
  display: flex;
  justify-content: center;
  
  .tile {
    margin: @unit / 2;
    .tile(@size: 19 * @unit);
  }
}

.all {
  @small-size: @unit * 9.5;
  margin-top: @unit * 12.5;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  width: @small-size * 10.9;
  height: @small-size * 10.9;
  .tile { .tile(@size: @small-size); }
}


.tile(@size) {
  @tile-base: #f5cf90;
  @thin: (@size * 0.5/19);
  @small: (@size * 0.75/19);
  @med: @small * 1.5;
  
  background-color: @tile-base; 
  background-image: 
    url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/49914/veneer-birch-texture-fs8.png');
  
  position: relative;
  
  width: @size;
  height: @size;
  box-sizing: border-box;
  box-shadow: 0 @med @small -@thin fadeout(black, 60%);
  
  border-style: solid;
  
  border-top-width: @small;
  border-left-width: 1px;
  border-right-width: 1px;
  border-bottom-width: @med;
  
  border-top-color: fadeout(white, 55%);
  border-left-color: fadeout(white, 75%);
  
  border-right-color: fadeout(black, 85%);
  border-bottom-color: fadeout(black, 70%);
  
  border-radius: @small;
  
  &[data-letter]::before {
    content: attr(data-letter);
    text-transform: uppercase;
    font-family: Oswald, sans-serif;
    font-size: @size * .70;
    position: absolute; 
    top: 50%; left: 50%; 
    transform: translate(-50%,-50%);
    
    color: rgba(0,0,0,0.6);
    text-shadow: 
      4px 4px 6px @tile-base,
      0 0 0 rgba(0,0,0,0.7),
      1px 2px 1px rgba(255,255,255,0.5);
  }
  
  &[data-letter]::after {
    color: fadeout(black, 30%);
    font-family: sans-serif;
    font-size: @size * 0.225;
    position: absolute;
    right: 12.5%;
    bottom: 12.5%;
    transform: translate(50%,50%);
  }
  
  &[data-letter='e'],
  &[data-letter='a'],
  &[data-letter='i'],
  &[data-letter='o'],
  &[data-letter='n'],
  &[data-letter='r'],
  &[data-letter='t'],
  &[data-letter='l'],
  &[data-letter='s'],
  &[data-letter='u'] {
    &::after { content: "1"; }
  }
  &[data-letter='d'],
  &[data-letter='g'] {
    &::after { content: "2"; }
  }
  &[data-letter='b'],
  &[data-letter='c'],
  &[data-letter='m'],
  &[data-letter='p'] {
    &::after { content: "3"; }
  }
  &[data-letter='f'],
  &[data-letter='h'],
  &[data-letter='v'],
  &[data-letter='w'],
  &[data-letter='y'] {
    &::after { content: "4"; }
  }
  &[data-letter='k'] {
    &::after { content: "5"; }
  }
  &[data-letter='j'],
  &[data-letter='x'] {
    &::after { content: "8"; }
  }
  &[data-letter='q'],
  &[data-letter='z'] {
    &::after { content: "10"; }
  }
}
View Compiled
var // format value as pixels
    px = function(v) { return v ? (v|0) + "px" : '0'; },
    
    r = Math.random,
    // random value [0,m)
    rv = function(m) { return m*r(); },
    // random value [n,m)
    rb = function(n,m) { return rv(m-n)+n; },
    // random value centered around 0
    rc0 = function(rng) { return (r()*rng)-(rng/2); },
    // random pixel value [0,m)
    rpx = function(m) { return px(rv(m)) },
    // random background position
    bkg = function(w,h) { return rpx(w)+" "+rpx(h||w); },
    
    // Prototypes
    fp = Function.prototype,
    ap = Array.prototype,
    dp = Document.prototype,
   	
    // callable forEach
    forEach = fp.call.bind(ap.forEach),
    // jQuery-ish
    $ = dp.querySelectorAll.bind(document),
    
    tiles = $(".tile"),
    rackTiles = $(".rack>.tile");

// Randomize the wood grain
forEach(tiles, function(el) {
  el.style.backgroundPosition = bkg(600);
});

// randomize the rotation of the rack tiles. 
forEach(rackTiles, function(el) {
  el.style.transform = "rotate("+ rc0(5) +"deg)";
});

// randomize the background-color of the all the tiles
forEach(tiles, function(el) {
	var s = el.style, cs = window.getComputedStyle(el), amt = r();
  s.backgroundColor = tinycolor(cs.backgroundColor)
    .darken(amt*20)
  	.desaturate(amt*30)
    .toHexString();
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/tinycolor/1.1.1/tinycolor.min.js