Foundation for Sites 6.3 - A Little Bit Naughty and A Whole Lotta Nice!

wrote this on in . Share this Post

Holiday season has arrived and that usually means one thing' more gifts than you can shake a handlebar mustache at! The Foundation team, Yetinauts, and a whole lotta contributors have been hard at work on a huge update to Foundation that is stuffed to the brim with new goodies you're going to go nuts for. The best part? It's available for you to download today, whether you've been naughty or nice. You don't need to shake the box, we'll tell you exactly what's inside:

  • A new, bulletproof off-canvas: 6.3 includes an all new off-canvas implementation that adds features and improves performance over the existing version. Open from the top, bottom, side, you name it. It's even backwards compatible so you don't need to change any markup. Thanks for your hard work Brett Mason!

  • Cards!: After lots of debate and iterations we have added Cards to Foundation 6. Card based designs are perfect for responsive sites and make it easy to display a ton of information without overwhelming your users (as long as you use them correctly). Another awesome contribution by Brett Mason!

  • Responsive Accordion to Tabs: Tabs work great on larger screens but can be a mess on mobile. With this new update, you can switch your UI based on screen size from tabs to responsive accordions for a better experience on mobile. It's a breeze to implement and provide an awesome experience for your users. Thanks to designerno1, for this one!

  • Mutation observers: Foundation is the most advanced framework in the world for a reason. We're always looking to include awesome technologies that will help you develop faster. Mutation observers work behind the scenes and automatically detect DOM changes and triggers updates in components. This saves you manually having to Reflow elements to trigger changes in things like reveal modals, sticky bars, equalizer, and more. Shoutout to Corey Snyder for putting this one together!

  • Deep linking to Tabs: Deep linking has become one of the hottest topics on the web within the last few years and absolutely critical for eCommerce sites and mobile apps. Have specific content in tabs and want to send users to it? Now you can in 6.3 thanks to ahebrank.

  • Print Styling: Traditionally, printing a responsive webpage is very difficult. Foundation typically would only show the mobile screen, other frameworks throw up their hands, and you'd have to spend hours setting up a custom print stylesheet. In 6.3, you can specify exactly which breakpoint you want your print page to mirror, and Foundation will figure out the rest. Shout out to Andy Cochran for adding that!

  • Vertical Rhythm: Foundation has always made it easy to manipulate the sizes of your different types of headers and text, but to create strong vertical rhythm on a site you need more than this. With 6.3 the configuration of typography sizing, line height, and margins are all accessible in a single compact setting. Kudos to Karl Anders!

  • Flexbox Helpers:We've been using #FLEXBOX more and more recently, and getting more and more excited about using it for UI. In 6.3 we've added a bunch of new helpers that make Flexbox more accessible and easier to prototype with.

Yep, we're ending the the year with a bang, our biggest update since Foundation for Sites 6 was launched last year. It's also a fitting way to cap off Foundation's 5th birthday celebration. Thanks to all who contributed, Foundation is still the most advanced front-end framework in the world. We couldn't have done any of this without our awesome community of Yetinauts and contributors. So tear into the new Foundation for Sites 6.3 update today and let us know what you think!

Download Foundation 6.3!

Building blocks graphic
Foundation Building Blocks: Over 100 Components to Jump Start Your Projects
Screen shot 2017 05 16 at 2.54.30 pm
The New Foundation Docs: Learn Your Way
How Design Insights Transformed Foundation Building Blocks