Creating a ZURB Foundation Sub-theme

Creating a sub-theme

It is imperative that you create a sub-theme to allow Zurb Foundation to apply any updates to your theme.

If you haven't already, please visit the Drupal.org Community documentation page regarding creating a subtheme.

There are two ways of creating a subtheme: drush and manually. We highly recommend the drush route as it's easy, quick and avoids errors.

Below, you'll find Zurb Foundation specific directions on how to create a sub-theme.

Creating a sub-theme with Drush

Creating a sub-theme with Drush can be done by executing the following command:

drush fst [name] --machine-name=[machine_name !OPTIONAL] --description=[description !OPTIONAL]

Manually Creating a sub-theme for Zurb Foundation

1. Setup the location for your new sub-theme.

Copy the STARTER folder out of the zurb_foundation/ folder and rename it to
be your new sub-theme. IMPORTANT: The name of your sub-theme must start with
an alphabetic character and can only contain lowercase letters, numbers and
underscores.

For example, copy the sites/all/themes/zurb_foundation/STARTER folder and
rename it as sites/all/themes/foo.

Why? Each theme should reside in its own folder. To make it easier to

Using Sass and Compass

Installing Sass

Sass can be installed once you have ruby or the rubygem installed.

Compiling Sass

Sass files will not compile automatically. If you wish to compile the files, and generate usable CSS files you have two options:

  1. One-time compile:

    $ compass compile "path/to/zurb-foundation-child-theme"
  2. Compile on every file save:

    $ compass watch path/to/zurb-foundation-child-theme
  3. This command can also be run from within the Zurb Foundation theme directory where your config.rb file is located.

    $ compass watch .

Debugging Sass

You can also invoke debug settings so that you can use firesass to easily debug changes.

Caveat: There are different versions of Foundation

Don't forget to uninstall earlier versions of Foundation because otherwise you'll get an "No such framework: foundation" error. See this google issue.

Installation

Installation for this theme is rather simple. It isn't any different than any other theme.

If you do not wish to use the sass abilities of this theme the css files are already included in the theme. You don't need to do anything.

Zurb Foundation

Getting started with Zurb Foundation

The Zurb Foundation Theme is a great starting point to get your website or application to release quickly. Leveraging the full power of the Zurb Foundation front-end framework, it has a strong component library and features lots of options and abilities for responsive design.

Kalatheme Screenshots

Here are some screenshots for Kalatheme.

Style Plugin Options:

Styles

Subtheme Example Using a wrapbootstrap Library:

Subtheme

Settings:

Settings

Bootstrap Customization Interface:

Customize

Pages

Subscribe with RSS Subscribe to RSS - Drupal theming