A Pen by josephj.

index.html

<div id="chess-board"></div>

script.coffee

COLUMN_AMOUNT = 8
ROW_AMOUNT = 8
MAIN_ROW =  ['rook', 'knight', 'bishop', 'queen', 'king', 'bishop', 'knight', 'rook']

# Data
data = [
  ['rook', 'knight', 'bishop', 'queen', 'king', 'bishop', 'knight', 'rook']
  ['pawn', 'pawn', 'pawn', 'pawn', 'pawn', 'pawn', 'pawn', 'pawn']
  [null, null, null, null, null, null, null, null]
  [null, null, null, null, null, null, null, null]
  [null, null, null, null, null, null, null, null]
  [null, null, null, null, null, null, null, null]
  ['pawn', 'pawn', 'pawn', 'pawn', 'pawn', 'pawn', 'pawn', 'pawn']
  ['rook', 'knight', 'bishop', 'queen', 'king', 'bishop', 'knight', 'rook']
]

# Render View
html = []
for i, row of data
  html.push '<div class="row">'
  for j, name of row    
    unless name
      html.push '<span class="cell"></span>'
    else
      html.push "<span class=\"cell\"><i class=\"icon icon-#{name}\"></i></span>"
  html.push '</div>'
$('#chess-board').html html.join('')

style.sass

@import "compass"
.icon
  background: url(http://d.pr/i/TN7b+) 0 -1000em no-repeat
  display: block
  width: 60px
  height: 60px
  &.icon-opponent
    background-position-x: -60px
  &.icon-pawn
    background-position-y: 0
  &.icon-knight
    background-position-y: -60px
  &.icon-bishop
    background-position-y: -120px
  &.icon-rook
    background-position-y: -180px
  &.icon-queen
    background-position-y: -240px
  &.icon-king
    background-position-y: -300px
    
#chess-board
  background: #ffce9e
  border-collapse: collapse
  display: table
  .row
    display: table-row
    &:nth-child(even) .cell:nth-child(even),
    &:nth-child(odd) .cell:nth-child(odd)
      background: #d18b47
  .cell
    display: table-cell
    font-size: 11px
    height: 60px
    text-align: center
    vertical-align: middle
    width: 60px
body
  padding: 10px

zsymc.markdown

zsymc

A Pen by josephj on CodePen.

License.