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
TO REcap
Creating a system
Scalable, Modular and Updatable
Interactivity
creating custom markup / widgets
integrating into existing custom modules
Thanks!
Theming with Styleguide: A better way to build responsively with Drupal
By tset
Theming with Styleguide: A better way to build responsively with Drupal
DRUPALCAMP MONTREAL 2014 - With responsive sites being an expectation in today's web landscape, we need to manage the complexity and flexibility by designing and building individual components and layouts. The Styleguide module gives you a way to quickly style most (if not all) of your site's themable elements in one place.
