A customized version of Modernizr is used to detect support for flexbox. The flexbox layout is supported on Chrome, all versions of iOS, Safari 3+, IE 10+, Opera 12.10+, and Firefox 22+. Other browsers get the fluid Bootstrap 3 layout, except Internet Explorer 6 and 7 which use a fixed layout.
Unlike other frameworks, it is just a grid, and thus requires only 1594 bytes for flexgrid.css and 2068 bytes for modernizr.js; with gzip both together are less than 1.67k! A display vs. source re-ordering variant is available as an option.
I want a simple CSS grid that uses flexbox.
Most of my web projects require a grid – a method to arrange content into multiple rows and columns.
Many CSS frameworks include a grid in addition to a CSS reset, shiny buttons, and fancy typography.
But I don't want a Swiss Army knife, I just want a grid. Something simple, fast, and easily understood.
This project is a modern CSS grid that is designed to do one thing and do it well.
Flexbox was designed to solve the problem of web page layout. I want to help push the web forward.
I believe flexbox is ready.
More than 17 years ago,
<table> elements were (ab)used for web page layout. But just as using a spreadsheet isn't the best tool for desktop publishing, better ways of arranging content were developed using CSS.
The best tool available in early versions of CSS was to
<div> of content, but that had issues in that it it took those blocks out of the regular flow of the page. Over the years, several were to contain
float-ed elements. Generally known as "clearfix hacks" they are used in most current CSS grid frameworks.
With flexbox, floats and clearfix hacks are not necessary.
The Many Versions of Flexbox
Flexbox is almost a decade old. Safari was the first major browser to ship flexbox in 2003 with version 1.1. Firefox 2.0 followed in 2006, and it has continued to be refined since.
The first working draft of flexbox was published in July 2009. This is the syntax that Firefox supports and Safari had been supporting for over 5 years including in the original iPhone.
Although flexbox is more capable than existing CSS solutions, for this project I've chosen to simply achieve parity with other float-based grid frameworks. My goal is to simply broaden exposure to flexbox so more people become familiar with it.
Bootstrap is an amazing framework. It enables fast creation of well styled web sites and web applications. But Bootstrap, by default, is 100k! If you like the Bootstrap grid, but want just the grid, this project is for you.
Just like with the new Bootstrap 3 fluid grid, this framework is responsive in that it resizes automatically at widths of 768 pixels, 992 pixels, and 1200 pixels.
By design, this grid will collapse into a single column of content below 768 pixels in width. Styling for smartphones is done separately.
For those projects which won't be able to adopt Bootstrap 3 because of the decision to drop support for Internet Explorer 7, I'm hoping this grid will be a drop-in (loaded after Bootstrap) solution.
In modern browsers that support flexbox, Modernizr will add
class='webkitbox' to the
<html> element. This will cause certain CSS flexbox properties to be set or not.
In browsers which do not support flexbox, Modernizr will add
class='no-webkitbox' to the
<html> element. This will trigger the float-based Bootstrap 3 fluid layout instead of the flexbox layout.
Flexible Box Model
Add CSS Classes
Specific Changes to Modernizr
I made several changes to Modernizr after customizing the build. Rather than test for any support for the legacy 2009 flexbox syntax, I chose to test for WebKit specifically. This avoids the Firefox issues with percentage widths and others (see below).
To make these changes yourself to your own custom build, do a find and replace or run the
sed command listed in your terminal.
Find and Replace
hgroup main mark
Internet Explorer 8 and 9 do not support flexbox so will use the float-based Bootstrap 3 fluid layout. Media queries are used throughout this project to adapt to different window sizes without changing the content itself. Since IE 8 does not natively support media queries, respond.js is included to enable support.
Although market share for Internet Explorer 6 and 7 is now below one percent, there are projects which will require support for these ancient browsers. In an optional file, I've included a simple fixed grid which will only apply to IE 6 and 7. Be aware, that this is not a robust solution as it will not support nested grids. You may wish to consider leaving old IE behind and not include this file.
Firefox has supported the working draft flexbox syntax since version 2.0 in 2006 with the
-moz- prefix for all properties. Unfortunately, the candidate recommendation syntax will not be enabled by default until Firefox 22 in June 2013.
Unfortunately Firefox has several non-trivial issues with its current working draft flexbox implementation:
- percentage widths are ignored on flexbox items
- items may expand larger than the defined width
- unless a width is set,
display: -moz-boxbehaves like
Because of these issues, I've changed the default Modernizr code to exclude Firefox from testing positive for flexbox support. Until version 22, it will use the float-based Bootstrap 3 fluid layout instead of the flexbox layout.
To test flexbox support on Firefox today, type
about:config, in the URL bar and click enter. Accept the warning then search for "flexbox". Double-click the "layout.css.flexbox.enabled" row to switch the setting to
Safari and iOS
Since October 2003, Safari has supported the working draft flexbox syntax. Initially, versions 1.1 and 2.0 required the
-khtml- prefix, but starting with Safari 3.0 the prefix was changed to
-webkit-. All versions of Safari since and up to 6.0, and all versions of iOS support flexbox using
-webkit- prefixes using the 2009 syntax.
How do I use it?
Start with a
class='container'. This will be the responsive container which will hold the rest of your content.
<div class='container'> place a
class='row'. Each of these will ensure that the content stays stacked one on top of the next.
<div class='row'> place multiple
class='span#' where # represents a number between 1 and 12 (by default). Note that in the example to the right the numbered
<div class='span#'> add up to 12.
How Could It Be Made Smaller?
If you don't want to use flexbox (then how did you end up here?) you could remove all references to flexbox and stick with the Bootstrap 3 fluid grid. You then wouldn't need Modernizr.
If you don't need Bootstrap class name compatibility, you could shorten the class names. For example, rename
s1, etc. To make this easy, I've set the names using variables at the top of the original Sass file.
If you don't need IE 6 support, you could shorten the CSS selectors outside the @media blocks from the list of
.span2, etc. to
[class*='span']. Or move it to the flexgrid-ie.css file.
Speed Up Your Sites
One of the most effective changes you can do to make your web site faster is to enable gzip compression. Unless your clients are using truly ancient browsers, they support gzip transparently. Other than loading faster, your clients won't notice any difference.
One of the recent additions to Bootstrap 3 has been
pull classes. These classes allow you to reorder the visual display of content on the page in an order different than the source order. This code is available in a slightly larger version than the default.
You Might Also Like To Consider…
One of the most common reasons to include Modernizr in web projects is to improve support for HTML5. I've included a customized build which includes HTML5 support with the changes needed to support this particular project.
normalize.css makes browsers render all elements more consistently and in line with modern standards. Specifically it makes HTML5 elements render as they should. If you'd like a Sass version of normalize, I've done the conversion of it myself.
Feedback and Suggestions
My hope is that this project will encourage others to become familiar with flexbox. Almost every flexbox article I've read will say something like, "Flexbox is the future. Someday this is how we'll all layout out web pages." Well, I don't want to wait.
If you have any suggestions on how this project could be made simpler, more flexible, or robust, please fork this project on Github and send me a pull request. Thanks!