Using the ZURB Foundation Theme for Drupal

Get the Power of the ZURB Foundation Framework in a Drupal Theme

Before there was Twitter Bootstrap, there was (and is) ZURB Foundation, a framework that lets you add pretty buttons, block grids, progress bars, pricing tables and much more with a few well-placed CSS classes. With the ZURB Foundation theme for Drupal, you can unleash all this bling on your Drupal site with fatal ease.

What Is the ZURB Foundation Framework?

The ZURB Foundation framework is a collection of CSS and ​​Javascript code for a bunch of stuff that you probably want on your website.

This includes not only clickable eye candy like the aforementioned buttons but also some truly amazing responsive power.

You use most of these features by adding special CSS classes. For instance:

<p>Here is a <span class="button">button</span>.</p>

<p>And here is a <span class "tiny button">tiny button</span>.</p>

The ZURB Foundation framework is totally separate from Drupal. People use it on WordPress, Joomla, and even​ static HTML sites.

What Is the ZURB Foundation Drupal Theme?

The Drupal ​ZURB Foundation theme allows you to unleash all this ZURBish power just by downloading and enabling a theme (and reading the documentation and taking a few extra steps, of course).

For instance, ZURB Foundation relies on the jQuery Javascript library, so you'll probably have to install ​jQuery Update. Check whether you're using any other modules that rely on jQuery. If you use too new a version of jQuery, these modules may stop working.

Also, you'll probably want to use this theme as a base theme for your own custom theme. Customization is where ZURB Foundation really shines.

Do You Need This Theme To Use ZURB Foundation in Drupal?

You don't need this theme to use the ZURB Foundation framework. At its simplest, this theme just adds the ZURB Foundation CSS and Javascript to your site, and you could do that manually.

But this theme makes that easier, and it also includes some further integration with Drupal.

Plus, you can add smaller additional modules for further integration. For instance, the ZURB Orbit module lets you build an Orbit slideshow with image fields. The ​ZURB Clearing module lets you create responsive lightboxes with ​Media images.

Note: I haven't used these tiny modules yet myself, so they may be fraught with peril. As of this writing, ZURB Clearing requires Media-2.x-dev, which could be a hazardous upgrade if you're currently using Media 1.x. And a requirement for a development version of a module should always give one pause. Still, these and other ZURB modules are worth looking into.

Choose Which Version of ZURB Foundation to Use

Before you download the ZURB Foundation theme, check which version you should use. There are different major versions of the ZURB Foundation framework, and the major version number for the theme corresponds to the framework it works with. So, the 7.x-3.x versions of the theme work with Foundation 3, the 7.x-4.x versions work with Foundation 4, and the 7.x-5.x ​ versions work with Foundation 5.

As of this writing, the latest stable version of the theme is 7.x-4.x, which works with Foundation 4.

The 7.x-5.x version is still in development. So, although the Foundation framework website assumes you'll use Foundation 5, you might want to stick with Foundation 4 for now.

Also note that Foundation 5 has extra requirements, especially jQuery 1.10. Foundation 4 only needs jQuery 1.7+.

Be aware of which version of Foundation you're using when you read the online documentation. This is especially true if you're not using the latest version of the framework. It's fatally easy to slip into reading the docs for, say, Foundation 5, then get frustrated when a new feature doesn't work on your Foundation 4 site.

For instance, Foundation 5 includes a whole set of medium classes for medium-sized screens. In Foundation 4, these will mysteriously fail unless you take extra steps.

Use SASS, Compass, and "_variables.scss"!

If you're going to tweak the CSS for this theme at all, make sure you:

  • Use the ZURB Foundation theme as a base theme for your own custom subtheme
  • Generate this subtheme using the drush command provided by the theme. Like this: drush fst your_theme_name
  • Leisurely peruse the excellent _variables.scss file

The _variables.scss file is created automatically by drush fst. This single file contains variables for almost anything you might want to tweak in your theme CSS. It's amazing! All in one place, you can set everything from the default font to the screen width to the border on the breadcrumbs.

Of course, you can always set up additional files as well. But _variables.scss is a splendid place to start.

Notice the file extension: scss, not css. To use _variables.scss, you'll need to set up SASS (a CSS extension language) and Compass (a framework built with SASS). When you run compass compile, your scss files will turn into lovely CSS in separate files. (I prefer compass watch -- this keeps running and updating the CSS as you tweak the scss files.)

If you really, really don't want to bother with SASS, you can write CSS files as usual and list them in your theme's .info file. But trust me -- the tiny time investment to learn enough to compile _variables.scss will be paid back almost instantly.

Before You Use ZURB Foundation

ZURB Foundation is most excellent, but it's not the only front-end framework that's been integrated with Drupal. You might want to consider Bootstrap, a similar framework that also has a Drupal theme. For now, I'm using ZURB Foundation myself, but that's because my research indicated that it was easier to customize than Bootstrap.

Also, the Joyride component is pretty sweet.

And whether you use ZURB Foundation, Bootstrap, or some other framework, be sure to get these tips on using a framework with Drupal.