Layout

All layout selectors are prefixed with l-.

Container column

Fixed max-width, centered column for site content with a 20px side padding. Also clears floats.

  <div class="l-container">
    <!-- Content here -->
  </div>

  <br>

  <div class="l-container l-container--medium">
    <!-- Content here -->
  </div>

  <br>

  <div class="l-container l-container--narrow">
    <!-- Content here -->
  </div>

Content/sidebar column

  <div class="l-container">
    <div class="l-content">
      <!-- Content here -->
    </div>
    <div class="l-sidebar">
      <!-- Content here -->
    </div>
  </div>

Columnar

  <div class="l-container">
    <div class="l-columnar">
      <div class="l-columnar-item">
        <!-- Content here -->
      </div>
      <div class="l-columnar-item">
        <!-- Content here -->
      </div>
      <div class="l-columnar-item">
        <!-- Content here -->
      </div>
    </div>
  </div>