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.
- Re-ordered feature boxes
- Single-line, full-width, vertically centered form
- Full-width, evenly distributed nav bar
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
- Grid Template Layout (editor’s draft)
- Multi-column Layout
- Regions
- Exclusions and Shapes
Flexible Box Layout
- Browser support
- “Using CSS flexible boxes” by Mozilla Developer Network
- “Flexbox — fast track to layout nirvana?” by Chris Mills for Dev.Opera
- ““Old” Flexbox and “New” Flexbox” by Chris Coyier
- CSS Flexbox Please! syntax testing/visualizer tool by Eiji Kitamura
Other CSS3 layout techniques
- “Six CSS Layout Features To Look Forward To“ by Divya Manian for Smashing Magazine
- IE 10 Regions demo
- IE 10 Exclusions demo
- IE 10 CSS3 Grid Layout demo
display:table/table-cell
- Browser support
- Hybrid fluid-fixed demo using display:table by Moople
- “Re-tabulate” by Jeremy Keith
- “Table Formatting” by SitePoint
- “Everything You Know About CSS Is Wrong” by Rachel Andrew for Digital Web Magazine
- “Give Floats the Flick in CSS Layouts” by Andrew Tetlaw for SitePoint
display:inline-block
- Browser support
- “CSS display: inline-Block: Why It Rocks, And Why It Sucks” by Robert Nyman
- “Fighting the Space Between Inline Block Elements” by Chris Coyier
- “inline-block vs float” by Niels Matthijs
- “Center Multiple DIVs with CSS” by Louis Lazaris
- “Cross-Browser Inline-Block” by Ryan Doherty for Mozilla Webdev
- “Give Floats the Flick in CSS Layouts” by Andrew Tetlaw for SitePoint
Stunning CSS3: A Project-based Guide to the Latest in CSS
Flexible Web Design: Creating Liquid and Elastic Layouts with CSS
Thanks for this timely post! Flexbox looks phenomenal.
[...] The future of CSS layout presentation at future of web design conference [...]
[...] Zoe nos deja también algunas demos y recursos relacionados con su [...]
[...] Great collection of CSS presentations, demos and resources, including such hot topics as Flexible Box Layout, Grid Template Layout, Multi-column Layout, Regions, Exclusions and Shapes, and more… [...]
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!
[...] The future of css layout Presentation at FUTURE OF WEB DESIGN conference. [...]
[...] very well. I got to be the keynote on the first day! I loved Zoe Gillenwater’s talk about future layout specs. Carl did a great job keynoting the second day. I sadly missed Darcy Clarke‘s talk but he [...]
[...] very well. I got to be the keynote on the first day! I loved Zoe Gillenwater’s talk about future layout specs. Carl did a great job keynoting the second day. I sadly missed Darcy Clarke‘s talk but he [...]
[...] very well. I got to be the keynote on the first day! I loved Zoe Gillenwater’s talk about future layout specs. Carl did a great job keynoting the second day. I sadly missed Darcy Clarke‘s talk but he [...]
[...] very well. I got to be the keynote on the first day! I loved Zoe Gillenwater’s talk about future layout specs. Carl did a great job keynoting the second day. I sadly missed Darcy Clarke‘s talk but he [...]
[...] very well. I got to be the keynote on the first day! I loved Zoe Gillenwater’s talk about future layout specs. Carl did a great job keynoting the second day. I sadly missed Darcy Clarke‘s talk but he [...]
This is the kind of stuff that makes it all worth it
[...] CSS Layout Resources [...]
[...] from Korneliusz Caputa: Improvement HTML Miscellaneous Backbone Sort Share zomigi.com 2 weeks [...]