The folk at ZURB and Foundation’s community of developers have been hard at work, pushing towards releasing a big update of Foundation for Sites. Let’s dive in, see what’s going on right now, and ask the team what’s coming!
What’s New?
Foundation 6.3 brings about some solid changes to the framework, whilst staying true to what makes it so darn good.
UI Cards
Cards are gaining more and more popularity as a pattern on the web; they’re a really good way of showing your users condensed pieces of information, and they work great for responsive websites. Not only that, they’re intuitive too, as long as you use them correctly!
There was some debate about putting cards into Foundation–is it a component you actually need in a responsive framework, or should you build your own cards with the tools you’re given? The bottom line is that Foundation is also a rapid prototyping tool and for me, the inclusion of cards means I can prototype that much faster. Even when going to production, these cards are a welcome addition to the force.
Flexbox Helpers
Flexbox is great, because it allows us to make more (you’ve guessed it!) flexible layouts in our designs. Flexbox aims to provide a more efficient way of laying out and distributing space among items in your webpage, even (and this is the great part) when the size of those items is dynamic and unknown.
Foundation 6.3 provides us with helpers that make Flexbox more accessible and easier to prototype with. For example, floats and clearfix are hacks; means to an end. To replace those we use Flexbox Helpers.
“Flexbox is an important part of modern web design and we want to stay on top of that.” – Kevin, Foundation Community Manager
A Completely New Off-Canvas
Some would say this might have been overdue, but, it has been done at last. The Off-Canvas element has had a rework and it is awesome. You don’t even have to change any mark-up as it is backwards compatible.
The mark-up of the new Off-Canvas is even more simplified; we now have the ability to use Off-Canvas as an overlay and open from top or bottom, instead of only pushing the content away. Even that is now more polished than ever, so be sure to check out the Off-Canvas in the Foundation for Sites docs.
Accordion to Tabs: Responsive Magic
Ever fiddled with tabs that are useful on big screens but become a complete mess on mobile devices? No more! With “responsive accordion to tabs” you can switch your UI based on screen size and provide a better user experience for your mobile visitors. It’s easy to implement and the benefits are massive!
Vertical Rhythm to Dance to
Implementing a solid vertical rhythm in your type can greatly improve the look and feel of your website. Foundation has always made it easy for us to manipulate the different sizes of header and body text, but with the Foundation 6.3 update, the configuration of
typography sizing, line height, and margins have all been made accessible in a
single compact setting. Ease of use at its best.
Observe, Observe.. Mutation Observers
Sometimes small tasks can become tedious, but then there are those updates that will take that pain away. This is the case with the new mutation observers, which work behind the scenes and
automatically detect DOM changes and trigger updates in components.
This saves you manually having to reflow elements to trigger changes in
things like reveal modals, sticky bars, equalizer, and more. Awesomeness.
Deep Linking to Tabs
Deep linking plays an important part when getting your users to the right page–especially important on eCommerce websites and mobile apps. With Foundation 6.3 you can easily direct your users to specific content you’ve placed in tabs and thus make use of deep linking yourself.
Print Styling
Up until this latest update from Foundation, you’ve had to set up your own custom print stylesheets for webpages. Foundation would only show the mobile screen, whilst other frameworks wouldn’t even do that, meaning you had get your hands dirty and do the work yourself.
Those days are a thing of the past thanks to Foundation 6.3, because you can now specify exactly which breakpoint you want your print page to mirror, and Foundation will figure out the rest. Nice.
ZURB: the Interview
We wanted some inside information about how the framework has reached its current position. We also asked what we can expect from Foundation in 2017. This is what the ZURB team had to say:
What were the biggest challenges to overcome in 2016?
That
would have been how browsers would handle certain CSS selectors and our
grids. They all work nicely now, but it took some time for modern
browsers to catch up with all the web has to offer.
Our CSS grid
needed (and needs) to become more versatile and become a core component
of Foundation. We need to see what that core value offers and how it
benefits anyone using our framework.
What are you expecting to accomplish in 2017?
One of the things we’re working on, and what we will most certainly accomplish in 2017 is reworking our JavaScript for Foundation. We’re going to take more advantage of the modern tools out there and also make it easier for our users to plugin their own custom components.
One more thing would be reworking the menu components. They’re already really powerful, but, when you take them outside their norm, they’re still a bit fragile. We’ll be working hard on it to get to the point that you can customize them however it suits your project.
What is the main priority for 2017?
We will definitely be looking at the ease of use of the framework, things like reusable building blocks and a more plug-gable Foundation, so that people can add their own twist to it. Making it more plug-gable allows for more versatile components and reusable blocks will let use prototype even faster and cleaner.
What are some new things coming up in 2017?
We’ll want to do more with SVGs as they keep playing a greater roll in flexible and responsive web design. We want to see how we can implement and manipulate SVGs for different states and screen sizes. One thing we’ll be looking at is an easier way to make and integrate SVGs into your project using Foundation for Sites.
Are you afraid Foundation is becoming too bloated?
This is always something to be keen about. On the one hand, having lots of components helps us prototype and develop faster. On the other hand, more components can mean unused code, which makes a lean project too bloated. We’re optimizing how things can be integrated and making it so that you can choose to work in additional components for your specific project. One thing we keep a sharp eye on is keeping the core compact and strong.
How is Motion UI coming along?
That’s a great question! We’re actually quite busy and it’s about to be reframed to make it more accessible. We’re also going to go into more depth about how to use your own animations with Motion UI.
One thing that’s lacking at the moment is an extensive and helpful documentation. We think that’s why people aren’t using it as much as we would like, whilst Motion UI itself is a very powerful library already. We’ll keep you posted on our blog and newsletter about how it’s coming along.
“Motion UI is already very powerful, but we need to improve the docs to make it easier for you guys to use and implement.” – Rafi, Foundation Advocate
Is Flexbox the future of Foundation?
We love Flexbox, it truly is a big, big step forward in flexible and dynamic components. As we’re moving forward with Foundation for Sites, we also continue moving towards the future and Flexbox plays a big roll in that. We’re going to keep integrating more and more components with the flex property and use flexmodes for all components.
Conclusion
Well, there you have it, a great framework which keeps getting better and better. With Foundation 6.3 and Motion UI coming along, we as developers and users will be able to prototype and launch even faster then before. It definitly fits Foundation's 5th birthday, congratulations!
“A
huge shout-out goes out to our dedicated community of developers, who
keep on improving Foundation each and every time. Thanks guys!” – Kevin, Foundation Community Manager
