Flexr Documentation

Current Release: Version 2.1.0

Check out Current Release Info for more details.

Column/Gutter Widths and Break Points

Breakpoint NamePhone PortraitPhone LandscapeTablet PortraitTablet LandscapeDesktop
Breakpoint Value470px740px940px1180px>1180px
Column Sizeauto~31px~44px~60px~68px
Gutter Size16px16px24px30px30px

First Thing’s First

You gotta link the Flexr Grid CSS before your CSS.

<head>

   ...

   <link href=".../flexr.min.css" rel="stylesheet">

   <link href=".../your.css" rel="stylesheet">

   ...

</head>

Setting Up

Here’s the basic structure:

<container>

   <row>

       <column(s)>

           your stuff!

       </column(s)>

   </row>

</container>

A container can be practically anything: a div, section, header, nav, etc., even the body; just something to contain your rows and columns. It doesn’t even need a special class.

Rows and columns can also be practically anything: you can have a ul as a row, and its li elements as columns.

One Class Will Do

Creating a column requires only one class col- defined by its size [1–12] with no need for any offset columns.

<div class="row">

   <div class="col-6">...</div>

   <div class="col-6">...</div>

</div>

Flexr is a 12 column grid.

If you’d like to use a column with a width that you define (i.e. for a logo), simply give the column the class col-x and define the width in your css.

Defining Columns

Shrinking Columns is the default type.

To define Expanding Columns, all you need to do is add the expanding class expand in the parent row:

<div class="row expand">

   <div class="col-3">...</div>

   <div class="col-3">...</div>

   <div class="col-3">...</div>

   <div class="col-3">...</div>

</div>

The only canidates for Expanding Columns are the one, two, and three columns. When the screen reduces to the size of tablet portrait, these columns will expand automatically for smaller screens. This will only work if the row is evenly populated with these columns.

To create Stretching Columns, just add the stretching class stretch in the parent row. Stretching Columns make their parent row full width to its parent, and divide the space between themselves equally with no gutters.

See the difference in behavior on the Flexr Grid Page.

Switching Column Sizes

Sometimes at certain screen sizes you’d like the column to be specifically bigger or smaller. Flexr has four special prefixes for switching that you can use. All you need to do is attach the prefix that matches the breakpoint where you want to change with the new column size:

tl-[col]
Tablet Landscape
tp-[col]
Tablet Portrait
pl-[col]
Phone Landscape
pp-[col]
Phone Portrait

Where [col] follows the same column class name structure.

<div class="row">

    <div class="col-5 tp-col-6">...</div>

    <div class="col-7 tp-col-6">...</div>

 </div>

Switching column sizes implies that you don’t want expanding to happen automatically, so adding the expand class to the parent would not work.

Justifying Columns

The default justification of how the columns populate is centered. To change the justifaction, just add the class left for left-justification or right for right-justification to the parent row. For example, left-justification:

<div class="row left">

   <div class="col-4">...</div>

</div>

Flexr-Use Notification

If you’d like to indicate on your site that you’re using Flexr, here are some badges you can link to:

https://flexrgrid.com/host/flexr-logo-use.svg

https://flexrgrid.com/host/flexr-logo-use-black.svg

https://flexrgrid.com/host/flexr-logo-use-white.svg

Current Release Info

Version: 2.1.0

Date:

Notes: Adds classes ‘left’ and ‘right’.

File Size: 3.1KB

Future Release Update(s): Flexr 3 coming soon! MAJOR changes. Stay-tuned.

Deprecation Warning(s): Class names ‘exp’, ‘fill’, ‘jus-l’, and ‘jus-r’ will be deprecated by Version 3; please use ‘expand’, ‘stretch’, ‘left’, and ‘right’, respectively, instead.

If you have any questions or issues, please ask/report using GitHub Issues.

Flexr Grid

A responsive grid for modern browsers. Try it!