Full Layout

This is the standard layout used in the main Web Application. Uses Shelves for the grid.
Usage

Add localmed-full-layout.css and use the markup below in your <body>.
Use the Mobile Menu for mobile responsive states.
Add the required markup below:
<div class="site-wrapper">
  <div class="site-header header large-header">
    <div class="row">
      <div class="header-column-left mobile-column-4">
        <a href="/" class="header-logo logo">
          <img src="https://www.localmed.com/assets/images/localmed.png" data-at2x="https://www.localmed.com/assets/images/localmed@2x.png" alt="LocalMed Logo" width="223" height="60" class="header-logo-img-l">
          <img src="https://www.localmed.com/assets/images/localmed-sm.png" data-at2x="https://www.localmed.com/assets/images/localmed-sm@2x.png" alt="LocalMed Logo" width="140" height="38" class="header-logo-img-s">
        </a>
      </div>
      <div class="header-column-right mobile-column-2">
        <ul class="header-menu menu">
          <li><a href="/about/">About</a></li>
          <!-- More menu items... -->
        </ul>
        <a href="#mobile-menu" data-toggle="mobile-menu" class="header-menu-toggle" title="Toggle Menu">
          <i class="icon-list"></i> <span>Toggle Menu</span>
        </a>
      </div>
    </div>
  </div>
  <div class="site-content content">
    <!-- BODY CONTENT GOES HERE -->
  </div>
</div>
<div class="site-footer">
  <div class="footer nav-footer">
    <div class="row">
      <div class="column-2 tablet-column-3">
        <h6>Patients</h6>
        <ul class="horizontal-divided-list">
          <li><a href="/?q=Dentist">Find Dentists</a></li>
          <li><a href="/login/">Login</a> or <a href="/signup/">Signup</a></li>
        </ul>
      </div>
      <div class="column-2 tablet-column-3">
        <h6>Providers</h6>
        <ul class="horizontal-divided-list">
          <li><a href="/about/dentists/">Take the Tour</a></li>
          <li><a href="mailto:sales@localmed.com">Contact Sales</a></li>
          <li><a href="/clients/login/">Login</a></li>
        </ul>
      </div>
      <div class="column-2 tablet-column-3 first-tablet-column">
        <h6>Company</h6>
        <ul class="horizontal-divided-list">
          <li><a href="/about/">About</a></li>
          <li><a href="/about/faq/">FAQ</a></li>
          <li><a href="/about/jobs/">Jobs</a></li>
          <li><a href="/about/press/">Press</a></li>
        </ul>
      </div>
      <div class="column-2 tablet-column-3">
        <h6>Support</h6>
        <ul class="horizontal-divided-list">
          <li><a href="mailto:support@localmed.com">Contact Support</a></li>
          <li><a href="/about/faq/">FAQ</a></li>
        </ul>
      </div>
      <div class="column-2 tablet-column-3 first-tablet-column last-tablet-row">
        <h6>Tools</h6>
        <ul class="horizontal-divided-list">
          <li>Coming Soon…</li>
        </ul>
      </div>
      <div class="column-2 tablet-column-3 last-tablet-row">
        <h6>Connect</h6>
        <ul class="horizontal-divided-list">
          <li><a href="http://www.facebook.com/LocalMed"><i class="icon-facebook-sign muted"></i> Facebook</a></li>
          <li><a href="https://twitter.com/LocalMed"><i class="icon-twitter-sign muted"></i> Twitter</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="footer extra-footer">
    <div class="row">
      <ul class="extra-footer-list small text-center">
        <li>
          <ul class="horizontal-divided-list">
            <li><a href="/about/policies/terms/">Terms of Service</a></li>
            <li><a href="/about/policies/privacy/">Privacy Policy</a></li>
          </ul>
        </li>
        <li>&copy; 2013-2014 LocalMed Inc. All rights reserved</li>
      </ul>
    </div>
  </div>
</div>
<nav id="mobile-menu" class="mobile-menu">
  <ul>
    <li><a href="/about/">About</a></li>
    <!-- More menu items... -->
  </ul>
</nav>