I don’t normally announce a minor point release. However, Foundation 6.2 is a really awesome update. Its jammed pack full of really great new features and fixes.
I want to say a bug thank you to the 1000+ Foundation 6 users that have helped turn F6 into what is has become. It’s definitely the most powerful and flexible framework because of your feedback.
If you have not jumped onto the bandwagon yet, you should. I feel that my original claims of F6 being a ground break new workflow for RapidWeaver users rings even more true now with this update. Users have really started making some seriously impressive websites with it.
Anyways, back to this update… Here is a break down of the major features that Foundation 6.2 brings on top of its already impressive list.
Foundation Framework v6.6.1
This update brings in the latest version of the open source framework. I released v6.6.1 back in December. It was the second release of the framework under my tenure as commander.
Dark Mode
I architected F6 so that adding Dark Mode support would not be difficult. I really wanted to get this feature in the initial launch. But some things just had to get pushed off in order to ship. But it’s finally here!
Dark Mode is integrated into every swatch. This allows you to customize the colors of every elements on the page when user has their system preference set to dark mode. In order to set a swatch to dark, you simply choose the Dark Mode media query from the swatch settings.
There are also new dark mode visibility settings so that you can easily show and hide content depending on your theme being light or dark.
Animate
F6 shipped with an Animate In stack. It leveraged the Motion UI libraries that are built into the Foundation framework. This was not quite as full featured as the Animate stack from F1. So I decided to sunset the Animate In stack and bring back the already loved Animate stack from F1.
The Animate stack is based on Animate.css which is a widely acclaimed animation library on the web. It comes out of the box with a bunch of great effects as well.
I did take the chance to improve things though. We now can trigger animations on hover and page load, in addition to on page scroll.
See Breaking Changes Below
Sticky
Sticky was another feature that I wished could have been here on launch day. I have to say that I didn’t think that many people would mind if I delayed its implementation. Boy, was I wrong. I was shocked to see how many people were looking for a simple what to make things sticky.
The new Sticky stack does just that. It’s very easy to get anything to stick to the top of the browser on scroll. It’s so simple in fact, that in order to accomplish that, you just add the stack to the page and leave all of the settings as their default values.
There are a couple of different modes that allow you to control when something becomes sticky and stops being sticky. You can even make things become sticky within a column rather than to the page.
Forms
Form geeks will enjoy the updates that came here. There are 2 new form actions for GET and POST requests. These basically take your form data and pass them along to another URL for processing. These do not happen in the background like the Ajax job does. The webpage url that was requested will navigated to, by the form.
Another really convenient feature is the ability to autofill form fields simply by passing a fields names and the desired values as parameters to a url.
Menus
Menus definitely got the most work done out of any other component in this update. Menus are a very important aspect of web design. We need menus that have the features and flexible layouts to satisfy our needs. Let’s review the changes made to the F6 menus so that they meet these needs for you.
A bunch of settings have been added to all of the menu stacks. Most of these are specific settings to tweak the behavior for each unique menu: accordion, drilldown and dropdown. One important setting that is on all of them is the ability to style the active menu item.
Prior to F6.2, only the RW Menu stack was able to style active pages dynamically. I am happy to say that all menus can now style active pages. This allows you to easily add them to partials so that the menu can be applied across your entire site.
If you watched my live stream a few weeks ago on styling menus, it was very eye opening that things needed to be improved. It took far too many swatches to style a menu the way that we wanted. There is a new menu swatch that will allow you to style your menus with ease. Multiple users have told me that they were able to replace 8-10 swatches with a single menu swatch. This is a makes me happy.
See Breaking Changes Below
Top Bar
Top Bar is a very popular component for building a dynamic menu that can morph its layout on mobile. This update gives you a lot more freedom with the layout of both Top Bar and the Title Bar.
There is also a new Top Bar Swatch to help you style a Top Bar and further reduce the amount of swatches you have inside Site Styles.
See Breaking Changes Below
Breaking Changes
I just wanted to let you know about how the updates in v6.2 may affect your current designs.
- All existing Animate In stacks will continue to function. However, you will notice that there is a new Legacy label on the stack. You can no longer add new instances of this stack to your projects. I do recommend that you update existing instances with the new Animate stack if you can.
- Existing swatches that you have setup to style your menus may not work. You will want to implement the new menu swatch.
- Existing Top Bar instances may seem to be missing content. Don’t worry, you have not lost your work. Turn on the new “Title Bar Dropzone” setting at the very bottom of the Top Bar settings. This should now unveil your missing content. You can drag the stacks out and back into Top Bar. Then disable the setting that you turn on before.
Foundation 6.2 Live Stream
Watch the live stream that reviews all of what was mentioned here in addition to even more.