Layout Components

Containers

A container may be any element with a .container class. It adds padding to all sides.

I am a container 
<div class="container">
  I am a container
</div>

Columns

You can create a .columns element and add as many .column children you want inside, and they will alway span equal width. This is all possible thanks to flexbox.

.column
.column
.column
<div class="columns">
  <div class="column">
    <div class="box">.column</div>
  </div>
  <div class="column">
    <div class="box">.column</div>
  </div>
  <div class="column">
    <div class="box">.column</div>
  </div>
</div>

The .columns class comes with the -unpadded modifier to remove default padding.

.column
.column
<div class="columns -unpadded">
  <div class="column">
    <div class="box">.column</div>
  </div>
  <div class="column">
    <div class="box">.column</div>
  </div>
</div>

You may nest a .columns container inside a .column and it will take the width of the parent column and make equal width children. It’s a good idea to add the -unpadded modifier to the nested .columns element to lessen padception.

.column
I am
nested
Ignore me.
<div class="columns">
  <div class="column">
    <div class="box">.column</div>

    <!-- Nested .columns, because why not -->
    <div class="columns -unpadded">
      <div class="column">
        <div class="box">I am</div>
      </div>
      <div class="column">
        <div class="box">nested</div>
      </div>
    </div>
  </div>

  <div class="column">
    <div class="box">Ignore me.</div>
  </div>
</div>

Grid

Please consider learning CSS Grid. But if that’s not your cup of tea, you can use the grid system included.

.-one
.-eleven
.-two
.-ten
.-three
.-nine
.-four
.-eight
.-five
.-seven
.-six
.column
.-twelve
<div class="columns -unpadded">
  <div class="column -one">
    <div class="box">.-one</div>
  </div>
  <div class="column -eleven">
    <div class="box">.-eleven</div>
  </div>
</div>

<div class="columns -unpadded">
  <div class="column -two">
    <div class="box">.-two</div>
  </div>
  <div class="column -ten">
    <div class="box">.-ten</div>
  </div>
</div>

<div class="columns -unpadded">
  <div class="column -three">
    <div class="box">.-three</div>
  </div>
  <div class="column -nine">
    <div class="box">.-nine</div>
  </div>
</div>

<div class="columns -unpadded">
  <div class="column -four">
    <div class="box">.-four</div>
  </div>
  <div class="column -eight">
    <div class="box">.-eight</div>
  </div>
</div>

<div class="columns -unpadded">
  <div class="column -five">
    <div class="box">.-five</div>
  </div>
  <div class="column -seven">
    <div class="box">.-seven</div>
  </div>
</div>

<div class="columns -unpadded">
  <div class="column -six">
    <div class="box">.-six</div>
  </div>
  <div class="column">
    <div class="box">.column</div>
  </div>
</div>

<div class="columns -unpadded">
  <div class="column -twelve">
    <div class="box">.-twelve</div>
  </div>
</div>

By adding a modifier -#{number} that column will span that many columns in a 12 column max grid. Columns with no modifier classes will span the remaining space to fill the grid.