Drupal and Foundation 5

After have success using Bootstrap starter themes on some Drupal (and some WordPress) projects, I decided I wanted to try something different for my next project. Foundation is the other large framework that compares with Bootstrap – and never having used it on a large scale project, I thought it would be worth the effort. The primary goal was to learn it inside and out, in order to have a new tool in the belt and to have a better understanding of how something else stacks up against Bootstrap.

Getting started

The Zurb Foundation Drupal project has a number of releases, 7.x-4.1 being the recommended release (using Foundation 4), but there is also a Foundation 5 release that is considered stable and ready for use. The latest version was the one we ended up using.

It takes a bit of poking around to understand how it works, and how to leverage the power of Foundation from within the Drupal environment. Thankfully, the theme developers have a included a STARTER theme within the Foundation theme itself, with a fairly robust README file explaining how to set up your theme. Make sure to read it.

Basically, the idea is to copy that STARTER theme into the sites/all/themes directory, rename it with your own theme’s name, and it behaves as a child of the Foundation 5 theme, inheriting all of the the functionality built into the parent theme. The README file also explains how to create your child theme using drush if that’s an option for you.

You will also need to go through your child theme and change all occurrences of “zurb_foundtion” with the name of your new theme. If you need to override a theme function, copy it from the parent’s template.php file into your new theme’s template.php file, and be sure to rename the function with your own theme’s name as a prefix.

So, for example:

function zurb_foundation_links__topbar_main_menu($variables) {
     ... 
 
     // awesome code
}

in your sub-theme now becomes:

function yourthemename_links__topbar_main_menu($variables) {
     ...
     // awesome code
}

You can now edit the function to make it behave like you wish it to – this is standard to the way Drupal works.

Before you do this, however, make sure you leverage the other tools the theme has included. The theme comes with a basic Grunt setup, enabling you to compile your SASS from the terminal. In your terminal application, navigate to your new theme folder:


cd path/to/project/sites/all/themes/yourtheme

Assuming you have Hombrew, Node.js and Grunt installed on your system you’re good to go. Otherwise, you’ll have to make sure to gather those requirements first – instructions are available in the theme README. Once you’re ready to go:


npm install

This will install of the features specified in the package.json file for you to run Grunt for this project. If you know your way around here, you can add a lot of functionality to your build before your run the install.

Theme Settings

If you’re already familiar with Foundation, you might notice some of the Top Bar features aren’t there at first glance. In your theme’s Admin area, go appearance/settings/yourtheme and you will find settings to configure how the top bar behaves: whether it is sticky, containing to the grid, etc. You will also find settings for tooltips and a few other other Foundation elements.

To configure your grid, you will need to look at the parent theme’s template.php file, and find the

zurb_foundation_preprocess_page()

function, and copy the relevant part into your new theme’s template.php file, and adjust away.

How does it compare?

Like Bootstrap, it makes life so much better – but it isn’t perfect. But let’s take a quick look.

 

The Good

 

Settings – one of my favourite Foundation tools is the settings.scss file. From here you can control virtually every Foundation-styled element: which is just about everything. With or without Drupal, this is where Foundation really stands out, whereas Bootstrap’s variables file is a little less straightforward, with a little more hunting around for theme elements. Foundation’s version saves me a lot of time.

Grunt/Sass – I’m sure there is a Drupal Bootstrap theme out there that has a Grunt setup built-in, but I haven’t found it/used it yet. The syntax differences for Less vs. Sass are not significant, but they are noticeable. With Sass we can leverage Compass, but overall I prefer it to Less even without Compass.

Grid – The Foundation grid system is, to me at least, a much more logical one. Column properties are in a class separate from the actual width properties of an element within the grid, and the configuration has just a few more options than does its Bootstrap counterpart.

Components – Foundation’s components are a little more robust and clean, while perhaps lacking “sizzle” Accordions, for example, have much simpler (and, I would say, logical) markup, though they don’t have the nice slide-up/down integrated like Bootstrap does. Small potatoes, really.

 

The Not-as-good

 

Mobile Menu – The overall menu tree system, as is this menu, if what you want is what Foundation offers. If your requirements need a different style of menu for small screens than what it offers, then you’ll find yourself hacking the Foundation Top-Bar JavaScript to bend it to your will. Out of the box, you get a horizontally scrolling behaviour for sub-levels of navigation, which I personally love. But, it can be a bit of a chore to change.

Responsive Tables – There is a Foundation plugin that pins the first column, allowing you to horizontally scroll the rest of your table, but it doesn’t come with the theme. You’re on your own to find and implement it.

Code Bloat and IE – …this is old news for everybody by now, right?  There are hacks out there to get your Foundation site working in IE 8, to convert rem sizes (which Foundation uses) into something IE 8 can understand, as well as respond.js, modernizr.js etc. The biggest hurdle though is IE 9 – which generally works pretty well, as it supports an acceptable level of CSS3 and HTML5. However, it can only handle so many CSS selectors at once, and so it just ignores the rest. The best thing to do (in any circumstance) is to get rid of unused styles in general. With Foundation, you can simply remove the imported components that aren’t being used, which will reduce your output CSS file substantially. No need for an IE 9-only stylesheet!

Overall, I found the Drupal Foundation 5 theme great to use. Its file system is well-organized and the internal documentation is sufficient to get you started. Further, it offers great components that are easily configurable and lend well to use within Drupal.