Foundation recently turned three years old. It is hard to believe how much it's changed especially considering it was the first responsive design framework first built in Sass and modular mixin partials, and the first to take a mobile-first approach. The code has changed a ton, but one thing hasn't changed throughout this time. The level of dedication and passion the people who use Foundation has constantly impressed us.
Some of the biggest improvements to the framework since we launched Foundation 5, now known as Foundation for Sites, have come from our community. Despite having over 7,790 commits, we have opportunities to continue to tighten up all the details of what a framework can be. The community has really embraced these challenges and worked together to resolve them. Whether they are fixed or not, these efforts are what open-source is all about and need to be highlighted.
1. Misbehaving Dropdowns
One of those burning issues is dropdown positioning. Getting the dropdown to detect the edge of the screen, move itself to open real estate while not bleeding off the opposite edge is a challenge that all UI component creators face. It is even more challenging in a responsive environment and requires a lot of JavaScript calculations. All this while making sure the content inside scales properly and the pip arrow lines up to the parent button. Some people took this as a challenge to solve and have come up with some unique solutions that get very close.
Alexander Istratov, istrasoft on GitHub came the closest to solving this with his Pull Request. This solution comes close, using JavaScript to recalculate width and position dynamically as the viewport changes. Unfortunately the pip arrow location was a bit off and may not be the most best-performing solution.
Other notable attempts were made by Krzysztof Hasinski, and Sean McCollum, adiktofsugar on GitHub.
Krzysztof took the approach of flipping the direction of the dropdown. This is close, but if you have a very wide dropdown, it will still go off the other side. He is still making updates to his Pull Request which gets us closer to the answer.
Sean made some adjustments to the pip arrow so that when the dropdown flips to the left, the pip will realign to the right. It still needs some adjustments to be ready to merge.
Both went through multiple iterations improving their solutions with our guidance. It's a tough problem to solve but they are getting closer. We have confidence that a good solution will arise.
2. An Off-Canvas Menu That's Sticky
When we launched Foundation 5, we released a new mobile menu called Off-canvas. Off-canvas is great way to do a mobile menu as it slides out from the left or the right and pushes the site content over. It does its job very well in its current configuration. One of the most heavily-requested features in Foundation is to make the Off-canvas tab-bar fixed to the top of the screen as the user scrolls. For some very long sites this would prevent the user from needing to scroll back to the top to use the menu. The tricky part is that Off-canvas was not built with this feature in mind. Some solutions have worked but not on all devices while others conflict with other components. The community on the Foundation Forum and GitHub came up with some solutions that get it close.
Creating a 'fixed' or 'sticky' Off-canvas is tricky because the height of the page is calculated with JavaScript based on the content it wraps.
David Govea tried adding a scroll container inside the Off-canvas wrap that does not need a 'fixed' positioning CSS. This Pull Request even included some JavaScript to calculate the height of the content. While this made a 'fixed' Off-canvas and tab-bar possible, the actual menu had no height.
Nobu Kakegawa shared a simple solution on the Foundation Forum that makes the </article> which wraps the content scrollable. If you are not using Magellan or Joyride, this works well.
See the Pen hApKk by Rafi Benkual (@rafibomb) on CodePen.
Another contribution came from Caleb Winters whose simple but effective solution creates a scroll container using the -webkit-overflow-scroll property. This solution works great, but comes without height calculation with JavaScript. This means that Magellan and Joyride would not function with this implementation.
So while these solutions are great, we really need a solution that works with all the existing components in Foundation before we can merge it in.
3. Equalize </div>s in Any Situation
There have also been some great contributions that have been added to Foundation since we launched Foundation 5, now known as Foundation for Sites. In 5.1, we added Equalizer, a JavaScript plugin that makes your columns equal height, regardless of the content. When content stacked the columns were no longer equalized because they were not on the same line anymore.
Wing-hou Chan, found a clever way to add the option to equalize_on_stack.
Wing is a top Foundation contributor and has earned Foundation certification, making him a badass.
See the Pen Equalizer "equalize_on_stack" Demo by Wing-Hou Chan (@winghouchan) on CodePen.
We added this into Foundation so now you have the option to use equalizer with a block grid and on multiple lines!
4. Not Just Large Dropdowns, Mega Dropdowns
As soon as we launched the Foundation Forum, a popular discussion began about creating responsive mega-menus in Foundation. Born out of that conversation, we had a fun little challenge to see how people make these.
Sean Davidson posted his solution on the forum. It only works on large screens but fits the parent menu container perfectly.
James Gehring took a similar approach andmade something that scales on mobile. The only issue is that when in the mobile menu, the mega menu is not shown.
Foundation Certified Joe Workman, creator of RapidWeaver Foundation, whipped up a mega option for the dropdown plugin so now you can have a menu that spans the full width of the parent element. You can even add images and a grid to it. Check out his demo: Mega Dropdown
5. Get Lost in a Multi-level Off-Canvas Menu
Eduardo Catano, socketz on GitHub, made a sweet multi level off-canvas solution. Taking cues from this conversation, he went ahead and created a solution for it. After some back and forth on the details it was ready to merge. This multilevel off-canvas has already been used on a few projects at ZURB and by many others.
See the Pen EqCdJ by Rafi Benkual (@rafibomb) on CodePen.
Be the 583rd Contributor
Community contributions to Foundation have really gone a long way to making it better. Some of the best tweaks and additions were made by the people who use the code. We are all using Foundation on our projects and have run into something we want to improve on. With open-source software, we can do that and get recognition for sharing our solutions. The above-mentioned Foundation code rockstars have taken on the challenges of improving Foundation. They are out there crushing code and you can get involved too.
Have some ideas on how to help these people take their ideas across the finish line? Have you created a solution for these in your project? Show off your skills to help make Foundation better for everyone, whether it's by helping each other on the forum, submitting Pull Requests, or giving feedback and ideas. We want to thank the people mentioned above, and the hundreds of others, for investing in our community.
Here's where you can help:
- Contribute: Resolve 10 issues and get a Yeti t-shirt
- Submit pull requests: Invent and contribute creative solutions at GitHub
- Participate: Learn, share and find answers at the Foundation Forum