The launch of Foundation 6 marked some of the biggest changes to the popular CSS framework in recent memory. At Materiell, we’ve been using Foundation for quite some time and now that we have a few projects under our belt using Foundation 6, we’re happy to say we love it more now than ever before. Here’s why.
Big Things Come in Small Packages
In an ironic twist, one of our favorite “features” of Foundation 6 is that it actually contains less “features” and a slimmer codebase than it’s predecessor. Rarely used or easily recreated components, such as pricing tables, have been removed from the core framework and replaced with flexible components that serve multiple purposes.
The ZURB team also took on the task of rewriting and restructuring all JavaScript and Sass components, leading to a “leaner, meaner and cleaner” codebase with a 40-50% smaller output. But if that’s still not small enough for you, it’s not easier than ever to remove un-used components from your final output – meaning you can use just the parts of the framework that are relevant to your project.
Accessibility for All
As mentioned above, many JavaScript components were rewritten to be more efficient, but the ZURB team and community also took this opportunity to rebuild components to be fully accessible and A11y friendly. This helps ensure that every website we build works on every device and can be accessed by everyone.
After all, what’s the purpose of a responsive, multi-device framework if we aren’t really taking all users into account? Foundation 6 has you covered.
More Control than Ever Before
Have you ever tried to heavily modify the topbar component in Foundation 5? If you have, you know it’s not fun (if you haven’t, we wish you luck).
The menu system received a major makeover in Foundation 6. The topbar component was replaced with a modular menu system that is fully customizable. Using the new responsive navigation patterns will allow you to easily implement different menus on specific screen sizes. For example, you can now create a menu that functions as a dropdown on desktop devices, but then converts to an accordion on smaller devices.
Foundation 6 now also includes multiple utility libraries, allowing for users to create their own Foundation-like components that will easily integrate into the rest of the framework.
But Wait, There’s More!
There’s so much we love about Foundation 6, it’s hard to fit it all into one article. Beyond what we already discussed, here’s some move to love:
- Flex Grid – easily use CSS flex grid using the same markup used to create the traditional Foundation grid. Simply make a few adjustments to your settings.scss file and you’re ready to start using Flex Grid!
- ECMAScript 2015 – the 6.2 release included the entire JS codebase being rewritten in ES2016.
- Motion-UI – an easy way to add animations to elements.
What’s your favorite piece of Foundation 6? Tweet us at @MateriellDC!
