anchor.diff:  <article class="styleguide-content">
  -    <p id="intro">This is <a href="https://www.github.com/dosomething/neue">Neue</a>, our interface framework and pattern library. It defines a set of base styles and common patterns shared throughout our website. It's a strong foundation for building beautiful interfaces.</p>
  -
  -    <p>Neue was built for our internal needs at DoSomething.org, but it could also work for your organization. Feel free to fork our <a href="https://github.com/dosomething/neue">GitHub repository</a> and use it as a starting point for your own pattern library, or read more about why we <a href="https://blog.dosomething.org/we-open-sourced-our-code-heres-why-you-should-too/">open-source our code</a>.</p>
  -
  -    <h2 id="base">Base Styles</h2>
  -    <p>Content is the basis for our design, so we need a strong typographic foundation. We define base HTML classes with comfortable font-size and spacing for readability, and a clear information hierarchy between elements.</p>
  -
  -    <% styleguide_block  'Base - Inline Elements' do %>
  -      <p>DoSomething.org <strong>makes the world suck less</strong>. One of the <mark>largest orgs for young people and social change</mark>, our members tackle campaigns that impact every cause, from poverty to violence to the environment to <em>literally</em> everything else.<sup>1</sup> Any cause, anytime, anywhere. *mic drop*</p>
  -      <p>This is a <a href="#">link</a>, and a <a href="#" class="secondary">secondary link</a>.</p>
  -    <% end %>
  -
  -    <h3 id="fonts-and-colors">Fonts &amp; Colors</h3>
  -    <p>We use <a href="http://www.marksimonson.com/fonts/view/proxima-nova">Proxima Nova</a> for all headings and body copy.</p>
  -    <p class="font-tile" style="font-family: 'Proxima Nova'; font-weight: 400; ">
  +  <p id="intro">This is <a href="https://www.github.com/dosomething/neue">Neue</a>, our interface framework and pattern library. It defines a set of base styles and common patterns shared throughout our website. It's a strong foundation for building beautiful interfaces.</p>
  +
  +  <p>Neue was built for our internal needs at DoSomething.org, but it could also work for your organization. Feel free to fork our <a href="https://github.com/dosomething/neue">GitHub repository</a> and use it as a starting point for your own pattern library, or read more about why we <a href="https://blog.dosomething.org/we-open-sourced-our-code-heres-why-you-should-too/">open-source our code</a>.</p>
  +
  +  <h2 id="base">Base Styles</h2>
  +  <p>Content is the basis for our design, so we need a strong typographic foundation. We define base HTML classes with comfortable font-size and spacing for readability, and a clear information hierarchy between elements.</p>
  +
  +  <% styleguide_block  'Base - Inline Elements' do %>
  +  <p>DoSomething.org <strong>makes the world suck less</strong>. One of the <mark>largest orgs for young people and social change</mark>, our members tackle campaigns that impact every cause, from poverty to violence to the environment to <em>literally</em> everything else.<sup>1</sup> Any cause, anytime, anywhere. *mic drop*</p>
  +  <p>This is a <a href="#">link</a>, and a <a href="#" class="secondary">secondary link</a>.</p>
  +  <% end %>
  +
  +  <h3 id="fonts-and-colors">Fonts &amp; Colors</h3>
  +  <p>We use <a href="http://www.marksimonson.com/fonts/view/proxima-nova">Proxima Nova</a> for all headings and body copy.</p>
  +  <p class="font-tile" style="font-family: 'Proxima Nova'; font-weight: 400; ">
       Any cause, anytime, anywhere. <code>($font-proxima-nova, $weight-normal)</code>
  -    </p>
  -
  -    <p class="font-tile" style="font-family: 'Proxima Nova'; font-weight: 600; ">
  +  </p>
  +
  +  <p class="font-tile" style="font-family: 'Proxima Nova'; font-weight: 600; ">
       Any cause, anytime, anywhere. <code>($font-proxima-nova, $weight-sbold)</code>
  -    </p>
  -
  -    <p class="font-tile" style="font-family: 'Proxima Nova'; font-weight: 700; ">
  +  </p>
  +
  +  <p class="font-tile" style="font-family: 'Proxima Nova'; font-weight: 700; ">
       Any cause, anytime, anywhere. <code>($font-proxima-nova, $weight-bold)</code>
  -    </p>
  -
  -    <p>We use <a href="https://www.google.com/fonts/specimen/Covered+By+Your+Grace">Covered By Your Grace</a> as the "voice" of DoSomething.org.</p>
  -    <p class="font-tile" style="font-family: 'CoveredGrace';">
  +  </p>
  +
  +  <p>We use <a href="https://www.google.com/fonts/specimen/Covered+By+Your+Grace">Covered By Your Grace</a> as the "voice" of DoSomething.org.</p>
  +  <p class="font-tile" style="font-family: 'CoveredGrace';">
       Any cause, anytime, anywhere. <code>($font-handwritten, $weight-normal)</code>
  -    </p>
  -
  -    <p>We have three primary brand colors.</p>
  -    <ul class="gallery -duo">
  -      <li>
  +  </p>
  +
  +  <p>We have three primary brand colors.</p>
  +  <ul class="gallery -duo">
  +    <li>
         <div class="color-tile" data-hex="#23b7fb">
  -      <strong>Blue</strong>
  -      <code>($blue) <span class="color-tile__value js-color-label">&hellip;</span></code>
  -      </div>
  -      </li>
  -
  -      <li>
  +        <strong>Blue</strong>
  +        <code>($blue) <span class="color-tile__value js-color-label">&hellip;</span></code>
  +      </div>
  +    </li>
  +
  +    <li>
         <div class="color-tile" data-hex="#4e2b63">
  -      <strong>Purple</strong>
  -      <code>($purple) <span class="color-tile__value js-color-label">&hellip;</span></code>
  -      </div>
  -      </li>
  -
  -      <li>
  +        <strong>Purple</strong>
  +        <code>($purple) <span class="color-tile__value js-color-label">&hellip;</span></code>
  +      </div>
  +    </li>
  +
  +    <li>
         <div class="color-tile" data-hex="#fcd116">
  -      <strong>Yellow</strong>
  -      <code>($yellow) <span class="color-tile__value js-color-label">&hellip;</span></code>
  -      </div>
  -      </li>
  -    </ul>
  -
  -    <p>For consistency, we try to use these four grayscale values throughout our interfaces.</p>
  -    <ul class="gallery -duo">
  -      <li>
  +        <strong>Yellow</strong>
  +        <code>($yellow) <span class="color-tile__value js-color-label">&hellip;</span></code>
  +      </div>
  +    </li>
  +  </ul>
  +
  +  <p>For consistency, we try to use these four grayscale values throughout our interfaces.</p>
  +  <ul class="gallery -duo">
  +    <li>
         <div class="color-tile" data-hex="#222">
  -      <strong>Off Black</strong>
  -      <code>($off-black) <span class="color-tile__value js-color-label">&hellip;</span></code>
  -      </div>
  -      </li>
  -
  -      <li>
  +        <strong>Off Black</strong>
  +        <code>($off-black) <span class="color-tile__value js-color-label">&hellip;</span></code>
  +      </div>
  +    </li>
  +
  +    <li>
         <div class="color-tile" data-hex="#444">
  -      <strong>Dark Gray</strong>
  -      <code>($dark-gray) <span class="color-tile__value js-color-label">&hellip;</span></code>
  -      </div>
  -      </li>
  -
  -      <li>
  +        <strong>Dark Gray</strong>
  +        <code>($dark-gray) <span class="color-tile__value js-color-label">&hellip;</span></code>
  +      </div>
  +    </li>
  +
  +    <li>
         <div class="color-tile" data-hex="#999">
  -      <strong>Medium Gray</strong>
  -      <code>($med-gray) <span class="color-tile__value js-color-label">&hellip;</span></code>
  -      </div>
  -      </li>
  -
  -      <li>
  +        <strong>Medium Gray</strong>
  +        <code>($med-gray) <span class="color-tile__value js-color-label">&hellip;</span></code>
  +      </div>
  +    </li>
  +
  +    <li>
         <div class="color-tile" data-hex="#ddd">
  -      <strong>Light Gray</strong>
  -      <code>($light-gray) <span class="color-tile__value js-color-label">&hellip;</span></code>
  -      </div>
  -      </li>
  -    </ul>
  -
  -    <p>They're not part of our brand, but we use these guys in special cases.</p>
  -    <ul class="gallery -duo">
  -      <li>
  -        <div class="color-tile" data-hex="#ff4747">
  +        <strong>Light Gray</strong>
  +        <code>($light-gray) <span class="color-tile__value js-color-label">&hellip;</span></code>
  +      </div>
  +    </li>
  +  </ul>
  +
  +  <p>They're not part of our brand, but we use these guys in special cases.</p>
  +  <ul class="gallery -duo">
  +    <li>
  +      <div class="color-tile" data-hex="#ff4747">
           <strong>Errors</strong>
           <code>($error-color) <span class="color-tile__value js-color-label">&hellip;</span></code>
  -        </div>
  -      </li>
  -    </ul>
  -
  -    <p class="footnote styleguide-tip"><strong>Tip:</strong> Double-click on a swatch to switch between color formats.</p>
  -
  -    <h3 id="grid">Grid System</h3>
  -    <img src="styleguide/assets/grid-visualization.jpg" alt="visualization of grid on DoSomething.org homepage" />
  -    <p>We use <a href="http://susy.oddbird.net">Susy 2</a> to build our interface on a fluid grid. This promotes consistency and provides rules for layouts to comfortably expand and contract in a multi-device world. Our grid is split up into sixteen columns, with a 24 pixel static gutter between columns.</p>
  -    <p>See the <a href="http://susydocs.oddbird.net/en/latest/">Susy documentation</a> for implementation details.</p>
  -
  -    <h3 id="animation">Animation</h3>
  -    <p>We use animation to add a sense of playfulness and delight to our interface. Animations also hint at functionality and inform the user's mental model of how an interface functions.</p>
  +      </div>
  +    </li>
  +  </ul>
  +
  +  <p class="footnote styleguide-tip"><strong>Tip:</strong> Double-click on a swatch to switch between color formats.</p>
  +
  +  <h3 id="grid">Grid System</h3>
  +  <img src="styleguide/assets/grid-visualization.jpg" alt="visualization of grid on DoSomething.org homepage" />
  +  <p>We use <a href="http://susy.oddbird.net">Susy 2</a> to build our interface on a fluid grid. This promotes consistency and provides rules for layouts to comfortably expand and contract in a multi-device world. Our grid is split up into sixteen columns, with a 24 pixel static gutter between columns.</p>
  +  <p>See the <a href="http://susydocs.oddbird.net/en/latest/">Susy documentation</a> for implementation details.</p>
  +
  +  <h3 id="animation">Animation</h3>
  +  <p>We use animation to add a sense of playfulness and delight to our interface. Animations also hint at functionality and inform the user's mental model of how an interface functions.</p>
   
     <% styleguide_block 'Animation - Fade In' do %>
     <a class="button -secondary button--preview js-styleguide-animation-preview" data-class="fade-in">Preview</a>
  
positive.code:   <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>
  
    <div id="forms">
      <% styleguide_block  'Forms - Button' do %>
  
negative.code:     <% end %>
    </div>
  
    <% styleguide_block  'Footnote' do %>
    <h4>Legal text example:</h4>
    <p class="footnote">By clicking submit, you agree to <a href="#">sell your soul</a> to the lorem ipsum dolor sit amet.</p>
  
    <h4>Source footnote example:</h4>
    <div class="footnote">
      <h4 class="js-footnote-toggle">Sources</h4>
  
      <ul class="js-footnote-hidden">
        <li><sup>1</sup> Clark, Barry. "A Treatise on The Motherland", British Royal Archives, 2009.</li>
        <li><sup>2</sup> Lorch, Julie. "Coffee Sure Is Great", Royal Academy of Coffee, 2010.</li>
      </ul>
    </div>
    <% end %>
  
  
    <% styleguide_block  'Heading' do %>
    <h2 class="heading $modifier_class"><span>Heading</span></h2>
    <% end %>
  
    <% styleguide_block  'List' do %>
    <p>An unordered list:</p>
    <ul class="list $modifier_class">
      <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In non pretium risus. Sed ultrices dolor magna, in ultricies sapien ornare ac.</li>
      <li>Curabitur sed odio aliquet, efficitur diam vel, laoreet ipsum. Curabitur faucibus tincidunt augue.</li>
      <li>In non pretium risus. Sed ultrices dolor magna, in ultricies sapien ornare ac.</li>
    </ul>
  
  
    <p>And an ordered list:</p>
    <ol class="list $modifier_class">
      <li>Know it.</li>
      <li>Plan it.</li>
      <li>???</li>
      <li>Profit.</li>
    </ol>
    <% end %>
  
    <% styleguide_block  'Message Callout' do %>
    <div class="message-callout $modifier_class">
      <div class="message-callout__copy">
        <p>This is something. Mic drop!</p>
      </div>
    </div>
    <% end %>
  
    <% styleguide_block 'Messages' do %>
    <div class="messages $modifier_class"><strong>There's something <em>I need</em></strong> to tell you.</div>
    <% end %>
  
    <% styleguide_block 'Social Icon' do %>
    <a class="social-icon $modifier_class"><span>Text Fallback</span></a>
    <% end %>
  
    <% styleguide_block  'Spinner' do %>
    <div class="spinner"></div>
    <% end %>
  
    <% styleguide_block 'Media Video' do %>
    <div class="media-video">
      <iframe width="560" height="315" src="//www.youtube.com/embed/bkK2C0iBFt8?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
    </div>
    <% end %>
  
    <% styleguide_block  'Waypoints' do %>
    <ul class="waypoints $modifier_class">
      <li class="is-active"><a href="#">Section One</a></li>
      <li><a href="#">Section Two</a></li>
      <li><a class="waypoints__primary-link" href="#">Section Three</a></li>
    </ul>
    <% end %>
  
    <h2 id="modules">Modules</h2>
    <p>Modules are groups of components, and generally work as a standalone part of an interface. They may even contain other modules (for example, the gallery module contains multiple tile modules).</p>
  
    <% styleguide_block 'Call To Action' do %>
    <div class="cta">
      <div class="wrapper">
        <p class="cta__message">Miscreant! You should pay homage to our future kitten overlords:</p>
        <a href="#" class="button">Support Our Kittens</a>
      </div>
    </div>
    <% end %>
  
    <% styleguide_block  'Figure' do %>
    <article class="figure $modifier_class">
      <div class="figure__media">
        <img alt="kitten overlords" src="http://placekitten.com/g/300/300" />
      </div>
  
      <div class="figure__body">
        <b>Teen Vogue</b> featured Comeback Clothes as one of the ways
        fashion brands like H&amp;M are "taking eco-chic to the next level."
      </div>
    </article>
    <% end %>
  
    <div id="gallery">
      <% styleguide_block  'Gallery - Quartet' do %>
  