zurb example

grids.html

<!-- The Basics -->

<div class="container">
  <div class="row">
    <div class="eight columns">
      Eight columns
    </div>
    <div class="four columns">
      Four columns					
    </div>
  </div>
</div>

<!-- NESTING GRID --->

<div class="container">
  <div class="row">
    <div class="eight columns">
      <div class="row">
        <div class="six columns">
          Six columns (nested)
        </div>
        <div class="six columns">
          Six columns (nested)
        </div>
      </div>
    </div>
  </div>
</div>

<!-- MOBILE -->

<strong class="show-on-desktops">You are on a desktop machine.</strong>
<strong class="show-on-tablets">You are on a tablet device.</strong>
<strong class="show-on-phones">You are on a smartphone like an iPhone or Android phone.</strong>

<!-- TABS --->

<dl class="tabs">
  <dd><a href="#simple1" class="active">Simple Tab 1</a></dd>
  <dd><a href="#simple2">Simple Tab 2</a></dd>
  <dd><a href="#simple3">Simple Tab 3</a></dd>
</dl>

<ul class="tabs-content">
  <li class="active" id="simple1Tab">This is simple tab 1's content. Pretty neat, huh?</li>
  <li id="simple2Tab">This is simple tab 2's content. Now you see it!</li>
  <li id="simple3Tab">This is simple tab 3's content. It's, you know...okay.</li>
</ul>

<!-- BUTTONS -->

<a href="#" class="[small, medium, large] button">Button Text</a>
<a href="#" class="[radius, round] button">Button Text</a>
<a href="#" class="[blue, red, black] button">Button Text</a>