Migrate Bootstrap subthemes from 2.x to 3.0

This space is reserved for theme users to share any tips that may assist others in migrating their Bootstrap subthemes from 7.x-2.x to 7.x-3.0. Consider it a Bootstrap theme supplement to the Bootstrap 3 Migration Guide. If you haven't done much to override Bootstrap theme's templates or CSS, you probably won't need this.

Theming OpenAid

The OpenAid distro comes with the OpenAid theme, which integrates with the Color module and is responsive out of the box.

To customize the theme for your site's needs, it is suggested that you create a child theme based off of OpenAid.

The theme's settings and color picker are located at /admin/appearance/settings/openaid

Bootstrap sub-theming "how to"

Below are instructions on how to create a Bootstrap sub-theme. There are many different variations on how to accomplish this, but this will focus on primarily the two most common: using local LESS pre-processing of the source Bootstrap framework and using the built-in CDN.

Requirements

  • Bootstrap - 7.x-2.0 or 7.x-3.0 (base-theme must be enabled).
  • jQuery Update - 7.x-2.3 or higher. Bootstrap requires a minimum jQuery version of 1.7 or higher. You must manually set this in the configuration after it is installed.

Conditional Requirements for Method 1: Bootstrap Source Files

Unsupported Modules

The following modules are not supported nor recommended for use as they conflict with these documentation methods. If they are installed, use at your own risk. Issues created regarding these modules will be closed as "won't fix":

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 !OPTIONAL] [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.

Pages

Subscribe with RSS Subscribe to RSS - Drupal theming