Reflex grid

What is reflex? #

Reflex gives you the ability to easily take advantage of flexbox for laying out a grid while having a reliable inline-block fallback for older browsers.

At the time of writing, global flexbox support is at 94.1% (excluding browsers with outdated or partial support) 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 this page out in a non-flexbox browser to see for yourself!

Why use reflex? #

• It's lightweight - 12KB in it's minified form and 1.8KB 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

<div class="grid">
    <div class="grid__col-6">
        <content>
    </div>
    <div class="grid__col-6">
        <content>
    </div>
</div>

.grid

example: grid

This is the top level element and is similar to a row in bootstrap. It sets the following properties:

• display: flex
• flex-wrap: wrap

.grid__element

example: grid__col-xs-6

This is a child element of .grid and is similar to a col-x in bootstrap. It sets the following properties:

• display: flex
• flex-direction: column

.grid--modifier

example: grid--align-end

Modifier classes can be applied to both the grid and grid__element. Further examples include:

• grid--no-wrap
• grid--align-end
• grid--justify-center

Reflex falls back to an inline-block grid for browsers that do not support flexbox. Reflex uses some css hacks to help the inline-block grid work on older browsers. It's important to note that some of the features of flexbox do not have an equivalent in the inline-block fallback so not everything will work in the fallback, but your grid will remain intact.

If you want to use the grid with breakpoints in ie8 and below you will need to use respond.js which enables media query support in those browsers via JavaScript and html5Shiv if you wish to use html5 elements such as section

It is possible for this framework to support ie6. You can make a tiny change to enable support but it greatly increases the filesize of the css. Look in _mixins.scss (Sass) or mixins.less (LESS) for the commented line.

Divs #

<div class="grid">
    <div class="grid__col-6">
        <content>
    </div>
</div>

Unordered list #

<ul class="grid">
    <li class="grid__col-6">
        <content>
    </li>
</ul>

Html5 elements #

<section class="grid">
    <article class="grid__col-6">
        <content>
    </article>
</section>

By default, the flex-wrap property of a display: flex element is set to nowrap but because this is a grid framework we generally need our grid to wrap so we explcitly set flex-wrap: wrap on our grid element

grid__col-x elements do not wrap by default, but you can make them do so by using the modifier grid--wrap.

In the inline-block fallback your grid columns will always wrap when they add up to 100% width (12 column by default).

These modifers set the value of align-content which determine the position of your grid elements when there is extra space available in the cross-axis (usually because you've set a height on the grid that is larger than the contents). These modifiers can be added to your grid element but also to the grid__col-x elements inside the grid.

This modifier has no effect when there is only one line of grid__col-x elements in the grid so cannot be used when grid--no-wrap is present on the grid or when you only have a single row of columns

It's possible to set up a footer section in a grid__col-x element that is always aligned to the bottom by using grid__cell-footer. This footer element is set up as a flex box so all the usual grid modifers work on it.

• Consectetur adipiscing elit, sed do eiusmod.

  grid__cell-footer

• Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et sagittis dui. Maecenas rhoncus justo aliquam urna finibus tincidunt et ut mauris.

  grid__cell-footer

By default, grid__col-x elements have padding to space the grid out. It's possible to override this in all grid__col-x child elements in a grid by applying the modifer grid--bleed to your grid element.

• Consectetur adipiscing elit, sed do eiusmod.

• Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et sagittis dui. Maecenas rhoncus justo aliquam urna finibus tincidunt et ut mauris.

You can override the padding on individual grid__col-x elements by using grid__col--bleed.

• Default

• grid__col--bleed applied

You can override the left and right padding on individual grid__col-x elements by using grid__col--bleed-x.

• Default

• grid__col--bleed-x applied

You can override the top and bottom padding on individual grid__col-x elements by using grid__col--bleed-y.

• Default

• grid__col--bleed-y applied

You can add a background image to grid__col-x elements by using grid__col--bg.

• You can add a background image to grid__col-x elements by using grid__col--bg.

You can apply padding to individual grid__cell elements by using grid__cell--padding-x.

• padding-sm

• padding-md

• padding-lg