Skip to content
This repository has been archived by the owner on Jun 15, 2022. It is now read-only.
/ reflex Public archive
forked from leejordan/reflex

responsive flexbox grid with inline-block legacy support

License

Notifications You must be signed in to change notification settings

LOUISINTERNET/reflex

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Reflex

Release npm downloads

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

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

About

responsive flexbox grid with inline-block legacy support

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • SCSS 100.0%