Style Guide

Provides a visual testing page for Drupal themes. Quickly compare the display of common elements across your themes, and verify that your new theme addresses all common style elements.

The Style Guide module creates a preview page for displaying common theme elements in all active themes for your Drupal site. The module comes with previews for common HTML elements, such as tables, forms, links and lists.

Demo site

You can see the module in action at the demo site built by davidneedham. It shows how Style Guide displays several common themes.

Usage example

By placing common elements outside their normal context, developers and themers can quickly scan HTML output for design consistency. Consider the following output of drupal_set_message() for the core Garland theme in Drupal 6:

When displayed within the Style Guide, catching such inconsistencies in your theme(s) becomes easier.

Color Palette

An editable color palette is now available for color swatches to manually be added per theme. The palette is currently available with the 7.x-1.x version and is configurable via the path admin/config/user-interface/styleguide-palette.

Extensibility

Themers and module developers may extend the module by using hook_styleguide() to add new elements to the preview display. This hook can be used to add visual testing elements unique to your site's theme.

hook_styleguide_alter() can be used to change the behavior of existing preview elements.

Sample API usage

/**
 * Display a standard link and a word with emphasis. Theme an image.
 */
function custom_styleguide() {
  $items = array(
    'a' => array(
      'title' => 'Link',
      'content' => l(styleguide_word(3), 'node'),
    ),
    'em' => array(
      'title' => 'Emphasis',
      'tag' => 'em',
      'content' => styleguide_word(3),
    )
    'image' => array(
      'title' => 'Image',
      'theme' => 'image',
'variables' => array('path' => 'path/to/image.jpg', 'alt' => t('My image'), 'title' => t('My image')),
    ),
  );
  return $items;
}