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.
Accessibility for All
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!