smileyj68

<div class="row">
  <div class="eight columns">
    Main content...
  </div>
  <div class="four columns">
    Sidebar...
  </div>
</div>

smileyj68

<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>

smileyj68

<div class="row">
  <div class="two columns push-ten">
    .two.columns		
  </div>
  <div class="ten columns pull-two">
    .ten.columns (last)				
  </div>
</div>

<div class="row">

smileyj68

<h2>This is a large main header.</h2>
<h4 class="subheader">This is a smaller subheader.</h4>

smileyj68

<h3>This is a large header. <small>This is a small segment of that header.</small></h3>

smileyj68

// Variables
$ratio: $golden;
$base-size: 14px 44px;

// Modular Scale SCSS Function Syntax
h6 { font-size: ms(0); } // First Number in Scale
h5 { font-size: ms(1); } // Second Number in Scale
h4 { font-size: ms(2); } // Third Number in Scale

smileyj68

<blockquote>
  I do not fear computers. I fear the lack of them. 
  <cite>Isaac Asimov</cite>
</blockquote>

smileyj68

<form>
  <label>This is a label.</label>
  <input type="text" placeholder="Standard Input" />
  
  <label>Address</label>
  <input type="text" class="twelve" placeholder="Street" />
  <div class="row">
    <div class="six columns">
      <input type="text" placeholder="City" />
    </div>

smileyj68

<form>
  <div class="row">
    <div class="two mobile-one columns">
      <label class="right inline">Address Name:</label>
    </div>
    <div class="ten mobile-three columns">
      <input type="text" placeholder="e.g. Home" class="eight" /> 
    </div>
  </div>
  <div class="row">

smileyj68

<fieldset>
  
  <legend>Fieldset Name</legend>
  
  <label>This is a label.</label>
  <input type="text" placeholder="Standard Input" />
  
  <label>Address</label>
  <input type="text" />
  <input type="text" class="six" />