Menu icon

Components and patterns built with Bourbon 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.

<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.</p>
    </div>
  </li>
</ul>
.accordion-tabs {
  ///////////////////////////////////////////////////////////////////////////////////
  $base-border-color: gainsboro !default;
  $base-border-radius: 3px !default;
  $base-background-color: white !default;
  $base-spacing: 1.5em !default;
  $base-accent-color: #477DCA !default;
  $base-link-color: $base-accent-color !default;
  $dark-gray: #333 !default;
  $light-gray: #DDD !default;
  $medium-screen: em(640) !default;
  //////////////////////////////////////////////////////////////////////////////////

  $tab-border: 1px solid $base-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;
  line-height: 1.5;
  margin-bottom: $base-spacing;
  padding: 0;

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

  .tab-header-and-content {
    list-style: none;

    @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;
    text-decoration: none;

    @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;
    width: 100%;

    @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;
    }
  }
}
$(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();
    }
  });
});
$(document).ready ->
  $('.accordion-tabs').each ->
    $(this).children('li').first().children('a').addClass('is-active').next().addClass('is-open').show()
    return
  $('.accordion-tabs').on 'click', 'li > a', (event) ->
    if !$(this).hasClass('is-active')
      event.preventDefault()
      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()
    return
  return
  • 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.

<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.</p>
    </div>
  </li>
</ul>
.accordion-tabs-minimal {
  ///////////////////////////////////////////////////////////////////////////////////
  $base-border-color: gainsboro !default;
  $base-background-color: white !default;
  $base-spacing: 1.5em !default;
  $base-accent-color: #477DCA !default;
  $base-link-color: $base-accent-color !default;
  $dark-gray: #333 !default;
  $medium-screen: em(640) !default;
  //////////////////////////////////////////////////////////////////////////////////

  $tab-link-color: $dark-gray;
  $tab-border: 1px solid $base-border-color;
  $tab-active-background: $base-background-color;
  $tab-inactive-color: $base-background-color;
  $tab-inactive-hover-color: silver;
  $tab-mode: $medium-screen;

  @include clearfix;
  line-height: 1.5;
  padding: 0;

  li.tab-header-and-content {
    list-style: none;

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

  a.tab-link {
    background-color: $tab-inactive-color;
    border-top: $tab-border;
    color: $tab-link-color;
    display: block;
    font-weight: 400;
    padding: ($base-spacing / 2) $gutter;
    text-decoration: none;

    @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;
    width: 100%;

    @include media($tab-mode) {
      border-top: $tab-border;
      float: left;
    }
  }
}
$(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();
    }
  });
});
$(document).ready ->
  $('.accordion-tabs-minimal').each (index) ->
    $(this).children('li').first().children('a').addClass('is-active').next().addClass('is-open').show()
    return
  $('.accordion-tabs-minimal').on 'click', 'li > a', (event) ->
    if !$(this).hasClass('is-active')
      event.preventDefault()
      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()
    return
  return
Cards
First Card

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

Another Card

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

The Last Card

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

<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>

  <div class="card">
    <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>

  <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.
    </div>
  </div>
</div>
.cards {
  @include display(flex);
  @include flex-wrap(wrap);
  @include justify-content(space-between);
}

.card {
  ///////////////////////////////////////////////////////////////////////////////////
  $base-border-color: gainsboro !default;
  $base-border-radius: 3px !default;
  $base-background-color: white !default;
  $base-spacing: 1.5em !default;
  $base-accent-color: #477DCA !default;
  $base-link-color: $base-accent-color !default;
  $dark-gray: #333 !default;
  $base-font-color: $dark-gray !default;
  //////////////////////////////////////////////////////////////////////////////////

  $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-margin: 1em;

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

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

    img {
      @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;
      width: 100%;
    }
  }

  .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;
    line-height: 1.5em;
    padding: ($base-spacing / 3) ($base-spacing / 2);
  }

  .card-copy {
    font-size: 0.9em;
    line-height: 1.5em;
    padding: ($base-spacing / 2) ($base-spacing / 2);

    p {
      margin: 0 0 ($base-spacing / 2);
    }
  }
  
  &:focus,
  &: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;
    }
  }
}
<header class="centered-navigation" role="banner">
  <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="javascript:void(0)" id="js-centered-navigation-mobile-menu" class="centered-navigation-mobile-menu">MENU</a>
    <nav role="navigation">
      <ul id="js-centered-navigation-menu" class="centered-navigation-menu show">
        <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>
    </nav>
  </div>
</header>
.centered-navigation {
  ///////////////////////////////////////////////////////////////////////////////////
  $base-border-radius: 3px !default;
  $dark-gray: #333 !default;
  $large-screen: em(860) !default;
  $base-font-color: $dark-gray !default;
  //////////////////////////////////////////////////////////////////////////////////

  $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%);
  min-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-mobile-menu {
    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-decoration: none;
    text-transform: uppercase;

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

    &:focus,
    &: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;

    &.show {
      display: block;
    }

    @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;

    a {
      color: $centered-navigation-color;
      display: inline-block;
      outline: none;
      text-decoration: none;

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

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

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

  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: 0.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 -0.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;
      }
    }

    &:focus > .submenu,
    &: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 - 0.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;
        text-decoration: none;
        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;
        }
      }
    }
  }
}
$(document).ready(function() {
  var menuToggle = $('#js-centered-navigation-mobile-menu').unbind();
  $('#js-centered-navigation-menu').removeClass("show");
  
  menuToggle.on('click', function(e) {
    e.preventDefault();
    $('#js-centered-navigation-menu').slideToggle(function(){
      if($('#js-centered-navigation-menu').is(':hidden')) {
        $('#js-centered-navigation-menu').removeAttr('style');
      }
    });
  });
});
$(document).ready ->
  menuToggle = $('#js-centered-navigation-mobile-menu').unbind()
  $('#js-centered-navigation-menu').removeClass 'show'
  menuToggle.on 'click', (e) ->
    e.preventDefault()
    $('#js-centered-navigation-menu').slideToggle ->
      if $('#js-centered-navigation-menu').is(':hidden')
        $('#js-centered-navigation-menu').removeAttr 'style'
      return
    return
  return
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

<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>
.comment {
  ///////////////////////////////////////////////////////////////////////////////////
  $base-border-radius: 3px !default;
  $base-spacing: 1.5em !default;
  $base-accent-color: #477DCA !default;
  $dark-gray: #333 !default;
  $base-font-color: $dark-gray !default;
  //////////////////////////////////////////////////////////////////////////////////

  $comment-gutter: 1.4em;
  $comment-image-padding: 0.7em;
  $comment-image-width: 4em;
  $comment-color: $base-font-color;
  $comment-background: lighten($base-accent-color, 15%);
  $comment-detail-color: transparentize($comment-color, 0.5);
  $comment-image-vert-alignment: top;

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

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

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

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

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

  .comment-content {
    width: 100%;

    h1 {
      font-size: 1em;
      margin: 0 0 0.5em 0;
    }

    p {
      line-height: 1.5em;
      margin-bottom: 0.5em;
    }

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

Device

Text about App or Device

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

<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>
.device-background {
  ///////////////////////////////////////////////////////////////////////////////////
  $base-border-radius: 3px !default;
  $base-accent-color: #477DCA !default;
  $large-screen: em(860) !default;

  p {
    line-height: 1.5em;
  }

  h4 {
    font-size: 1.5em;
    margin: 0;
  }
  //////////////////////////////////////////////////////////////////////////////////

  $device-padding-vertical: 5em;
  $device-padding-horizontal: 0.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';

  @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;
  min-height: 20em;
  width: 100%;

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

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

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

    p {
      margin-bottom: 1.5em;
    }

    button {
      @include button(flat, $base-accent-color);
      padding: 0.7em 1em;
    }
  }

  .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));
      background: $device-background;
      border-radius: 2em;
      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;
      display: block;
      float: right;
      margin-bottom: -12em;
      margin-right: 5em;
      padding: $device-padding-vertical 0;
      width: $device-screen-width + (2 * $device-padding-horizontal);
      z-index: 99999;

      .screen {
        @include size($device-screen-width $device-screen-height);
        background-image: url($device-screen-image);
        background-size: cover;
        border-radius: 0.2em;
        box-shadow: inset 0 1px 8px transparentize(black, 0.5);
        margin: auto;
      }
    }
  }
}
<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>
.flex-boxes {
  ///////////////////////////////////////////////////////////////////////////////////
  $base-border-radius: 3px !default;
  $base-background-color: white !default;
  $dark-gray: #333 !default;
  $light-gray: #DDD !default;
  $base-font-color: $dark-gray !default;
  
  a {
    text-decoration: none;
  }  
  //////////////////////////////////////////////////////////////////////////////////

  $flex-box-border-color: $light-gray;
  $flex-box-border: 1px solid $flex-box-border-color;
  $flex-box-background: lighten($light-gray, 10%);
  $flex-box-gutter: 0.4em;
  $flex-box-width: 18em;
  $flex-box-color: transparentize($base-font-color, 0.3);
  $flex-box-top-colors: 
    tomato, 
    #72BFBF, 
    #92B1E3, 
    #E3D743,
    #CCC,
    #F6C05C;

    @include clearfix;
    @include display(flex);
    @include justify-content(center);
    @include align-items(stretch);
    @include flex-wrap(wrap);
    clear: both;
    text-align: center;

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

    @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;
        
        &:focus,
        &:hover {
          background-color: transparentize($color-from-list, 0.9);
        }
      }
    }

    img {
      display: block;
      height: 3em;
      margin-bottom: 2em;
      margin: auto;
      opacity: 0.4;
    }

    .flex-title {
      color: $flex-box-color;
      font-size: 1.2em;
      font-weight: 800;
      margin-bottom: 0.5em;
    }

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

  .flex-box-big {
    @include flex(1 1 40em);
  }
}
<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>
@mixin grid-item-columns($columns) {
  width: (100% / 12) * $columns;
}

.grid-items {
  ///////////////////////////////////////////////////////////////////////////////////
  $base-accent-color: #477DCA !default;
  $base-background-color: white !default;
  $medium-screen: em(640) !default;
  $large-screen: em(860) !default;
  
  p {
    line-height: 1.5em;
  }

  a {
    text-decoration: none;
  }
  //////////////////////////////////////////////////////////////////////////////////

  $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);
    background: $grid-item-background;
    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;
    border-top: 0;
    cursor: pointer;
    float: left;
    height: $grid-item-height;
    overflow: hidden;
    outline: none;
    padding: 2em;
    text-align: center;
    width: 100%;

    @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%);

        &:focus,
        &: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-bottom: 1em;
      margin: auto;
    }

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

  .grid-item p {
      margin: auto;
      color: transparentize($grid-item-color, 0.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("https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/mountains.png");
    background-color: $grid-item-background;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
  }
}
<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>
@mixin grid-item-columns($columns) {
  width: (100% / 12) * $columns;
}

.grid-items-lines {
  ///////////////////////////////////////////////////////////////////////////////////
  $base-background-color: white !default;
  $dark-gray: #333 !default;
  $light-gray: #DDD !default;
  $medium-screen: em(640) !default;
  $large-screen: em(860) !default;
  $base-font-color: $dark-gray !default;

  p {
    line-height: 1.5em;
  }

  a {
    text-decoration: none;
  }
  //////////////////////////////////////////////////////////////////////////////////

  $grid-items-background: $base-background-color;
  $grid-item-background: $base-background-color;
  $grid-item-border: 1px solid transparentize($base-font-color, 0.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);
    background: $grid-item-background;
    border-bottom: $grid-item-border;
    border-right: $grid-item-border;
    cursor: pointer;
    float: left;
    height: $grid-item-height;
    overflow: hidden;
    outline: none;
    padding: 2em;
    width: 100%;

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

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

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

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

  .grid-item p {
      color: transparentize($grid-item-color, 0.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 {
    background: $grid-items-background;
    bottom: 0px;
    height: 3px;
    position: absolute;
    width: 100%;
  }

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

Hero Unit

Short description of Product

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

<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>
.hero {  
  ///////////////////////////////////////////////////////////////////////////////////
  $base-border-radius: 3px !default;
  $base-accent-color: #477DCA !default;
  $large-screen: em(860) !default;
  //////////////////////////////////////////////////////////////////////////////////

  $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-color: #324766;
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  padding-bottom: 3em;

  .hero-logo img {
    height: 4em;
    margin-bottom: 1em;
  }

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

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

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

      p {
        font-weight: 200;
        line-height: 1.4em;
        margin: 0 auto 3em auto; 

        @include media($large-screen) {
          font-size: 1.1em;
          max-width: 40%;
        }
      }
    }

    button {
      @include button(flat, $base-accent-color);
      padding: 0.7em 1em;
    }
  }
}
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.

<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>
.bullets {
  ///////////////////////////////////////////////////////////////////////////////////
  $base-line-height: 1.5em !default;
  $base-accent-color: #477DCA !default;
  $base-link-color: $base-accent-color !default;
  $dark-gray: #333 !default;
  $base-font-color: $dark-gray !default;
  
  padding: 0;

  h2 {
    margin: 0;
  }

  li {
    list-style: none;
  }

  p {
    color: $base-font-color;
    line-height: $base-line-height;
  }

  img {
    max-width: 100%;
  }
  //////////////////////////////////////////////////////////////////////////////////

  $icon-bullet-size: 3.5em;

  @include display(flex);
  @include flex-wrap(wrap);
  margin-bottom: $base-line-height;
  margin: 1em;
  overflow: auto;

  .bullet {
    @include flex-basis(20em);
    @include flex-grow(1);
  }

  .bullet-icon {
    background: $base-accent-color;
    border-radius: 50%;
    float: left;
    height: $icon-bullet-size;
    padding: $icon-bullet-size / 4;
    width: $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 {
    border-bottom: 1px solid transparentize($base-font-color, 0.8);
    display: inline-block;
    font-size: $icon-bullet-size / 2.5;
    margin-bottom: $icon-bullet-size / 6;
    padding-top: $icon-bullet-size / 7;
  }
}
Maps
<!--
Add the code below to the bottom of your page, just before the closing </body> tag.
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>
  var bittersMap = (function () {
    var myLatlng = new google.maps.LatLng(59.342457, 18.057340),
        mapCenter = new google.maps.LatLng(59.340458, 18.057340),
        mapCanvas = document.getElementById('map_canvas'),
        mapOptions = {
          center: mapCenter,
          zoom: 13,
          scrollwheel: false,
          draggable: true,
          disableDefaultUI: true,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        },
        map = new google.maps.Map(mapCanvas, mapOptions),
        contentString =
          '<div id="content">'+
          '<div id="siteNotice">'+
          '</div>'+
          '<h1 id="firstHeading" class="firstHeading">thoughtbot</h1>'+
          '<div id="bodyContent"'+
          '<p>Sveavägen 98</p>'+
          '</div>'+
          '</div>',
        infowindow = new google.maps.InfoWindow({
          content: contentString,
          maxWidth: 300
        }),
        marker = new google.maps.Marker({
          position: myLatlng,
          map: map,
          title: 'thoughtbot (Sweden)'
        });

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

        google.maps.event.addListener(marker, 'click', function () {
          infowindow.open(map,marker);
        });
      }
    };
  }());

  bittersMap.init();
</script>
-->

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

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

#map_canvas .content {
  padding: 0 0.5em 1em 0.5em;
}

#map_canvas .firstHeading {
  font-size: 1em;
  line-height: 1em;
  font-weight: bold;
  margin: 0;
}

#map_canvas #bodyContent p {
  font-size: 1em;
  margin: 0;
}
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
<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>
.scroll-on-page {
  ///////////////////////////////////////////////////////////////////////////////////
  $base-line-height: 1.5em !default;
  $base-spacing: 1.5em !default;
  $base-accent-color: #477DCA !default;
  $base-link-color: $base-accent-color !default;
  $dark-gray: #333 !default;
  $large-screen: em(860) !default;
  $base-font-color: $dark-gray !default;
  
  p {
    color: $base-font-color;
    line-height: $base-line-height;
  }

  a {
    color: $base-link-color;
    text-decoration: none;
  }
  //////////////////////////////////////////////////////////////////////////////////

  display: inline-block;

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

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

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

  article {
    h4 {
      margin: 0 0 0.5em 0;
    }

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

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

// Based on code by http://codepen.io/xmark/
(function (jQuery) {
  jQuery.mark = {
    jump: function (options) {
      var defaults = {
        selector: 'a.scroll-on-page-link'
      };
      if (typeof options == 'string') {
        defaults.selector = options;
      }

      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();
});
do (jQuery) ->
  jQuery.mark = jump: (options) ->
    defaults = selector: 'a.scroll-on-page-link'
    if typeof options == 'string'
      defaults.selector = options
    options = jQuery.extend(defaults, options)
    jQuery(options.selector).click (e) ->
      jumpobj = jQuery(this)
      target = jumpobj.attr('href')
      thespeed = 1000
      offset = jQuery(target).offset().top
      jQuery('html,body').animate { scrollTop: offset }, thespeed, 'swing'
      e.preventDefault()
      return
  return
jQuery ->
  jQuery.mark.jump()
  return
Search Tools
<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>
.search-tools {  
  ///////////////////////////////////////////////////////////////////////////////////
  $base-border-color: gainsboro !default;
  $base-border-radius: 3px !default;
  $base-line-height: 1.5em !default;
  $base-spacing: 1.5em !default;
  $base-accent-color: #477DCA !default;
  $base-link-color: $base-accent-color !default;
  $dark-gray: #333 !default;
  $large-screen: em(860) !default;
  $base-font-color: $dark-gray !default;
  
  ol {
    margin: 0;
    padding: 0;
  }

  li {
    font-size: 0.8em;
    line-height: 1.5em;
    list-style: none;
  }

  label {
    display: block;
    font-weight: bold;
    margin-bottom: $base-spacing / 4;
  }
  //////////////////////////////////////////////////////////////////////////////////

  $search-tools-border-color: $base-border-color;
  $search-tools-background: lighten($search-tools-border-color, 10%);

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

  .filter {
    margin-bottom: 1em;

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

    > div {
      @include box-sizing(border-box);
      @include transition(border-color);
      background-color: white;
      border-radius: $base-border-radius;
      border: 1px solid $base-border-color;
      font-size: 1em;
      margin-bottom: $base-spacing / 2;
      padding: ($base-spacing / 3) ($base-spacing / 3);
      position: relative;
      width: 100%;

      &:focus,
      &:hover {
        border-color: darken($base-border-color, 10%);
      }

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

    ol {
      margin-top: 1em;

      label {
        display: inline;
      }
    }

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

    .hide-options {
      margin-bottom: 0;

      ol, button {
        display: none;
      }
    }
  }

  .trigger {
    width: 100%;

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

    button {
      @include button(flat, $base-accent-color);
      margin-top: 1em;
      padding-bottom: 0.5em;
      padding-top: 0.5em;
      width: 100%;

      @include media($large-screen) {
        margin-top: 1.55em;
      }
    }
  }
}
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 && checked.length < this._checkboxes().length) {
      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.

<div class="side-image">
  <div class="images-wrapper"></div>
    <div class="side-image-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>
.side-image {  
  ///////////////////////////////////////////////////////////////////////////////////
  $base-line-height: 1.5em !default;
  $base-accent-color: #477DCA !default;
  $base-link-color: $base-accent-color !default;
  $dark-gray: #333 !default;
  $large-screen: em(860) !default;
  $base-font-color: $dark-gray !default;
  
  p {
    color: $base-font-color;
    line-height: $base-line-height;
  }
  //////////////////////////////////////////////////////////////////////////////////

  $side-image-background-top: #B5EBEB;
  $side-image-background-bottom: #5DAC5D;
  $side-image-content-background: #F9F9F9;
  $side-image-border: 1px solid darken(transparentize($side-image-background-bottom, 0.8), 30%);

  background: $side-image-content-background;

  @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;
    background-size: cover;
    border-bottom: $side-image-border;
    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;
    }
  }

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

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

    h1 {
      margin-bottom: 0.9em;
    }

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

    p {
      color: gray;
      margin-bottom: 3em;
    }

    button {
      @include button(flat, $base-accent-color);
      padding: 0.7em 1em;
    }
  }

  @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
<table class="tables">
  <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>
.tables {
  ///////////////////////////////////////////////////////////////////////////////////
  $base-border-color: gainsboro !default;
  $base-border-radius: 3px !default;
  $base-line-height: 1.5em !default;
  $base-spacing: 1.5em !default;
  $base-accent-color: #477DCA !default;
  $base-link-color: $base-accent-color !default;
  $dark-gray: #333 !default;
  $light-gray: #DDD !default;
  $medium-screen: em(640) !default;
  $large-screen: em(860) !default;
  $base-font-color: $dark-gray !default;
  
  width: 100%;

  th {
    text-align: left;
  }
  //////////////////////////////////////////////////////////////////////////////////

  $table-border-color: $base-border-color;
  $table-border: 1px solid $table-border-color;
  $table-background: lighten($table-border-color, 12%);
  $table-header-background: lighten($table-background, 10%);
  $table-hover-background: darken($table-background, 5%);
  $table-stripe-background: darken($table-background, 2%);
  $table-stripe-background-hover: darken($table-stripe-background, 5%);
  $table-padding: 0.75em 1em;

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

  tbody {
    background-color: $table-background;

    tr:hover > td, tr:hover > th {
      background-color: $table-hover-background;
    }
    tr:nth-child(even) {
      background-color: $table-stripe-background;
      &:hover > td {
        background-color: $table-stripe-background-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-background;
      border-bottom: 0px;
      border-left: 1px solid $table-border-color;
      padding: $table-padding;

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

  tbody {
    background-color: $table-background;

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

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

      button {
        @include button(flat, $base-accent-color);
        display: inline-block;
        font-size: 0.7em;
        line-height: $base-line-height;
        margin-bottom: 0.3em;
        margin-right: 0.5em;
        outline: none;
        padding: 0.3em 1em;
        width: 100%;

        @include media($medium-screen) {
          margin-bottom: 0;
          width: auto;
        }
      }
    }
  }
}
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
<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>
.table-minimal {
  ///////////////////////////////////////////////////////////////////////////////////
  $base-border-color: gainsboro !default;
  $base-border-radius: 3px !default;
  $base-background-color: white !default;
  $base-line-height: 1.5em !default;
  $base-spacing: 1.5em !default;
  $base-accent-color: #477DCA !default;
  $base-link-color: $base-accent-color !default;
  $dark-gray: #333 !default;
  $light-gray: #DDD !default;
  $medium-screen: em(640) !default;
  $large-screen: em(860) !default;
  $base-font-color: $dark-gray !default;
  
  width: 100%;

  th {
    text-align: left;
  }

  td {
    line-height: $base-line-height;
  }
  //////////////////////////////////////////////////////////////////////////////////

  $table-border-color: $base-border-color;
  $table-border: 1px solid $table-border-color;
  $table-background: $base-background-color;
  $table-header-background: lighten($table-background, 10);
  $table-hover-background: darken($table-background, 2);
  $table-stripe-background: darken($table-background, 4);
  $table-stripe-background-hover: darken($table-stripe-background, 5);
  $table-padding: .75em 1em;

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

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

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

  tbody {
    background-color: $table-background;

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

      button {
        @include button(flat, $base-accent-color);
        display: inline-block;
        font-size: .7em;
        line-height: $base-line-height;
        margin-bottom: .3em;
        margin-right: 0.5em;
        outline: none;
        padding: .3em 1em;
        width: 100%;

        @include media($medium-screen) {
          margin-bottom: 0;
          width: auto;
        }
      }
    }
  }
}
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.

<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>
.vertical-tabs-container {
  ///////////////////////////////////////////////////////////////////////////////////
  $base-border-color: gainsboro !default;
  $base-border-radius: 3px !default;
  $base-background-color: white !default;
  $base-line-height: 1.5em !default;
  $base-spacing: 1.5em !default;
  $base-accent-color: #477DCA !default;
  $base-link-color: $base-accent-color !default;
  $dark-gray: #333 !default;
  $medium-screen: em(640) !default;
  $base-font-color: $dark-gray !default;
  
  li {
    list-style: none;
  }

  p {
    color: $base-font-color;
    line-height: $base-line-height;
  }

  a {
    text-decoration: none;
    color: $base-link-color;
  }
  //////////////////////////////////////////////////////////////////////////////////

  $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 size(80% $vertical-tabs-height);
      background-color: $tab-content-background;
      display: inline-block;
    }
  }

  .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;

    &:focus,
    &: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
$(".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");
});
$('.js-vertical-tab-content').hide()
$('.js-vertical-tab-content:first').show()

### if in tab mode ###

$('.js-vertical-tab').click (event) ->
  event.preventDefault()
  $('.js-vertical-tab-content').hide()
  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'
  return

### if in accordion mode ###

$('.js-vertical-tab-accordion-heading').click (event) ->
  event.preventDefault()
  $('.js-vertical-tab-content').hide()
  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'
  return