Submitted by Joey English on Thu, April 24.
At Cheeky Monkey Media, we’re huge proponents of Zurb’s Foundation framework. We use it almost exclusively for all of our projects, and it assists us throughout every step of that process. From building the first wireframes for client approval, to our final front-end theme, Foundation has become an essential tool for our development team. If you’re not familiar with Foundation, I encourage you to do some research, grab a copy of the amazing Drupal theme (actively maintained and supported by a great list of contributors), and dive in. Start integrating it into your own projects, and see why Foundation has fast replaced favorites like Omega, Mothership, Aurora, and more.
As with all great things, however, nothing is quite perfect “out-of-the-box”.
Recently, we’ve been seeing much more interest from clients in building responsive sites. Rather than having to convince them of its benefits, we’re finding clients are simply requesting designs from our creative team that are mobile-friendly. As designers and developers, we’ve enjoyed seeing this shift in client mentality, and we’re always happy to build a site using progressive, mainstream concepts, and design trends. One of those recent trends, and one thing we’re seeing a lot of demand for lately, is the ubiquitous off-canvas menu. If you’re using your phone as much as the rest of us are, you will have run into off-canvas quite a bit. It’s that nifty menu that slides in from the left or right side of the screen, usually offering up important functionality like navigation, search, and other features. We happen to appreciate its usefulness, and see its benefits for use on mobile and tablet devices.
And therein lies the rub…
At the time of this writing, Foundation’s Drupal theme is in version 7.x-4.0, supporting Foundation 4, and, rather unfortunately, not featuring the nifty off-canvas menu which Foundation has done an amazing job at implementing in most of its previous (and current) iterations. There is some reasoning behind the decision to leave this feature out, and while I agree with the logic, it’s a bit inconvenient for those of us using Foundation 4, but whom want the added functionality that off-canvas provided us in the past.
With several clients requesting this feature, and our design team producing PSD’s with off-canvas as a highlight of the mobile experience, we had a few options. We could build a bespoke solution, something we’ve done on previous projects, or try and utilize Foundation assets and integrate them into the theme as seamlessly as possible. We chose the latter, and sadly, there was very little in the way of existing resources out there to assist us when we began running into issues with the integration. Thankfully, with a few helpful posts from the Zurb community, some hair-pulling, and one big ah-hah moment over a weekend of obsessing over getting this piece of functionality to work, we were able to come up with a decent solution that should, ostensibly, work on every Foundation 4 project moving forward; that is, until Foundation 5 is ready to be used on production sites, as it should include this feature when it’s ready for the mainstream.
First, you’ll need a copy of the Foundation 5 code. From the downloaded files, you’re going to copy and paste the CSS that adheres to the off-canvas elements, then add these to your theme. Personally, I suggest keeping things clean and adding them to a separate _off-canvas.scss file, and setting that in custom.scss as an @import. This should make it easier to troubleshoot if you run into any problems, and is just good practice to keep things segregated and organized.
From here, you’ll want to modify your page.tpl.php file. What we chose to do was utilize the Top Bar, a feature currently in Zurb 4 that degrades quite nicely when used within the Off-Canvas menu, and some custom regions to get our main menu into the page. This allows the client to have control over this area just as they would with any other region on the page or within the site. We can add blocks to this region, add contexts for its usage on specific pages, or under certain conditions, really opening up the possibilities of what the menu can be used for. Imagine a scenario where, on user profile pages, the off-canvas menu included links to content creation tools, user settings, etc. After you download the tpl file, you’ll want to take your current page.tpl.php contents, and insert them within the Section with the class of “main-section.” This is basically your normal page contents, with everything else being the wrapper and structure of your off-canvas menu.
The final step here is to ignore the Javascript that comes with Foundation 5 for off-canvas functionality (a mistake I made and suffered with trying to troubleshoot for quite some time) and just implement these few simple lines into your scripts file.
Shared File:
There are some tweaks that can be made from here, and I recommend that if you’re looking for more robust cross-browser support, you look into the current string of threads over on the Zurb community to see what works best for your needs. For us, this solution has resolved a big need for our clients, and is now allowing us to deliver beautiful off-canvas menus on every project, while keeping everything clean, organized, and Zurby.
Learn more about...
Web Development
Web Design
Cheeky Monkey Media
Categories:
Drupal
Drupal Planet
How To
Theming
Tags:
Zurb Foundation
themes for drupal