Phunky

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>

Phunky

<div class="box  box___blue-grey">blue-grey</div>
<div class="box  box___grey">grey</div>
<div class="box  box___brown">brown</div>
<div class="box  box___deep-orange">deep-orange</div>
<div class="box  box___orange">orange</div>
<div class="box  box___amber">amber</div>
<div class="box  box___yellow">yellow</div>
<div class="box  box___lime">lime</div>
<div class="box  box___light-green">light-green</div>
<div class="box  box___green">green</div>

Phunky

<div class="box  box___blue-grey">blue-grey</div>
<div class="box  box___grey">grey</div>
<div class="box  box___brown">brown</div>
<div class="box  box___deep-orange">deep-orange</div>
<div class="box  box___orange">orange</div>
<div class="box  box___amber">amber</div>
<div class="box  box___yellow">yellow</div>
<div class="box  box___lime">lime</div>
<div class="box  box___light-green">light-green</div>
<div class="box  box___green">green</div>

Phunky

<div class="box  box___blue-grey">blue-grey</div>
<div class="box  box___grey">grey</div>
<div class="box  box___brown">brown</div>
<div class="box  box___deep-orange">deep-orange</div>
<div class="box  box___orange">orange</div>
<div class="box  box___amber">amber</div>
<div class="box  box___yellow">yellow</div>
<div class="box  box___lime">lime</div>
<div class="box  box___light-green">light-green</div>
<div class="box  box___green">green</div>

Phunky

#
# Any .dev folder in ~/Sites
#
<VirtualHost *:80>
    VirtualDocumentRoot "/Users/phunky/Sites/%1.0.dev/public"
    UseCanonicalName Off
    ServerAlias %1.0.dev.*.xip.io

    <Directory "/Users/phunky/Sites">
        Options FollowSymLinks

Phunky

<h1>YELLOW?</h1>

<div class="cyan">Cyan</div>
<div class="magenta">Magenta</div>
<div class="yellow">Yellow</div>
<div class="key">Key</div>

Phunky

<div class="blue">Blue</div>
<div class="red">Red</div>
<div class="green">Green</div>
<div class="indigo">Indigo</div>
<div class="teal">Teal</div>
<div class="yellow">Yellow</div>

<button class="green">Call me hulk!</button>

<h1 class="light-blue">I want to be blue, light blue!</h1>

Phunky

<div class="box___blue">Blue</div>
<div class="box___red">Red</div>
<div class="box___green">Green</div>
<div class="box___indigo">Indigo</div>
<div class="box___teal">Teal</div>
<div class="box___yellow">Yellow</div>

<button class="make-me___green">Call me hulk!</button>

<h1 class="___light-blue">I want to be blue, light blue!</h1>

Phunky

@function default-map-value($map, $key, $value){
  @if map-has-key($map, $key) {
    // Does sass have a falsey lookup? if !map-has-key()?
  }

  @else {
    map-merge($map, ($key, $value));
  }
}

Phunky

@function colour($name){
  @return map-get($colours, $name);
}

@function colour-darken($name, $percentage){
  @return darken( map-get($colours, $name), $percentage );
}

@function colour-lighten($name, $percentage){
  @return lighten( map-get($colours, $name), $percentage );