[W3Conf] Eric Meyer: “The Era of Intentional Layout”

Chris Coyier //

Eric Meyer (@meyerweb) is a CSS champion, author, and co-founder of the An Event Apart conferences. He talked about the end of an era of layout (and the beginning of a new one).

These are my notes from his presentation at W3Conf in San Francisco as part of this live blog series.

In the beginning... Tim said "Let there be markup." And then Tim divided the structure from the appearance. This is a fundamental feature of the web.

The first thing Mozilla Netscape did when get got involved with the web and extended HTML (1994) was extending its presentational abilities. Immediately breaking the clean separation between content and design.

"It was tables all the way down there for a while. Spacer GIFs and all. Yes, I say GIF with hard-G. Deal with it."

Jokes!

With IE 5, we moved into CSS.

CSS1 was a pretty short document. You could read it in an evening. It literally had no layout ability at all. Well, it had floats. But it was not meant for layout, it was to wrap text around images only (to mimic the align attribute in IE).

Floats used for layout were dangerous. For example, "float drop" - that's not good for layout. Also "float containment" is weird and still an issue today. Floats have clear though, and that's what made them truly useful for positioning.

The first major site to use positioning for layout was Wired.com by Doug Bowman. He made design decisions that were imposed by technology.

We still use floats for layout today. It's a hack and it's always been a hack. To be fair, tables were a hack as well. They weren't designed for it, but it was the closest thing to what we needed.


The vw/vh unit represents 1/100 of the viewport width or the viewport height, respectively. We can set widths and heights in these, relating them to the available space on the page. Similar to percentage, but always related to the viewport, not the parent element. It's not just for lengths though, it can be used for font-size as well, relating typography directly to the viewport.

Flexbox is a layout system that is actually designed for layout. There is a polyfill for it as well. Note: it's only for the old syntax, not the new, and the polyfill isn't quite there for the new syntax yet. You can get a lot of great control with the flexbox related properties like justify-content.

The Holy Grail layout created a header/footer/main/left/right layout with crazy "perverse" things with huge negative margin and positive padding. It was complicated and weird, but it worked. It was difficult to make changes though (e.g. fixed-fluid-fixed instead of fluid-fixed-fluid).

Flexbox makes "holy grail" like layout trivially easy. Not to mention: the source order is irrelevant. Making the main content first is just a matter of changing order.

Turning off flexbox (display: block instead of display: flex) will turn all the children into regular blocks and lay out on top of each other again. This makes a one-column (perhaps mobile) layout easy. Remember to consider source order though.

Flexboxes are by default of equal height, but they don't have to be. You can align them along the top (flex-start), bottom (flex-end), center, or baseline. THAT'S RIGHT: vertical centering in CSS (kinda). You can make all the flexboxes follow these rules, or mix and match on a per-flexbox basis.

Combine all these with content justification, and you get some pretty crazy powerful layout possibilities. Note: my article about combining old and new syntaxes for flexbox.

Grids are another new forthcoming layout system. You definite grid lines and then essentially hang content off the gridlines. "Lay this out from this grid line to this other grid line."

Grids and flexbox aren't mutually exclusive. A grid (cell?) can be a flex parent. A grid can have another grid in it. A flexbox might have a grid inside it. Yo dawg I heard you like grids in your grids... You get it.

In grids, there are new fr (fraction) units. They represent the leftover space in a grid layout. The syntax is pretty weird. Multiple values and one of them will "win out."

CSS Regions are related to layout. You still need to use an actual layout technique, but with regions you control how content flows from element to element. Note: contest on playing with regions going right now on CodePen.

"Two decades of layout hacks are coming to an end. Maybe not tomorrow, but soon, and for the rest of our lives."


This was the last talk of the conference. I thought this sentiment was nice: