Grid

CSS file

Certify uses a 12-column, responsive, flexbox grid to provide structure and align content.

The grid consists of three distinct pieces:

• A container. There are two types of containers. The standard container centers the content and provides a max width. The container modifier class sba-l-container--fullbleed removes the max width.
• A row enables the flexbox layout. Columns can collapse into different lockups at different breakpoints to provide flexibility in the design across different viewports. There are a maximum of 12 columns in each row. Columns may collapse into multiple rows.

Default Grid

Columns without a set width will automatically layout with equal widths. For example, below are four instances of sba-l-col which are each automatically 25% wide. The columns will automatically wrap when they don't fit a single row.

<div class="sba-l-container">
  <div class="sba-l-row">
    <div class="sba-l-col">
      Column
    </div>
    <div class="sba-l-col">
      Column
    </div>
    <div class="sba-l-col">
      Column
    </div>
    <div class="sba-l-col">
      Column
    </div>
  </div>
</div>

Screen width breakpoints

Each column class can include a breakpoint "prefix" (sm, md, lg, xl), allowing you to change the column widths based on the viewport width.

An element with a sba-l-{breakpoint}-col--* class will span * columns at viewports matching breakpoint and larger.

In the example below, the cells span:

• 1/6 of the row on xl viewports, using sba-l-xl-col--2
• 1/4 of the row on lg viewports, using sba-l-lg-col--3
• 1/3 of the row on md viewports, using sba-l-md-col--4
• 1/2 of the row on sm viewports, using sba-l-sm-col--6
• The entire width of the row on viewports smaller than the sm breakpoint, using sba-l-col--12

<div class="sba-l-container">
  <div class="sba-l-row">
    <div class="sba-l-col--12 sba-l-md-col--6 sba-l-lg-col--4 sba-l-xl-col--2">
      Column
    </div>
    <div class="sba-l-col--12 sba-l-md-col--6 sba-l-lg-col--4 sba-l-xl-col--2">
      Column
    </div>
    <div class="sba-l-col--12 sba-l-md-col--6 sba-l-lg-col--4 sba-l-xl-col--2">
      Column
    </div>
    <div class="sba-l-col--12 sba-l-md-col--6 sba-l-lg-col--4 sba-l-xl-col--2">
      Column
    </div>
    <div class="sba-l-col--12 sba-l-md-col--6 sba-l-lg-col--4 sba-l-xl-col--2">
      Column
    </div>
    <div class="sba-l-col--12 sba-l-md-col--6 sba-l-lg-col--4 sba-l-xl-col--2">
      Column
    </div>
  </div>
</div>

Golden Ratios

In addition to column widths of 1-12, the grid can also be used with golden ratios. Golden ratio columns are also enabled with breakpoint prefixes.

<div class="sba-l-container">
  <div class="sba-l-row">
    <div class="sba-l-col--golden--sm">
      Column
    </div>
    <div class="sba-l-col--golden-lg">
      Column
    </div>
  </div>
</div>

Source order

Since the grid is created with flexbox, it is possible to make reverse the source order. A modifier class is a available: sba-l-row--reverse.

  <div class="sba-l-container">
    <div class="sba-l-row sba-l-row--reverse">
      [COLUMNS]
    </div>
  </div>