<article id="tint-shade" data-type="function">
  <header class="title-bar">
    <h2 class="title">Tint &amp; Shade</h2>
    <a class="view-source" href="//github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/functions/_tint-shade.scss">View source</a>
  </header>
  <p>Tint and Shade are different from <code>lighten()</code> and <code>darken()</code> functions that are built into Sass.</p>
  <p>Tint is a mix of color with white. Shade is a mix of color with black. Both take a color and a percent argument.</p>

{% highlight scss %}
background: tint(red, 40%);
background: shade(blue, 60%);
{% endhighlight %}

</article>

<article id="tint-shade" data-type="function">
  <header class="title-bar">
    <h2 class="title">Tint &amp; Shade</h2>
    <a class="view-source" href="//github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/functions/_shade.scss" style="margin-left: 1em;">View source (Shade)</a>
    <a class="view-source" href="//github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/functions/_tint.scss">View source (Tint)</a>
  </header>
  <p>Tint and Shade are different from <code>lighten()</code> and <code>darken()</code> functions that are built into Sass.</p>
  <p>Tint is a mix of color with white. Shade is a mix of color with black. Both take a color and a percent argument.</p>

{% highlight scss %}
background: tint(red, 40%);
background: shade(blue, 60%);
{% endhighlight %}

</article>

Fix tint and shade functions source links
Fix tint and shade functions source links
