• Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,588
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
21
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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
  • 4. Drupal is just one tool we use. ✤ A List Apart ✤ Boag World ✤ Armies of blogging designers ✤ Design for Drupal http://groups.drupal.org/d4d
  • 5. Dealing with Drupal Markup & Wild Wild West of Contrib While still making pretty sites
  • 6. Design/Theming Workflow Where to start? ✤ Inspiration ✤ Started a design ✤ Wireframes ✤ Mindmap (mindmeister.com)
  • 7. Design Assumptions ✤ We like legible type. ✤ It will have some configuration of columns. ✤ We might as well establish a vertical rhythm.
  • 8. Plenty of Room for Creativity Lace in Translation
  • 9. Plenty of Room for Creativity Bristol Riverside Theatre Company
  • 10. Plenty of Room for Creativity Drupal.org Redesign Mark Boulton Design
  • 11. Know Where You’re Going ✤ What are you designing for?
  • 12. Know Where You’re Going ✤ What are you designing for? ✤ <div>Markup!</div>
  • 13. Know Where You’re Going ✤ What are you designing for? ✤ <div>Markup!</div> ✤ Nodes, Blocks, Views
  • 14. 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?
  • 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? ✤ Sometimes
  • 16. CSS Frameworks ✤ Blueprint CSS (blueprintcss.org) ✤ 960.gs
  • 17. CSS Frameworks ✤ Blueprint CSS (blueprintcss.org) ✤ CSS reset ✤ Solid yet flexible grid system ✤ Sensible typography defaults ✤ Form styles ✤ Print stylesheet ✤ Thriving open-source project
  • 18. How Blueprint Works
  • 19. Blueprint Tools ✤ http://kematzy.com/ blueprint-generator/ ✤ http://toki-woki.net/p/Boks/ ✤ http://bluecalc.groupion.com/ ✤ http://constructyourcss.com/
  • 20. Apply to Photoshop http://www.canarypromo.com/birdfeed
  • 21. Build Your Site
  • 22. Build Your Site ✤ We’re skipping development. Everyone else today has you covered.
  • 23. BONUS: Use Drush http://drupal.org/project/drush
  • 24. Theming Applying Your Design & Grid
  • 25. Wireframe Your HTML ✤ Paper ✤ Boks or other tool ✤ Hand-code HTML
  • 26. Now, Back to Drupal We are at DrupalCamp, after all.
  • 27. What Starter Theme? ✤ Zen http://drupal.org/project/zen ✤ Stark http://drupal.org/project/stark ✤ Studio http://drupal.org/project/studio ✤ Roll your own
  • 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? ✤ Going w/ a stripped down Zen ✤ Zen is very well documented
  • 31. What Starter Theme? ✤ Going w/ a stripped down Zen ✤ Override most theme and system CSS ✤ Zen is very well documented ✤ THEMENAME.info
  • 32. What Starter Theme? ✤ Going w/ a stripped down Zen ✤ Override most theme and system CSS ✤ Zen is very well documented ✤ THEMENAME.info
  • 33. Putting it Together HTML Wireframe
  • 34. Putting it Together Page Template
  • 35. Putting it Together Unstyled HTML
  • 36. Putting it Together Just Blueprint CSS
  • 37. Putting it Together Finished Site
  • 38. Tools in Drupal Drupal Theming Modules ✤ Devel http://drupal.org/project/devel ✤ theme developer
  • 39. Tools in Drupal Drupal Theming Modules ✤ Devel http://drupal.org/project/devel ✤ theme developer ✤ dsm() + Krumo
  • 40. Tools in Drupal Drupal Theming Modules ✤ Devel http://drupal.org/project/devel ✤ theme developer ✤ dsm() + Krumo ✤ Admin Module http://drupal.org/project/admin
  • 41. 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
  • 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 canarypromo.com/birdfeed/category/drupaldelphia
  • 43. Browser Tools ✤ Firebug (Firefox) ✤ Firebug Lite (others) ✤ Inspector (webkit)
  • 44. Totally Control Markup & CSS Plus the power of Drupal. Pretty sweet.
  • 45. BONUS: Compass / SASS Syntactically Awesome Style Sheets Http://compass-style.org/
  • 46. 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