Theming with Styleguide
A better way to build responsively.
Tiffany Tse
@tiffany_tse
About Me
What We'll Talk About
-
Why you should already be using
Styleguides or a Pattern Library
-
Basics of using the Styleguide module
- How to extend it using custom markup and the hook_styleguide() function
building a system
Reusable parts
Responsive Design
content first
The first step in our responsive design workflow is to inventory only the things that need to be on the page, whether or not they exist yet ... This version of the content inventory is not meant to replace traditional content inventories. We're simply borrowing the idea of a content inventory and using it as a starting point for design.
An excerpt from Stephen Hay's Repsonsive Design Workflow
Content Modelling
What is a style guide?
STYLEGUIDE
vs.
PATTERN LIBRARY
In the wild
Styleguides
- Living documentation / code
- One stop shop for the whole team (clients, designers, developers)
why should i care?
scalable, modular and updatable
document interactivity
bridging the divide
using styleguide
Installation
- Install using drush or go to the url https://www.drupal.org/project/styleguide
- (sites/all/modules/development/)
- Don't forget to enable the styleguide module !
Lets Take a Look
admin/appearance/styleguide/
styleguide palette
-
New with 7.x-1.x
-
Simply enable the styleguide_palette
- admin/config/user-interface/styleguide-palette/
custom markup
- Create a custom module
- Use hook_styleguide() function to trigger
- Documentation on drupal.org
Example Module
Other Customizations
- You can use hook_styleguide() in any module file, where it has access to other variables, functions and includes
- https://git.dropfort.com/dropfort/drupalproject/blob/7.x-1.x/drupalproject.module