Note: This project is no longer maintained.

Components and patterns built with Bourbon and Neat.

Managed by thoughtbot, instructions at GitHub

Refills requires Bourbon 5.0+ and Neat < 2.0, ≥ 1.6. We're working on another version with a focus on accessibility, which you can preview here.

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.

Show Code Hide Code

Copy HTML

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

Copy Scss

.accordion-tabs {
  $base-border-color: #dcdcdc !default;
  $base-border-radius: 3px !default;
  $base-background-color: #fff !default;
  $base-spacing: 1.5em !default;
  $action-color: #477dca !default;
  $dark-gray: #333 !default;
  $light-gray: #ddd !default;
  $medium-screen: 40em !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: $tab-border;
    border-radius: $base-border-radius;
  }

  .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 border-top-radius($base-border-radius);
      border-top: 0;
      display: inline-block;
    }

    &:hover {
      color: $action-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: $tab-border;
      border-bottom-left-radius: $base-border-radius;
      border-bottom-right-radius: $base-border-radius;
      border-top-right-radius: $base-border-radius;
      float: left;
    }
  }
}

Copy JavaScript Copy CoffeeScript

$(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.tab-link', 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();
    }
  });
});

Copy JavaScript Copy CoffeeScript

$(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.tab-link', (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.

Show Code Hide Code

Copy HTML

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

Copy Scss

.accordion-tabs-minimal {
  $base-border-color: #dcdcdc !default;
  $base-background-color: #fff !default;
  $base-spacing: 1.5em !default;
  $action-color: #477dca !default;
  $dark-gray: #333 !default;
  $medium-screen: 40em !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: #c0c0c0;
  $tab-mode: $medium-screen;

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

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

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

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

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

    &:hover {
      color: $action-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;
    }
  }
}

Copy JavaScript Copy CoffeeScript

$(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.tab-link', 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();
    }
  });
});

Copy JavaScript Copy CoffeeScript

$(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.tab-link', (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.

Show Code Hide Code

Copy HTML

<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.</p>
    </div>
  </div>
</div>

Copy Scss

.cards {
  display: flex;
  flex-wrap: wrap;
  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;
  $action-color: #477DCA !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-margin: 1em;
  $card-image-hover-opacity: 0.7;
  $card-image-hover-color: #F8F2B4;

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

  .card-image {
    background-color: $card-image-hover-color;
    height: 150px;
    max-height: 150px;
    overflow: hidden;

    img {
      @include border-top-radius($base-border-radius);
      opacity: 1;
      transition: all 0.2s ease-in-out;
      width: 100%;
    }
  }

  .card-header {
    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);
    transition: all 0.2s ease-in-out;
  }

  .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 {
    cursor: pointer;

    img {
      opacity: $card-image-hover-opacity;
    }
  }

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

    .card-header {
      background-color: $card-background;
    }
  }
}

Centered Navigation

Show Code Hide Code

Copy HTML

<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_square.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_square.png" alt="Logo image">
          </a>
        </li>
        <li class="nav-link"><a href="javascript:void(0)">Testimonials</a></li>
        <li id="js-centered-more" 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 fly-out-right">
                <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 fly-out-right">
                <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>

Copy Scss

.centered-navigation {
  $base-border-radius: 3px !default;
  $dark-gray: #333 !default;
  $large-screen: 53.75em !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: 0.6;
      padding: 0.8em 0;
    }

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

  .centered-navigation-mobile-menu {
    color: $centered-navigation-color;
    display: block;
    float: right;
    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 {
    clear: both;
    display: none;
    margin: 0 auto;
    overflow: visible;
    padding: 0;
    -webkit-transform-style: preserve-3d; // stop webkit flicker
    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($horizontal-bar-mode) {
      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.fly-out-right {
      @include media($horizontal-bar-mode) {
        left: $centered-navigation-submenu-width - 0.2em;
        top: 0;
      }
    }

    .submenu.fly-out-left {
      @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: 0.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;
        }
      }
    }
  }
}

Copy JavaScript Copy CoffeeScript

$(window).on("load resize",function(e) {
  var more = document.getElementById("js-centered-more");

  if ($(more).length > 0) {
    var windowWidth = $(window).width();
    var moreLeftSideToPageLeftSide = $(more).offset().left;
    var moreLeftSideToPageRightSide = windowWidth - moreLeftSideToPageLeftSide;

    if (moreLeftSideToPageRightSide < 330) {
      $("#js-centered-more .submenu .submenu").removeClass("fly-out-right");
      $("#js-centered-more .submenu .submenu").addClass("fly-out-left");
    }

    if (moreLeftSideToPageRightSide > 330) {
      $("#js-centered-more .submenu .submenu").removeClass("fly-out-left");
      $("#js-centered-more .submenu .submenu").addClass("fly-out-right");
    }
  }

  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");
      }
    });
  });
});

Copy JavaScript Copy CoffeeScript

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

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

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

Show Code Hide Code

Copy HTML

<div class="comment">
  <div class="comment-image">
    <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_square.png">
  </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_square.png">
  </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 Scss

.comment {
  $base-border-radius: 3px !default;
  $base-spacing: 1.5em !default;
  $action-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($action-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-left: 10px;
      padding-right: 0;
    }
  }

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

Show Code Hide Code

Copy HTML

<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>
  </div>
  <div class="device">
    <div class="screen"></div>
  </div>
</div>

Copy Scss

.device-background {
  $base-border-radius: 3px !default;
  $action-color: #477DCA !default;
  $large-screen: 53.75em !default;
  $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";

  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 {
    padding: 2em;

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

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

    p {
      color: $device-text-color;
      line-height: 1.5em;
      margin-bottom: 1.5em;
    }
  }

  .device {
    display: none;
    position: relative;

    @include media($large-screen) {
      background: $device-background;
      border-radius: 2em;
      box-shadow:
        1px 0 lighten($device-backside-background, 20%),
        4px 0 lighten($device-backside-background, 2%),
        7px 0 $device-backside-background,
        10px 0 $device-backside-background,
        13px 0 $device-backside-background;
      display: block;
      float: right;
      margin-bottom: -12em;
      margin-right: 5em;
      padding: $device-padding-vertical 0;
      transform:
        perspective(800px)
        translateX(0)
        translateY(-100px)
        translateZ(50px)
        rotateX(0)
        rotateY(-20deg)
        rotateZ(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;
      }
    }
  }
}

Flex Boxes

A Wide Flex Box Item

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.

Flex Box Item

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum molestiae fugiat tenetur fugit atque dignissimos, fugiat natus vitae.

A Flex Box Item

Lorem adipisicing elit. Voluptas consectetur tempora quis nam, officia tenetur blanditiis in illo dolor?

Another Wide Item

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.

Flex Box Item

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo obcaecati in provident illo.

Last Flex Box Item

Lorem ipsum dolor sit amet, elit. Rem, illum.

Show Code Hide Code

Copy HTML

<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_square.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_square.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_square.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_square.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_square.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_square.png" alt="">
    <h1 class="flex-title">Last Flex Box Item</h1>
    <p>Lorem ipsum dolor sit amet, elit. Rem, illum.</p>
  </a>
</div>

Copy Scss

.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;
  $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;
  align-items: stretch;
  clear: both;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;

  .flex-box {
    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;
    flex: 2 2 15em;
    margin: $flex-box-gutter;
    padding: 2em 2em 3em 2em;
    text-decoration: none;
    transition: all 0.2s ease-in-out;

    @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: 0 auto 1em;
      opacity: 0.4;
    }

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

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

  .flex-box-big {
    flex: 1 1 40em;
  }
}

Footers

Show Code Hide Code

Copy HTML

<footer class="footer" role="contentinfo">
  <div class="footer-logo">
    <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_square.png" alt="Logo image">
  </div>
  <div class="footer-links">
    <ul>
      <li><h3>Content</h3></li>
      <li><a href="javascript:void(0)">About</a></li>
      <li><a href="javascript:void(0)">Contact</a></li>
      <li><a href="javascript:void(0)">Products</a></li>
    </ul>
    <ul>
      <li><h3>Follow Us</h3></li>
      <li><a href="javascript:void(0)">Facebook</a></li>
      <li><a href="javascript:void(0)">Twitter</a></li>
      <li><a href="javascript:void(0)">YouTube</a></li>
    </ul>
    <ul>
      <li><h3>Legal</h3></li>
      <li><a href="javascript:void(0)">Terms and Conditions</a></li>
      <li><a href="javascript:void(0)">Privacy Policy</a></li>
    </ul>
  </div>

  <hr>

  <p>Disclaimer area lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, nostrum repudiandae saepe.</p>
</footer>

Copy Scss

.footer {
  $base-spacing: 1.5em !default;
  $action-color: #477DCA !default;
  $medium-screen: 40em !default;
  $large-screen: 53.75em !default;
  $footer-background: desaturate(darken($action-color, 20%), 30%);
  $footer-color: white;
  $footer-link-color: transparentize($footer-color, 0.6);
  $footer-disclaimer-color: transparentize($footer-color, 0.6);

  background: $footer-background;
  padding: ($base-spacing * 2) $gutter;
  width: 100%;

  .footer-logo {
    margin-bottom: 2em;
    text-align: center;

    img {
      height: 3em;
    }
  }

  .footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: $base-spacing;
  }

  ul {
    flex-basis: 13em;
    flex-shrink: 0;
    margin-bottom: $base-spacing * 2;
    padding: 0;
  }

  li {
    line-height: 1.5em;
    list-style: none;
    text-align: center;
  }

  li a {
    color: $footer-link-color;
    text-decoration: none;

    &:focus,
    &:hover {
      color: transparentize($footer-color, 0);
    }
  }

  li h3 {
    color: $footer-color;
    font-size: 1em;
    margin-bottom: 0.4em;
  }

  hr {
    border: 1px solid transparentize($footer-disclaimer-color, 0.3);
    margin: 0 auto $base-spacing;
    width: 12em;
  }

  p {
    color: $footer-disclaimer-color;
    font-size: 0.9em;
    line-height: 1.5em;
    margin: auto;
    max-width: 35em;
    text-align: center;
  }
}

Show Code Hide Code

Copy HTML

<!--<div class="wrapper-for-content-outside-of-footer">
   Uncomment this whole section for a sticky footer. The content of the page should be inside of this .wrapper-for-content-outside-of-footer
</div>-->

<footer class="footer-2" role="contentinfo">
  <div class="footer-logo">
    <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_square.png" alt="Logo image">
  </div>
    <ul>
      <li><a href="javascript:void(0)">About</a></li>
      <li><a href="javascript:void(0)">Contact</a></li>
      <li><a href="javascript:void(0)">Products</a></li>
    </ul>

    <div class="footer-secondary-links">
      <ul>
        <li><a href="javascript:void(0)">Terms and Conditions</a></li>
        <li><a href="javascript:void(0)">Privacy Policy</a></li>
      </ul>

      <ul class="footer-social">
        <li><a href="javascript:void(0)">
          <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/facebook-logo-circle.png" alt="Facebook">
          </a></li>
        <li><a href="javascript:void(0)">
          <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/twitter-logo-circle.png" alt="Twitter">
        </a></li>
        <li><a href="javascript:void(0)">
          <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/youtube-logo-circle.png" alt="YouTube">
        </a></li>
      </ul>
    </div>
</footer>

Copy Scss

// Uncomment this for a sticky footer.
//
// .wrapper-for-content-outside-of-footer {
//   min-height: 100%;
//   height: auto !important;
//   height: 100%;
//   margin: 0 auto -4em;
// }

// html, body {
//  height: 100%;
// }

// .wrapper-for-content-outside-of-footer::after {
//   content: "";
//   display: block;
// }

// .footer-2, .wrapper-for-content-outside-of-footer::after {
//   height: 17em;

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

.footer-2 {
  $base-spacing: 1.5em !default;
  $action-color: #477DCA !default;
  $medium-screen: 40em !default;
  $large-screen: 53.75em !default;
  $footer-background: desaturate(darken($action-color, 20%), 30%);
  $footer-color: white;
  $footer-link-color: transparentize($footer-color, 0.6);
  $footer-disclaimer-color: transparentize($footer-color, 0.6);

  background: $footer-background;
  display: inline-block;
  padding: $base-spacing;
  width: 100%;

  .footer-logo {
    margin-bottom: 1em;
    margin-right: 1em;

    @include media($large-screen) {
      float: left;
      margin-bottom: 0;
    }
  }

  .footer-logo img {
    height: 1.6em;
  }

  ul {
    line-height: 1.5em;
    margin: 0 0 1em 0;
    padding: 0;

    @include media($large-screen) {
      float: left;
      line-height: 1.8em;
      margin-bottom: 0;
      margin-left: 1em;
    }
  }

  ul li {
    list-style: none;
    padding-right: 1em;

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

  ul li a {
    color: $footer-link-color;
    text-decoration: none;

    &:focus,
    &:hover {
      color: transparentize($footer-color, 0);
    }
  }

  .footer-secondary-links {
    @include media($large-screen) {
      float: right;
    }

    li {
      font-size: 0.8em;
    }

    ul.footer-social {
      margin: 1em 0 0 0;

      @include media($large-screen) {
        float: right;
        margin-top: 0;
      }

      li {
        float: left;
        font-size: 1em;
        line-height: 0;
        margin: 0;
        padding-right: 0.7em;

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

      img {
        height: 1.6em;
        opacity: 0.7;
        padding: 1px;

        &:focus,
        &:hover {
          opacity: 1;
        }
      }
    }
  }
}

Grid Items

Grid Item

Lorem ipsum dolor sit amet, elit. Rem, illum.

Grid Item With an Image

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, illum.

Another Wide Item

Lorem ipsum consectetur dolor sit amet, consectetur adipisicing elit. Rem, illum.

Last Grid Item

Lorem ipsum dolor sit amet, elit. Rem, illum.

Last Grid Item

Lorem ipsum dolor sit amet, elit. Rem, illum.

A Grid Item

Lorem ipsum dolor sit amet, elit. Rem, illum.

Item

Lorem ipsum dolor sit amet, elit. Rem, illum.

Show Code Hide Code

Copy HTML

<div class="grid-items">
  <a href="javascript:void(0)" class="grid-item">
    <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_square.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_square.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_square.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_square.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_square.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_square.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_square.png" alt="">
    <h1>Item</h1>
    <p>Lorem ipsum dolor sit amet, elit. Rem, illum.</p>
  </a>
</div>

Copy Scss

@mixin grid-item-columns($columns) {
  width: (100% / 12) * $columns;
}

.grid-items {
  $action-color: #477DCA !default;
  $base-background-color: white !default;
  $medium-screen: 40em !default;
  $large-screen: 53.75em !default;
  $grid-items-background: $base-background-color;
  $grid-item-background: desaturate($action-color, 30%);
  $grid-item-colors:
    desaturate($action-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 {
    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;
    outline: none;
    overflow: hidden;
    padding: 2em;
    text-align: center;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    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 0 0 1px 2px darken($background-from-list, 10%);

        &:focus,
        &:hover {
          background-color: darken($background-from-list, 10%);
          background-position: top;
          background-repeat: no-repeat;
          background-size: cover;
        }
      }
    }
  }

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

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

  .grid-item p {
    color: transparentize($grid-item-color, 0.3);
    line-height: 1.5em;
    margin: auto;

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

Grid Item

Lorem ipsum dolor sit amet, elit. Rem, illum.

Another Item

Lorem ipsum consectetur dolor sit amet, consectetur adipisicing elit.

Another Grid Item

Lorem ipsum dolor sit amet, elit.

Grid Item

Lorem ipsum dolor sit amet, elit. Rem, illum.

Wider Grid Item

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, illum.

A Grid Item

Lorem ipsum dolor sit amet, elit. Rem, illum.

Item

Lorem ipsum dolor sit amet, elit. Rem, illum.

Last Grid Item

Lorem ipsum dolor sit amet, elit. Rem, illum.

Show Code Hide Code

Copy HTML

<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_square.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_square.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_square.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_square.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_square.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_square.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_square.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_square.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 Scss

@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: 40em !default;
  $large-screen: 53.75em !default;
  $base-font-color: $dark-gray !default;
  $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 {
    background: $grid-item-background;
    border-bottom: $grid-item-border;
    border-right: $grid-item-border;
    cursor: pointer;
    float: left;
    height: $grid-item-height;
    outline: none;
    overflow: hidden;
    padding: 2em;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    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);
      line-height: 1.5em;

      @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: 0;
    height: 3px;
    position: absolute;
    width: 100%;
  }

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

Hero Unit

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni modi doloremque excepturi laudantium maxime explicabo cumque deleniti voluptate deserunt.

Show Code Hide Code

Copy HTML

<div class="hero">
  <div class="hero-content">
    <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_square.png" alt="Logo Image" class="hero-logo">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni modi doloremque excepturi laudantium maxime explicabo cumque deleniti voluptate deserunt.</p>
  </div>
</div>

Copy Scss

.hero {
  $large-screen: 50em !default;
  align-items: center;
  background: image-url("background-image.png");
  background-position: right;
  background-size: none;
  display: flex;
  justify-content: center;
  min-height: 25em;
  padding: 2em;

  @include media($large-screen) {
    background-position: left;
    background-size: cover;
    justify-content: flex-end;
  }

  .hero-content {
    max-width: 20em;
    text-align: center;

    @include media($large-screen) {
      text-align: left;
    }
  }

  .hero-logo {
    margin: auto;
  }
}

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.

Show Code Hide Code

Copy HTML

<ul class="bullets">
  <li class="bullet">
    <div class="bullet-icon bullet-icon-1">
      <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_square.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">
    <div class="bullet-icon bullet-icon-2">
      <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_square.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">
    <div class="bullet-icon bullet-icon-3">
      <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_square.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 Scss

.bullets {
  $base-line-height: 1.5em !default;
  $action-color: #477DCA !default;
  $dark-gray: #333 !default;
  $base-font-color: $dark-gray !default;
  $icon-bullet-size: 3.5em;

  display: flex;
  flex-wrap: wrap;
  margin: 1em;
  margin-bottom: $base-line-height;
  overflow: auto;
  padding: 0;

  .bullet {
    flex-basis: 20em;
    flex-grow: 1;
  }

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

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

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

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

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

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

  li {
    list-style: none;
  }

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

  img {
    max-width: 100%;
  }
}

Maps

Show Code Hide Code

Copy HTML

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

Copy Scss

#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;
  font-weight: bold;
  line-height: 1em;
  margin: 0;
}

#map_canvas #bodyContent p {
  font-size: 1em;
  margin: 0;
}

Logo Section

Navigation

Show Code Hide Code

Copy HTML

<header class="navigation" role="banner">
  <div class="navigation-wrapper">
    <a href="javascript:void(0)" class="logo">
      <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_square.png" alt="Logo Image">
    </a>
    <a href="javascript:void(0)" class="navigation-menu-button" id="js-mobile-menu">MENU</a>
    <nav role="navigation">
      <ul id="js-navigation-menu" class="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 id="js-navigation-more" 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>
      </ul>
    </nav>
    <div class="navigation-tools">
      <div class="search-bar">
        <form role="search">
          <input type="search" placeholder="Enter Search" />
          <button type="submit">
            <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/search-icon.png" alt="Search Icon">
          </button>
        </form>
      </div>
    </div>
  </div>
</header>

Copy Scss

header.navigation {
  $base-border-color: gainsboro !default;
  $base-border-radius: 3px !default;
  $action-color: #477DCA !default;
  $dark-gray: #333 !default;
  $large-screen: 53.75em !default;
  $navigation-padding: 1em;
  $navigation-background: $dark-gray;
  $navigation-color: transparentize(white, 0.3);
  $navigation-color-hover: white;
  $navigation-height: 60px;
  $navigation-nav-button-background: $action-color;
  $navigation-nav-button-background-hover: lighten($navigation-background, 10%);
  $navigation-nav-button-border: 1px solid lighten($navigation-nav-button-background, 20%);
  $navigation-search-background: lighten($navigation-background, 5);
  $navigation-search-border: 1px solid darken($navigation-background, 5);
  $navigation-active-link-color: transparentize(white, 0.5);
  $navigation-submenu-padding: 1em;
  $navigation-submenu-width: 12em;
  $horizontal-bar-mode: $large-screen;

  background-color: $navigation-background;
  border-bottom: 1px solid darken($navigation-background, 10);
  min-height: $navigation-height;
  width: 100%;
  z-index: 999;

  .navigation-wrapper {
    @include clearfix;
    position: relative;
    z-index: 9999;
  }

  .logo {
    float: left;
    max-height: $navigation-height;
    padding-left: $navigation-padding;
    padding-right: 2em;

    img {
      max-height: $navigation-height;
      padding: 0.8em 0;
    }
  }

  // Mobile view

  .navigation-menu-button {
    color: $navigation-color;
    display: block;
    float: right;
    line-height: $navigation-height;
    margin: 0;
    padding-right: 1em;
    text-decoration: none;
    text-transform: uppercase;

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

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

  // Nav menu

  nav {
    float: none;
    min-height: $navigation-height;
    z-index: 9999999;

    @include media ($horizontal-bar-mode) {
      float: left;
    }
  }

  ul.navigation-menu {
    clear: both;
    display: none;
    margin: 0 auto;
    overflow: visible;
    padding: 0;
    width: 100%;
    z-index: 9999;

    &.show {
      display: block;
    }

    @include media ($horizontal-bar-mode) {
      display: inline;
      margin: 0;
      padding: 0;
    }
  }

  // The nav items

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

    @include media ($horizontal-bar-mode) {
      background: transparent;
      display: inline;
      line-height: $navigation-height;
      text-decoration: none;
      width: auto;
    }

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

      @include media ($horizontal-bar-mode) {
        padding-right: 1em;
      }

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

  .active-nav-item a {
    border-bottom: 1px solid $navigation-active-link-color;
    padding-bottom: 3px;
  }

  // Sub menus

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

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

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

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

    > a {
      padding-right: 0.6em;
    }

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

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

    a {
      padding-right: 0.8em;
    }

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

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

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

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

    @include media($horizontal-bar-mode) {
      padding-right: 0.8em;
      position: relative;
    }
  }

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

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

    .submenu.fly-out-right {
      @include media($horizontal-bar-mode) {
        left: $navigation-submenu-width - 0.2em;
        top: 0;
      }
    }

    .submenu.fly-out-left {
      @include media($horizontal-bar-mode) {
        left: -$navigation-submenu-width + 0.2em;
        top: 0;
      }
    }

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

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

      @include media($horizontal-bar-mode) {
        line-height: $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: 0.7em;
        }
      }

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

        @include media($horizontal-bar-mode) {
          background-color: $navigation-background;
          padding-left: $navigation-submenu-padding;
          text-align: left;
          width: $navigation-submenu-width;
        }
      }
    }
  }

  // Elements on the far right

  .navigation-tools {
    background: #505050;
    clear: both;
    display: block;
    height: $navigation-height;

    @include media($horizontal-bar-mode) {
      background: transparent;
      clear: none;
      float: right;
    }
  }

  // Search bar

  .search-bar {
    $search-bar-border-color: $base-border-color;
    $search-bar-border: 1px solid $search-bar-border-color;
    $search-bar-background: lighten($search-bar-border-color, 10%);

    float: left;
    padding: 0.85em 0.85em 0.7em 0.6em;
    width: 60%;

    form {
      position: relative;

      input[type=search] {
        background: $navigation-search-background;
        border: $navigation-search-border;
        border-radius: $base-border-radius * 2;
        box-sizing: border-box;
        color: $navigation-color;
        font-size: 0.9em;
        font-style: italic;
        margin: 0;
        padding: 0.5em 0.8em;
        width: 100%;

        @include media($horizontal-bar-mode) {
          width: 100%;
        }
      }

      button[type=submit] {
        background: $navigation-search-background;
        border: 0;
        bottom: 0.3em;
        left: auto;
        outline: none;
        padding: 0 9px;
        position: absolute;
        right: 0.3em;
        top: 0.3em;

        img {
          height: 12px;
          opacity: 0.7;
          padding: 1px;
        }
      }
    }

    @include media($horizontal-bar-mode) {
      display: inline-block;
      position: relative;
      width: 16em;

      input {
        box-sizing: border-box;
        display: block;
      }
    }
  }
}

Copy JavaScript Copy CoffeeScript

$(window).resize(function() {
  var more = document.getElementById("js-navigation-more");
  if ($(more).length > 0) {
    var windowWidth = $(window).width();
    var moreLeftSideToPageLeftSide = $(more).offset().left;
    var moreLeftSideToPageRightSide = windowWidth - moreLeftSideToPageLeftSide;

    if (moreLeftSideToPageRightSide < 330) {
      $("#js-navigation-more .submenu .submenu").removeClass("fly-out-right");
      $("#js-navigation-more .submenu .submenu").addClass("fly-out-left");
    }

    if (moreLeftSideToPageRightSide > 330) {
      $("#js-navigation-more .submenu .submenu").removeClass("fly-out-left");
      $("#js-navigation-more .submenu .submenu").addClass("fly-out-right");
    }
  }
});

$(document).ready(function() {
  var menuToggle = $("#js-mobile-menu").unbind();
  $("#js-navigation-menu").removeClass("show");

  menuToggle.on("click", function(e) {
    e.preventDefault();
    $("#js-navigation-menu").slideToggle(function(){
      if($("#js-navigation-menu").is(":hidden")) {
        $("#js-navigation-menu").removeAttr("style");
      }
    });
  });
});

Copy JavaScript Copy CoffeeScript

$(document).ready ->
  menuToggle = $('#js-mobile-menu').unbind()
  $('#js-navigation-menu').removeClass 'show'
  menuToggle.on 'click', (e) ->
    e.preventDefault()
    $('#js-navigation-menu').slideToggle ->
      if $('#js-navigation-menu').is(':hidden')
        $('#js-navigation-menu').removeAttr 'style'
      return
    return
  return

Scroll On Page

First Target

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?

Second Target

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?

Last Target

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?

Show Code Hide Code

Copy HTML

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

.scroll-on-page {
  $base-line-height: 1.5em !default;
  $base-spacing: 1.5em !default;
  $action-color: #477DCA !default;
  $dark-gray: #333 !default;
  $large-screen: 53.75em !default;
  $base-font-color: $dark-gray !default;

  display: inline-block;

  a {
    color: $action-color;
    text-decoration: none;
  }

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

  .scroll-on-page-link {
    border-bottom: 1px solid transparentize($action-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;
    }

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

    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 JavaScript Copy CoffeeScript

(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();
});

Copy JavaScript Copy CoffeeScript

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

Colors

Sizes

Lengths

Show Code Hide Code

Copy HTML

<div class="search-tools">
  <div class="filters">
    <div class="filter">
      <label>Colors</label>
      <div>
        <ol class="filter-list">
          <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 class="filter-list">
          <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 class="filter-list">
          <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="filter trigger">
      <button>Update</button>
    </div>
  </div>
</div>

Copy Scss

.search-tools {
  $base-border-color: gainsboro !default;
  $base-border-radius: 3px !default;
  $base-line-height: 1.5em !default;
  $base-spacing: 1.5em !default;
  $action-color: #477DCA !default;

  $dark-gray: #333 !default;
  $large-screen: 53.75em !default;
  $base-font-color: $dark-gray !default;
  $clear-button-width: 4em;
  $search-tools-border-color: $base-border-color;
  $search-tools-background: lighten($search-tools-border-color, 10%);

  @include clearfix;
  background: $search-tools-background;
  border: 1px solid $search-tools-border-color;
  border-radius: $base-border-radius;
  display: flex;
  justify-content: space-between;
  padding: $gutter ($gutter / 2);
  width: 100%;

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

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

  .filters {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;

    @include media($large-screen) {
      flex-direction: row;
    }
  }

  .filter {
    flex-grow: 1;
    flex-shrink: 1;
    margin: 0 0.2em 1em 0.2em;

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

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

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

      label {
        cursor: pointer;
        margin-bottom: 0;
      }
    }

    .filter-list {
      margin: 1em 0 0;
      padding: 0;

      label {
        display: inline;
      }
    }

    button.clear {
      @include position(absolute, 5px 5px auto auto);
      font-size: 0.7em;
      max-width: $clear-button-width;
    }

    .hide-options {
      margin-bottom: 0;

      ol, button {
        display: none;
      }
    }
  }

  .trigger {
    margin-top: 1.5em;

    button {
      display: block;
      padding: 0.5em 1em;
      text-align: center;
      width: 100%;
    }
  }
}

Copy JavaScript Copy CoffeeScript

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 class=clear></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();
});

Copy JavaScript Copy CoffeeScript

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.

Show Code Hide Code

Copy HTML

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

Copy Scss

.side-image {
  $base-line-height: 1.5em !default;
  $action-color: #477DCA !default;
  $dark-gray: #333 !default;
  $large-screen: 53.75em !default;
  $base-font-color: $dark-gray !default;
  $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 {
    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;
      margin-bottom: 1.3em;
      padding: 3px 8px;
      text-transform: uppercase;
    }

    p {
      color: $base-font-color;
      line-height: $base-line-height;
      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

Show Code Hide Code

Copy HTML

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

Copy Scss

.tables {
  $base-border-color: gainsboro !default;
  $base-border-radius: 3px !default;
  $base-line-height: 1.5em !default;
  $base-spacing: 1.5em !default;
  $action-color: #477DCA !default;
  $dark-gray: #333 !default;
  $light-gray: #DDD !default;
  $medium-screen: 40em !default;
  $large-screen: 53.75em !default;
  $base-font-color: $dark-gray !default;
  $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: $table-border;
  border-collapse: separate;
  border-left: 0;
  border-radius: $base-border-radius;
  border-spacing: 0;
  width: 100%;

  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: 0;
      border-left: 1px solid $table-border-color;
      padding: $table-padding;
      text-align: left;

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

  tbody {
    background-color: $table-background;

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

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

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

Show Code Hide Code

Copy HTML

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

.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;
  $action-color: #477DCA !default;
  $dark-gray: #333 !default;
  $light-gray: #DDD !default;
  $medium-screen: 40em !default;
  $large-screen: 53.75em !default;
  $base-font-color: $dark-gray !default;
  $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: 0.75em 1em;

  border-collapse: separate;
  border-spacing: 0;
  width: 100%;

  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: 0;
      padding: $table-padding;
      text-align: left;
    }
  }

  tbody {
    background-color: $table-background;

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

      button {
        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;
        }
      }
    }
  }
}

Vertical Tabs

Item 1 Item 2 Item 3 Item 4

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.

Show Code Hide Code

Copy HTML

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

.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;
  $action-color: #477dca !default;
  $dark-gray: #333 !default;
  $medium-screen: 40em !default;
  $base-font-color: $dark-gray !default;
  $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: 18.75em;
  $vertical-tab-mode: $medium-screen;

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

  li {
    list-style: none;
  }

  a {
    color: $action-color;
    text-decoration: none;
  }

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

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

    @include media($vertical-tab-mode) {
      border: 0;
      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: $action-color;
    }

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

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

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

// Based on code by Jett Miller jettmiller.net

Copy JavaScript Copy CoffeeScript

$(".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");
});

Copy JavaScript Copy CoffeeScript

$('.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