By Zing Design
We’ve eagerly awaited the release of the latest version of Foundation, Zurb’s hugely popular front-end framework. 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, 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 customize. 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 restyle. It was also instantly recognizable 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 optimize 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.
Want to learn more about Foundation 5?
Head to Zurb’s Foundation’s page to download your own copy of the new Foundation 5 and see for yourself why we are huge fans of the new framework.
If you are interested, Zing design has a newsletter where you can receive regular updates on our latest projects, research, and other news in the world of web design and development.
This article was originally published at https://www.zingdesign.com/top-5-most-exciting-features-of-the-new-foundation-5/
Image courtesy of Zurb
Foundation is nice, but only if you don’t need to deal with IE8 or less. Which is less than half of my projects. Not sure if worth re-tooling for that small percentage. https://foundation.zurb.com/learn/faq.html
If you are doing it correct, you shouldn’t be code a other way for IE8 or less, cause Zurb is already supporting !!
Gegenehi Jared, thanks for shrniag these..I’m just wondering why you used 300px for mobile..I’m about to start using foundation and I know it’s a different methodology they promote..mobile first. but you still need to start somewhere if you’re using photoshop. is there some resource that you’ve used to help figure this out? i find it quite confusing. so i guess since 300 and 480 are in the same ballpark aside from scaling the page the layout won’t change so either is fine?Thanks!