Putting Flexbox into Practice presentation at Blend Conference

Download the slides and view the demo page for my presentation on Putting Flexbox into Practice for Blend Conference 2013, as well as get links to related articles, tutorials, and tools on Flexible Box Layout.

Yesterday I spoke at Blend Conference in Charlotte on Putting Flexbox into Practice. You’ve probably heard about flexbox (the CSS Flexible Box Layout module), since it’s the most fully developed and well supported of CSS3’s wide array of new techniques for creating page layouts, and because it allows you to create fluid, responsive layouts much more easily than current float-based methods. I talked about how to actually put it to use in the real world—today. I covered the syntax you’ll be able to one day use to build an entire multi-column page layout with flexbox, but also demonstrated some practical ideas for how to use flexbox as progressive enhancement, adding it in bits and pieces on individual page components with graceful fallbacks.

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

Putting Flexbox into Practice (PDF, 900 kb)

The demo

To demonstrate the flexbox features, I created a S’mores Builder page. Some day, I intend to turn it into a functioning site devoted to s’mores. (I really love s’mores. A lot.) But for now, check it out to see what flexbox can do.

The S'mores Builder page is laid out entirely with flexbox, with some fallbacks for non-supporting browsers in certain places.

The S’mores Builder page is responsive and laid out entirely with flexbox, with some fallbacks for non-supporting browsers in certain places.

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.

General info

Articles and tutorials

Tools

Did you like this?

14 Responses to “Putting Flexbox into Practice presentation at Blend Conference”

  1. Joe Williams

    Thank you so much for this post. I have been working for a month now to try and find a good example that helps me understand how flexbox has to be built to work like the s’mores page does. Yours is the first that actually covers it all, just by giving us some source code for the html and css to make the excellent s’mores page. Thank you!

    Reply
  2. krembo99

    This is great … except this demo site is viewed all wrong on my firefox 26.0 .. and practically not working ..

    Reply
    • Zoe Gillenwater

      Yes, as noted on the demo site and in the slides, it will not look right in Firefox and should be viewed in a browser with better flexbox support. Firefox doesn’t support flex-wrap yet. Version 28 is supposed to.

      Reply
  3. Garniture

    Thank you for the share, since i discovered flexbox, i’ve never made a single float.
    <3

    Reply
  4. neomode

    Thank you for the post, but the demo site doesn’t work. Any chance to get it?

    Reply
    • Zoe Gillenwater

      Hmm, you’re right. I’ll look into why it’s down. Thanks for the heads up!

      Reply
      • neomode

        Thanks to you. I’m a Web Design teacher in Spain and I’m preparing a demo to my pupils. I would greatly appreciate you tell me a way to get de source of your demo.

        Reply
        • Zoe Gillenwater

          The site should be back up now. Let me know if you’re still not seeing it. Good luck with your class! That’s cool that you’re showing them flexbox.

          Reply
  5. Sandra

    Very nice post !!!
    Thank you.

    There is a height problem in Internet Explorer.
    If you like i can send you a screenshot

    Reply

Leave a Reply to neomode

  • (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>