Layout

The layout includes page containers and a responsive, 12-column grid system.

Contents

Container

Center your page’s contents with a .container.

<div class="container">
  <!-- contents here -->
</div>

The container applies width: 1240px; and uses horizontal margins to center it.

Additional Containers

Besides the standard .container, you can also use:

  • .container-fluid for a fullwidth container
  • .container-padded for a .container that has padding on either side
  • .container-yellow and .container-gray for colored containers

.container-padded .container-yellow 

<div class="container-padded container-yellow">
  <p>
    .container-padded .container-yellow
  </p>
</div>

Grid

How it works

The grid is pretty standard — you create rows with .row-md or .row-lg and individual columns with a .col-* class. Here’s how it works:

  • Add a .container to encapsulate everything and provide ample horizontal gutter space.
  • Create your outer row to clear the floated columns with <div class="row-md"> or <div class="row-lg">.
  • Add your columns with individual <div class="row-...">s.

Demo

In practice, your columns will look like the example below.

.col-2
.col-10
.col-6
.col-6
.col-8
.col-4 
<div class="container example">
  <div class="row-md">
    <div class="col-2">
      .col-2
    </div>
    <div class="col-10">
      .col-10
    </div>
  </div>

  <div class="row-md">
    <div class="col-6">
      .col-6
    </div>
    <div class="col-6">
      .col-6
    </div>
  </div>

  <div class="row-md">
    <div class="col-8">
      .col-8
    </div>
    <div class="col-4">
      .col-4
    </div>
  </div>
</div>

Cards

Cards are used to display modular content. A .card-container is used to wrap the content and individual cards can be stacked inside of columns (within a .card-row-md).

.card
.card
.card 
<div class="card-container example">
  <div class="card-row-md">
    <div class="col-4">
      <div class="card">
        .card
      </div>
    </div>
    <div class="col-4">
      <div class="card">
        .card
      </div>
    </div>
    <div class="col-4">
      <div class="card">
        .card
      </div>
    </div>
  </div>
</div>

Sections

Sections are used to define separate areas within a single card. A lone section may be used to add padding to a card. Sections can have headings too (.section-header).

.section 
<div class="card-container example">
  <div class="card">
    <div class="section">
      .section
    </div>
  </div>
</div>

Actionable Sections

To denote an interactive section add the .actionable class or use a tags instead of a div.

.section .actionable
.section (anchor) 
<div class="card-container example">
  <div class="card">
    <div class="section actionable">
      .section .actionable
    </div>
    <a class="section">
      .section (anchor)
    </a>
  </div>
</div>

Padding Options

You can change the sections default padding by adding the following classes .no-padding, .padding-sm, or .padding-lg.

.section .no-padding
.section .padding-sm
.section .padding-lg 
<div class="card-container example">
  <div class="card">
    <div class="section no-padding">
      .section .no-padding
    </div>
    <div class="section padding-sm">
      .section .padding-sm
    </div>
    <div class="section padding-lg">
      .section .padding-lg
    </div>
  </div>
</div>

Demo

Putting it all together. There is also a built in class .no-background-color that creates a nearly transparent card. We have also built out a header that works well inside of the .card-container.

The default background color for a card is white, but you can change this by overriding the background-color property in the .card class.

 .card {
   &.green-background {
     background-color: $color-green;
   }
 }
Hello World
.section .section-header
.section .actionable
.section .actionable
.card .green-background
.card .no-background-color 
<div class="card-container example">
  <div class="header row-md">
    <div class="col-6">
      <div class="title">Hello World</div>
    </div>
    <div class="col-6">
      <div class="buttons">
        <button class="button secondary-action">Action</button>
      </div>
    </div>
  </div>
  <div class="card-row-md">
    <div class="col-4">
      <div class="card">
        <div class="section section-header">
          .section .section-header
        </div>
        <div class="section actionable">
          .section .actionable
        </div>
        <div class="section actionable">
          .section .actionable
        </div>
      </div>
    </div>
    <div class="col-8">
      <div class="card green-background">
        <div class="section">
          .card .green-background
        </div>
      </div>
      <div class="card no-background-color">
        <div class="section">
          .card .no-background-color
        </div>
      </div>
    </div>
  </div>
</div>