Menu icon

Refills are prepackaged patterns and components, built on top of Bourbon, Bitters, and Neat.

Managed by thoughtbot, instructions at GitHub

Accordion / Tabs
  • Tab Item

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt pellentesque lorem, id suscipit dolor rutrum id. Morbi facilisis porta volutpat. Fusce adipiscing, mauris quis congue tincidunt, sapien purus suscipit odio, quis dictum odio tortor in sem. Ut sit amet libero nec orci mattis fringilla. Praesent eu ipsum in sapien tincidunt molestie sed ut magna. Nam accumsan dui at orci rhoncus pharetra tincidunt elit ullamcorper. Sed ac mauris ipsum. Nullam imperdiet sapien id purus pretium id aliquam mi ullamcorper.

  • Another Tab

    Ut laoreet augue et neque pretium non sagittis nibh pulvinar. Etiam ornare tincidunt orci quis ultrices. Pellentesque ac sapien ac purus gravida ullamcorper. Duis rhoncus sodales lacus, vitae adipiscing tellus pharetra sed. Praesent bibendum lacus quis metus condimentum ac accumsan orci vulputate. Aenean fringilla massa vitae metus facilisis congue. Morbi placerat eros ac sapien semper pulvinar. Vestibulum facilisis, ligula a molestie venenatis, metus justo ullamcorper ipsum, congue aliquet dolor tortor eu neque. Sed imperdiet, nibh ut vestibulum tempor, nibh dui volutpat lacus, vel gravida magna justo sit amet quam. Quisque tincidunt ligula at nisl imperdiet sagittis. Morbi rutrum tempor arcu, non ultrices sem semper a. Aliquam quis sem mi.

  • Third

    Donec mattis mauris gravida metus laoreet non rutrum sem viverra. Aenean nibh libero, viverra vel vestibulum in, porttitor ut sapien. Phasellus tempor lorem id justo ornare tincidunt. Nulla faucibus, purus eu placerat fermentum, velit mi iaculis nunc, bibendum tincidunt ipsum justo eu mauris. Nulla facilisi. Vestibulum vel lectus ac purus tempus suscipit nec sit amet eros. Nullam fringilla, enim eu lobortis dapibus, quam magna tincidunt nibh, sit amet imperdiet dolor justo congue turpis.

  • Last Item

    Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus dui urna, mollis vel suscipit in, pharetra at ligula. Pellentesque a est vel est fermentum pellentesque sed sit amet dolor. Nunc in dapibus nibh. Aliquam erat volutpat. Phasellus vel dui sed nibh iaculis convallis id sit amet urna. Proin nec tellus quis justo consequat accumsan. Vivamus turpis enim, auctor eget placerat eget, aliquam ut sapien.

Copy
<ul class="accordion-tabs">
  <li class="tab-header-and-content">
    <a href="javascript:void(0)" class="is-active tab-link">Tab Item</a>
    <div class="tab-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt pellentesque lorem, id suscipit dolor rutrum id. Morbi facilisis porta volutpat. Fusce adipiscing, mauris quis congue tincidunt, sapien purus suscipit odio, quis dictum odio tortor in sem. Ut sit amet libero nec orci mattis fringilla. Praesent eu ipsum in sapien tincidunt molestie sed ut magna. Nam accumsan dui at orci rhoncus pharetra tincidunt elit ullamcorper. Sed ac mauris ipsum. Nullam imperdiet sapien id purus pretium id aliquam mi ullamcorper.</p>
    </div>
  </li>
  <li class="tab-header-and-content">
    <a href="javascript:void(0)" class="tab-link">Another Tab</a>
    <div class="tab-content">
      <p>Ut laoreet augue et neque pretium non sagittis nibh pulvinar. Etiam ornare tincidunt orci quis ultrices. Pellentesque ac sapien ac purus gravida ullamcorper. Duis rhoncus sodales lacus, vitae adipiscing tellus pharetra sed. Praesent bibendum lacus quis metus condimentum ac accumsan orci vulputate. Aenean fringilla massa vitae metus facilisis congue. Morbi placerat eros ac sapien semper pulvinar. Vestibulum facilisis, ligula a molestie venenatis, metus justo ullamcorper ipsum, congue aliquet dolor tortor eu neque. Sed imperdiet, nibh ut vestibulum tempor, nibh dui volutpat lacus, vel gravida magna justo sit amet quam. Quisque tincidunt ligula at nisl imperdiet sagittis. Morbi rutrum tempor arcu, non ultrices sem semper a. Aliquam quis sem mi.</p>
    </div>
  </li>
  <li class="tab-header-and-content">
    <a href="javascript:void(0)" class="tab-link">Third</a>
    <div class="tab-content">
      <p>Donec mattis mauris gravida metus laoreet non rutrum sem viverra. Aenean nibh libero, viverra vel vestibulum in, porttitor ut sapien. Phasellus tempor lorem id justo ornare tincidunt. Nulla faucibus, purus eu placerat fermentum, velit mi iaculis nunc, bibendum tincidunt ipsum justo eu mauris. Nulla facilisi. Vestibulum vel lectus ac purus tempus suscipit nec sit amet eros. Nullam fringilla, enim eu lobortis dapibus, quam magna tincidunt nibh, sit amet imperdiet dolor justo congue turpis.</p>    
    </div>
  </li>
  <li class="tab-header-and-content">
    <a href="javascript:void(0)" class="tab-link">Last Item</a>
    <div class="tab-content">
      <p>Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus dui urna, mollis vel suscipit in, pharetra at ligula. Pellentesque a est vel est fermentum pellentesque sed sit amet dolor. Nunc in dapibus nibh. Aliquam erat volutpat. Phasellus vel dui sed nibh iaculis convallis id sit amet urna. Proin nec tellus quis justo consequat accumsan. Vivamus turpis enim, auctor eget placerat eget, aliquam ut sapien.</p>
    </div>
  </li>
</ul>
Copy
.accordion-tabs {
  $tab-border-color: $base-border-color;
  $tab-border: 1px solid $tab-border-color;
  $tab-content-background: lighten($light-gray, 10);
  $tab-active-background: $tab-content-background;
  $tab-inactive-color: $base-background-color;
  $tab-inactive-hover-color: darken($light-gray, 5);
  $tab-mode: $medium-screen;

  @include clearfix;
  margin-bottom: $base-spacing;

  @include media(max-width $tab-mode) {
    border: $tab-border;
    border-radius: $base-border-radius;
  }

  .tab-header-and-content {
    @include media($tab-mode) {
      display: inline;
    }

    &:first-child .tab-link {
      border-top-left-radius: $base-border-radius;
      border-top-right-radius: $base-border-radius;

      @include media(max-width $tab-mode) {
        border-top: 0;
      }
    }

    &:last-child .tab-link {
      @include media(max-width $tab-mode) {
        border-bottom-left-radius: $base-border-radius;
        border-bottom-right-radius: $base-border-radius;
      }
    }
  }

  .tab-link {
    background-color: $tab-inactive-color;
    border-top: $tab-border;
    color: $dark-gray;
    display: block;
    font-weight: bold;
    padding: $base-spacing/2 $gutter/2;

    @include media($tab-mode) {
      @include inline-block;
      border-top-left-radius: $base-border-radius;
      border-top-right-radius: $base-border-radius;
      border-top: 0;
    }

    &:hover {
      color: $base-link-color;
    }

    &:focus {
      outline: none;
    }

    &.is-active {
      background-color: $tab-active-background;

      @include media($tab-mode) {
        background-color: $tab-active-background;
        border: $tab-border;
        border-bottom-color: $tab-active-background;
        margin-bottom: -1px;
      }
    }
  }

  .tab-content {
    background: $tab-content-background;
    display: none;
    padding: $base-spacing $gutter;

    @include media($tab-mode) {
      border-bottom-left-radius: $base-border-radius;
      border-bottom-right-radius: $base-border-radius;
      border-top-right-radius: $base-border-radius;
      border: $tab-border;
      float: left;
    }
  }
}
Copy
$(document).ready(function () {
  $('.accordion-tabs').each(function(index) {
    $(this).children('li').first().children('a').addClass('is-active').next().addClass('is-open').show();
  });

  $('.accordion-tabs').on('click', 'li > a', function(event) {
    if (!$(this).hasClass('is-active')) {
      event.preventDefault();
      var accordionTabs = $(this).closest('.accordion-tabs');
      accordionTabs.find('.is-open').removeClass('is-open').hide();

      $(this).next().toggleClass('is-open').toggle();
      accordionTabs.find('.is-active').removeClass('is-active');
      $(this).addClass('is-active');
    } else {
      event.preventDefault();
    }
  });
});
  • Tab Item

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt pellentesque lorem, id suscipit dolor rutrum id. Morbi facilisis porta volutpat. Fusce adipiscing, mauris quis congue tincidunt, sapien purus suscipit odio, quis dictum odio tortor in sem. Ut sit amet libero nec orci mattis fringilla. Praesent eu ipsum in sapien tincidunt molestie sed ut magna. Nam accumsan dui at orci rhoncus pharetra tincidunt elit ullamcorper. Sed ac mauris ipsum. Nullam imperdiet sapien id purus pretium id aliquam mi ullamcorper.

  • Another Tab

    Ut laoreet augue et neque pretium non sagittis nibh pulvinar. Etiam ornare tincidunt orci quis ultrices. Pellentesque ac sapien ac purus gravida ullamcorper. Duis rhoncus sodales lacus, vitae adipiscing tellus pharetra sed. Praesent bibendum lacus quis metus condimentum ac accumsan orci vulputate. Aenean fringilla massa vitae metus facilisis congue. Morbi placerat eros ac sapien semper pulvinar. Vestibulum facilisis, ligula a molestie venenatis, metus justo ullamcorper ipsum, congue aliquet dolor tortor eu neque. Sed imperdiet, nibh ut vestibulum tempor, nibh dui volutpat lacus, vel gravida magna justo sit amet quam. Quisque tincidunt ligula at nisl imperdiet sagittis. Morbi rutrum tempor arcu, non ultrices sem semper a. Aliquam quis sem mi.

  • Third

    Donec mattis mauris gravida metus laoreet non rutrum sem viverra. Aenean nibh libero, viverra vel vestibulum in, porttitor ut sapien. Phasellus tempor lorem id justo ornare tincidunt. Nulla faucibus, purus eu placerat fermentum, velit mi iaculis nunc, bibendum tincidunt ipsum justo eu mauris. Nulla facilisi. Vestibulum vel lectus ac purus tempus suscipit nec sit amet eros. Nullam fringilla, enim eu lobortis dapibus, quam magna tincidunt nibh, sit amet imperdiet dolor justo congue turpis.

  • Last Item

    Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus dui urna, mollis vel suscipit in, pharetra at ligula. Pellentesque a est vel est fermentum pellentesque sed sit amet dolor. Nunc in dapibus nibh. Aliquam erat volutpat. Phasellus vel dui sed nibh iaculis convallis id sit amet urna. Proin nec tellus quis justo consequat accumsan. Vivamus turpis enim, auctor eget placerat eget, aliquam ut sapien.

Copy
<ul class="accordion-tabs-minimal">
  <li class="tab-header-and-content">
    <a href="#" class="tab-link is-active">Tab Item</a>
    <div class="tab-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt pellentesque lorem, id suscipit dolor rutrum id. Morbi facilisis porta volutpat. Fusce adipiscing, mauris quis congue tincidunt, sapien purus suscipit odio, quis dictum odio tortor in sem. Ut sit amet libero nec orci mattis fringilla. Praesent eu ipsum in sapien tincidunt molestie sed ut magna. Nam accumsan dui at orci rhoncus pharetra tincidunt elit ullamcorper. Sed ac mauris ipsum. Nullam imperdiet sapien id purus pretium id aliquam mi ullamcorper.</p>
    </div>
  </li>
  <li class="tab-header-and-content">
    <a href="#" class="tab-link">Another Tab</a>
    <div class="tab-content">
      <p>Ut laoreet augue et neque pretium non sagittis nibh pulvinar. Etiam ornare tincidunt orci quis ultrices. Pellentesque ac sapien ac purus gravida ullamcorper. Duis rhoncus sodales lacus, vitae adipiscing tellus pharetra sed. Praesent bibendum lacus quis metus condimentum ac accumsan orci vulputate. Aenean fringilla massa vitae metus facilisis congue. Morbi placerat eros ac sapien semper pulvinar. Vestibulum facilisis, ligula a molestie venenatis, metus justo ullamcorper ipsum, congue aliquet dolor tortor eu neque. Sed imperdiet, nibh ut vestibulum tempor, nibh dui volutpat lacus, vel gravida magna justo sit amet quam. Quisque tincidunt ligula at nisl imperdiet sagittis. Morbi rutrum tempor arcu, non ultrices sem semper a. Aliquam quis sem mi.</p>
    </div>
  </li>
  <li class="tab-header-and-content">
    <a href="#" class="tab-link">Third</a>
    <div class="tab-content">
      <p>Donec mattis mauris gravida metus laoreet non rutrum sem viverra. Aenean nibh libero, viverra vel vestibulum in, porttitor ut sapien. Phasellus tempor lorem id justo ornare tincidunt. Nulla faucibus, purus eu placerat fermentum, velit mi iaculis nunc, bibendum tincidunt ipsum justo eu mauris. Nulla facilisi. Vestibulum vel lectus ac purus tempus suscipit nec sit amet eros. Nullam fringilla, enim eu lobortis dapibus, quam magna tincidunt nibh, sit amet imperdiet dolor justo congue turpis.</p>    
    </div>
  </li>
  <li class="tab-header-and-content">
    <a href="#" class="tab-link">Last Item</a>
    <div class="tab-content">
      <p>Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus dui urna, mollis vel suscipit in, pharetra at ligula. Pellentesque a est vel est fermentum pellentesque sed sit amet dolor. Nunc in dapibus nibh. Aliquam erat volutpat. Phasellus vel dui sed nibh iaculis convallis id sit amet urna. Proin nec tellus quis justo consequat accumsan. Vivamus turpis enim, auctor eget placerat eget, aliquam ut sapien.</p>
    </div>
  </li>
</ul>
Copy
.accordion-tabs-minimal {
  $tab-border-color: $base-border-color;
  $tab-border: 1px solid $tab-border-color;
  $tab-content-background: $base-background-color;
  $tab-active-background: $tab-content-background;
  $tab-inactive-color: $base-background-color;
  $tab-inactive-hover-color: darken($light-gray, 5);
  $tab-mode: $medium-screen;

  @include clearfix;
  margin-bottom: $base-spacing;

  li.tab-header-and-content {
    @include media($tab-mode) {
      display: inline;
    }
  }

  a.tab-link {
    background-color: $tab-inactive-color;
    border-top: $tab-border;
    color: $dark-gray;
    display: block;
    font-weight: 400;
    padding: $base-spacing/2 $gutter;

    @include media($tab-mode) {
      @include inline-block;
      border-top: 0;
    }

    &:hover {
      color: $base-link-color;
    }

    &:focus {
      outline: none;
    }

    &.is-active {
      border-bottom: 0;

      @include media($tab-mode) {
        border: $tab-border;
        border-bottom-color: $tab-active-background;
        margin-bottom: -1px;
      }
    }
  }

  .tab-content {
    display: none;
    padding: $base-spacing $gutter;

    @include media($tab-mode) {
      border-top: $tab-border;
      float: left;
    }
  }
}
Copy
$(document).ready(function () {
  $('.accordion-tabs-minimal').each(function(index) {
    $(this).children('li').first().children('a').addClass('is-active').next().addClass('is-open').show();
  });

  $('.accordion-tabs-minimal').on('click', 'li > a', function(event) {
    if (!$(this).hasClass('is-active')) {
      event.preventDefault();
      var accordionTabs = $(this).closest('.accordion-tabs-minimal')
      accordionTabs.find('.is-open').removeClass('is-open').hide();

      $(this).next().toggleClass('is-open').toggle();
      accordionTabs.find('.is-active').removeClass('is-active');
      $(this).addClass('is-active');
    } else {
      event.preventDefault();
    }
  });
});
Browser
Copy
<div class = "browsers">
  <div class = "browser">
    <div class="browser-top-bar">
      <div class="browser-circle"></div>
      <div class="browser-circle"></div>
      <div class="browser-circle"></div>
    </div>
  <div class="browser-content"></div>
  </div>
  <div class = "browser">
    <div class="browser-top-bar">
      <div class="browser-circle"></div>
      <div class="browser-circle"></div>
      <div class="browser-circle"></div>
    </div>
    <div class="browser-content">
    </div>
  </div>
  <div class = "browser">
    <div class="browser-top-bar">
      <div class="browser-circle"></div>
      <div class="browser-circle"></div>
      <div class="browser-circle"></div>
    </div>
    <div class="browser-content"></div>
  </div>
</div>

<div class="cover"></div>
Copy
$browser-top-bar-height: 1.5em;
$browser-circle-size: .5em; 
$browser-circle-margin: ($browser-top-bar-height - $browser-circle-size) / 2;
$browser-top-bar-background: lighten(#DFDFDF, 5);
$browser-border: 0px;
$browser-background: $base-background-color;
$browser-content-background-1: #F0F0F0;
$browser-content-background-2: $base-background-color;
$browser-content-background-3: #F0F0F0;

.browsers {
  display:inline-block;
  padding-top: 0;
  text-align:center;
  width:100%;

  @include media($large-screen) {
    padding-top: 2em;
  }
}

.browser-top-bar {
  @include linear-gradient($browser-top-bar-background, darken($browser-top-bar-background, 2));
  border-top-left-radius: $base-border-radius;
  border-top-right-radius: $base-border-radius;
  border: $browser-border;
  box-shadow: inset 0 1px 0 transparentize(white, .6);
  height: $browser-top-bar-height;
  width: 100%;
}

.browser-circle {
  border-radius: $browser-circle-size * 2;
  box-shadow: 0 1px 0px transparentize(white, .5), inset 0 1px 1px transparentize(black, 0.8);
  display: inline-block;
  @include size($browser-circle-size);
  margin: $browser-circle-margin 0;
}

.browser-circle:nth-child(1) {
  background: #FF6F55;
  margin-left: $browser-circle-margin;
}

.browser-circle:nth-child(2) {
  background: #F5B01D;
  margin-left: $browser-circle-margin / 3;
}

.browser-circle:nth-child(3) {
  background: #51B151;
  margin-left: $browser-circle-margin / 3;
}

//////////////////////////////////////////////

.browser {
  border-bottom: none;
  border-top-left-radius: $base-border-radius;
  border-top-right-radius: $base-border-radius;
  box-shadow: 0 3px 5px transparentize(black, .7);
  display: inline-block;    
  text-align: left;
  width:20%;
}

.browser:nth-child(1) {
  background-color: $browser-content-background-1;
  display: none;

  @include media($large-screen) {
    display: inline-block;    
  }

  .browser-content {
    background: url(https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/refills-screenshot1.png);
    background-color: $browser-content-background-1;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
  }
}

.browser:nth-child(2) {
  @include transform(scale(1));
  background-color: $browser-content-background-2; 
  width: 90%;
  
  @include media($large-screen) {
    @include transform(scale(1.2));
    width: 40%;
  }

  .browser-content {
    background: url(https://raw.githubusercontent.com/thoughtbot/refills/9c16f8b69d857c296c85f2d8c434e825f813a566/source/images/refills-screenshot2.jpg);
    background-color: $browser-content-background-2; 
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
  }
}

.browser:nth-child(3) {
  background-color: $browser-content-background-3; 
  display: none;
   
  @include media($large-screen) {
    display: inline-block;    
  }

  .browser-content {
    background: url(https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/refills-screenshot3.png);
    background-color: $browser-content-background-3; 
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
  }
}

.browser-content {
  border-left: $browser-border;
  border-right: $browser-border;
  height: 17em;
  overflow: hidden;

  @include media($large-screen) {
    height: 18em;
  }
}

//////////////////////////////////////////////

.cover {
  background: $base-background-color;
  border-top: 1px solid #E6E6E6;
  height: 3.2em;
  margin-top: -1em;
  position: relative;
  width: 100%;
  z-index: 999;
}
Cards
First Card

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, officiis sunt neque facilis culpa molestiae necessitatibus delectus veniam provident.

  • 98Items
  • 298Things
  • 923Objects
RIBBON
Another Card

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, officiis sunt neque facilis culpa molestiae necessitatibus delectus veniam provident.

  • 98Items
  • 298Things
  • 923Objects
The Last Card

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, officiis sunt neque facilis culpa molestiae necessitatibus delectus veniam provident.

  • 98Items
  • 298Things
  • 923Objects
Copy
<div class="cards">
  <div class="card">
    <div class="card-image">
      <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/mountains.png" alt="">
    </div>
    <div class="card-header">
      First Card
    </div>
    <div class="card-copy">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, officiis sunt neque facilis culpa molestiae necessitatibus delectus veniam provident.</p>
    </div>
    <div class="card-stats">
      <ul>
        <li>98<span>Items</span></li>
        <li>298<span>Things</span></li>
        <li>923<span>Objects</span></li>
      </ul>
    </div>
  </div>

  <div class="card">
    <div class="ribbon-wrapper"><div class="ribbon">RIBBON</div></div>
    <div class="card-image">
      <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/mountains-4.png" alt="">
    </div>
    <div class="card-header">
      Another Card
    </div>
    <div class="card-copy">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, officiis sunt neque facilis culpa molestiae necessitatibus delectus veniam provident.</p>
    </div>
    <div class="card-stats">
      <ul>
        <li>98<span>Items</span></li>
        <li>298<span>Things</span></li>
        <li>923<span>Objects</span></li>
      </ul>
    </div>
  </div>

  <div class="card">
    <div class="card-image">
      <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/mountains-3.png" alt="">
    </div>
    <div class="card-header">
      The Last Card
    </div>
    <div class="card-copy">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, officiis sunt neque facilis culpa molestiae necessitatibus delectus veniam provident.</p>
    </div>
    <div class="card-stats">
      <ul>
        <li>98<span>Items</span></li>
        <li>298<span>Things</span></li>
        <li>923<span>Objects</span></li>
      </ul>
    </div>
  </div>
</div>
Copy
.cards {
  @include clearfix;
}

.card {
  $card-border-color: $base-border-color;
  $card-border: 1px solid $card-border-color;
  $card-background: lighten($card-border-color, 10);
  $card-header-background: $card-background;
  $card-hover-background: lighten($card-background, 5);
  $card-image-background: #DBD199;
  $card-image-hover-background: lighten($card-image-background, 5);
  $card-stats-color: lighten($base-accent-color, 10);

  @include transition (all 0.2s ease-in-out);
  background-color: $card-background;
  border-radius: $base-border-radius;
  border: $card-border;
  margin-bottom: $base-spacing;
  cursor: pointer;
  box-shadow: 0 2px 4px darken($base-background-color, 10);
  position: relative;

  @include media($large-screen) {
    @include span-columns(4);  
    @include omega(3n);
  }

  .card-image {
    overflow: hidden;
    max-height: 150px;

    img {
      width: 100%;
      @include transition (all 0.2s ease-in-out);
      background: $card-image-background;
      border-top-left-radius: $base-border-radius;
      border-top-right-radius: $base-border-radius;
    }
  }

  .ribbon-wrapper {
    $ribbon-size: 85px;
    $ribbon-background: $base-accent-color;
    @include size($ribbon-size);
    overflow: hidden;
    position: absolute;
    top: -1px;
    right: -1px;

    .ribbon {
      font-size: .8em;
      font-weight: 800;
      text-align: center;
      @include transform(rotate(45deg));
      position: relative;
      padding: 2px 7px;
      left: -5px;
      top: 15px;
      width: 120px;
      background-color: $ribbon-background;
      color: white;
      box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
    }
  }

  .card-header {
    @include transition (all 0.2s ease-in-out);
    background-color: $card-header-background;
    border-bottom: $card-border;
    border-radius: $base-border-radius $base-border-radius 0 0;
    font-weight: bold;
    padding: $base-spacing/3 $gutter/2;
  }

  .card-copy {
    padding: $base-spacing/2 $gutter/2;
    font-size: .9em;
    line-height: 1.5em;
  }

  .card-stats {
    padding: $base-spacing/2 $gutter/2;
    overflow: auto;

    ul li {
      display: inline;
      color: $card-stats-color;
      font-weight: 800;
      font-size: 1.2em;
      float: left;
      border-right: 1px solid transparentize($base-font-color, .8);
      line-height: 1.1em;
      padding: 0 .7em 0 .7em;

      &:first-child {
        padding-left: 0;
      }

      &:last-child {
        border-right: 0;
      }

      span {
        color: $base-font-color;
        font-size: .7em;
        display: block;
        font-weight: normal;
      }
    }
  }

  &:hover {
    background-color: $card-hover-background;
    
    .card-image img {
      background: $card-image-hover-background;
    }
  
    .card-header {
      background-color: $card-hover-background;
    }
  }

  &:active {
    background-color: $card-background;

    .card-header {
      background-color: $card-background;
    }
  }
}
Copy
<header class="centered-navigation">
  <div class="centered-navigation-wrapper">
    <a href="javascript:void(0)" class="mobile-logo">
      <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_3_dark.png" alt="Logo image">
    </a>
    <a href="" class="centered-navigation-menu-button">MENU</a>
    <ul class="centered-navigation-menu">
      <li class="nav-link"><a href="javascript:void(0)">Products</a></li>
      <li class="nav-link"><a href="javascript:void(0)">About Us</a></li>
      <li class="nav-link"><a href="javascript:void(0)">Contact</a></li>
      <li class="nav-link logo">
        <a href="javascript:void(0)" class="logo">
          <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_3_dark.png" alt="Logo image">
        </a>
      </li>
      <li class="nav-link"><a href="javascript:void(0)">Testimonials</a></li>
      <li class="nav-link more"><a href="javascript:void(0)">More</a>
        <ul class="submenu">
          <li><a href="javascript:void(0)">Submenu Item</a></li>
          <li><a href="javascript:void(0)">Another Item</a></li>
          <li class="more"><a href="javascript:void(0)">Item with submenu</a>
            <ul class="submenu">
              <li><a href="javascript:void(0)">Sub-submenu Item</a></li>
              <li><a href="javascript:void(0)">Another Item</a></li>
            </ul>
          </li>
          <li class="more"><a href="javascript:void(0)">Another submenu</a>
            <ul class="submenu">
              <li><a href="javascript:void(0)">Sub-submenu</a></li>
              <li><a href="javascript:void(0)">An Item</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li class="nav-link"><a href="javascript:void(0)">Sign up</a></li>
    </ul>
  </div>
</header>
Copy
.centered-navigation {
  $centered-navigation-padding: 1em;
  $centered-navigation-logo-height: 2em;
  $centered-navigation-background: #E7F1EC;
  $centered-navigation-color: transparentize($base-font-color, 0.3);
  $centered-navigation-color-hover: $base-font-color;
  $centered-navigation-height: 60px;
  $centered-navigation-item-padding: 1em;
  $centered-navigation-submenu-padding: 1em;
  $centered-navigation-submenu-width: 12em;
  $centered-navigation-item-nudge: 2.2em;
  $horizontal-bar-mode: $large-screen;

  background-color: $centered-navigation-background;
  border-bottom: 1px solid darken($centered-navigation-background, 6);
  font-family: $serif;
  height: $centered-navigation-height;
  width: 100%;
  z-index: 9999;
  
  // Mobile view

  .mobile-logo {
    display: inline;    
    float: left;
    max-height: $centered-navigation-height;
    padding-left: $centered-navigation-padding;

    img {
      max-height: $centered-navigation-height;
      opacity: .6;
      padding: .8em 0;
    }

    @include media($horizontal-bar-mode) {
      display: none;
    }
  }

  .centered-navigation-menu-button {
    color: $centered-navigation-color;
    display: block;
    float: right;
    font-weight: 700;
    line-height: $centered-navigation-height;
    margin: 0;
    padding-right: $centered-navigation-submenu-padding;
    text-transform: uppercase;

    @include media ($horizontal-bar-mode) {
      display: none;
    }

    &:hover {
      color: $centered-navigation-color-hover;
    }
  }

  // Nav menu

  .centered-navigation-wrapper {
    @include outer-container;
    @include clearfix;
    position: relative;
    z-index: 999;
  }

  ul.centered-navigation-menu {    
    -webkit-transform-style: preserve-3d; // stop webkit flicker
    clear: both;
    display: none;
    margin: 0 auto;
    overflow: visible;
    padding: 0;
    width: 100%;
    z-index: 99999;

    @include media ($horizontal-bar-mode) {
      display: block;
      text-align: center;
    }
  }

  // The nav items

  .nav-link:first-child {
    @include media($horizontal-bar-mode) {
      margin-left: $centered-navigation-item-nudge;
    }
  }

  ul li.nav-link {
    background: $centered-navigation-background;
    display: block;
    line-height: $centered-navigation-height;
    overflow: hidden;
    padding-right: $centered-navigation-submenu-padding;
    text-align: right;
    width: 100%;
    z-index: 9999;

    @include media($horizontal-bar-mode) {
      background: transparent;
      display: inline;
      line-height: $centered-navigation-height;  

      a {
        padding-right: $centered-navigation-item-padding;
      }
    }
    
    a {
      color: $centered-navigation-color;
      display: inline-block;


      &:hover {
        color: $centered-navigation-color-hover;
      }
    }
  }

  li.logo.nav-link {
    display: none;
    line-height: 0;

    @include media($large-screen) {
      display: inline;
    }
  }

  .logo img {
    margin-bottom: -$centered-navigation-logo-height / 3;
    max-height: $centered-navigation-logo-height;
    opacity: .6;
  }

  // Sub menus

  li.more.nav-link {
    padding-right: 0;

    @include media($large-screen) {
      padding-right: $centered-navigation-submenu-padding;
    }

    > ul > li:first-child a  {
      padding-top: 1em;
    }

    a {
      margin-right: $centered-navigation-submenu-padding;
    }

    > a {
      padding-right: 0.6em;
    }

    > a:after {
      @include position(absolute, auto -.4em auto auto);
      color: $centered-navigation-color;
      content: '\25BE';
    }
  }

  li.more {
    overflow: visible;
    padding-right: 0;

    a {
      padding-right: $centered-navigation-submenu-padding;
    }

    > a {
      padding-right: 1.6em;
      position: relative;

      @include media($large-screen) {
        margin-right: $centered-navigation-submenu-padding;
      }

      &:after {
        content: '›';
        font-size: 1.2em;
        position: absolute;
        right: $centered-navigation-submenu-padding / 2;
      }      
    }

    &:hover > .submenu {
      display: block;
    }

    @include media($horizontal-bar-mode) {
      padding-right: $centered-navigation-submenu-padding;
      position: relative;
    }
  }

  ul.submenu {
    display: none;
    padding-left: 0;

    @include media($horizontal-bar-mode) {
      left: -$centered-navigation-submenu-padding;
      position: absolute;
      top: 1.5em;
    }

    .submenu {
      @include media($horizontal-bar-mode) {
        left: $centered-navigation-submenu-width - .2em;
        top: 0;
      }
    }

    li {
      display: block;
      padding-right: 0;

      @include media($horizontal-bar-mode) {
        line-height: $centered-navigation-height / 1.3;

        &:first-child > a {
          border-top-left-radius: $base-border-radius;
          border-top-right-radius: $base-border-radius;
        }

        &:last-child > a {
          border-bottom-left-radius: $base-border-radius;
          border-bottom-right-radius: $base-border-radius;
          padding-bottom: .7em;
        }
      }

      a {
        background-color: darken($centered-navigation-background, 3);
        display: inline-block;
        text-align: right;
        width: 100%;

        @include media($horizontal-bar-mode) {
          background-color: $centered-navigation-background;
          padding-left: $centered-navigation-submenu-padding;
          text-align: left;
          width: $centered-navigation-submenu-width;
        }
      }
    }
  }
}
Copy
$(document).ready(function() {
  var menu = $('.centered-navigation-menu');
  var menuToggle = $('.centered-navigation-menu-button');
  var signUp = $('.sign-up');

  $(menuToggle).on('click', function(e) {
    e.preventDefault();
    menu.slideToggle(function(){
      if(menu.is(':hidden')) {
        menu.removeAttr('style');
      }
    });
  });
});
Comments
Logo image

First Comment Title or Author

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, aspernatur, quia modi minima debitis tempora ducimus quam vero impedit alias earum nemo error tenetur sed.

Date or details about this post

Logo image

Another One

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, aspernatur, quia modi minima debitis tempora ducimus quam vero impedit alias earum nemo error tenetur sed.

Date or details about this post

Copy
<div class="comment">
  <div class="comment-image">
    <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_1.png" alt="Logo image">
  </div>
  <div class="comment-content">
    <h1>First Comment Title or Author</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, aspernatur, quia modi minima debitis tempora ducimus quam vero impedit alias earum nemo error tenetur sed.</p>
    <p class="comment-detail">Date or details about this post</p>
  </div>
</div>

<div class="comment">
  <div class="comment-image">
    <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_2.png" alt="Logo image">
  </div>
  <div class="comment-content">
    <h1>Another One</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, aspernatur, quia modi minima debitis tempora ducimus quam vero impedit alias earum nemo error tenetur sed.</p>
    <p class="comment-detail">Date or details about this post</p>
  </div>
</div>
Copy
.comment {
  $comment-gutter: 1.4em;
  $comment-image-padding: .7em;
  $comment-image-width: 4em;
  $comment-color: $base-font-color;
  $comment-background: lighten($base-accent-color, 15);
  $comment-detail-color: transparentize($comment-color, .5);
  $comment-image-vert-alignment: top;

  display: table;
  width: 100%;
  margin-bottom: $base-spacing;
  padding-bottom: 1em;
  border-bottom: 1px solid transparentize($comment-color, .9);

  .comment-image,
  .comment-content {
    display: table-cell;
    vertical-align: $comment-image-vert-alignment;
  }

  .comment-image {
    padding-right: $comment-gutter;

    > img {
      width: $comment-image-width;
      height: auto;
      border-radius: $base-border-radius;
      padding: $comment-image-padding;
      background: $comment-background;
      display: block;
      max-width: none;
    }

    .comment-reverse-order & {
      padding-right: 0;
      padding-left: 10px;
    }
  }

  .comment-content {
    width: 100%;

    h1 {
      font-size: 1em;
      margin-bottom: .5em;
    }

    p {
      margin-bottom: .5em;
    }

    p.comment-detail {
      font-style: italic;
      font-size: .9em;
      color: $comment-detail-color;
    }
  }
}

Device

Text about App or Device

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, recusandae? Deserunt repellendus.

Copy
<div class="device-background">
  <div class="device-text">
    <h4>Text about App or Device</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, recusandae? Deserunt repellendus.</p>
    <button>Learn More</button>
  </div>
  <div class="device">
    <div class="screen"></div>
  </div>
</div>
Copy
$device-padding-vertical: 5em;
$device-padding-horizontal: .4em;
$device-screen-width: 14em;
$device-screen-height: 25em;
$device-background: darken(gray, 40);
$device-backside-background: darken($device-background, 10);
$device-text-color: white;

$device-background-top: #162C4C; 
$device-background-bottom: #0A120D;
$gradient-angle: 10deg;
$device-image: 'https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/mountains.png';
$device-screen-image: 'https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/cosmin_capitanu_screen.jpg';

.device-background {
  @include background(url($device-image), linear-gradient($gradient-angle, $device-background-bottom, $device-background-top), no-repeat $device-background-top scroll);
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 20em;
}

.device-text {
  color: $device-text-color;
  padding: 2em;

  @include media($large-screen) {
    max-width: 50%;
    padding: 4em;
    float: left;
  }

  h4 {
    margin-bottom: .5em;
    padding-bottom: .5em;
    border-bottom: 1px solid transparentize($device-text-color, .7);
  }

  p {
    font-family: $serif;
    margin-bottom: 1.5em;
  }
}

.device {
  display: none;
  position: relative;

  @include media($large-screen) {
    @include transform(
      perspective(800px) 
      translateX(0px) 
      translateY(-100px) 
      translateZ(50px) 
      rotateX(0deg) 
      rotateY(-20deg) 
      rotateZ(-0deg));
    display: block;
    float: right;
    margin-bottom: -12em;
    margin-right: 5em;
    padding: $device-padding-vertical 0;
    width: $device-screen-width + (2 * $device-padding-horizontal);
    border-radius: 2em;
    background: $device-background;
    box-shadow: 
      1px 0px lighten($device-backside-background, 20), 
      4px 0px lighten($device-backside-background, 2),
      7px 0px $device-backside-background,
      10px 0px $device-backside-background,
      13px 0px $device-backside-background;
      z-index: 99999;

    .screen {
      @include size($device-screen-width $device-screen-height);
      background-image: url($device-screen-image);
      background-size: cover;
      box-shadow: inset 0 1px 8px transparentize(black, .5);
      margin: auto;
      border-radius: .2em;
    }
  }
}
Copy
<div class="flex-boxes">
  <a href="javascript:void(0)" class="flex-box flex-box-big">
    <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_2_dark.png" alt="">
    <h1 class="flex-title">A Wide Flex Box Item</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad nostrum, libero! Laborum distinctio necessitatibus voluptates eaque officiis, unde illo, earum voluptatum rerum, reiciendis ipsa ex dolorem a dicta, maxime aliquam.</p>
  </a>
  <a href="javascript:void(0)" class="flex-box">
    <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_1_dark.png" alt="">
    <h1 class="flex-title">Flex Box Item</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum molestiae fugiat tenetur fugit atque dignissimos, fugiat natus vitae.</p>
  </a>
  <a href="javascript:void(0)" class="flex-box">
    <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_3_dark.png" alt="">
    <h1 class="flex-title">A Flex Box Item</h1>
    <p>Lorem adipisicing elit. Voluptas consectetur tempora quis nam, officia tenetur blanditiis in illo dolor?</p>
  </a>
  <a href="javascript:void(0)" class="flex-box flex-box-big">
    <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_2_dark.png" alt="">
    <h1 class="flex-title">Another Wide Item</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae quis ipsum, officia, aperiam tenetur dolor molestiae voluptate perferendis dolorem vel ex, unde fugit blanditiis sapiente.</p>
  </a>
  <a href="javascript:void(0)" class="flex-box">
    <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_2_dark.png" alt="">
    <h1 class="flex-title">Flex Box Item</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo obcaecati in provident illo.</p>
  </a>
  <a href="javascript:void(0)" class="flex-box">
    <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_3_dark.png" alt="">
    <h1 class="flex-title">Last Flex Box Item</h1>
    <p>Lorem ipsum dolor sit amet, elit. Rem, illum.</p>
  </a>
</div>
Copy
$flex-box-border-color: $medium-gray;
$flex-box-border: 1px solid $flex-box-border-color;
$flex-box-background: lighten($light-gray, 10);
$flex-box-gutter: .4em;
$flex-box-width: 18em;
$flex-box-color: transparentize($base-font-color, .3);
$flex-box-top-colors: 
  tomato, 
  #72BFBF, 
  #92B1E3, 
  #E3D743,
  #CCC,
  #F6C05C;

.flex-boxes {
  @include clearfix;
  @include display(flex);
  @include justify-content(center);
  @include align-items(stretch);
  @include flex-wrap(wrap);
  text-align: center;
}

.flex-box {
  @include transition (all 0.2s ease-in-out);
  @include flex(2 2 15em);
  @include align-self(stretch);
  display: block;
  box-shadow: inset 0 0 1px $flex-box-border-color, 0 2px 4px darken($base-background-color, 10);
  border-radius: $base-border-radius;
  margin: $flex-box-gutter;
  padding: 2em 2em 3em 2em;
  background: $flex-box-background;

  @for $i from 1 to 7 { // assign colors from $flex-box-top-colors list
    &:nth-child(#{$i}) {
      $color-from-list: nth($flex-box-top-colors, $i);
      border-top: 6px solid $color-from-list;
      
      &:hover {
        background-color: transparentize($color-from-list, .9);
      }
    }
  }
}

.flex-box img {
  display: block;
  opacity: .4;
  height: 3em;
  margin: auto;
  margin-bottom: 2em;
}

.flex-box .flex-title {
  color: $flex-box-color;
  font-family: $serif;
  font-weight: 500;
  font-size: 1.5em;
  margin-bottom: .5em;
}

.flex-box p {
  margin: auto;
  line-height: 1.5em;
  color: transparentize($flex-box-color, .1);
}

.flex-box-big {
  @include flex(1 1 40em);
}
Copy
<div class="grid-items">
  <a href="javascript:void(0)" class="grid-item">
    <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_1.png" alt="">
    <h1>Grid Item</h1>
    <p>Lorem ipsum dolor sit amet, elit. Rem, illum.</p>
  </a>
  <a href="javascript:void(0)" class="grid-item grid-item-big grid-item-image">
    <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_2.png" alt="">
    <h1>Grid Item With an Image</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, illum.</p>
  </a>
  <a href="javascript:void(0)" class="grid-item grid-item-big">
    <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_3.png" alt="">
    <h1>Another Wide Item</h1>
    <p>Lorem ipsum consectetur dolor sit amet, consectetur adipisicing elit. Rem, illum.</p>
  </a>
  <a href="javascript:void(0)" class="grid-item">
    <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_2.png" alt="">
    <h1>Last Grid Item</h1>
    <p>Lorem ipsum dolor sit amet, elit. Rem, illum.</p>
  </a>
  <a href="javascript:void(0)" class="grid-item">
    <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_2.png" alt="">
    <h1>Last Grid Item</h1>
    <p>Lorem ipsum dolor sit amet, elit. Rem, illum.</p>
  </a>
  <a href="javascript:void(0)" class="grid-item">
    <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_3.png" alt="">
    <h1>A Grid Item</h1>
    <p>Lorem ipsum dolor sit amet, elit. Rem, illum.</p>
  </a>
  <a href="javascript:void(0)" class="grid-item">
    <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_1.png" alt="">
    <h1>Item</h1>
    <p>Lorem ipsum dolor sit amet, elit. Rem, illum.</p>
  </a>
</div>
Copy
@mixin grid-item-columns($columns) {
  width: (100% / 12) * $columns;
}

.grid-items {
  $grid-items-background: $base-background-color;
  $grid-item-background: desaturate($base-accent-color, 30); 
  $grid-item-colors: 
    desaturate($base-accent-color, 30), 
    #3581A5, 
    #5FBEBE,
    #98C79A,
    #A7A891, 
    #BDCC97,
    #979EA0;
  $grid-item-border-size: 9px;
  $grid-item-columns: 4;
  $grid-item-big-columns: 8;
  $grid-item-color: white;
  $grid-item-height: 14em;

  @include clearfix;
    
  .grid-item {
    @include transition (all 0.2s ease-in-out);
    height: $grid-item-height;
    background: $grid-item-background;
    width: 100%;
    overflow: hidden;
    float: left;
    padding: 2em;
    border-top: 0;
    border-bottom: $grid-item-border-size solid $grid-items-background;
    border-left: $grid-item-border-size /2 solid $grid-items-background;
    border-right: $grid-item-border-size /2 solid $grid-items-background;
    text-align: center;
    cursor: pointer;

    @include media($large-screen) {
      @include grid-item-columns($grid-item-columns);
    }

    @for $i from 1 through length($grid-item-colors) { // assign colors from $grid-item-colors list
      &:nth-child(#{$i}) {
        $background-from-list: nth($grid-item-colors, $i);
        background-color: $background-from-list;
        box-shadow: inset 0px 0px 1px 2px darken($background-from-list, 10);
        &:hover {
          background-color: darken($background-from-list, 10);
          background-repeat: no-repeat;
          background-position: top;
          background-size: cover;
        }
      }
    }
  }

  .grid-item img {
      display: block;
      height: 3em;
      margin: auto;
      margin-bottom: 1em;
    }

  .grid-item h1 {
      color: $grid-item-color;
      font-size: 1.3em;
      margin-bottom: .4em;
    }

  .grid-item p {
      margin: auto;
      color: transparentize($grid-item-color, .3);
      @include media($medium-screen) {
        max-width: 70%;
      }
    }

  .grid-item-big {
    @include media($large-screen) {
      @include grid-item-columns($grid-item-big-columns);
    }
    p {
      @include media($medium-screen) {
        max-width: 60%;
      }  
    }
  }

  .grid-item-image {
    background: url(/images/lake-transparent.png);
    background-color: $grid-item-background;
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
  }
}
Copy
<div class="grid-items-lines">
  <a href="javascript:void(0)" class="grid-item">
    <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_1_dark.png" alt="">
    <h1>Grid Item</h1>
    <p>Lorem ipsum dolor sit amet, elit. Rem, illum.</p>
  </a>
  <a href="javascript:void(0)" class="grid-item">
    <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_3_dark.png" alt="">
    <h1>Another Item</h1>
    <p>Lorem ipsum consectetur dolor sit amet, consectetur adipisicing elit.</p>
  </a>
  <a href="javascript:void(0)" class="grid-item">
    <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_2_dark.png" alt="">
    <h1>Another Grid Item</h1>
    <p>Lorem ipsum dolor sit amet, elit.</p>
  </a>
  <a href="javascript:void(0)" class="grid-item">
    <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_2_dark.png" alt="">
    <h1>Grid Item</h1>
    <p>Lorem ipsum dolor sit amet, elit. Rem, illum.</p>
  </a>
  <a href="javascript:void(0)" class="grid-item grid-item-big">
    <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_2_dark.png" alt="">
    <h1>Wider Grid Item</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, illum.</p>
  </a>
  <a href="javascript:void(0)" class="grid-item">
    <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_3_dark.png" alt="">
    <h1>A Grid Item</h1>
    <p>Lorem ipsum dolor sit amet, elit. Rem, illum.</p>
  </a>
  <a href="javascript:void(0)" class="grid-item">
    <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_1_dark.png" alt="">
    <h1>Item</h1>
    <p>Lorem ipsum dolor sit amet, elit. Rem, illum.</p>
  </a>
  <a href="javascript:void(0)" class="grid-item">
    <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_2_dark.png" alt="">
    <h1>Last Grid Item</h1>
    <p>Lorem ipsum dolor sit amet, elit. Rem, illum.</p>
  </a>
  <div class="right-cover"></div>
  <div class="bottom-cover"></div>
</div>
Copy
@mixin grid-item-columns($columns) {
  width: (100% / 12) * $columns;
}

.grid-items-lines {
  $grid-items-background: $base-background-color;
  $grid-item-background: $base-background-color;
  $grid-item-border: 1px solid transparentize($base-font-color, .8); 
  $grid-item-columns: 4;
  $grid-item-big-columns: 8;
  $grid-item-color: $base-font-color;
  $grid-item-height: 14em;

  @include clearfix;
  position: relative;
    
  .grid-item {
    @include transition (all 0.2s ease-in-out);
    height: $grid-item-height;
    background: $grid-item-background;
    width: 100%;
    overflow: hidden;
    float: left;
    padding: 2em;
    border-right: $grid-item-border;
    border-bottom: $grid-item-border;
    cursor: pointer;

    @include media($large-screen) {
      @include grid-item-columns($grid-item-columns);
    }

    &:hover {
      background: transparentize($grid-item-color, .95);
    }
  }

  .grid-item img {
      display: block;
      height: 2.5em;
      margin-bottom: 1.2em;
      opacity: .2;
    }

  .grid-item h1 {
      color: $grid-item-color;
      font-size: 1.3em;
      margin-bottom: .4em;
    }

  .grid-item p {
      color: transparentize($grid-item-color, .4);
      @include media($medium-screen) {
        max-width: 70%;
      }
    }

  .grid-item-big {
    @include media($large-screen) {
      @include grid-item-columns($grid-item-big-columns);
    }
    p {
      @include media($medium-screen) {
        max-width: 60%;
      }  
    }
  }

  // this, below, might not be the most beautiful solution but it removes the outer borders by using the background color.
  .bottom-cover {
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 3px;
    background: $grid-items-background;
  }

  .right-cover {
    position: absolute;
    right: 0px;
    height: 100%;
    width: 4px;
    background: $grid-items-background;
  }
}

Hero Unit

Short description of Product

A few reasons why this product is worth using, who it's for and why they need it.

Copy
<div class="hero">
	<div class="hero-inner">
    <a href="" class="hero-logo"><img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_1.png
" alt="Logo Image"></a>
		<div class="hero-copy">
			<h1>Short description of Product</h1>
			<p>A few reasons why this product is worth using, who it's for and why they need it.</p>	
		</div>
    <button>Learn More</button>
	</div>
</div>
Copy
.hero {
  $hero-background-top: #7F99BE; 
  $hero-background-bottom: #20392B;
  $hero-color: white;
  $gradient-angle: 10deg;
  $hero-image: 'https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/mountains.png';

  @include background(url($hero-image), linear-gradient($gradient-angle, $hero-background-bottom, $hero-background-top), no-repeat $hero-background-top scroll);

  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
  padding-bottom: 4em;

  .hero-logo img {
    height: 3em;
    margin-bottom: 2.5em;
  }

  .hero-inner {
    @include outer-container;
    @include clearfix;
    padding: 3em;
    margin: auto;
    text-align: center;
    color: $hero-color;

    .hero-copy {
      text-align: center;
      
      h1 {
        font-size: 1.6em;
        margin-bottom: .5em;

        @include media($large-screen) {
          font-size: 1.8em;
        }
      }

      p {
        font-family: $serif;
        margin: auto;
        margin-bottom: 3em; 
        font-weight: 200;
        line-height: 1.4em;

        @include media($large-screen) {
          font-size: 1.1em;
          max-width: 40%;
        }
      }
    }
  }
}
Icon Bullet Points
  • This Bullet Title

    Lorem dolor sit amet consectetur adipisicing elit. Doloremque, minus, blanditiis, voluptatibus nulla quia ipsam sequi quos iusto aliquam iste magnam accusamus molestias quo illum impedit. Odit officia autem.

  • Another Bullet Title

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, minus, blanditiis, voluptatibus nulla quia ipsam sequi quos iusto aliquam iste magnam accusamus molestias quo illum.

  • Last Bullet Title

    Lorem ipsum sit amet consectetur adipisicing elit. Doloremque, minus, blanditiis, voluptatibus nulla quia ipsam sequi quos iusto aliquam iste magnam accusamus molestias quo illum impedit. Odit officia autem.

Copy
<ul class="bullets">
  <li class="bullet three-col-bullet">
    <div class="bullet-icon bullet-icon-1">
      <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_2.png
" alt="">
    </div>
    <div class="bullet-content">
      <h2>This Bullet Title</h2>
      <p>Lorem dolor sit amet consectetur adipisicing elit. Doloremque, minus, blanditiis, voluptatibus nulla quia ipsam sequi quos iusto aliquam iste magnam accusamus molestias quo illum impedit. Odit officia autem.</p>
      </div>
  </li>  
  <li class="bullet three-col-bullet">
    <div class="bullet-icon bullet-icon-2">
      <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_3.png" alt="">
    </div>
    <div class="bullet-content">
      <h2>Another Bullet Title</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, minus, blanditiis, voluptatibus nulla quia ipsam sequi quos iusto aliquam iste magnam accusamus molestias quo illum.</p>
    </div>
  </li>
  <li class="bullet three-col-bullet">
    <div class="bullet-icon bullet-icon-3">
      <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_4.png" alt="">
    </div>
    <div class="bullet-content">
      <h2>Last Bullet Title</h2>
      <p>Lorem ipsum sit amet consectetur adipisicing elit. Doloremque, minus, blanditiis, voluptatibus nulla quia ipsam sequi quos iusto aliquam iste magnam accusamus molestias quo illum impedit. Odit officia autem.</p>
    </div>
  </li> 
</ul>
Copy
.bullets {
  $icon-bullet-size: 3.5em;

  overflow: auto;
  margin-bottom: $base-line-height;

  // change ".three-col-bullet" class to this for two bullet layout
  .two-col-bullet {
    @include media($large-screen) {
      @include span-columns(6);
      @include omega(2n);  
    } 
  }
  
  .three-col-bullet {
    @include media($large-screen) {
      @include span-columns(4);
      @include omega(3n);
    }
  }

  // change ".three-col-bullet" class to this for four bullet layout
  .four-col-bullet {
    @include media($large-screen) {
      @include span-columns(3);
      @include omega(4n);
    }
  }

  .bullet-icon {
    float: left;
    background: $base-accent-color;
    padding: $icon-bullet-size /4;
    border-radius: 50%;
    width: $icon-bullet-size;
    height: $icon-bullet-size;
  }

  .bullet-icon-1 {
    background: $base-accent-color;
  }

  .bullet-icon-2 {
    background: adjust-hue($base-accent-color, -50);
  }

  .bullet-icon-3 {
    background: adjust-hue($base-accent-color, -140);
  }

  .bullet-content {
    margin-left: $icon-bullet-size *1.4;
    margin-bottom: 2em;
  }

  h2 {
    font-size: $icon-bullet-size /2.5;
    padding-top: $icon-bullet-size /7;
    margin-bottom: $icon-bullet-size /6;
    border-bottom: 1px solid transparentize($base-font-color, .8);
    display: inline-block;
  }
}
Intro Text

Topic Label

Intro Text Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta rerum libero iste saepe.

Lorem ipsum dolor sit amet, consectetur consectetur adipisicing elit. Perferendis para mitis eun non ullam atque debitis, illo adipisicing elit. Perferendis para mitis eun non ullam atque debitis, illo. Amet, consectetur adipisicing. Read more »

Copy
<div class="intro-text">
  <h3>Topic Label</h3>
  <h2>Intro Text Heading</h2>
  <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta rerum libero iste saepe.</h4>
  <p>Lorem ipsum dolor sit amet, consectetur consectetur adipisicing elit. Perferendis para mitis eun non ullam atque debitis, illo adipisicing elit. Perferendis para mitis eun non ullam atque debitis, illo. Amet, consectetur adipisicing. <a href="javascript:void(0)">Read more <span>&#187;</span></a></p>
</div>
Copy
.intro-text {
  $intro-text-width: 60%;

  margin-bottom: 5em;
  margin-top: 4em;
  text-align: center;

  h2 {
    font-family: $serif;
    font-weight: 800;
    margin-bottom: .3em;

    @include media($large-screen) {
      font-size: 3em;
      margin-bottom: .4em;
    }
  }

  h3 {
    background: $base-accent-color;
    color: white;
    display: inline-block;
    font-size: .7em;
    font-weight: 800;
    margin-bottom: 2em;
    padding: 3px 8px;
    text-transform: uppercase;

    @include media($large-screen) {
      margin-bottom: 3.3em;
    }
  }

  h4 {
    color: lighten($base-font-color, 20);
    font-size: 1.3em;
    font-weight: 300;
    line-height: 1.4em;
    margin: 0 auto 1em;

    @include media($large-screen) {
      font-size: 1.7em;
      line-height: 1.35em;
      margin: 0 auto 1em;
      width: $intro-text-width;
    }    
  }

  p {
    margin: auto;

    @include media($large-screen) {
      width: $intro-text-width;
    }

    a {
      font-size: .8em;
      font-weight: 400;
      text-transform: uppercase;

      span {
        font-size: 1.3em;
        line-height: 0;
      }
    }
  }
}
Maps
Copy
<!-- 
Add the code below to your <head>. 
Edit myLatlng and the other variables.

Find syntax for Features that can be styled here:

https://developers.google.com/maps/documentation/javascript/reference#MapTypeStyleFeatureType  

Or use a service such as:

http://software.stadtwerk.org/google_maps_colorizr/#
http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html
https://developers.google.com/maps/documentation/javascript/tutorial
-->


<!-- 
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
  function initialize() {
    var myLatlng = new google.maps.LatLng(59.342457, 18.057340);
    var mapCenter = new google.maps.LatLng(59.340458, 18.057340);
    var mapCanvas = document.getElementById('map_canvas');
    var mapOptions = {
      center: mapCenter,
      zoom: 13,
      scrollwheel: false,
      draggable: true,
      disableDefaultUI: true,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    var map = new google.maps.Map(mapCanvas, mapOptions)

    map.set('styles', [
     {
         featureType: 'landscape',
         elementType: 'geometry',
         stylers: [
           { hue: '#ffff00' },
           { saturation: 30 },
           { lightness: 10}
         ]
       },
    ]);

    var contentString = 
      '<div id="content">'+
      '<div id="siteNotice">'+
      '</div>'+
      '<h1 id="firstHeading" class="firstHeading">thoughtbot</h1>'+
      '<div id="bodyContent">'+
      '<p>Sveavägen 98</p>'+
      '<p>113 50 Stockholm</p>'+
      '<p>Sweden</p>'+
      '</div>'+
      '</div>';

    var infowindow = new google.maps.InfoWindow({
        content: contentString,
        maxWidth: 300
    });

    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: 'thoughtbot (Sweden)'
    });
    google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map,marker);
    });
  }

  google.maps.event.addDomListener(window, 'load', initialize);
</script>
-->

<div id="map_canvas"></div>
Copy
#map_canvas {
  width: 100%;
  height: 400px;
}

#map_canvas img { 
  max-width: none; // to prevent UI control bug
}

#map_canvas .content {
  padding: .7em .5em 1em .5em;
}

#map_canvas .firstHeading {
  font-family: $serif;
  font-size: 1.4em;
  margin-bottom: .4em;
}

#map_canvas .bodyContent p {
  font-family: $sans-serif;
  font-size: 1em;
  margin-bottom: 0;
}

#map_canvas .bodyContent p:last-of-type {
  border-top: 1px solid silver;
  margin-top: .5em;
  padding-top: .3em;
}
Scroll On Page

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum aliquid necessitatibus, repudiandae veniam labore, consequatur maiores dolore unde non deleniti, aliquam minima ex nulla error eveniet vel tempore, in incidunt?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum aliquid necessitatibus, repudiandae veniam labore, consequatur maiores dolore unde non deleniti, aliquam minima ex nulla error eveniet vel tempore, in incidunt? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum aliquid necessitatibus, repudiandae veniam labore, consequatur maiores dolore unde non deleniti, aliquam minima ex nulla error eveniet vel tempore, in incidunt?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum aliquid necessitatibus, repudiandae veniam labore, consequatur maiores dolore unde non deleniti, aliquam minima ex nulla error eveniet vel tempore, in incidunt?

lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum aliquid necessitatibus, repudiandae veniam labore, consequatur maiores dolore unde non deleniti, aliquam minima ex nulla error eveniet vel tempore, in incidunt? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum aliquid necessitatibus, repudiandae veniam labore, consequatur maiores dolore unde non deleniti, aliquam minima ex nulla error eveniet vel tempore, in incidunt? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum aliquid necessitatibus, repudiandae veniam labore, consequatur maiores dolore unde non deleniti, aliquam minima ex nulla error eveniet vel tempore, in incidunt?

Back to top
Copy
<div class="scroll-on-page">
  <aside id="scroll-on-page-top">
    <a class="scroll-on-page-link" href="#scroll-link-1">First Scroll Link</a>
    <a class="scroll-on-page-link" href="#scroll-link-2">Second Link</a>
    <a class="scroll-on-page-link" href="#scroll-link-3">Last Link</a>
  </aside>

  <article>
    <section>
      <h4 id="scroll-link-1">First Target</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum aliquid necessitatibus, repudiandae veniam labore, consequatur maiores dolore unde non deleniti, aliquam minima ex nulla error eveniet vel tempore, in incidunt?</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum aliquid necessitatibus, repudiandae veniam labore, consequatur maiores dolore unde non deleniti, aliquam minima ex nulla error eveniet vel tempore, in incidunt? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum aliquid necessitatibus, repudiandae veniam labore, consequatur maiores dolore unde non deleniti, aliquam minima ex nulla error eveniet vel tempore, in incidunt?</p>
    </section>
    <section>
      <h4 id="scroll-link-2">Second Target</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum aliquid necessitatibus, repudiandae veniam labore, consequatur maiores dolore unde non deleniti, aliquam minima ex nulla error eveniet vel tempore, in incidunt?</p>
    </section>
    <section>
      <h4 id="scroll-link-3">Last Target</h4>
      <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum aliquid necessitatibus, repudiandae veniam labore, consequatur maiores dolore unde non deleniti, aliquam minima ex nulla error eveniet vel tempore, in incidunt? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum aliquid necessitatibus, repudiandae veniam labore, consequatur maiores dolore unde non deleniti, aliquam minima ex nulla error eveniet vel tempore, in incidunt? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum aliquid necessitatibus, repudiandae veniam labore, consequatur maiores dolore unde non deleniti, aliquam minima ex nulla error eveniet vel tempore, in incidunt?</p>
      <a class="scroll-on-page-link" href="#scroll-on-page-top">Back to top</a>
    </section>
  </article>
</div>
Copy
.scroll-on-page aside {
  @include media($large-screen) {
    @include span-columns(4);
  }
}

.scroll-on-page-link {
  border-bottom: 1px solid transparentize($base-link-color, .8);
  padding: $base-spacing / 2 0;
  margin-right: $base-spacing;
  display: block;

  &:last-child {
    margin-bottom: $base-spacing;
  }
}

.scroll-on-page article {
  h4 {
    margin-bottom: .5em; 
  }

  section p:last-of-type {
    margin-bottom: 2em; 
  }

  @include media($large-screen) {
    @include span-columns(8);
  }
}

// Based on code by http://codepen.io/xmark/
Copy
(function (jQuery) {
  jQuery.mark = {
    jump: function (options) {
      var defaults = {
        selector: 'a.scroll-on-page-link'
      };
      if (typeof options == 'string') defaults.selector = options;
      var options = jQuery.extend(defaults, options);
      return jQuery(options.selector).click(function (e) {
        var jumpobj = jQuery(this);
        var target = jumpobj.attr('href');
        var thespeed = 1000;
        var offset = jQuery(target).offset().top;
        jQuery('html,body').animate({
          scrollTop: offset
        }, thespeed, 'swing')
        e.preventDefault();
      })
    }
  }
})(jQuery);


jQuery(function(){  
  jQuery.mark.jump();
});
Search Tools
Copy
<div class="search-tools">
  <div class="filter">
    <label>Colors</label>
    <div>
      <ol>
        <li>
          <input id="red" type="checkbox">
          <label for="red">Red</label>
        </li>
        <li>
          <input id="green" type="checkbox">
          <label for="green">Green</label>
        </li>
        <li>
          <input id="blue" type="checkbox">
          <label for="blue">Blue</label>
        </li>
      </ol>
    </div>
  </div>
  <div class="filter">
    <label>Sizes</label>
    <div>
      <ol>
        <li>
          <input id="small" type="checkbox">
          <label for="small">Small</label>
        </li>
        <li>
          <input id="medium" type="checkbox">
          <label for="medium">Medium</label>
        </li>
        <li>
          <input id="large" type="checkbox">
          <label for="large">Large</label>
        </li>
      </ol>
    </div>
  </div>
    <div class="filter">
    <label>Lengths</label>
    <div>
      <ol>
        <li>
          <input id="short" type="checkbox">
          <label for="short">Short</label>
        </li>
        <li>
          <input id="long" type="checkbox">
          <label for="long">Long</label>
        </li>
      </ol>
    </div>
  </div>
  <div class="trigger">
    <button>Update</button>
  </div>
</div>
Copy
.search-tools {
  $search-tools-border-color: $base-border-color;
  $search-tools-background: lighten($search-tools-border-color, 10);

  @include clearfix;
  border: 1px solid $search-tools-border-color;
  background: $search-tools-background;
  padding: $gutter / 2;
  border-radius: $base-border-radius;

  .filter {
    margin-bottom: 1em;

    @include media($large-screen) {
      @include span-columns(3.5);
      margin-bottom: 0;
    }

    > div {
      @extend input[type="text"];
      position: relative;

      label {
        font-weight: 400;
        cursor: pointer;
        margin-bottom: 0;
      }
    }

    ol label {
      display: inline;
    }

    button {
      @include button(simple, lighten($search-tools-background, 10));
      @include position(absolute, 5px 5px auto auto);
      font-size: .7em;
    }

    .hide-options {
      margin-bottom: 0;

      ol, button {
        display: none;
      }
    }
  }

  .trigger {
    width: 100%;

    @include media($large-screen) {
      @include span-columns(1.5);
    }

    button {
      width: 100%;
      margin-top: 1em;
      padding-top: .7em;
      padding-bottom: .7em;

      @include media($large-screen) {
        margin-top: 1.95em;
      }
    }
  }
}
Copy
var Filter = (function() {
  function Filter(element) {
    this._element = $(element);
    this._optionsContainer = this._element.find(this.constructor.optionsContainerSelector);
  }

  Filter.selector = '.filter';
  Filter.optionsContainerSelector = '> div';
  Filter.hideOptionsClass = 'hide-options';

  Filter.enhance = function() {
    var klass = this;

    return $(klass.selector).each(function() {
      return new klass(this).enhance();
    });
  };

  Filter.prototype.enhance = function() {
    this._buildUI();
    this._bindEvents();
  };

  Filter.prototype._buildUI = function() {
    this._summaryElement = $('<label></label>').
      addClass('summary').
      attr('data-role', 'summary').
      prependTo(this._optionsContainer);

    this._clearSelectionButton = $('<button></button>').
      text('Clear').
      attr('type', 'button').
      insertAfter(this._summaryElement);

    this._optionsContainer.addClass(this.constructor.hideOptionsClass);
    this._updateSummary();
  };

  Filter.prototype._bindEvents = function() {
    var self = this;

    this._summaryElement.click(function() {
      self._toggleOptions();
    });

    this._clearSelectionButton.click(function() {
      self._clearSelection();
    });

    this._checkboxes().change(function() {
      self._updateSummary();
    });

    $('body').click(function(e) {
      var inFilter = $(e.target).closest(self.constructor.selector).length > 0;

      if (!inFilter) {
        self._allOptionsContainers().addClass(self.constructor.hideOptionsClass);
      }
    });
  };

  Filter.prototype._toggleOptions = function() {
    this._allOptionsContainers().
      not(this._optionsContainer).
      addClass(this.constructor.hideOptionsClass);

    this._optionsContainer.toggleClass(this.constructor.hideOptionsClass);
  };

  Filter.prototype._updateSummary = function() {
    var summary = 'All';
    var checked = this._checkboxes().filter(':checked');

    if (checked.length > 0) {
      summary = this._labelsFor(checked).join(', ');
    }

    this._summaryElement.text(summary);
  };

  Filter.prototype._clearSelection = function() {
    this._checkboxes().each(function() {
      $(this).prop('checked', false);
    });

    this._updateSummary();
  };

  Filter.prototype._checkboxes = function() {
    return this._element.find(':checkbox');
  };

  Filter.prototype._labelsFor = function(inputs) {
    return inputs.map(function() {
      var id = $(this).attr('id');
      return $("label[for='" + id + "']").text();
    }).get();
  };

  Filter.prototype._allOptionsContainers = function() {
    return $(this.constructor.selector + " " + this.constructor.optionsContainerSelector);
  };

  return Filter;
})();

$(function() {
  Filter.enhance();
});
Side Image

Topic Name

Message with a gradient image

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam assumenda nihil suscipit obcaecati sit, cum quod corporis adipisci ipsam, fugiat, quae error. Eaque commodi, dicta quidem explicabo mollitia inventore quibusdam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam assumenda nihil suscipit obcaecati sit, cum quod corporis adipisci ipsam, fugiat, quae error. Eaque commodi, dicta quidem explicabo mollitia inventore quibusdam.

Copy
<div class="side-image">
  <div class="images-wrapper"></div>
    <div class="content">
    <h4>Topic Name</h4>
    <h1>Message with a gradient image</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam assumenda nihil suscipit obcaecati sit, cum quod corporis adipisci ipsam, fugiat, quae error. Eaque commodi, dicta quidem explicabo mollitia inventore quibusdam.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam assumenda nihil suscipit obcaecati sit, cum quod corporis adipisci ipsam, fugiat, quae error. Eaque commodi, dicta quidem explicabo mollitia inventore quibusdam.</p>
    <button>Read more</button>
  </div>
</div>
Copy
$side-image-background-top: #B5EBEB;
$side-image-background-bottom: #5DAC5D;
$side-image-border: 1px solid darken(transparentize($side-image-background-bottom, .8), 30);

.side-image {
  background: #F9F9F9;

  @include media($large-screen) {
    @include row(table);
  }

  .images-wrapper {
    @include background(url('https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/mountains.png'), linear-gradient($side-image-background-top, $side-image-background-bottom), no-repeat $side-image-background-top scroll);
    background-color: $side-image-background-top;
    border-bottom: $side-image-border;
    background-size: cover;
    display: block;
    min-height: 12em;
    padding: 3em;

    @include media($large-screen) {
      @include span-columns(4);
      background-position: bottom;
      background-size: cover;
      border-right: $side-image-border;
    }
  }

  .content {
    @include span-columns(12);
    padding: 1em 1em 4em 1em;

    @include media($large-screen) {
      @include span-columns(8);
      padding: 4em 4em 8em 4em;
    }
  }

  .content h1 {
    margin-bottom: .9em;
  }

  .content h4 {
    background: #BBB;
    color: white;
    display: inline-block;
    font-size: .75em;
    font-weight: 800;
    margin-bottom: 1.3em;
    padding: 3px 8px;
    text-transform: uppercase;
  }

  .content p {
    color: gray;
    margin-bottom: 3em;
  }
  @include reset-display();
}
Tables
Header Cell 1 Header Cell 2 Header Cell 3
Row 1 Cell 1 Row 1 Cell 2
Row 2 Cell 1 Row 2 Cell 2
Row 3 Cell 1 Row 3 Cell 2
Row 4 Cell 1 Row 4 Cell 2
Copy
<table class="table-borders">
  <thead>
    <tr>
      <th>Header Cell 1</th>
      <th>Header Cell 2</th>
      <th>Header Cell 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1 Cell 1</td>
      <td>Row 1 Cell 2</td>
      <td><button>Confirm</button><button>Reject</button></td>
    </tr>
    <tr>
      <td>Row 2 Cell 1</td>
      <td>Row 2 Cell 2</td>
      <td><button>Confirm</button><button>Reject</button></td>
    </tr>
    <tr>
      <td>Row 3 Cell 1</td>
      <td>Row 3 Cell 2</td>
      <td><button>Confirm</button><button>Reject</button></td>
    </tr>
    <tr>
      <td>Row 4 Cell 1</td>
      <td>Row 4 Cell 2</td>
      <td><button>Confirm</button><button>Reject</button></td>
    </tr>
  </tbody>
</table>
Copy
.table-borders {
  $table-border-color: $base-border-color;
  $table-border: 1px solid $table-border-color;
  $table-background: lighten($table-border-color, 10);
  $table-header-color: lighten($table-background, 10);
  $table-hover-color: darken($table-background, 5);
  $table-stripe-color: darken($table-background, 4);
  $table-stripe-color-hover: darken($table-stripe-color, 5);
  $table-padding: .75em 1em;

  border: $table-border;
  border-left: 0px;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: $base-border-radius;

  tbody {
    background-color: $table-background;
    tr:hover > td, tr:hover > th {
      background-color: $table-hover-color;
    }
    tr:nth-child(even) {
      background-color: $table-stripe-color;
      &:hover > td {
        background-color: $table-stripe-color-hover;
      }
    }
  }

  thead:first-of-type {
    tr:first-child > th:first-child {
      border-top-left-radius: $base-border-radius;
    }

    tr:first-child > th:last-child {
      border-top-right-radius: $base-border-radius;
    }
  }

  tbody:last-child {
    tr:last-child > td:first-child {
      border-bottom-left-radius: $base-border-radius;
    }

    tr:last-child > td:last-child {
      border-bottom-right-radius: $base-border-radius;
    }
  }

  thead {
    th {
      background-color: $table-header-color;
      padding: $table-padding;
      border-left: 1px solid $table-border-color;
      border-bottom: 0px;
    }
  }

  tbody {
    background-color: $table-background;

    td {
      padding: $table-padding;
      border-left: 1px solid $table-border-color;
      border-top: 1px solid $table-border-color;
      border-bottom: 0px;

      button {
        padding: .5em 1em .6em;
        font-size: .7em;
        margin-right: 0.5em;
        display: inline-block;
        width: 100%;
        margin-bottom: .3em;
        outline: none;

        @include media($medium-screen) {
          width: auto;
          margin-bottom: 0;
        }

        @include media($large-screen) {
          font-size: .8em;
        }
      }
    }
  }
}
Header Cell 1 Header Cell 2 Header Cell 3
Row 1 Cell 1 Row 1 Cell 2
Row 2 Cell 1 Row 2 Cell 2
Row 3 Cell 1 Row 3 Cell 2
Row 4 Cell 1 Row 4 Cell 2
Copy
<table class="table-minimal">
  <thead>
    <tr>
      <th>Header Cell 1</th>
      <th>Header Cell 2</th>
      <th>Header Cell 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1 Cell 1</td>
      <td>Row 1 Cell 2</td>
      <td><button>Confirm</button><button>Reject</button></td>
    </tr>
    <tr>
      <td>Row 2 Cell 1</td>
      <td>Row 2 Cell 2</td>
      <td><button>Confirm</button><button>Reject</button></td>
    </tr>
    <tr>
      <td>Row 3 Cell 1</td>
      <td>Row 3 Cell 2</td>
      <td><button>Confirm</button><button>Reject</button></td>
    </tr>
    <tr>
      <td>Row 4 Cell 1</td>
      <td>Row 4 Cell 2</td>
      <td><button>Confirm</button><button>Reject</button></td>
    </tr>
  </tbody>
</table>
Copy
.table-minimal {
  $table-border-color: $base-border-color;
  $table-border: 1px solid $table-border-color;
  $table-background: $base-background-color;
  $table-header-color: lighten($table-background, 10);
  $table-hover-color: darken($table-background, 2);
  $table-stripe-color: darken($table-background, 4);
  $table-stripe-color-hover: darken($table-stripe-color, 5);
  $table-padding: .75em 1em;

  border-collapse: separate;
  border-spacing: 0;

  tbody {
    tr:hover > td, tr:hover > th {
      background-color: $table-hover-color;
    }
    tr:first-child td {
      border-top: 2px solid $table-border-color;
    }
  }

  thead {
    th {
      background-color: $table-header-color;
      padding: $table-padding;
      border-bottom: 0px;
    }
  }

  tbody {
    background-color: $table-background;

    td {
      padding: $table-padding;
      border-top: 1px solid $table-border-color;
      border-bottom: 0px;

      button {
        padding: .5em 1em .6em;
        font-size: .7em;
        margin-right: 0.5em;
        display: inline-block;
        width: 100%;
        margin-bottom: .3em;
        outline: none;

        @include media($medium-screen) {
          width: auto;
          font-size: .8em;
          margin-bottom: 0;
        }

        @include media($large-screen) {
          font-size: .8em;
        }
      }
    }
  }
}
Vertical Tabs
Item 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt pellentesque lorem, id suscipit dolor rutrum id. Morbi facilisis porta volutpat. Fusce adipiscing, mauris quis congue tincidunt, sapien purus suscipit odio, quis dictum odio tortor in sem. Ut sit amet libero nec orci mattis fringilla. Praesent eu ipsum in sapien tincidunt molestie sed ut magna. Nam accumsan dui at orci rhoncus pharetra tincidunt elit ullamcorper. Sed ac mauris ipsum. Nullam imperdiet sapien id purus pretium id aliquam mi ullamcorper.

Item 2

Ut laoreet augue et neque pretium non sagittis nibh pulvinar. Etiam ornare tincidunt orci quis ultrices. Pellentesque ac sapien ac purus gravida ullamcorper. Duis rhoncus sodales lacus, vitae adipiscing tellus pharetra sed. Praesent bibendum.

Item 3

Donec mattis mauris gravida metus laoreet non rutrum sem viverra. Aenean nibh libero, viverra vel vestibulum in, porttitor ut sapien. Phasellus tempor lorem id justo ornare tincidunt. Nulla faucibus, purus eu placerat fermentum, velit mi iaculis nunc, bibendum tincidunt ipsum justo eu mauris. Nulla facilisi. Vestibulum vel lectus ac purus tempus suscipit nec sit amet eros. Nullam fringilla, enim eu lobortis dapibus, quam magna tincidunt nibh, sit amet imperdiet dolor justo congue turpis.

Item 4

Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus dui urna, mollis vel suscipit in, pharetra at ligula. Pellentesque a est vel est fermentum pellentesque sed sit amet dolor. Nunc in dapibus nibh. Aliquam erat volutpat. Phasellus vel dui sed nibh iaculis convallis id sit amet urna. Proin nec tellus quis justo consequat accumsan. Vivamus turpis enim, auctor eget placerat eget, aliquam ut sapien.

Copy
<div class="vertical-tabs-container">
  <div class="vertical-tabs">
    <a href="javascript:void(0)" class="js-vertical-tab vertical-tab is-active" rel="tab1">Item 1</a>
    <a href="javascript:void(0)" class="js-vertical-tab vertical-tab" rel="tab2">Item 2</a>
    <a href="javascript:void(0)" class="js-vertical-tab vertical-tab" rel="tab3">Item 3</a>
    <a href="javascript:void(0)" class="js-vertical-tab vertical-tab" rel="tab4">Item 4</a>
  </div>

  <div class="vertical-tab-content-container">
    <a href="" class="js-vertical-tab-accordion-heading vertical-tab-accordion-heading is-active" rel="tab1">Item 1</a>
    <div id="tab1" class="js-vertical-tab-content vertical-tab-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt pellentesque lorem, id suscipit dolor rutrum id. Morbi facilisis porta volutpat. Fusce adipiscing, mauris quis congue tincidunt, sapien purus suscipit odio, quis dictum odio tortor in sem. Ut sit amet libero nec orci mattis fringilla. Praesent eu ipsum in sapien tincidunt molestie sed ut magna. Nam accumsan dui at orci rhoncus pharetra tincidunt elit ullamcorper. Sed ac mauris ipsum. Nullam imperdiet sapien id purus pretium id aliquam mi ullamcorper.</p>
    </div>

    <a href="" class="js-vertical-tab-accordion-heading vertical-tab-accordion-heading" rel="tab2">Item 2</a>
    <div id="tab2" class="js-vertical-tab-content vertical-tab-content">
      <p>Ut laoreet augue et neque pretium non sagittis nibh pulvinar. Etiam ornare tincidunt orci quis ultrices. Pellentesque ac sapien ac purus gravida ullamcorper. Duis rhoncus sodales lacus, vitae adipiscing tellus pharetra sed. Praesent bibendum.</p>
    </div>

    <a href="" class="js-vertical-tab-accordion-heading vertical-tab-accordion-heading" rel="tab3">Item 3</a>
    <div id="tab3" class="js-vertical-tab-content vertical-tab-content">
      <p>Donec mattis mauris gravida metus laoreet non rutrum sem viverra. Aenean nibh libero, viverra vel vestibulum in, porttitor ut sapien. Phasellus tempor lorem id justo ornare tincidunt. Nulla faucibus, purus eu placerat fermentum, velit mi iaculis nunc, bibendum tincidunt ipsum justo eu mauris. Nulla facilisi. Vestibulum vel lectus ac purus tempus suscipit nec sit amet eros. Nullam fringilla, enim eu lobortis dapibus, quam magna tincidunt nibh, sit amet imperdiet dolor justo congue turpis.</p>
    </div>

    <a href="" class="js-vertical-tab-accordion-heading vertical-tab-accordion-heading" rel="tab4">Item 4</a>
    <div id="tab4" class="js-vertical-tab-content vertical-tab-content">
      <p>Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus dui urna, mollis vel suscipit in, pharetra at ligula. Pellentesque a est vel est fermentum pellentesque sed sit amet dolor. Nunc in dapibus nibh. Aliquam erat volutpat. Phasellus vel dui sed nibh iaculis convallis id sit amet urna. Proin nec tellus quis justo consequat accumsan. Vivamus turpis enim, auctor eget placerat eget, aliquam ut sapien.</p>
    </div>
  </div>
</div>
Copy
.vertical-tabs-container { // small screens: accordion
  $tab-border-color: $base-border-color;
  $tab-border: 1px solid $tab-border-color;
  $tab-border-radius: $base-border-radius;
  $tab-content-background: lighten($tab-border-color, 10);
  $tab-active-color: $tab-content-background;
  $tab-inactive-color: $base-background-color;
  $vertical-tabs-height: em(300);
  $vertical-tab-mode: $medium-screen;

  @include clearfix;
  border-radius: $tab-border-radius;
  border: $tab-border;
  margin-bottom: $base-spacing;
  overflow: hidden;

  .vertical-tabs {
    display: none;

    @include media($vertical-tab-mode) {
      background-color: $tab-inactive-color;
      display: inline;
      float: left;
      height: $vertical-tabs-height;
      width: 20%;
    }
  }

  .vertical-tab {
    @include media($vertical-tab-mode) {
      border-bottom: $tab-border;
      display: block;
      font-weight: bold;
      margin-right: -1px;
      padding: $base-spacing/2 $gutter/2;

      &.is-active {
        background-color: $tab-content-background;
        margin-right: -1px;
      }
    }
  }

  a.vertical-tab-accordion-heading,
  a.vertical-tab {
    color: $dark-gray;
  }

  .vertical-tab:focus {
    outline: none; 
  }

  .vertical-tab-content-container {
    display: block;
    margin: 0 auto;

    & a:focus { 
      outline: none; 
    }

    @include media($vertical-tab-mode) {
      @include inline-block;
      @include size(80% $vertical-tabs-height);
      background-color: $tab-content-background;
    }
  }

  .vertical-tab-content {
    background-color: $tab-content-background;
    padding: $base-spacing $gutter;

    @include media($vertical-tab-mode) {
      border: none;
      display: none;
    }
  }

  .vertical-tab-accordion-heading {
    background-color: $tab-inactive-color;
    border-top: $tab-border;
    cursor: pointer;
    display: block;
    font-weight: bold;
    padding: $base-spacing/2 $gutter/2;

    &:hover {
      color: $base-accent-color;
    }

    &:first-child {
      border-top: none;
    }

    &.is-active {
      background: $tab-active-color;
      border-bottom: none;
    }

    @include media($vertical-tab-mode) {
      display: none;
    }
  }
}

// Based on code by Jett Miller jettmiller.net
Copy
$(".js-vertical-tab-content").hide();
$(".js-vertical-tab-content:first").show();

/* if in tab mode */
$(".js-vertical-tab").click(function(event) {
  event.preventDefault();

  $(".js-vertical-tab-content").hide();
  var activeTab = $(this).attr("rel");
  $("#"+activeTab).show();

  $(".js-vertical-tab").removeClass("is-active");
  $(this).addClass("is-active");

  $(".js-vertical-tab-accordion-heading").removeClass("is-active");
  $(".js-vertical-tab-accordion-heading[rel^='"+activeTab+"']").addClass("is-active");
});

/* if in accordion mode */
$(".js-vertical-tab-accordion-heading").click(function(event) {
  event.preventDefault();

  $(".js-vertical-tab-content").hide();
  var accordion_activeTab = $(this).attr("rel");
  $("#"+accordion_activeTab).show();

  $(".js-vertical-tab-accordion-heading").removeClass("is-active");
  $(this).addClass("is-active");

  $(".js-vertical-tab").removeClass("is-active");
  $(".js-vertical-tab[rel^='"+accordion_activeTab+"']").addClass("is-active");
});