The Future of CSS Layout presentation at Future of Web Design conference

Download the slides for my presentation on The Future of CSS Layout for the Future of Web Design NYC 2012 conference, as well as get links to related resources on flexible box layout, new CSS3 layout-related modules, and other float-alternative layout techniques.

Today I spoke at Future of Web Design in New York on The Future of CSS Layout. For a decade we’ve been using floats for creating CSS layouts, and while they’re still the best choice for creating most multi-column designs, we’ve all been frustrated by their quirks and limitations. So in this presentation, I talked about some of the new and exciting CSS layout techniques that are either working right now, right around the corner, or a little ways down the road. I talked about how to use not only inline-block and table-cell display, but also how to use the Flexible Box Layout module in practical ways as a progressive enhancement technique for the layouts you’re crafting today.

You can view the slides on SlideShare, or download the slides here:

The Future of CSS Layout (PDF, 2 mb)

Flexbox Demos

I showed a few examples of how to use Flexible Box Layout and wanted to share my demo files with you so you could poke around in the code  if you like. Make sure to view these files in Chrome to see the correct layout. The second and third files have fallback CSS in place so that they still look fine in other browsers; it was not part of my presentation to do that with the first demo.

Related resources

Here are several links to related resources, a few of which are in the slides plus many more that were not but which I recommend and think you’ll find useful.

The W3C CSS3 specs I covered

Flexible Box Layout

Other CSS3 layout techniques

display:table/table-cell

display:inline-block

Related Posts:

Did you like this?

14 Responses to “The Future of CSS Layout presentation at Future of Web Design conference”

  1. Jon Kempf

    I wanted to research buying your book Stunning CSS3, but it seems your links on the book page are broken. I found it on Barnes and Noble, but still I think you could do with a more obvious call to action on that buy page. Just wanted to give you a heads up!

    Reply

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>