anchor.diff:    <a class="button -secondary button--preview js-styleguide-animation-preview" data-class="shake">Preview</a>
     <% end %>
   
  -    <h2 id="components">Components</h2>
  -    <p>We don't want to re-invent the wheel. Re-usable interface patterns are catalogued within Neue to promote consistency throughout our interfaces and minimize code bloat. We start by defining atomic components. These are the smallest building blocks of our interfaces.</p>
  +  <h2 id="components">Components</h2>
  +  <p>We don't want to re-invent the wheel. Re-usable interface patterns are catalogued within Neue to promote consistency throughout our interfaces and minimize code bloat. We start by defining atomic components. These are the smallest building blocks of our interfaces.</p>
   
     <div id="forms">
       <% styleguide_block  'Forms - Button' do %>
  
positive.code:     <% end %>
    </div>
  
      <% styleguide_block 'Info Bar' do %>
        <footer class="info-bar $modifier_class">
          <div class="wrapper">
            Sponsored by <a href="#">Puppet Sloth</a>.
            <div class="info-bar__secondary">
              Questions? <a href="#">Contact Us</a>
            </div>
          </div>
        </footer>
      <% end %>
  
      <% styleguide_block  'Polaroid' do %>
        <figure class="polaroid">
          <img src="http://www.placekitten.com/g/320/320" alt="another kitten">
        </figure>
      <% end %>
  
      <% styleguide_block  'Tabs' do %>
        <section class="tabs js-tabs">
          <a href="#" data-modal-href="#modal-tips-during" class="tabs__modal-toggle">View Tips</a>
          <h4 class="visually-hidden">Tips</h4>
          <div class="wrapper">
            <nav class="tabs__menu">
              <ul class="waypoints">
                <li class="is-active"><a href="#tip-1" data-tab="1">Find Maxwell</a></li>
                <li><a href="#tip-2" data-tab="2">Give Him 'Fee</a></li>
              </ul>
            </nav>
  
            <ul class="tabs__body">
              <li id="tip-1" class="tabs__tab">
                <h5 class="tabs__title">Find Maxwell</h5>
                <p>He's drinking 'fee. But he needs some more 'fee.</p>
              </li>
              <li id="tip-2" class="tabs__tab">
                <h5 class="tabs__title">Give Him 'Fee</h5>
                <p>Give him some 'fee. You'll get 300 points in the Intern Scavenger Hunt.</p>
              </li>
            </ul>
          </div>
        </section>
  
        <div data-modal id="modal-tips-during" class="modal--tips" role="dialog">
          <h2 class="heading -banner">Tips</h2>
          <h4 class="inline--alt-color">Find Maxwell</h4>
          <p>He's drinking 'fee. But he needs some more 'fee.</p>
  
          <h4 class="inline--alt-color">Give Him 'Fee</h4>
          <p>Give him some 'fee. You'll get 300 points in the Intern Scavenger Hunt.</p>
  
          <a href="#" class="js-close-modal">Back to main page</a>
        </div>
      <% end %>
  
      <% styleguide_block  'Tile' do %>
        <article class="tile">
          <a class="wrapper" href="#">
            <div class="tile__meta">
              <h1 class="tile__title">Kitten Overlords</h1>
              <p class="tile__tagline">According to the latest research, kittens will outlive the human species after the apocalypse.</p>
            </div>
            <img alt="kitten overlords" src="http://placekitten.com/g/600/600" />
            <!-- <video src="source.mp4" width="1080" height="1080" poster="poster.png" autoplay loop></video> -->
          </a>
        </article>
      <% end %>
  
      <h2 id="regions">Regions</h2>
      <p>Regions are complete sections of an interface.</p>
  
      <% styleguide_block  'Chrome' do %>
        <!-- see page source -->
      <% end %>
  
      <% styleguide_block  'Container' do %>
        <div class="container">
          <div class="wrapper">
            <div class="container__block $modifier_class">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus condimentum aliquet. Maecenas suscipit commodo dui, eu venenatis nisl volutpat vitae.</p>
            </div>
  
            <div class="container__block $modifier_class">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus condimentum aliquet. Maecenas suscipit commodo dui, eu venenatis nisl volutpat vitae.</p>
            </div>
          </div>
        </div>
      <% end %>
  
        <% styleguide_block  'Site Footer' do %>
          <footer class="footer">
            <div class="footer__columns">
              <div class="footer__column -social">
                <ul>
                  <li><a href="#" class="social-icon -facebook"><span>Facebook</span></a></li>
                  <li><a href="#" class="social-icon -twitter"><span>Twitter</span></a></li>
                  <li><a href="#" class="social-icon -tumblr"><span>Tumblr</span></a></li>
                  <li><a href="#" class="social-icon -instagram"><span>Instagram</span></a></li>
                  <li><a href="#" class="social-icon -youtube"><span>YouTube</span></a></li>
                </ul>
              </div>
  
              <div class="footer__column -links">
                <h4 class="js-toggle-collapsed">Who We Are</h4>
                <ul>
                  <li><a href="#">What is this?</a></li>
                  <li><a href="#">Who are they?</a></li>
                  <li><a href="#">Why are we?</a></li>
                </ul>
              </div>
  
              <div class="footer__column -links">
                <h4 class="js-toggle-collapsed">Our Friends</h4>
                <ul>
                  <li><a href="#">Freshman</a></li>
                  <li><a href="#">ROTC Guys</a></li>
                  <li><a href="#">Preps</a></li>
                  <li><a href="#">Varsity Jocks</a></li>
                  <li><a href="#">Unfriendly Black Hotties</a></li>
                  <li><a href="#">The greatest people you will ever meet</a></li>
                </ul>
              </div>
  
              <div class="footer__column -links">
                <h4 class="js-toggle-collapsed">Get Involved</h4>
                <ul>
                  <li><a href="#">Do things</a></li>
                  <li><a href="#">Do other things</a></li>
                </ul>
              </div>
            </div>
  
            <div class="footer__subfooter">
              <ul>
                <li><a href="#">Terms of Service</a></li>
                <li><a href="#">Privacy Policy</a></li>
              </ul>
            </div>
        </footer>
      <% end %>
  
      <% styleguide_block  'Header' do %>
        <header role="banner" class="header $modifier_class">
          <div class="wrapper">
            <h1 class="header__title">Title</h1>
            <p class="header__subtitle">Subtitle.</p>
          </div>
        </header>
      <% end %>
  
      <% styleguide_block 'Modal (Popup)' do %>
        <a href="http://www.example.com" data-modal-href="#modal--example" class="btn secondary">Show example modal</a>
  
      <div data-modal id="modal--example" role="dialog">
        <h2 class="heading -banner">Example Content</h2>
        <div class="modal__block">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem, officia impedit eius velit consectetur provident ullam! Incidunt, rem, maxime sit non natus praesentium nobis voluptas enim repudiandae. Commodi, eum, accusamus. Let us take a look at <a href="#" data-modal-href="#modal--pagetwo">another modal</a>.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem, officia impedit eius velit consectetur provident ullam! Incidunt, rem, maxime sit non natus praesentium nobis voluptas enim repudiandae. Commodi, eum, accusamus.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem, officia impedit eius velit consectetur provident ullam! Incidunt, rem, maxime sit non natus praesentium nobis voluptas enim repudiandae. Commodi, eum, accusamus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem, officia impedit eius velit consectetur provident ullam! Incidunt, rem, maxime sit non natus praesentium nobis voluptas enim repudiandae. Commodi, eum, accusamus.</p>
        </div>
      </div>
  
      <div data-modal id="modal--pagetwo" role="dialog" data-modal-close="true" data-modal-skip-form="#skip-form">
        <h2 class="heading -banner">Now fill out this form.</h2>
        <div class="modal__block">
          <form action="#">
            <div class="form-item">
              <label for="name" class="field-label">Name</label>
              <input type="text" class="text-field js-validate" name="name" id="name" data-validate-trigger="#confirmName">
            </div>
  
            <div class="form-item">
              <label for="confirmName" class="field-label">Confirm Name</label>
              <input type="text" name="confirmName" class="text-field js-validate" data-validate="match" data-validate-match="#name" id="confirmName">
            </div>
  
            <div class="form-actions">
              <input type="submit" class="button">
            </div>
          </form>
  
          <form action="http://www.google.com" id="skip-form">
            <div class="form-actions">
              <input type="submit" value="Skip" class="button -tertiary">
            </div>
          </form>
        </div>
      </div>
    <% end %>
  
      <% styleguide_block 'Navigation' do %>
        <nav class="navigation $modifier_class">
          <a class="navigation__logo" href="http://www.dosomething.org"><span>DoSomething.org</span></a>
          <a class="navigation__toggle js-navigation-toggle" href="#"><span>Show Menu</span></a>
          <div class="navigation__menu">
            <ul class="navigation__primary">
              <li>
                <a href="//sites.google.com/a/dosomething.org/dosomethinguxwiki/">
                  <strong class="navigation__title">Explore Campaigns</strong>
                  <span class="navigation__subtitle">Any cause, any time, anywhere.</span>
                </a>
              </li>
            </ul>
  
            <ul class="navigation__secondary">
              <li>
                <form action="#" method="post">
                  <input class="text-field -search" type="search">
                </form>
              </li>
              <li>
                <a href="#">Log In</a>
              </li>
            </ul>
          </div>
        </nav>
      <% end %>
  
  
      <h2 id="resources">Resources</h2>
      <p>Neue also includes some additional resources for use with traditional design tools.</p>
      <ul class="list">
        <li><a href="/resources/ds-logo-vector.eps">DoSomething.org Logo (EPS)</a> &mdash; scalable vector version of our logo</li>
        <li><a href="/resources/ds-logo-highres.png">DoSomething.org Logo (PNG)</a> &mdash; high-resolution rasterized version of our logo</li>
        <li><a href="/resources/sketch.zip">Sketch Resources</a> &mdash; vector patterns for <a href="http://bohemiancoding.com/sketch/" title="Vector drawing tool for the Mac.">Sketch</a></li>
      </ul>
  
    <footer class="styleguide-footer">
        <p class="footnote">&copy; 2014 DoSomething.org. Released under the <a href="https://github.com/DoSomething/neue/blob/dev/LICENSE">MIT License</a> on <a href="https://github.com/DoSomething/neue/">GitHub</a>. The name and logo for DoSomething.org are trademarks of Do Something, Inc and may not be used without permission.</p>
    </footer>
  
  </article>
  
negative.code:     <li><a href="#intro" class="js-jump-scroll">Introduction</a></li>
  
      <li>
        <a href="#base" class="js-jump-scroll">Base Styles</a>
        <ul>
          <li><a href="#base" class="js-jump-scroll">Base Elements</a></li>
          <li><a href="#fonts-and-colors" class="js-jump-scroll">Fonts &amp; Colors</a></li>
          <li><a href="#grid" class="js-jump-scroll">Grid System</a></li>
          <li><a href="#animation" class="js-jump-scroll">Animation</a></li>
        </ul>
      </li>
  
      <li>
        <a href="#components" class="js-jump-scroll">Components</a>
        <ul>
          <li><a href="#forms" class="js-jump-scroll">Forms</a></li>
          <li><a href="#footnote" class="js-jump-scroll">Footnote</a></li>
          <li><a href="#heading" class="js-jump-scroll">Heading</a></li>
          <li><a href="#list" class="js-jump-scroll">List</a></li>
          <li><a href="#message-callout" class="js-jump-scroll">Message Callout</a></li>
          <li><a href="#messages" class="js-jump-scroll">Messages</a></li>
          <li><a href="#social-icon" class="js-jump-scroll">Social Icon</a></li>
          <li><a href="#spinner" class="js-jump-scroll">Spinner</a></li>
          <li><a href="#media-video" class="js-jump-scroll">Media Video</a></li>
          <li><a href="#waypoints" class="js-jump-scroll">Waypoints</a></li>
        </ul>
      </li>
  
      <li>
        <a href="#modules" class="js-jump-scroll">Modules</a>
        <ul>
          <li><a href="#call-to-action" class="js-jump-scroll">Call To Action</a></li>
          <li><a href="#figure" class="js-jump-scroll">Figure</a></li>
          <li><a href="#gallery" class="js-jump-scroll">Gallery</a></li>
          <li><a href="#info-bar" class="js-jump-scroll">Info Bar</a></li>
          <li><a href="#polaroid" class="js-jump-scroll">Polaroid</a></li>
          <li><a href="#tabs" class="js-jump-scroll">Tabs</a></li>
          <li><a href="#tile" class="js-jump-scroll">Tile</a></li>
        </ul>
      </li>
  
      <li>
        <a href="#regions" class="js-jump-scroll">Regions</a>
        <ul>
          <li><a href="#chrome" class="js-jump-scroll">Chrome</a></li>
          <li><a href="#container" class="js-jump-scroll">Container</a></li>
          <li><a href="#footer" class="js-jump-scroll">Footer</a></li>
          <li><a href="#header" class="js-jump-scroll">Header</a></li>
          <li><a href="#modal" class="js-jump-scroll">Modal</a></li>
          <li><a href="#navigation" class="js-jump-scroll">Navigation</a></li>
        </ul>
      </li>
  
      <li><a href="#resources" class="js-jump-scroll">Resources</a></li>
  