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!
Why did web designer leave the restaurant? He couldn’t stand the table layout! — @meyerweb #w3conf
— Christine Bower (@chrisbean) February 22, 2013
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:
So, not to get all mushy or whatever, but this whole conference made me fall in love with web dev all over again. Thanks kids. #w3conf
— Jordan Pagels (@designerjordan) February 23, 2013
Nice talk! I would like to watch it online.
This makes me want to do more in the web! And I’m only beginning.
So when do we expect we can we use flexbox on every website?
this is going the expanding the things what we can do over web designing.
So now I’m confused – who made this joke first – Dave Rupert or Christine Bower?
I heard it from Dave first on the radio.
I’ve always admired Eric’s talk! He’s a true hero :)
Nice! Thanks for notes, Chris.
Today is much easier to be enthusiastic in web dev.
Inspiring article! @GeekChicSocial
I loved flexbox, my first touch in it was your other article.
I’ve been out of HMTL+CSS work for a few years and now I’m willing to come back. But we still need better support in browsers! It will be great to use flexbox to put relevant content in top of HTML Document and bring header and sidebars to their layout place using flexbox! True Semantic Web together with pretty and versatible layout tools!
Mobile-specific layouts will be trashed too. From the same Semantic markup we can use some CSS3 tweaks to layout for bit monitors (I have 2 30″ monitors with 2560×1600), small junk stuff and cells all together. And to think that Microsoft SharePoint 2013 presents mobile-specific presentations as the greatest news ever lol!