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;
}
Project information
- 5,084 sites report using this module
- Created by agentrickard on , updated
- Stable releases for this project are covered by the security advisory policy.
Look for the shield icon below.
Releases
Development version: 2.x-dev updated 6 Nov 2023 at 20:52 UTC
Development version: 2.x-dev updated 6 Nov 2023 at 20:52 UTC
Development version: 7.x-1.x-dev updated 16 May 2015 at 23:08 UTC