The Drupal 8 branch of Zurb Foundation is in active development and will enter a beta cycle soon. As new features are built out, child documentation pages will be added or improved. This document provides an overview of major features and tracking of child pages.

The Zurb Foundation base theme requires jQuery 1.7+ to work. Thankfully, we have the excellent jQuery Update module to help out with that.

Installation

Download the theme from the project page and install and enable it.

Configuration

Please refer to the attached screenshot for reference on the settings form.

Zurb Foundation has a very nice Top Bar component and we've gone to great lengths to make sure it's well implemented and as user-friendly as possible in the 7.x-4.x branch of the Zurb Foundation theme.

Default implementation

By default, a standard Drupal main menu is output and the Foundation Top Bar will appear only for small screens. The top bar will display the site's main menu on the left side and the user menu on the right.

In order to enable/disable any of these menus, just disable their display as usual in the "Toggle Display" fieldset of the "General Settings" tab.

Theme Settings

There's a comprehensive set of settings for the Top Bar under In Appearance -> Settings -> Zurb Foundation.

Here's what each of these settings mean:

Enable

Controls how you want the top bar displayed, if at all. Possible options are : "never", "always" and "mobile only". The most common option is "mobile only", which displays a regular Drupal main menu on larger screens and only displays the Top Bar on small screens.

Contain to grid

Check this option for your top bar to be set to your grid width. Unchecking it will make the top bar occupy 100% of the screen's width.

Sticky

Zurb Foundation 4 has a nice Reveal plugin that makes it very easy to create modal windows.

You may also have already noticed that there's an option (enabled by default) to display Drupal status messages in a reveal modal.

Creating your own reveal modals

Fortunately, we've made it very simple for you to create your own reveal modals, by implementing the zurb_foundation_reveal theme function:

  // As a render array.
  $build = array(
    '#theme' => 'zurb_foundation_reveal',
    '#text' => 'Click me!',
    '#reveal' => 'Hello from Zurb Foundation reveal!',
  );

  return drupal_render($build);

  // Directly as a theme callback.
  return theme('zurb_foundation_reveal', array(
    'text' => 'Click me!',
    'reveal' => 'Hello from Zurb Foundation reveal!'
  ));

The zurb_foundation_reveal theme function accepts the following arguments:

• text The text to display in the link.
• reveal The content that goes in the reveal modal. Can either be a string or a render array.
• html Whether the text uses HTML.
• ajax Whether the reveal uses AJAX content (see below for more AJAX info).

Project Status

The 4.x branch of the Zurb Foundation theme is nearing a stable release, and will support Foundation 4.

The 7.x-4.x branch of the Foundation Theme REQUIRES the jQuery Update module to be enabled and configured to use jQuery 1.7+

» The next section covers how to configure jQuery Update.

Review Requirements

In order to get started, make sure you verify that you meet requirements needed for the Zurb Foundation theme to work:

• jQuery Update 1.5+
• PHP 5.3

The menu's and some of the javascript components won't work unless you have an up to date version of jQuery.

If you have issues with components like views, the overlay, etc please review the issue queue for jquery update.