CSS3 layout modules

by Rachel Andrew

In the last few years we have seen a great leap forward in what we can achieve with CSS – web fonts, gradients, shadows and media queries are now part of our everyday toolkit.

CSS layout itself, however, has moved on little. Developers have experimented with using table and inline-block for layout, in order to mitigate the limitations of layouts based on absolute positioning and floats. Yet, these methods seem as much like hacks as those they try to replace, and come with their own problems.

The future of CSS layout looks far brighter. In this little book Rachel covers some of the exciting modules that are part of the CSS3 specification. They promise a future where we can lay out elements to a grid and easily achieve the ambitions of equal height columns or spreading content evenly across a page.

Who should read this book?

If you're a developer or designer with intermediate to advanced level knowledge of CSS and HTML and you want to know the latest techniques, this book is for you.

Topics

PART 1: MULTICOLUMN LAYOUT

This module is the most mature and has the most browser support of all the modules covered in this book, so it’s a great place to start our exploration of all that is new in CSS layout.

PART 2: CSS FLEXIBLE BOX LAYOUT

The CSS flexible box layout module, commonly referred to as flexbox, gives us a brand new layout mode in CSS – flex layout. This section takes a look at some of the main layout problems flexbox can solve.

PART 3: CSS GRID LAYOUT

The CSS grid layout module was proposed by Microsoft and is still very much a work in progress. This section focuses on examples of the current proposal as implemented in Internet Explorer 10.

PART 4: CSS REGIONS

The final two sections of this book discuss some very interesting new proposals authored by Adobe and Microsoft. While these are at an even earlier stage than grid layout, they enable layouts that until now have been impossible and are worth our time when exploring all that is new in CSS layout.

PART 5: CSS EXCLUSIONS

If you have ever needed text to flow around a shape, or wanted to cut out a shape in the middle of content, then you will be interested in the CSS exclusions and shapes module, proposed by Adobe.

Genres: Website Design, Design, Nonfiction

75 pages, Kindle Edition

First published January 23, 2013

About the author

Rachel Andrew is a British web developer, author and speaker. She is an Invited Expert to the World Wide Web Consortium (W3C) CSS Working Group, Google Developer Expert, and a former member of the Web Standards Project. She is the editor-in-chief of Smashing Magazine.

Reviews

[Boyan · Rating 4 out of 5]

This is an pretty good little introduction to what's coming in the ( hopefully ) near future in css in terms of layouts.

It gets straight to the point, provides examples and browsers support ( at the time of writing ), as well as recommendations for what is currently save for use and what's not.

[Jason]

Incredibly short, but then again it is a "pocket guide". It's a nice tour of some upcoming CSS modules. Microsoft's CSS grid proposal looks particularly promising.

[Paul Ferguson · Rating 3 out of 5]

A solid simple guide. I must put it into action sometime.