Layout classes

Boxes

Boxes are simple layout elements that add background color to an element. Use the .box class on your HTML element to achieve this:

<div class="box">This is a box.</div>

<div class="inverted box">This is also a box, but the colors are reversed</div>

<div class="transparent box">
  This is another box, but with no background color.
</div>

Centered box

<div class="center">Centered box</div>

Cluster

Normal cluster

<div class="cluster">
  <a href="#!" class="box">Link 1</a>
  <a href="#!" class="box">Link 2</a>
  <a href="#!" class="box">Link 3</a>
  ...
</div>

Spaced cluster

Items will be distributed in the available space.

<div class="spaced cluster">
  <a href="#!" class="box">Link 1</a>
  <a href="#!" class="box">Link 2</a>
  <a href="#!" class="box">Link 3</a>
  ...
</div>

End-justified cluster

Items will be aligned to the end of the screen.

<div class="end-justified cluster">
  <a href="#!" class="box">Link 1</a>
  <a href="#!" class="box">Link 2</a>
  <a href="#!" class="box">Link 3</a>
  ...
</div>

Center-justified cluster

Items will be aligned to the center of the screen.

<div class="center-justified cluster">
  <a href="#!" class="box">Link 1</a>
  <a href="#!" class="box">Link 2</a>
  <a href="#!" class="box">Link 3</a>
  ...
</div>

Sidebar

<div class="with-sidebar">
  <div class="sidebar box">
    <!-- Your sidebar -->
  </div>
  <div class="not-sidebar">
    <!-- Your main content -->
  </div>
</div>