Grid
ready

Introduction

The UIF lays its content out by making use of a flex-based grid system. Flex allows us to define vertical and horizontal alignment, as well as automatic column sizing.

Note: The grid system falls back to floats (automagically) for wider browser support, this means vertical alignment and automatic column sizing won't work.

How to use it

So I want to use a grid, but how? This grid is prescriptive. Here are the basic principles:

  1. First add a .container. This wraps your entire page's content. It sets a maximum page width, and centers the container block. If you don't want the max. page width, then use .container-fluid — it only adds a little padding on its left and right, so you're never flush to the edge of the page. You should not place a .container within a .container — they're not made for nesting.
  2. Next, add an element with .row class (within the .container).
  3. Within the .row is where the .col elements live. The .row's immediate children must be .col elements.
  4. The .row and .col classes should not be combined with any other classes, apart from their respective modifier classes. E.g., you may not have .row and .input-group on the same element. But you could have .row and .row-align--right on the same element.
  5. You may nest the grids within each other. Just make sure you follow the conventions outlined in the steps above. Particularly Step 3. This is often forgotten when nesting one grid within the next.

But what if I have a block element that doesn't require a grid?

  1. Inside your .container, you can add a .row-spacer. All this does is provide space between other .row-spacers or .rows. It doesn't do any of the negative margins that a .row would do.
  2. You may then place your block-level elements inside here, without needing to use .col elements. You may also place other grids in here (following the convention above).

Examples

Full width

col
col 
<div class="row">
      <div class="col">
        <div class="col-box--debug">
          <code>col</code>
        </div>
      </div>
      <div class="col">
        <div class="col-box--debug">
          <code>col</code>
        </div>
      </div>
    </div>

Automatic column widths

col col--auto
col col--auto
col col--auto
col col--auto
col col--auto
col col--auto 
<div class="row">
      <div class="col col--auto">
        <div class="col-box--debug">
          <code>col col--auto</code>
        </div>
      </div>
      <div class="col col--auto">
        <div class="col-box--debug">
          <code>col col--auto</code>
        </div>
      </div>
      <div class="col col--auto">
        <div class="col-box--debug">
          <code>col col--auto</code>
        </div>
      </div>
      <div class="col col--auto">
        <div class="col-box--debug">
          <code>col col--auto</code>
        </div>
      </div>
      <div class="col col--auto">
        <div class="col-box--debug">
          <code>col col--auto</code>
        </div>
      </div>
      <div class="col col--auto">
        <div class="col-box--debug">
          <code>col col--auto</code>
        </div>
      </div>
    </div>

Medium breakpoint and up (example)

col col--1/2-medium
col col--1/2-medium 
<div class="row">
      <div class="col col--1/2-medium">
        <div class="col-box--debug">
          <code>col col--1/2-medium</code>
        </div>
      </div>
      <div class="col col--1/2-medium">
        <div class="col-box--debug">
          <code>col col--1/2-medium</code>
        </div>
      </div>
    </div>

Combination of breakpoints (example)

col col--1/3-medium col--1/2-small
col col--1/3-medium col--1/2-small
col col--1/3-medium 
<div class="row">
      <div class="col col--1/3-medium col--1/2-small">
        <div class="col-box--debug">
          <code>col col--1/3-medium col--1/2-small</code>
        </div>
      </div>
      <div class="col col--1/3-medium col--1/2-small">
        <div class="col-box--debug">
          <code>col col--1/3-medium col--1/2-small</code>
        </div>
      </div>
      <div class="col col--1/3-medium">
        <div class="col-box--debug">
          <code>col col--1/3-medium</code>
        </div>
      </div>
    </div>

Nested grids (example)

col col--1/2
col col--1/2
col col--1/2-small 
<div class="row">
      <div class="col col--1/2-small">
        <div class="row">
          <div class="col col--1/2">
            <div class="col-box--debug"><code>col col--1/2</code></div>
          </div>
          <div class="col col--1/2">
            <div class="col-box--debug"><code>col col--1/2</code></div>
          </div>
        </div>
      </div>
      <div class="col col--1/2-small">
        <div class="col-box--debug">
          <code>col col--1/2-small</code>
        </div>
      </div>
    </div>

Dependencies

  • src/styles/base/*.scss

Usage

Class/JavaScript Hook Description Required?
.container Fixed width container. Centers the site's contents and helps with aligning grid content Required (if not using .container-fluid). Placed on the outer-most div that will contain a grid.
.container-fluid Full width container. Centers the site's contents and helps with aligning grid content Required (if not using .container). Placed on the outer-most div that will contain a grid.
.container--space-y Adds padding to the top and bottom of the container. Optional. Placed on the .container[-fluid] element.
.row Rows are horizontal groups of columns that ensure your columns are lined up properly. Applies negative margins for spacing purposes. Required (if you plan on using columns).
.row-spacer This may be used if the content inside the .row-spacer does not require a grid, but you require the even space that occurs between rows. Optional.
.col Applies padding to offset the negative margins by the .row, as well as creating gutters between columns. Content should be placed within columns, and only columns may be immediate children of rows. Also serves as a full-width column. Required (if you plan on using rows).
.col--[FRACTION] This is the mobile-and-up column width. Sets the width of the column as a fraction of the total width. The maximum denominator is 6. Optional. E.g., .col--1/2
.col--[FRACTION]-[BREAKPOINT] The column width is applied to the breakpoint. It falls back to full-width out of the breakpoint. Optional. E.g., .col--5/6-medium for content to be this width on medium and larger screens.
.col--auto Will try to fit as many columns in a row as possible. Anything that doesn't fit, flows to the next line. Falls back to full-width on mobile. Optional.
.row--align-[left|right|center]-[BREAKPOINT] Will align the row's columns (not the text!) horizontally, for specific breakpoints. Breakpoint name can be excluded. Optional. E.g., .row--align-left-small, .row--align-right-small
.row--align-[top|bottom|middle]-[BREAKPOINT] Will align the row's columns (not the text!) vertically, for specific breakpoints. Breakpoint name can be excluded. Optional.
.col--align-[top|bottom|middle]-[BREAKPOINT] Will align the specified column (not the text!) vertically, for specific breakpoints. Breakpoint name can be excluded. Optional.