Mason Wendell's presentation from DrupalCamp Philadelphia (Drupaldelphia) July 31, 2009

1. Shortcuts, Cheats
and Cheap Stunts!
Rethink your workflow to fix a lame design and rock your theme development.
Mason Wendell, Canary Promotion + Design

2. This session is not about Drupal.

3. It’s about overcoming Drupal.
Yes, I know it’s being redesigned. :)
Drupal.org

5. Drupal is just
one tool we use.
✤ A List Apart
✤ Boag World
✤ Armies of blogging designers
✤ Design for Drupal
http://groups.drupal.org/d4d

6. Dealing with
Drupal Markup &
Wild Wild West of Contrib
While still making pretty sites

7. Design/Theming Workflow
Where to start?
✤ Inspiration
✤ Started a design
✤ Wireframes
✤ Mindmap (mindmeister.com)

8. Design Assumptions
✤ We like legible type.
✤ It will have some configuration of columns.
✤ We might as well establish a vertical rhythm.

9. Plenty of Room for Creativity
Lace in Translation

10. Plenty of Room for Creativity
Bristol Riverside Theatre Company

11. Plenty of Room for Creativity
Drupal.org Redesign
Mark Boulton Design

12. Know Where You’re Going
✤ What are you designing for?

13. Know Where You’re Going
✤ What are you designing for?
✤ <div>Markup!</div>

14. Know Where You’re Going
✤ What are you designing for?
✤ <div>Markup!</div>
✤ Nodes, Blocks, Views

15. Know Where You’re Going
✤ What are you designing for?
✤ <div>Markup!</div>
✤ Nodes, Blocks, Views
✤ You can override any markup,
but to you have to?

16. Know Where You’re Going
✤ What are you designing for?
✤ <div>Markup!</div>
✤ Nodes, Blocks, Views
✤ You can override any markup,
but to you have to?
✤ Sometimes

17. CSS Frameworks
✤ Blueprint CSS (blueprintcss.org)
✤ 960.gs

18. CSS Frameworks
✤ Blueprint CSS (blueprintcss.org)
✤ CSS reset
✤ Solid yet flexible grid system
✤ Sensible typography defaults
✤ Form styles
✤ Print stylesheet
✤ Thriving open-source project

19. How Blueprint Works

20. Blueprint Tools
✤ http://kematzy.com/
blueprint-generator/
✤ http://toki-woki.net/p/Boks/
✤ http://bluecalc.groupion.com/
✤ http://constructyourcss.com/

21. Apply to Photoshop
http://www.canarypromo.com/birdfeed

22. Build Your Site

23. Build Your Site
✤ We’re skipping development. Everyone else today has you covered.

24. BONUS: Use Drush
http://drupal.org/project/drush

25. Theming
Applying Your Design & Grid

26. Wireframe Your HTML
✤ Paper
✤ Boks or other tool
✤ Hand-code HTML

27. Now, Back to Drupal
We are at DrupalCamp, after all.

28. What Starter
Theme?
✤ Zen
http://drupal.org/project/zen
✤ Stark
http://drupal.org/project/stark
✤ Studio
http://drupal.org/project/studio
✤ Roll your own

29. What Starter
Theme?
✤ Zen
http://drupal.org/project/zen
✤ Stark
http://drupal.org/project/stark
✤ Studio
http://drupal.org/project/studio
✤ Roll your own

30. What Starter
Theme?
✤ Zen
http://drupal.org/project/zen
✤ Stark
http://drupal.org/project/stark
✤ Studio
http://drupal.org/project/studio
✤ Roll your own

31. What Starter Theme?
✤ Going w/ a stripped down Zen
✤ Zen is very well documented

32. What Starter Theme?
✤ Going w/ a stripped down Zen ✤ Override most theme and
system CSS
✤ Zen is very well documented
✤ THEMENAME.info

33. What Starter Theme?
✤ Going w/ a stripped down Zen ✤ Override most theme and
system CSS
✤ Zen is very well documented
✤ THEMENAME.info

34. Putting it Together
HTML Wireframe

35. Putting it Together
Page Template

36. Putting it Together
Unstyled HTML

37. Putting it Together
Just Blueprint CSS

38. Putting it Together
Finished Site

39. Tools in Drupal
Drupal Theming Modules
✤ Devel
http://drupal.org/project/devel
✤ theme developer

40. Tools in Drupal
Drupal Theming Modules
✤ Devel
http://drupal.org/project/devel
✤ theme developer
✤ dsm() + Krumo

41. Tools in Drupal
Drupal Theming Modules
✤ Devel
http://drupal.org/project/devel
✤ theme developer
✤ dsm() + Krumo
✤ Admin Module
http://drupal.org/project/admin

42. Tools in Drupal
Drupal Theming Modules
✤ Devel
http://drupal.org/project/devel
✤ theme developer
✤ dsm() + Krumo
✤ Admin Module
http://drupal.org/project/admin
✤ Custom Show Grid Module

43. Tools in Drupal
Drupal Theming Modules
✤ Devel
http://drupal.org/project/devel
✤ theme developer
✤ dsm() + Krumo
✤ Admin Module
http://drupal.org/project/admin
✤ Custom Show Grid Module
canarypromo.com/birdfeed/category/drupaldelphia

44. Browser Tools
✤ Firebug (Firefox)
✤ Firebug Lite (others)
✤ Inspector (webkit)

45. Totally Control Markup & CSS
Plus the power of Drupal. Pretty sweet.

46. BONUS: Compass / SASS
Syntactically Awesome Style Sheets
Http://compass-style.org/

47. Shortcuts, Cheats
and Cheap Stunts!
Rethink your workflow to fix a lame design and rock your theme development.
Mason Wendell, Canary Promotion + Design
http://canarypromo.com
http://canarypromo.com/birdfeed/category/drupaldelphia
http://twitter.com/canarymason
http://blueprintcss.org
http://960.gs
http://drupal.org/project/studio
http://drupal.org/project/zen
http://drupal.org/project/stark
http://drupal.org/project/drush
http://drupal.org/project/devel
http://drupal.org/project/admin
http://compass-style.org