Until recently there has never been a purposeful CSS layout tool. Early web designers were forced to create their own methods for achieving designs. Although very clever, these methods were basically hacks. In this article I’ll talk about some of those hacks, and a new tool called Flexbox; a method specifically designed with layout in mind. Please note: the example in this article is intended for people with a basic understanding of Flexbox and Sass. For a complete guide to Flexbox check out this article on css-tricks.com.
Hack 1: Tables
Before CSS was fully supported in web browsers, designers used table markup to create page layouts. The intended purpose of tables is to display data, but it became a means of achieving web designs. Using tables for page layout solved a problem for designers, but was far from an ideal solution. The markup was heavy and complicated and there was no separation of concerns (structure vs style). As the web grew up and CSS became more widely supported designers began using the CSS float property for laying out pages.
Hack 2: Floats
Although it’s original intent was to allow text to flow around images, the CSS float property became prominent for creating full page layouts. In earlier times of web development we had to contend with browser bugs and clearing <div>’s. We’ve come a long way since then. The browser wars have stabilized, and with the advent of front end frameworks like Neat and Foundation, creating bulletproof, responsive layouts is less of a challenge.
Flexbox
Now we have Flexible Box Layout or Flexbox for short. A method developed with the intention of being used for layout, it allows us to create flexible layouts for both desktop and mobile in an intuitive way. With the help of a few Sass mixins we can create a pretty robust and useful grid system with Flexbox. The first thing to do is setup column width variables. In my case I’m using a 12 column grid:
// Columns
$one: 8.33%;
$two: 16.667%;
$three: 25%;
$four: 33.333%;
$five: 41.667%;
$six: 50%;
$seven: 58.333%;
$eight: 66.667%;
$nine: 75%;
$ten: 83.333%;
$eleven: 91.667%;
$twelve: 100%;
Then, I create a mixin for containers:
// Container Mixin
@mixin grid($width: $container) {
$container: $width;
display: flex;
flex-direction: row;
flex-flow: wrap;
flex: 0 1 auto;
max-width: $container;
margin: 0 auto;
}
Lastly, add a mixin for columns:
// Column Mixin
@mixin column($span: $columns) {
$columns: $span;
box-sizing: border-box;
flex: $columns $columns auto;
flex-basis: $columns;
max-width: $columns;
padding-right: $gutter;
padding-left: $gutter;
padding-bottom: $gutter*2;
}Conclusion
Part of Flexbox’s power is it’s simplicity. As you can see in the above example, we can build a responsive grid system in less than fifty lines of code. If your users are still largely on IE9 or below, you may want to stick with float based systems, otherwise, support for Flexbox is strong, and getting stronger. The days of layout hacks are behind us and the the future of CSS layout is bright.
