Foundation 6.5.0 Released

It’s happening. After 14 months of work and 900 commits from 93 contributors, we are pleased to announce the release of Foundation v6.5.0!

The least we could say it that is this is a massive release. We fixed 100+ bugs across all the Foundation components, added new settings to let you go even further in their customization, improved their accessibility, resolved various issues with the newest as well as the oldest browsers to make your website look the same way on all devices, and also cleaned up the way we build and deliver Foundation to make it ready for the modern web development.

This was a lot of work, many decisions were made and all our contributors did a fantastic job to ensure the best for the ones that matter the most in our field: our end users.

Foundation 6.5 in a few words: Over 100 bugs fixed, more customization, more accessible and better supported!

You may have noticed that the release cycle of Foundation got a little stretched the last year, the Release Candidate v6.4.4-rc.1 never came out as a stable version. We noted that the version in preparation introduced some deep changes that still had to be improved to be ready for production. This succeeded and Foundation v6.5.0 is now ready, perfectly suitable for your strong and accessible websites!

One last thing: Foundation v6.5.0 is fully compatible with the previous versions! You can safely move to it and enjoy the improvements and stability of Foundation v6.5.0 without losing time or worrying about a migration! Also, thanks to our amazing contributors, a lot of new features and various improvements are already implemented, and we are already working on the next release.

Now, to begin the presentation of all the improvements that are coming in this new version, let me summarize them in 3 points…

🌟 Improved Stability

We worked hard to resolve over 100 bugs across all our components. We fixed a lot of visual and functional bugs and resolved some Javascript crashes on run time and Sass errors on compilation (you can see the full list in the release notes). Also, we improved our testing flow to prevent future bugs and regressions.

🙈 Improved Accessibility

We improved the accessibility of Abide forms by a lot! Most a11y attributes are now automatically set on form fields, labels and errors according to their relations. We also fixed the aria attributes of Toggler and all menu plugins. And finally, the documentation got improved by a lot and the examples for most of our components now include best practices in terms of accessibility.

🌎 Improved Browser Support

We improved the support of oldest and newest browsers. Beside little changes to make components display the same on all browsers, we resolved various bugs with IE11 and Edge (in navigation components, Slider and XY Grid), and issues with the Reveal scroll in iOS Safari and the Reveal height on all mobile browsers. Also, for consistency reasons, we revised our browser CSS compatibility table and improved the support for iOS Safari down to version 7 (included). On the other hand, we dropped support for Android Browser 4.4 and older.

So what’s new?

The changelog for Foundation v6.5.0 is simply massive, and no one likes to read huge changelogs. So we prepared a little list of all the changes and improvements that you should be aware of! None of them should require a migration, but some may interest you as they enable new possibilities or some improvements in the way you import, build or use Foundation.

Better keyboard shortcuts for Dropdown

If a Dropdown’s trigger is an <input> or a <textarea>, a space does not open the Dropdown anymore and the space character is added to the input. Also, an opened Dropdown is now closed with space/enter if nothing can be focused in it. (#10715, #11123)

Improved Abide URL validation pattern

We changed the Abide validation pattern for URL so it is more permissive and supports various protocols and escaped characters. We recommend checking if it still fulfills your needs before upgrading. You can always use the old URL pattern as a custom pattern. (#11116)

🐛 Stronger Dynamic Components

We fixed various bugs with Dynamically created Components. They could be incorrectly initialized as they were waiting for the page load event (which was already called before). We fixed this and now fully support dynamically created components after the page loaded. (#11077, #10988)

🐛 Improved breakpoints for different zoom levels

A “gap” between breakpoints could appear with both or no breakpoints where considered as the “current one” due to the way some old browsers round values or when a smaller global font size was used. We changed this gap size to ensure the best browser compatibility and support for smaller font size. (#10978, #11315)

📦 UMD, CJS, ESM and ES6 Bundles!

This is an amazing improvement we are really proud of. Foundation’s JavaScript is now distributed by default as an UMD bundle! This stands for “Universal Module Definition” and means that you can now import Foundation in all JavaScript environments (ES6, RequireJS, Node.js…). No special configuration needed. No transpilation required. Just import it!

We also added CommonJS (CJS), ES Modules (ESM) and ES6 bundles. You may prefer them over the universal UMD bundle depending on your build process. See our documentation to choose the one fitting the best your needs. (#10864, #10911, #10930, #11508)

📦 Sourcemaps everywhere!

No one likes debugging in minified code. All Foundation JavaScript and CSS distribution files now comes with sourcemaps, even individual Foundation plugins. (#10998, #11012, #11394)

📦 JQuery and what-input are now peer dependencies

We think that like for most browser packages, you will want to only have one jQuery version installed and to choose its version by yourself. For this reason, jQuery and what-input should be exposed to you as peerDependencies. You should already have jQuery and what-input installed so Foundation will work the same way as before.

Note for npm users: You may now have a warning message asking you to install these packages if you did not already. Please do so with versions we support: jquery@>=2.2.0 and what-input>=4.1.0. (#11294)

What’s new from v6.4.4-rc.1

As explained above, the Foundation release cycle got a little stretched the last year and a the Release Candidate v6.4.4-rc.1 never came out as a stable version. If you jumped this step and still use Foundation v6.4.3, here are the changes included in this Release Candidate that you should be aware of.

New Accordion parentLink option

With the parentLink option, you can now automatically include the parent link at the top of an Accordion sub-menu like for Drilldown. (#10616)

Matching help for standard input and input group

We changed the Input Group height calculation to match the standard input height. You may have to take a look at your forms after upgrading. (#10602)


To know more about all the changes that are coming in Foundation v6.5.0, we encourage you to take a look at the release notes produced for the release of this version: v6.5.0-rc.1, v6.5.0-rc.2, v6.5.0-rc.3, v6.5.0-rc.4 and finally v6.5.0.

One last word…

I need to thank all the amazing folks that helped us for this release. Thanks to the ones spending a lot of time working on an awesome feature for the benefits of everyone. Thanks to the ones jumping in to fix a misspelled word in the documentation. Thanks to the ones coming with a bug and helping us to find and reproduce it. Thanks to the ones joining a debate and patiently showing us where we were wrong.

Thanks to the 93 contributors that made this release possible.

And finally, thanks to all our users. Foundation would be nothing without you! ❤️

Nicolas Coden.


The illustration of this article is based on illustrations from Katerina Limpitsouni (undraw.co, license MIT). Go take a look at undraw.co to get free customizable illustrations for your projects!