Reflex

A lightweight responsive flexbox grid with cross browser support, an inline-block fallback and no polyfills

• docs
• demo
• npm

Reflex gives you the ability to easily take advantage of flexbox for laying out a grid while having a reliable fallback for older browsers that do not support flexbox. Browser support for flexbox is in a pretty good state right now and is growing all the time. At the time of writing, global flexbox support is at 95.31% so I propose that it's time to start taking advantage of flexbox and accept that the inline-block fallback won't support everything.

Where flexbox isn't supported, your basic grid structure will remain intact and most of the layout classes still work. Try the docs or demo pages out in a non-flexbox browser to see for yourself!

The benefits are:

• It's lightweight - 12KB in it's minified form and 1.7KB gzipped
• Where flexbox is supported, grid cells are all the same height by default
• Reflex grid cells never push each other out of the way (as with floated grids)
• Supports semantic elements e.g. you can use ul as a grid
• Supports nested grids
• Good cross browser support
• Built in both Sass/SCSS and LESS
• Built using BEM syntax
• Easily customizable and extendable

Intended use:

• Creating complex nested grids which take advantage of flexbox layout properties
• Generating a reliable grid with dynamic content e.g. a list of products
• An addition or replacement to your current css framework
• A set of vendor-prefixed Sass or LESS mixins ready to be incorporated into an existing framework
• A set of vendor-prefixed helper classes to get your flexbox solution off the ground faster

Usage

Compiled CSS

You can use the compiled css directly by downloading either the minified or non-minified version.

Via github

You could clone this repo via github which would allow you to modify the variables such as the number of columns or the breakpoints.

Via npm

npm install reflex-grid