Flexbox-grid: Tiny yet powerful grid built on CSS flex
28 Oct 2013Today I’d like to introduce flexbox-grid.
It is a CSS grid that is not only inspired by Bootstrap but also uses the same class names. So you might ask yourself right now: Why the f***ing hell another grid? Well, first of all for learning and playing with the CSS flex property. Secondly, actually using flex. None of the grids above makes use of flex. That’s totally understandable because it is not yet supported by all major browsers.
However I’d like to focus solely on modern browsers and devices. Last but not least, the killer argument that seems to apply to every new CSS/JS/*** library, it is fast and tiny. And by tiny I mean really tiny. Gzipped only 660 bytes. Here is the report from cssmin.
Original: 9192 bytes. Minified: 7476 bytes. Gzipped: 660 bytes.
Topcoat has already forked the grid and added it to its portfolio.
About the project
flexbox-grid is built with Stylus.
The default number of columns is 12 and the default gutter width (space between the columns) is 1rem.
You can change that by editing var-columns and var-gutter-width inside flexbox-grid.styl.
Afterwards run grunt to get the .css and .min.css files.
Basic grid
The basic grid has four main col-* classes. One for phone, one for tablets, one for desktop and one for large
desktop. The breakpoints are the same as in Bootstrap.
col-xs-*- phones, up to 480pxcol-sm-*- tablets, 768px and upcol-md-*- desktops, 992px and upcol-lg-*- large desktops, 1200px and up
Offset classes
By using the col-*-offset-x we can shift columns to the right. This class simply adds a left margin that has the width
of x columns. Therefore the columns above and below are all perfectly aligned with the offset column.
Mix grid and offset classes
Of course you can mix the basic grid class with offset classes. You just have to make sure that in the end everything sums
up to twelve or less than twelve columns. That means you could use the following classes in one row:
col-xs-2col-xs-2 col-xs-offset-4col-xs-2 col-xs-offset-2
or
col-lg-6col-lg-2 col-lg-offset-3col-lg-1
Auto width columns
That’s a pretty cool feature of flex. You can just put as many divs with class col-auto as you want in one row and they
will automatically share the available space among them. You don’t have to think and calculate stuff like “hm .. I want four
equally wide divs in my row … in my setup each row consists of 12 columns … 12/4 is 3 and I therefore have to use
col-lg-3”.
Mix fixed width and auto width columns
Again you can mix fixed width and auto width columns without causing any layout weirdness. In the example below all
col-auto columns have a light blue background to distinguish them from the fixed width rows.
Nesting
It is also possible to nest different types of columns. Similar to Bootstrap you can start a new row within one col-*.
You just have to remember that inside this new row your columns will again sum up to a maximum number of 12.
Responsive features
The initial relase of flexbox-grid did not have any responsive features. With v1.0.0 I’ve added the same responsive
classes that Bootstrap has. You don’t have to learn anything new and switching back and forth between those two libraries
is easy as. Simply use col-xs-*, col-sm-*, col-md-* and col-lg-* to target different devices.
Conclusion
I’ve learned a lot about Stylus and the CSS flex property while working on this project. Quite often we simply take things for granted and rely on stuff that’s already available and works well. However from time to time we have to leave our comfort zone and have to think outside the box. That’s how we continuously improve our skills. Especially for mobile and low bandwidth we need to focus on performance and simplicity. It’s a good reason to rewrite everything from scratch while making use of new technologies like flex. Depending on the project you are working on you can start using flex today and enjoy all the possibilities it offers.
Tweet comments powered by Disqus