Colors



.
.
.
.
.
.
.
.
.
.



Name
.blue
.lightblue
.aqua
.green
.yellow
.orange
.red
.pink
.purple
.black
.white
.grey

Options

Name Applied Element Example
.blue (any color) * Example
.text .blue (any color) Example
.border .text Example 

<div class='blue'>Example</div>
<div class='blue text'>Example</div>
<div class='blue text border'>Example</div>

Gradients

*For Modern Browsers Only

Name
.grad
.grad.blue
.grad.lightblue
.grad.aqua
.grad.green
.grad.yellow
.grad.orange
.grad.red
.grad.pink
.grad.purple
.grad.black
.grad.grey
.grad.white






Gradient

Example


<div class='grad purple pad'>
    <h1 class='f3 cap'>Gradient</div>
    <p class='f4 spread cap'>example</div>
</div>




Gradient

Example

<h1><span class='grad aqua text f3'>Gradient</span></h1>
<h5><span class='grad pink text f4 spread cap'>Example</span></h5>

*NOTE: For text gradients use inline elements such as <span> to prevent gradients from being stretched