Styleguide
Download as KEY, PDF1 like909 views
This document discusses how designers can transition to designing for Drupal by focusing on reusable modular components rather than entire pages. It recommends starting with wireframing individual elements, creating a style guide documenting these elements, and implementing code in a structured way to ensure reusability. Various tools are mentioned that can help with style guides, component-based design, documentation and front-end development when designing for Drupal.
Styleguide
- 1. Bring your designer to the Drupal side of the force Designing for the modern web Tom Bamford @waako
- 2. Modularity Stop Designing pages Stop Designing pages Stop Designing pages Stop Designing pages Stop Designing pages Stop Designing pages Stop Designing pages Stop Designing pages
- 5. Style Guides Drupal Styleguide module SPECCTR for Adobe Fireworks Style Tiles Styletil.es Front-End Dev SMACSS: Scalable & Modular Architecure for CSS OOCSS: Object Orientated CSS BEM: Block Element Modifyer
- 6. A Process
- 7. Wireframing Design wireframe components NOT wireframe pages
- 8. Style Guide Think about reusable elements before designing the specifics
- 9. Documentation Code implementation should be structured Ensures reusability over time & projects Consider tools like KSS, SASS
- 10. Resources .Net Magazine: Designing Styleguides 24 Ways: Front End Style Guides KSS: Knyle Style Sheets - CSS Documentation Tool Smashing Magazine Maban’s Style Guide collection on Gimme Bar Pea.rs Pattern Primer Kalei - Style Guide BBC Global Experience Language Paul Robert Lloyd: Style Guide & Barebones Twitter Bootstrap
- 11. Drupal Resources Drupal PSD Base Theme Styleguides (Yup self-promo) Styleguide Module Styleguide Extras Module Themetest Module Chapter Three: Design for Drupal: A Template Approach Zivtech’s Drupal Style Guide Drupal Style Guide v0.4
- 12. Who uses web Style Guides Drupal.org MailChimp Github Google BBC Starbucks Gov.uk Twitter Yahoo!
- 13. Examples Depending on internet access... Tom Bamford @waako
- 14. I would love to change the world but they won’t give me the source code... Tom Bamford @waako