1 . 2 . 13

Our Flexible Future – Next Generation Layouts with CSS

Hands up anyone who remembers building websites in tables? Luckily that doesn’t include myself. As a relative newcomer to the field of interface development I have had little need to deal with such sites. In contemporary sites the unpredictable table is reserved for its correct use of displaying tabular data. The sites I work on are largely built using current methods of floated divs with clears and display properties. But there are changes on the horizon, a whole new way of structuring content that promises to be exciting, expansive and adaptable.

‘When can we start employing these new methods?’ I hear you ask. Well, you can start using some of them right now. Let’s take a recent project that I worked on as an example. Part of the project brief from the client was that the site should be ‘flexible’. They wanted the ability to move elements around on a page, add, delete and amend elements without needing to create new page templates.  After some research and tests, I came to a way of thinking about content structure that I feel is definitely the way forward. My approach was to avoid specificity in naming and usage of elements, and also to avoid setting widths where ever possible.  This is what is generally known as an object oriented approach, and is documented and expounded upon by some of the big names in interface.  Have a read and play with OOCSS at GitHub . Another good reading source is this article from .

The new method which I employed was using display:table and display:table-cell in conjunction with table-layout: fixed. This allowed me to create column based layouts that are completely flexible, no widths set on anything except the overall parent container. The result of this is that modules could be moved around without needing to apply classes or widths. If you have one module in a row it would fill 100% of its parent width. If you had two modules in a row then they would be 50% of the parent, simple. This has the distinct advantage over a table based layout in that, thanks to the table-layout: fixed declaration, the columns in each row will always remain at the correct width even if the content they contain is uneven.

Code snippet:

Code Snippet 1

Code Snippet 2

In the example above each of the three child elements will be exactly 1/3 the width of the parent. If the parent width changes so do the child elements, no need to calculate anything. If a fourth child element is added, all four will become ¼ the width of the parent. Brilliant! A fluid and adaptable structure without the use of a complex grid system or the need to calculate anything.

This method has its drawbacks of course, the same as any other method. But it’s always nice to have another approach at our disposal.
So what’s being proposed for the future? Well the flexible box model is the big game changer. You can read the Mozilla documentation here and have a play with a working example (Chrome only) here.

The flex-box model combined with media queries will make for much more adaptive layouts making responsive builds more intuitive and a lot more flexible. With minimal mark-up and naming we can affect a multitude of different layouts for our content. We will be free of the restrictions of floats and static widths and a whole world of possibilities will open up. Content will be flowing in all directions, jumping over elements, wrapping other elements. It’s time to get creative.

I set up a few test examples (in Chrome of course) to illustrate some of the possibilities of the flexible box model.

Code snippet:

Code Snippet 3

Code Snippet 4

Example 1

In the example above, with the aide of box-sizing: border-box I have set up a flexible 3 column layout that behaves in the way a table would. The flex: 1 1 auto declaration means the first column which contains a larger amount of content will have a greater width than the other 2 columns in order to keep a consistent height across all 3 columns. This is great if we want to maintain a layout with a clear horizontal break.
Okay, let’s mix things up a bit. How about we swap the order of our columns and throw in some percentage widths. Only CSS changes here of course, no messing with the HTML or the DOM.

Code Snippet 5

Example 2

So, we have now reversed the order of columns A and B, and set column A to 50% with of the total width of the flex container. You can start to get a picture from these basic examples of just how much control the flexible box model gives us over content structure. Once we add media queries into the mix we can affect vastly different layouts for different device widths, no more float this, clear that, position:absolute.

Another exciting proposal is CSS Regions as put forward by Adobe. Official W3 documentation here and Adobe page with link to samples (Chrome with experimental features flag enabled required) can be found here.

CSS Regions is something I’m really excited about for a number of reasons, the first of which is that with CSS regions we can truly separate content from structure. We no longer have to place any constraints on content in order to make it fit within a certain page structure; the content can now flow naturally. This means that with the use of just CSS we can re-order how things are laid out and how the content flows. We can flow from one container into another that is somewhere else on the page entirely. All this will enable web designers and developers to achieve some of the rich formatting and design that people working in the print industry take for granted.

Example 3

Whilst these features may still be experimental and a long way off from stable implementation across all platforms, they do provide us with an exciting glimpse into the future of interface design and development. Personally, I can’t wait.