Switch to Wilmington
DesignDevelop
Version 4.5.1
Overview

Flexbox Grid

Currency uses the Flexbox Grid framework for easy distribution of items within a layout. Grids can be nested for alignment on multiple levels. They can also be made responsive by allowing multiple sizes on one element.

12
4
8
6
6
Responsive
Responsive modifiers enable specifying different column sizes, offsets, alignment and distribution at xs, sm, md & lg viewport widths. These classes are stackable to create dynamic responsive behavior. If the smallest viewport chosen isn't reached (ex: no viewport smaller than md is present but the screen is smaller than the md viewport), the content will fill the full 12 columns.
Variants
  • l-flex-col--xs-1
  • l-flex-col--xs-2
  • l-flex-col--xs-3
  • l-flex-col--xs-4
<div class="l-flex-row">
  <div class="l-flex-col--xs-12">
    Content
  </div>
</div>
Copy
8
6
3
Offsets
Offset a column to the right side of the container using a class modifier. These classes are stackable to create dynamic responsive behavior. There is also available classes that will offset a column as far to the right as possible in addition to one that will offset all columns after it as far to the right as possible.
<div class="l-flex-row">
  <div class="l-flex-col--xs-offset-3 l-flex-col--xs-9">
    Content
  </div>
</div>
Copy
col
col
col
col
col
Auto Width
Add any number of auto sizing columns to a row. Let the grid figure it out.
<div class="l-flex-row">
  <div class="l-flex-col--xs">
    Content
  </div>
  <div class="l-flex-col--xs">
    Content
  </div>
</div>
Copy
col
col
col
col
col
col
col
Nesting
Nest grids inside grids inside grids. Simply add a new row inside of a grid and repeat as many times as needed.
<div class="l-flex-row">
  <div class="l-flex-col--xs">
    <div class="l-flex-row">
      <div class="l-flex-col--xs">
        Content
      </div>
      <div class="l-flex-col--xs">
        Content
      </div>
    </div>
  </div>
</div>
Copy
.l-flex-start--*
.l-flex-center--*
.l-flex-end--*
.l-flex-top--*
.l-flex-middle--*
.l-flex-bottom--*
Alignment
Add classes to elements to align children to the start or end of a row, as well as the top, bottom, or center of a column.
<div class="l-flex-row l-flex-center--xs">
  <div class="l-flex-col--xs">
    Content
  </div>
</div>
Copy
.l-flex-around-*
.l-flex-around-*
.l-flex-between-*
.l-flex-between-*
Distribution
These classes will distribute space as directed around items within the grid. Use .around to move space evenly around an element within a grid and .between to move space between elements within a grid.
<div class="l-flex-row l-flex-around--xs">
  <div class="l-flex-col--xs">
    Content
  </div>
  <div class="l-flex-col--xs">
    Content
  </div>
</div>
Copy
Row 1
Row 2
Row Breaks
Insert a row break to separate content in two rows that, combined, do not reach the full width of the grid.
<div class="l-flex-row">
  <div class="l-flex-col--xs-7">
    Content
  </div>
  <div class="l-flex-row--break"></div>
  <div class="l-flex-col--xs-4">
    Content broken to next line
  </div>
</div>
Copy
1
2
.l-flex-first--*
2
3
.l-flex-last--*
.l-flex-column--reverse
1
2
3
Reordering
Use Flexbox classes to reorder or reverse elements in a grid without altering their structure in the code.
<div class="l-flex-row">
  <div class="l-flex-col--xs l-flex-last--xs">
    Content
  </div>
  <div class="l-flex-col--xs">
    Content
  </div>
  <div class="l-flex-col--xs">
    Content
  </div>
</div>
Copy