Image courtesy of Zurb
We’ve eagerly awaited the release of the latest version of Foundation, Zurb’s hugely popular front-end framework. Today it has finally arrived and I’m sure a lot of designers and front-end developers are eager to put it to the test. We were lucky enough to have a sneak preview of the framework before it was released, and it looks like there’s plenty to get excited about.
As a fan of Zurb’s presentation-oriented approach to all things web, here are the five new features that we think will push Foundation into top spot in the race against Bootstrap.
1. Interchange: Foundation’s secret weapon
In Foundation 4, Interchange was cool, it allowed the dynamic rendering of different images at specified media query breakpoints. In Foundation 5, it they’ve taken it to a whole new level of awesome. Interchange will now allow you to serve any type of content (e.g. HTML partials, videos or canvas) depending on the device’s screen width.
Here’s why it’s awesome: responsive design in the past has worked fine with content and presentation that remain exactly the same across all devices. Unfortunately, if you want content to differ on any viewport width it would normally involve either:
- Hiding the content – which is generally bad for loading times, SEO and accessibility.
- Using server-side user-agent sniffing to detect mobile devices – which can get really messy, difficult to debug, and can create numerous edge cases.
So a plugin that can deliver different content client-side is an enormous help – making Interchange the feature I am most excited about.
2. The medium grid
This was actually an ‘experimental’ feature of Foundation 4.3, but is fully supported and documented in Foundation 5. One of the issues I had with Foundation 4 was that columns had the same width ratio for all screen sizes. Adjusting column widths on smaller devices before v4.3 meant hacking the Foundation styles, which always felt weirdly uncomfortable…
A fully functional medium grid will be great for those situations where a 9-and-3 column combo looks good on a wide-screen but would look better as 8-and-4 on a smaller screen (e.g. you’ve probably seen a 3-column block ‘squeeze’ text on tablet).
3. All new style
One of the best features that made Bootstrap 3 great for designers is the flat, simple style. By stripping things back, they made it much easier to customise. Foundation 5 has also moved more towards this blank-canvas mentality. The default UI in Foundation 4 was cool, but a bit of a hassle to re-style. It was also instantly recognisable as Foundation to other designers, which can be a bit awkward, especially if you’re trying to make your design look unique!
To improve the user-experience on mobile devices, further hardware acceleration support has been added into Foundation 5. This means smoother animations, less flickering of content and a generally improved mobile user experience.
4. Improved support system
One of the pros for using Bootstrap which we pointed out in the comparison of Bootstrap and Foundation was Bootstrap’s vast community, concise documentation and numerous support forums. It seems like Zurb has caught on to this, doing a complete renovation of the Foundation documentation and a new Foundation forum.
The improved documentation will mean more detailed code examples, and greater insight into the mysterious Foundation API. The new forum will provide much needed FAQ, and general support for rookie Foundationeers like myself.
5. A new command line tool
Foundation 5 aims to optimise the development process by making it super easy to get started building with a brand new command line tool. The new CLI will allow even faster project building It’s a similar approach to Bootstrap 3’s simple development environment, leveraging popular tools like Grunt and Bower, to help speed up the development process even further.
They’ve also beefed up the back-end CSS pre-processing. Foundation 5 uses Libsass, which is built in C/C++, meaning it’s five times faster. This will dramatically speed up Sass processing – great for big projects …or slow computers.