Style Guide

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. Check out the demo site to see it in action.

Overview

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. The Style Guide module creates an API and preview page for displaying common theme elements. Use it to preview items such as tables, menus, and lists in your custom themes.

Purpose

The purpose of a visual style guide as both a general theming and development tool is to ensure that common site elements are styled in a consistent and intentional way. For further reference see

• Wikipedia: Style guide
• Front-end Style Guides from 24 Ways.org
• Trust in Styleguide

Installing Style Guide

See Installing contributed modules

Using Style Guide

• You must be logged in as user with the "View theme style guides" permission.
• Navigate to http://example.com/admin/appearance/styleguide and you will see a style guide for the current default theme.
• Using the tabs at the top of the page, you can switch to viewing the style guide in other enabled theme.

Using Style Guide Palette

• Enable the styleguide_palette module that's bundled with the styleguide module.
• You must be logged in as user with the "Configure style guide palettes" permission.
• Navigate to http://example.com/admin/config/user-interface/styleguide-palette/edit and will see settings for adding a new color swatch to the palette.
• Once you've added all of the swatches you desire for the palette, visit the usual style guide configuration for your theme at http://example.com/admin/appearance/styleguide.

Example

Check out the demo site to see it in action. Screen shot example of of the pager, progress bar, and breadcrumb elements in the Seven theme: