Domicile Retrofit

This theme was originally created for the Responsive Web Design workshop. It is a sub-theme of NineSixty and a retrofit of the theme Domicile.

The aim of this theme is to show new themers how a few lines of CSS can adapt an existing theme to be "responsive". The CSS applied in the theme make radical visual changes to the original design to emphasize what's happening at each of the "break" points for the content-based media queries. The CSS as written is not appropriate for real Web sites, but acts as a good starting point for people wanting to retrofit their own sites to be responsive.

This theme also includes a Javascript file which re-writes the order of the content to put the navigation at the bottom of the screen at small screen sizes. You may, or may not, want to include similar functionality in your responsive retrofits as it may pose accessibility concerns.

Another interesting variation which adapts the Domicile design to a responsive theme is Detamo (http://drupal.org/project/detamo).

Installation

1. Download the NineSixty base theme from http://drupal.org/project/ninesixty.
2. Unpack the base theme place the folder into sites/all/themes on your Drupal installation directory.
3. Place this theme into the folder sites/all/themes/domicile_responsive.

Your setup should look like this:
sites/all/themes/ninesixty
sites/all/themes/domicile_responsive

The theme Domicile Responsive is now ready for use.

Enable the theme Domicile Responsive

1. Log into your Drupal site as the site administrator.
2. Navigate to Administration > Appearance.
3. Scroll to the bottom of the screen and locate Domicile Responsive.
4. Click "Enable and set as default". (Note: you do not need to enable NineSixty itself.)
5. Close the overlay.

Domicile Responsive will be applied to your site.

Support for IE

This theme does not include support for older browsers that do not have CSS3 media query support. You may wish to use a Javascript polyfill, such as respond.js, if you want to include support for these older *cough* IE *cough* browsers. For more information, see: http://drupal.org/project/respondjs.