' . t('Overview') . '';
$output .= '' . t('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.') . '
';
$output .= '' . t('Purpose') . '
';
$output .= '' . t('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.') . '
';
$output .= '';
$output .= '- ' . t('Wikipedia: Style guide', [':wiki' => 'http://en.wikipedia.org/wiki/Style_guide']) . '
';
$output .= '
';
$output .= '' . t('Using Style Guide') . '
';
$output .= '';
$output .= '- ' . t('You must be logged in as user with the "View theme style guides" permission.') . '
';
$output .= '- ' . t('Navigate to admin/appearance/styleguide and you will see a style guide for the current default theme.', [':link' => Url::fromRoute('styleguide.page')->toString()]) . '
';
$output .= '- ' . t('Using the tabs at the top of the page, you can switch to viewing the style guide in other enabled theme.') . '
';
$output .= '
';
return $output;
}
}
/**
* Implements hook_theme().
*/
function styleguide_theme($existing, $type, $theme, $path) {
$themes = [
'styleguide_header' => [
'variables' => ['theme_info' => []],
'template' => 'styleguide-header',
],
'styleguide_links' => [
'variables' => ['items' => []],
'template' => 'styleguide-links',
],
'styleguide_item' => [
'variables' => ['key' => NULL, 'item' => [], 'content' => NULL],
'template' => 'styleguide-item',
],
'styleguide_content' => [
'variables' => ['content' => NULL],
'template' => 'styleguide-content',
],
];
return $themes;
}