Drupaldelphia Shortcuts Cheats And Cheap Stunts

1,829 views
1,756 views

Published on

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

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,829
On SlideShare
0
From Embeds
0
Number of Embeds
90
Actions
Shares
0
Downloads
23
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Drupaldelphia Shortcuts Cheats And Cheap Stunts

  1. 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. 2. This session is not about Drupal.
  3. 3. It’s about overcoming Drupal. Yes, I know it’s being redesigned. :) Drupal.org
  4. 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. 5. Dealing with Drupal Markup & Wild Wild West of Contrib While still making pretty sites
  6. 6. Design/Theming Workflow Where to start? ✤ Inspiration ✤ Started a design ✤ Wireframes ✤ Mindmap (mindmeister.com)
  7. 7. Design Assumptions ✤ We like legible type. ✤ It will have some configuration of columns. ✤ We might as well establish a vertical rhythm.
  8. 8. Plenty of Room for Creativity Lace in Translation
  9. 9. Plenty of Room for Creativity Bristol Riverside Theatre Company
  10. 10. Plenty of Room for Creativity Drupal.org Redesign Mark Boulton Design
  11. 11. Know Where You’re Going ✤ What are you designing for?
  12. 12. Know Where You’re Going ✤ What are you designing for? ✤ <div>Markup!</div>
  13. 13. Know Where You’re Going ✤ What are you designing for? ✤ <div>Markup!</div> ✤ Nodes, Blocks, Views
  14. 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. 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. 16. CSS Frameworks ✤ Blueprint CSS (blueprintcss.org) ✤ 960.gs
  17. 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. 18. How Blueprint Works
  19. 19. Blueprint Tools ✤ http://kematzy.com/ blueprint-generator/ ✤ http://toki-woki.net/p/Boks/ ✤ http://bluecalc.groupion.com/ ✤ http://constructyourcss.com/
  20. 20. Apply to Photoshop http://www.canarypromo.com/birdfeed
  21. 21. Build Your Site
  22. 22. Build Your Site ✤ We’re skipping development. Everyone else today has you covered.
  23. 23. BONUS: Use Drush http://drupal.org/project/drush
  24. 24. Theming Applying Your Design & Grid
  25. 25. Wireframe Your HTML ✤ Paper ✤ Boks or other tool ✤ Hand-code HTML
  26. 26. Now, Back to Drupal We are at DrupalCamp, after all.
  27. 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. 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. 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. 30. What Starter Theme? ✤ Going w/ a stripped down Zen ✤ Zen is very well documented
  31. 31. What Starter Theme? ✤ Going w/ a stripped down Zen ✤ Override most theme and system CSS ✤ Zen is very well documented ✤ THEMENAME.info
  32. 32. What Starter Theme? ✤ Going w/ a stripped down Zen ✤ Override most theme and system CSS ✤ Zen is very well documented ✤ THEMENAME.info
  33. 33. Putting it Together HTML Wireframe
  34. 34. Putting it Together Page Template
  35. 35. Putting it Together Unstyled HTML
  36. 36. Putting it Together Just Blueprint CSS
  37. 37. Putting it Together Finished Site
  38. 38. Tools in Drupal Drupal Theming Modules ✤ Devel http://drupal.org/project/devel ✤ theme developer
  39. 39. Tools in Drupal Drupal Theming Modules ✤ Devel http://drupal.org/project/devel ✤ theme developer ✤ dsm() + Krumo
  40. 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. 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. 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. 43. Browser Tools ✤ Firebug (Firefox) ✤ Firebug Lite (others) ✤ Inspector (webkit)
  44. 44. Totally Control Markup & CSS Plus the power of Drupal. Pretty sweet.
  45. 45. BONUS: Compass / SASS Syntactically Awesome Style Sheets Http://compass-style.org/
  46. 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

×