Documentation

*The grids on this page have additional styling for color and height to give better examples. These styles aren't in the package.

I. Intro

Flex is a powerful CSS grid framework inspired by both Skeleton and Pure. It’s responsive, so it uses percentages instead of pixel values. Here’s a few things to remember:

i. Basic Classes

Flex has 3 main classes:

• .grid
• .row
• .column(s)

.grid

.grid is the mother of all grids. In order for a grid to be styled correctly, all rows and columns must be nested within .grid (however, those elements don’t have to be the direct child).

.row

Often, we need to make sure elements stay in a row regardless of their respective heights. That’s where .row comes in. It’ll force the elements to clear other items to avoid sticky situations. It’s not required, but often helps.

.column(s)

.column and .columns activate an element’s styling. This (in conjunction with a unit) is what actually defines the width of an element.

ii. Units

In addition to these basic classes, Flex has tons of unit classes that define the width of an element. By default, it contains:

• classes .one through .twelve
• fractional classes .one-third, .two-thirds, .one-fifth, .two-fifths, .three-fifths, and .four-fifths

iii. Standard Grids vs Responsive Grids

Flex ships with 2 types of grids: standard and responsive. Standard, as you might think, is the standard type of grid. That means that if you define an element as 50% width with standard grids, it’ll always be 50% width. However, responsive grids have the ability to change size based on the width of the browser.

Both types must be nested within the .grid class and both support parent-based sizing, but there are a few differences.

Standard Grids

A standard grid would look something like the following:

<div class="grid"> <div class="four columns alpha">Element 1</div> <div class="four columns">Element 2</div> <div class="four columns omega">Element 3</div> </div>

Renders

As you can see, the elements are nested within a .grid class and each has a unit along with the .column(s) class. Since the standard number of columns in Flex is 12, the above would render 3 columns of equal widths, each roughly ⅓ the size of .grid.

You’ll also notice the .alpha and .omega classes. These classes are unique to standard grids. They define the first and lasts elements in a row and remove margin accordingly. If you leave them out, your row will wrap onto the next line.

Standard grids also support offsetting elements.

<div class="grid"> <div class="three columns alpha">Element 1</div> <div class="three columns">Element 2</div> <div class="three columns offset-by-three omega">Element 3</div> </div>

Renders

This grid renders 3 columns of equal widths, but offsets the last one to create a gap. Offsets are useful for adding space between elements and positioning elements.

An example of using fractional units looks like:

<div class="grid"> <div class="one-third column alpha">Element 1</div> <div class="one-third column">Element 2</div> <div class="one-third column omega">Element 3</div> </div>

Renders

The above is also the same as the first example. However, fractional units let us achieve some layouts that are impossible with integer units, like a 5 column layout using .one-fifth.

.no-gutter

Standard grids also support a no-gutter mode where elements won’t have any spacing between them. This is useful if you’re trying to put the contents edge to edge.

To use the no-gutter mode, the syntax is exactly the same as above except you add the .no-gutter class to the .grid.

<div class="grid no-gutter"> <div class="four columns alpha">Element 1</div> <div class="four columns">Element 2</div> <div class="four columns omega">Element 3</div> </div>

Renders

Responsive Grids

While standard grids are nice, the real mission of Flex is responsive grids. Essentially, they’re the same as above with a few distinct differences. Let’s look at an example.

<div class="grid"> <div class="sm-six columns">Element 1</div> <div class="sm-six columns">Element 2</div> </div>

Renders

You’ll notice that both .alpha and .omega are missing. Thats because all responsive grids have margins on both sides to ensure uniform margins when resizing.

Another thing you’ll see is the “sm-" prefix on the unit. Since responsive grids are dependent on the size of the browser, we have to tell the element at what size it should be a certain width. In this case, we’re saying is should be six columns wide in a small (or sm) browser width.

By default, Flex has the following prefixes and sizes:

• sm- -- 0em
• md- -- 37.5em
• lg- -- 62.5em
• xlg- -- 81.25em

Keep in mind that these sizes are arbitrary and can be changed, removed, and added to. See the customization section for instructions. These sizes are achieved through media queries using the min-width property. This allows us to omit certain sizes if we don’t want a change.

For example, a typical responsive grid might look like:

<div class="grid"> <div class="sm-twelve lg-six columns">Element 1</div> <div class="sm-twelve lg-six columns">Element 2</div> </div>

Renders

This grid will be twelve columns wide on a small and medium screens (because we didn’t define a medium size). If it’s viewed on a large or extra-large screen, it’ll be six columns wide. Make sense?

Here’s another example:

<div class="grid"> <div class="sm-twelve md-four xlg-three columns">Element 1</div> <div class="sm-twelve md-four xlg-three columns">Element 2</div> </div>

Renders

Here, the elements are twelve columns wide on small screens, four columns wide on medium and large screens, and three columns wide on extra-large and bigger screens.

Offsets are very similar too. They’re simply the size prefix (sm-, md-, lg-, xlg-) followed by the offset (offset-by-one, offset-by-four, offset-by-one-fifth, etc…).

Here’s an example:

<div class="grid"> <div class="sm-twelve md-three columns">Element 1</div> <div class="sm-twelve md-three md-offset-by-three columns">Element 2</div> <div class="sm-twelve md-three columns">Element 3</div> </div>

Renders

In the example above, the elements are 12 columns wide on small screens and three columns wide on all other screens. However, the middle element will be offset by three columns on medium, large, and extra-large screens, but not small screens.

Importance of using sm- first

Since Flex achieves its responsive grids using min-width in its media queries, it’s very important that you always use the sm- prefix on elements. If you don’t, once it’s viewed on a screen smaller than the smallest size you defined, the grids will break.

For example, the following grid will break on small screens:

<div class="grid"> <div class="md-three columns"></div> <div class="md-three columns"></div> <div class="md-three columns"></div> </div>

and this one will break on anything smaller than a large screen

<div class="grid"> <div class="lg-six columns"></div> <div class="lg-six columns"></div> <div class="lg-six columns"></div> </div>

So even if you want it to be six columns all the time (but you want to use responsive grids), use sm- like the following:

<div class="grid"> <div class="sm-six columns"></div> <div class="sm-six columns"></div> <div class="sm-six columns"></div> </div>

iv. Parent-Based Sizing

Often, you’ll have examples like those above that repeat the same styles. While you can do this, it’s repetitive and difficult to change once it’s set up. Parent-Based sizing solves this issue.

Instead of styling each child element individually, the classes are applied to the parent and the child elements are styled automatically.

The markup is similar to responsive grids. All the unit classes are applied to the parent of the elements (.grid or .row) and all child elements have the .parent class.

Here’s an example:

<div class="grid"> <div class="sm-six columns">Element 1</div> <div class="sm-six columns">Element 2</div> <div class="sm-six columns">Element 3</div> </div>

becomes

<div class="grid sm-six"> <div class="parent">Element 1</div> <div class="parent">Element 2</div> <div class="parent">Element 3</div> </div>

which renders

If you want to define multiple sizes, just apply those units the the parent.

<div class="grid sm-six lg-three xlg-four"> <div class="parent">Element 1</div> <div class="parent">Element 2</div> <div class="parent">Element 3</div> </div>

Standard Parent-Based Sizing

Parent-Based sizing also works with standard grids. Here’s a few examples

<div class="grid four"> <div class="parent alpha">Element 1</div> <div class="parent">Element 2</div> <div class="parent omega">Element 3</div> </div>

Renders

<div class="grid three"> <div class="parent alpha">Element 1</div> <div class="parent">Element 2</div> <div class="parent">Element 3</div> <div class="parent omega">Element 4</div> </div>

Renders

<div class="grid six"> <div class="parent alpha">Element 1</div> <div class="parent omega">Element 2</div> </div>

Renders

II. Customization

Not only is Flex built to be useful and easy, but it’s built specifically for customization. If you want to customize Flex you’ll need these files:

• flex.scss
• flex_functions.scss
• flex_ie.scss (only for IE8 and below)

Here’s a quick run through of each file:

flex.scss - Contains the actual generation of flex.css and all your settings. This is what outputs the final CSS file.

flex_functions.scss - This contains all the functions used in flex.scss to generate the grids

i. Editing flex.scss

Flex is based on the values of variables and lists (arrays). This makes it easy to define, add, and change things to suit your needs. There are 4 main variables you’ll need to worry about:

• $gutter
• $numOfColumns
• $breakpoints
• $fractionalColumns

$gutter

Aside from when using the .no-gutter class, all Flex grids have a gutter - that is, a space between each column element. This is where you can define that. Keep in mind that it must be a percentage for the functions to calculate the widths correctly. Also note that while you define a gutter, it’s achieved by applying half of $gutter as margins to each side of a columns element.

$numOfColumns

By default, Flex is based on a 12 column grid, but has support for up to 24 columns. If you want to change how many columns are used, just change this variable to any number from 1 - 24.

$breakpoints

Since Flex is largely focused on responsive grids, it needs some fancy media queries to help! Each project is different and will require different breakpoints, so here is where you define them.

Here’s the syntax:

$breakpoints: (prefix: breakpointSize...);

What that means is that prefix will be used as the prefix for your media queries (sm-six or lg-two) while the breakpointSize is the size at which that specific prefix will take affect ( @media only screen and (min-width:breakpointSize) {...} )

Remember, Flex’s breakpoints are calculated using min-width, not max-width, so the breakpointSize defined will be the starting point for the prefix. Also because of this, the smallest prefix should always have the breakpointSize of 0.

$fractionalColumns

Flex also supports fractional column sizes to both make things easier to remember and to allow for widths not supported by certain $numOfColumns.

The syntax:

$fractionalColumns: (columnSize: fraction);

So similarly to $breakpoints, the columnSize is used to define the width of an element (three columns, seven columns, two-thirds columns) and the fraction is the mathematical fraction of the columnSize.

So if I wanted to use grids that were 1/7 of the parent’s width, I could define something like the following:

$fractionalColumns: (one-seventh: 1/7, two-sevenths: 2/7, three-sevenths: 3/7...);

The columnSize can be whatever you want, but it makes sense for it to match the fraction. Also, any sizes defined here are calculated for all grids. That means you can use these sizes in standard (two-thirds columns) and responsive grids (sm-two-thirds columns), as well as with offsets (offset-two-thirds columns & sm-offset-two-thirds columns).

III. Tips and Tricks

i. Nesting

Flex is pretty rock-solid and can handle most things you throw at it, including nesting grids.

This is perfectly valid:

<div class="grid"> <div class="three columns alpha"> 3 Cols <br> <div class="six columns alpha">6 Cols</div> <div class="six columns omega">6 Cols</div> </div> <div class="three columns">3 Cols</div> <div class="three columns offset-by-three omega">3 Cols - Offset 3 Cols</div> </div>

and it renders

Here’s another example:

<div class="grid"> <div class="row"> <div class="three columns alpha"> 3 cols<br> <div class="six columns alpha">6 cols</div> <div class="six columns omega">6 cols</div> </div> <div class="three columns"> <div class="row"> <div class="seven columns alpha">7 columns</div> <div class="five columns omega">5 columns</div> </div> <div class="row"> <div class="three columns alpha">3 cols</div> <div class="eight columns">8 columns</div> <div class="one columns omega">1</div> </div> </div> <div class="three columns offset-by-three omega">3 Cols - Offset 3 Cols</div> </div> </div>

Renders

The same works for responsive grids.

<div class="grid"> <div class="sm-six columns"> <div class="sm-full md-four columns">sm - 12 Columns, md- 4 Columns</div> <div class="sm-full md-four columns">sm - 12 Columns, md- 4 Columns</div> <div class="sm-full md-four columns">sm - 12 Columns, md- 4 Columns</div> </div> <div class="sm-six columns"></div> <div class="sm-six columns"></div> </div>

and even parent-based sizing:

<div class="grid four"> <div class="parent"></div> <div class="parent"> <div class="seven columns">7 Columns</div> <div class="five columns">5 Columns</div> </div> <div class="parent"></div> </div>

and

<div class="grid sm-four md-three"> <div class="parent"></div> <div class="parent"> <div class="sm-full lg-six columns">sm - 12 Columns, lg - 6 Columns</div> <div class="sm-full lg-six columns">sm - 12 Columns, lg - 6 Columns</div> </div> <div class="parent"></div> </div>

*Note: because parent-based sizing targets all children and not direct children, nesting multiple parent-based elements may not render what you’re looking for.

ii. .full

Flex also has a shortcut class for sizing elements to width: 100%. This can be achieved either by using the classes for the total number of columns (by default, .twelve .columns, .sm-twelve .columns etc) or by using .full.

.full is used exactly the same way as those classes above, but just replaces the unit. Here’s a few examples:

<div class="grid"> <div class="full columns"></div> </div> <div class="grid"> <div class="sm-full md-six columns"></div> </div> <div class="grid sm-full md-four lg-three"> <div class="parent"></div> <div class="parent"></div> <div class="parent"></div> </div>

iii. .column vs .columns

As you’ve seen, Flex sometimes requires .column or .columns. You can always use either and it’ll still work the same. I try to make this easy.

iv. Mix ‘n Match

Don’t be afraid to try to mix and match (although it might eventually break). One way you can do that is to mix parent-based sizing with non-parent based sizing, like so:

<div class="grid sm-full md-four lg-three"> <div class="sm-six lg-one columns">El 1</div> <div class="parent">El 2</div> <div class="parent">El 3</div> </div>

Renders

It works for Standard Grids too

<div class="grid four"> <div class="parent alpha">4 Cols</div> <div class="two columns offset-by-one">2 Cols - Offset 1 Col</div> <div class="parent omega offset-by-one">4 Cols - Offset 2 Col</div> </div>

Renders

Using this method, you can get some pretty interesting results.

v. Where To Use?

While you can use Flex for layouts and sidebars and such, I personally recommend to use it only in content areas. If you do use it for templates, know that if you need to change something, you’ll have to change it in the HTML (and potentially in several places). You also complicate additional CSS for those elements.

Flex really shines in the content areas for laying out pages that are unique. It’s great for forms and especially for any site in a CMS (since you don’t typically touch the CSS after the template is created).

vi. Set Variables First

Since Flex is implemented in the HTML, it’s kind of pain to go back and change things after you’ve started using it. That’s why I’d recommend setting $breakpoints and $numOfColumns first. $fractionalColumns and $gutter don’t break your layout, but if you change md- from 37.5em to 20em, you’ll probably have to go back and change all the places where you used md-.

IV. Defaults

Here’s the current default values in Flex:

• $gutter: 4%
• $numOfColumns: 12
• $breakpoints:
  • sm-: 0em
  • md-: 37.5em
  • lg-: 62.5em
  • xlg-: 81.25em
• $fractionalColumns:
  • one-third: ⅓
  • two-thirds: ⅔
  • one-fifth: ⅕
  • two-fifths: ⅖
  • three-fifths: ⅗
  • four-fifths: ⅘

V. Compatibility

Flex is supported in all modern browsers and Internet Explorer 9+. If you need support for IE8 and below, use the flex_ie.scss. Note that this will force IE8 and below to use the largest size defined on each element, regardless of the size of the viewport. So if you have 4 breakpoints defined but don’t want IE to use the largest size, just remove it in the IE stylesheet.