CSS Style Guide

Colors

#5D7610 #76883E #94b531 #BDDA63 #C5DA83

#555555 #558866 #889988 #777777 #ccddaa

<span class="swatch" style="background-color: #5D7610;">
	#5D7610
</span>
<span class="swatch" style="background-color: #76883E;">
	#76883E
</span>
<span class="swatch" style="background-color: #94b531;">
	#94b531
</span>
<span class="swatch" style="background-color: #BDDA63;">
	#BDDA63
</span>
<span class="swatch" style="background-color: #C5DA83;">
	#C5DA83
</span>
<div class="spacer"></div>
<span class="swatch" style="background-color: #555555;">
	#555555
</span>
<span class="swatch" style="background-color: #558866;">
	#558866
</span>
<span class="swatch" style="background-color: #889988;">
	#889988
</span>
<span class="swatch" style="background-color: #777777;">
	#777777
</span>
<span class="swatch" style="background-color: #ccddaa;">
	#ccddaa
</span>

Forms

Toggle markup

<form>
	<label>Label</label> <input type="text"/>
</form>

Typography

h2. Very Important

h3. Important

h4. Kind of Important

h5. Not Really Important

h6. sdPeople use H6 tags?

bittering hops lager dunkle becher aau craft beer. aerobic, malt original gravity. ale kolsch scotch ale all-malt copper conditioning wort chiller. abv, brewing balthazar mouthfeel bock double bock/dopplebock. anaerobic berliner weisse barleywine; conditioning tank wit sparge bottle conditioning. trappist pilsner hefe krug enzymes crystal malt lauter tun. caramel malt secondary fermentation length.

Toggle markup

<h1 class="page-header">h1. Very Very Important</h1>
<h2>h2. Very Important</h2>
<h3>h3. Important</h3>
<h4>h4. Kind of Important</h4>
<h5>h5. Not Really Important</h5>
<h6>h6. sdPeople use H6 tags?</h6>

<p>bittering hops lager dunkle becher aau craft beer. aerobic, malt original gravity. ale kolsch scotch ale all-malt copper conditioning wort chiller. abv, brewing balthazar mouthfeel bock double bock/dopplebock. anaerobic berliner weisse barleywine; conditioning tank wit sparge bottle conditioning. trappist pilsner hefe krug enzymes crystal malt lauter tun. caramel malt secondary fermentation length.</p>

Thumbnails

Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Toggle markup

<ul class="thumbnails thumbnail-list">
  <li class="span4">
    <figure class="thumbnail-figure">
      <a data-image="images/thumbnails/thumb01.jpg" data-toggle="lightbox" href="#lightbox">
        <img alt="" src="images/thumbnails/thumb01.jpg">
        <i style="top: -100px;"></i>
      </a>
      <figcaption>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </figcaption>
    </figure>
  </li>
  <li class="span4">
    <figure class="thumbnail-figure">
      <a data-image="images/thumbnails/thumb02.jpg" data-toggle="lightbox" href="#lightbox">
        <img alt="" src="images/thumbnails/thumb02.jpg">
        <i style="top: -100px;"></i>
      </a>
      <figcaption>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </figcaption>
    </figure>
  </li>
  <li class="span4">
    <figure class="thumbnail-figure">
      <a data-image="images/thumbnails/thumb03.jpg" data-toggle="lightbox" href="#lightbox">
        <img alt="" src="images/thumbnails/thumb03.jpg">
        <i></i>
      </a>
      <figcaption>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </figcaption>
    </figure>
  </li>
</ul>

Buttons

Toggle markup

<button class="btn g2g-btn">Click Me</button>