Tempo

Responsive Grid System

View on Github

12 Column Flexible Grid

You probably don't need a grid system, but here you go

.col-8
.col-4
.col-6
.col-6
.col-4
.col-4
.col-4
.col-3
.col-3
.col-3
.col-3
.col-2
.col-2
.col-2
.col-2
.col-2
.col-2
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1

Basic Usage

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

Nesting

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

Reversed Order

First
Second
<div class="container">
  <div class="row">
    <div class="col-right col-6">First</div>
    <div class="col-right col-6">Second</div>
  </div>
</div>

Pre/Post Margins

.col-pre-2
.col-post-2
<div class="container">
  <div class="row">
    <div class="col col-4 col-pre-2">.col-pre-2</div>
    <div class="col col-4 col-post-2">.col-post-2</div>
  </div>
</div>

Centered Columns

.col-center
<div class="container">
  <div class="row">
    <div class="col-center col-8">.col-center</div>
  </div>
</div>

Mobile Grid

Works at all screen widths

.mobile-col-6
.mobile-col-6
.mobile-col-4
.mobile-col-4
.mobile-col-4
.mobile-col-3
.mobile-col-3
.mobile-col-3
.mobile-col-3
.mobile-col-2
.mobile-col-2
.mobile-col-2
.mobile-col-2
.mobile-col-2
.mobile-col-2
<div class="container">
  <div class="row">
    <div class="mobile-col mobile-col-6">.mobile-col-6</div>
    <div class="mobile-col mobile-col-6">.mobile-col-6</div>
  </div>
</div>

Mixed Mobile & Desktop Grid

.mobile-col-6.col-8
.mobile-col-6.col-4
<div class="container">
  <div class="row">
    <div class="mobile-col mobile-col-6 col-8">.mobile-col-6.col-8</div>
    <div class="mobile-col mobile-col-6 col-4">.mobile-col-6.col-4</div>
  </div>
</div>

Centered Single Columns

Non-floated, max-width based columns

1
1
1
1
1
1
1
1
1
1
1
1
.container-col-10
.container-col-8
.container-col-6
<div class="container-col-10">.container-col-10</div>
<div class="container-col-8">.container-col-8</div>
<div class="container-col-6">.container-col-6</div>

Get Started Now

Read the documentation and get started on Github.

View on Github