Reflex.gs

Overview

Reflex.gs is built following the principle of progressive enhancement. It is actually a solid grid implementation that upgrades to flex if the browser has specific support. You can check out the same demo without flex here.

How it works

The default layout runs on floats. Modernizr (an awesome feature detection library) adds a class to the html, which enables flex on rows and columns. You can specify a bunch of flex-related properties, but they won't be effective unless you specify display: flex on the element. This is what we're doing with Modernizr.

If you had a look at the code, you might notice that we're not targeting flexbox support directly (we're testing against the support for flex-wrap instead). Indeed, browser support is, at the moment, pretty good. However, if you have a closer look at the support details, you'll notice that a great deal of browsers actually supporting the display: flex property don't support wrapping. This means that unlike floats, your columns will not be pushed down if their total width exceeds that of the container — they will overflow the container.

Usage

Check the source code (under src/) and treat your own project as the main.scss file. Or, you can drop in the compiled css found in the dist/ directory. Download Reflex.gs

Class Reference

• .row: flex container, must be used wrap columns (also has the clearfix for floating columns).
• .col col-{namespace}: this creates a column that will grow/shrink depending on available space in the defined namespace (flex-only supported feature).
• .col col-{namespace}-{number}: this creates a column that span the specific number of columns in the defined namespace. Valid numbers are (e.g.) 1-12.
• .off-{namespace}-{number}: this will offset a column by a specific number of columns in the defined namespace. Valid numbers are (e.g.) 1-11.

Default valid namespaces are xs, sm, md, lg. The xs namespace is default and uses no media queries. Learn how to override namespaces.

Overriding Namespaces & Variables

Configuration may be achieved by changing the values in the _rflx.variables.scss file. Reflex.gs declares a variable $bp-namespace-obj (a sass map). This variable defines the breakpoints that you'd like to set and their associated namespaces.

Default configuration:

/* _rflx.variables.scss */

$number-of-columns: 12;
$gutter-width: 20px;

$bp-namespace-obj: ( 
  (xs),
  (sm, 768px),
  (md, 992px),
  (lg, 1200px) 
);

You can add your own namespaces and breakpoints, the grid can accept as many as you give it. Reflex.gs is built from a mobile first approach, meaning you should always keep your base namespace first, this will ensure that the others cascade over it correctly.

Columns Demo

Column Offsets Demo

Responsivity By Combining Namespaces Demo

Drag browser around to test responsive breakpoints.

Intelligent Columns

Let the flex columns take up all the required space.

Even Heights

Flex columns will have even heights - neat!

Psst! With flexbox, you can easily vertically center content! just add a class:

.flex-center-v {
  @include justify-content(center);
}

Nesting

Reflex.gs supports grid nesting.