Flexbox and Foundation 6 Grid

Zurb has proven once again that Foundation is the most advanced framework out there. In their upcoming release of Foundation 6 they are moving to a flexbox based grid that focuses on making it easier to build the web apps of the future.

They have posted a blog article detailing their decision. A possible downside to the change is that the flexbox grid will only work in IE10+. I’m not aware of any polyfills for the new flexbox model so I don’t think support for IE8 and IE9 are possible. Maybe someone will come up with a clever approach to supporting older browsers. So far I’ve only come across Using Flexbox Now which talks about using IE conditional comments to provide selectors for targeting old IE versions using a float fallback and Flexbox with Fallback which uses a similar approach but instead depends on Modernizr classes .flexbox and .no-flexbox and breaks each grid into it’s own Sass partial which I really like. My preference would be to use Modernizr classes and the creation of two separate grid systems; one based on flexbox and another using floats. It adds a level of complexity to the project but it should be fairly straight forward to build the site out as long as you’re considering both grid systems as you’re building out the pages.

Let me know if you have experience with flexbox and providing support for IE8/9 and how you go about it because I’d love to incorporate it into my own workflow.

Related articles: