Leveling Up With Flexbox presentation at Smashing Conference

Download the slides and view the demos for my presentation on practical flexbox progressive enhancement, “Leveling Up With Flexbox” for Smashing Conference in Oxford, as well as get links to related articles, tutorials, and tools on Flexible Box Layout.

Today I spoke at Smashing Conference in Oxford, England, on “Leveling Up With Flexbox.” The talk was based off my earlier flexbox presentation, but I focused less on the basic syntax, since I think most of us have already read at least a bit about that by now, and dove right into more code examples. I talked about how to actually put it to use in the real world—today. I demonstrated a bunch of practical ideas for how to use flexbox as progressive enhancement, adding it in bits and pieces on individual page components with simple fallbacks.

You can view my presentation on Slideshare or download the slides directly here:

Putting Flexbox into Practice (PDF, 3.84 mb)

You can also check out the video of the talk.

Update 23/09/14: I gave a slightly updated version of this talk at Smart Web Conference in Bucharest. You can download those slides or view them on Slideshare too.

The demos

To demonstrate the flexbox features, I’m still using my S’mores Builder page. Check it out (in a browser with good flexbox support, of course) 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.

I also created a couple of new additional, standalone demos:

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?

13 Responses to “Leveling Up With Flexbox presentation at Smashing Conference”

  1. leachiM2k

    Hey Zoe,

    I enjoyed your talk. Thank you for opening this new technology for me. Every single example is useable for me and my sites.

    I think it’s time to begin with the use of flex boxes.

    Reply
    • Zoe Gillenwater

      Yes! So excited that Firefox finally supports flex-wrap. I wasn’t able to update the landing page copy while I was at the conference due to wifi issues, and I haven’t had a chance to update it since then because of moving house, but I finally did so today. The browser support info on that page is now up to date. Thanks!

      Reply
  2. Westley Knight

    Firstly I wanted to say that your talk at Smashing Conf was brilliant.

    Back in July last year I wrote about not being ready to use flexbox, but following your talk and the way you broke it down in to what is essentially a progressive enhancement – well – it’s completely changed my mind.

    My next project I will be progressively enhancing with flexbox at every opportunity.

    So thank you for making me want to use flexbox sooner than I thought I would! :o)

    Reply
  3. Rob

    Nice talk, and cool demo site. On the demo site it says, “The flexbox demo will look correct in Chrome, Opera, and IE 10 (mostly).”

    Just so you know, it works great in Safari also.

    Reply
    • Zoe Gillenwater

      You’re completely right. I wasn’t able to update the home page copy right away, but I finally did so today, so the browser support info is now up to date. Thanks!

      Reply

Leave a Reply to Zoe Gillenwater

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