Layout/Flexible Grid

The Grid

The grid consists of .column elements inside .row containers. The column widths are defined as a percentage of their row containers, this is done using a lexicographical representation of the row percentage.

.one-of-one
.one-of-two
.one-of-two
.one-of-three
.one-of-three
.one-of-three
.one-of-four
.one-of-four
.one-of-four
.one-of-four
.one-of-five
.one-of-five
.one-of-five
.one-of-five
.one-of-five

Usage

  <div class="row">
    <div class="column one-of-five"><div class="alert">.one-of-five</div></div>
    <div class="column one-of-five"><div class="alert">.one-of-five</div></div>
    <div class="column one-of-five"><div class="alert">.one-of-five</div></div>
    <div class="column one-of-five"><div class="alert">.one-of-five</div></div>
    <div class="column one-of-five"><div class="alert">.one-of-five</div></div>
  </div>

Nested columns

To nest your content within the grid, add a new .row and set of .column elements within an existing .column container.

.two-of-three
.one-of-three
.one-of-three
.one-of-three
.one-of-three
.one-of-two
.one-of-two

Usage

  <div class="row">
    <div class="column two-of-three">
      <div class="alert">
        .two-of-three<br/>
        <div class="row">
          <div class="column one-of-three">
            <div class="alert success no-icon">.one-of-three</div>
          </div>
          <div class="column one-of-three">
            <div class="alert success no-icon">.one-of-three</div>
          </div>
          <div class="column one-of-three">
            <div class="alert success no-icon">.one-of-three</div>
          </div>
        </div>
      </div>
    </div>
    <div class="column one-of-three">
      <div class="alert">
        .one-of-three<br/>
        <div class="row">
          <div class="column one-of-two">
            <div class="alert success no-icon">.one-of-two</div>
          </div>
          <div class="column one-of-two">
            <div class="alert success no-icon">.one-of-two</div>
          </div>
        </div>
      </div>
    </div>
  </div>

Display Columns Right-to-Left

To display columns in right-to-left order (especially useful for mobile), use the class row.right-to-left.

.two-of-three
.one-of-three

Usage

<div class="row right-to-left">
  <div class="column two-of-three">
    <div class="alert">
      .two-of-three<br/>
    </div>
  </div>
  <div class="column one-of-three">
    <div class="alert">
      .one-of-three<br/>
    </div>
  </div>
</div>

Transitioning columns

Large screens see a .one-of-four layout, while small screens get a .mobile-one-of-two layout. For small screens the same four elements layout in a two-up grid.

.one-of-four
.mobile-one-of-two
.one-of-four
.mobile-one-of-two
.one-of-four
.mobile-one-of-two
.one-of-four
.mobile-one-of-two

Large screens see a .five-up layout, while small screens get a .mobile-three-up layout. For small screens the same five elements layout in a three-up grid.

.five-up
.mobile-three-up
.five-up
.mobile-three-up
.five-up
.mobile-three-up
.five-up
.mobile-three-up
.five-up
.mobile-three-up

Usage

  <div class="row">
    <div class="column one-of-four mobile-one-of-two">
      <div class="alert info no-icon">.one-of-four<br/>.mobile-one-of-two</div>
    </div>
    <div class="column one-of-four mobile-one-of-two">
      <div class="alert info no-icon">.one-of-four<br/>.mobile-one-of-two</div>
    </div>
    <div class="column one-of-four mobile-one-of-two">
      <div class="alert info no-icon">.one-of-four<br/>.mobile-one-of-two</div>
    </div>
    <div class="column one-of-four mobile-one-of-two">
      <div class="alert info no-icon">.one-of-four<br/>.mobile-one-of-two</div>
    </div>
  </div>