Blog

All thoughts and opinions in my blog are my own and do not represent the position of my employer.

Leveling Up With Flexbox presentation at Smashing Conference

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)

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

Related Posts:

Help me declutter before I move overseas

I’m excited to announce that I’m about to start a new position as a UX designer for Booking.com. To do so, I’m moving from the US to Amsterdam in the Netherlands! For the past several weeks, my husband and I have been busy preparing for such a big move, and a big part of that has been decluttering. One thing that I have far too much of is copies of my book Stunning CSS3: A Project-based Guide to the Latest in CSS. Books are heavy. I don’t want to move all these books. Plus, it’s silly for me to have these books when someone else could be benefiting from them.

So here’s what I’m going to do: I’m going to give away a bunch of copies of Stunning CSS3 to you guys. All I want in return is for you to donate something to Carolina Tiger Rescue, a big cat sanctuary here in North Carolina that is doing great work and that more people ought to know about. Everyone loves wild cats, right?

If you would like a copy of the book, follow these steps in the next couple days:

  1. Go to the donation page for Carolina Tiger Rescue and make a donation in whatever amount you like.
  2. Tweet at me something like “I just donated to Carolina Tiger Rescue, so @zomigi is going to send me a copy of her book Stunning CSS3″ and add a link to this blog post so others can do it too if they like.
  3. I’ll make sure to follow you, if I’m not already, so you can then send me a direct message with your mailing address.

I’ll send books to up to 10 people, and I’ll update this blog post if I hit that number (or run out of time before my move). For now, I can only send to people in the US, unfortunately. But, perhaps when I get over to Europe I’ll do another giveaway for you non-Americans!

Thanks for helping me clean out my house. :-)

Related Posts:

Putting Flexbox into Practice presentation at Blend Conference

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

Related Posts:

View more posts:

Archives by Category

  • Announcements (30)

    Learn what's happening in my career or industry, including information about my speaking engagements and books.

  • Articles (37)

    Informational or theoretical articles about a variety of web design topics, including CSS, HTML, accessibility, usability, and visual design.

  • Inspiration (8)

    Collections of images or links to others' design work that I find inspiring and think you will too.

  • Tutorials (4)

    Step-by-step articles that you can follow along with to learn a particular web design technique, including CSS layout and CSS3 effects.

Archives by Month