Version 2.x Reference

Essentially the same as version 1.x, with an addition of a Flex box based grid.

Getting Started
Grid Sizes
Flexbox Order

Getting Started

There are a number of ways to use it. Same as before, there are a number of grid sizes.

Add the the-flex-grid class to enable the grid. It has the same basic structure as before, in that you have rows, and columns nested below each other.

 <body class="the-flex-grid">
   <div class="a-row">
     <div class="a-column">
     </div>
   </div>
 </body>

Flex Grid Sizes

Default 1140px Grid

 <body class="the-flex-grid">
 </body>

Medium 960px Grid

 <body class="the-flex-grid medium">
 </body>

Small 800px Grid

 <body class="the-flex-grid small">
 </body>

Flexbox Order

One

The one class ensures the column size is kept the same, and then wraps accordingly.

 <body class="the-flex-grid">
   <div class="a-row">
     <div class="a-column one">
     </div>
   </div>
 </body>

Two

The two class ensures the column is twice the size of other columns, for example when used in conjunction with an element with a one class.

 <body class="the-flex-grid">
   <div class="a-row">
     <div class="a-column two">
     </div>
   </div>
 </body>

Three

The three class ensures the column is three times the size of other columns when used with other flex classes.

 <body class="the-flex-grid">
   <div class="a-row">
     <div class="a-column three">
     </div>
   </div>
 </body>