Your SlideShare is downloading. ×
Drupaldelphia  Shortcuts Cheats And Cheap Stunts
Drupaldelphia  Shortcuts Cheats And Cheap Stunts
Drupaldelphia  Shortcuts Cheats And Cheap Stunts
Drupaldelphia  Shortcuts Cheats And Cheap Stunts
Drupaldelphia  Shortcuts Cheats And Cheap Stunts
Drupaldelphia  Shortcuts Cheats And Cheap Stunts
Drupaldelphia  Shortcuts Cheats And Cheap Stunts
Drupaldelphia  Shortcuts Cheats And Cheap Stunts
Drupaldelphia  Shortcuts Cheats And Cheap Stunts
Drupaldelphia  Shortcuts Cheats And Cheap Stunts
Drupaldelphia  Shortcuts Cheats And Cheap Stunts
Drupaldelphia  Shortcuts Cheats And Cheap Stunts
Drupaldelphia  Shortcuts Cheats And Cheap Stunts
Drupaldelphia  Shortcuts Cheats And Cheap Stunts
Drupaldelphia  Shortcuts Cheats And Cheap Stunts
Drupaldelphia  Shortcuts Cheats And Cheap Stunts
Drupaldelphia  Shortcuts Cheats And Cheap Stunts
Drupaldelphia  Shortcuts Cheats And Cheap Stunts
Drupaldelphia  Shortcuts Cheats And Cheap Stunts
Drupaldelphia  Shortcuts Cheats And Cheap Stunts
Drupaldelphia  Shortcuts Cheats And Cheap Stunts
Drupaldelphia  Shortcuts Cheats And Cheap Stunts
Drupaldelphia  Shortcuts Cheats And Cheap Stunts
Drupaldelphia  Shortcuts Cheats And Cheap Stunts
Drupaldelphia  Shortcuts Cheats And Cheap Stunts
Drupaldelphia  Shortcuts Cheats And Cheap Stunts
Drupaldelphia  Shortcuts Cheats And Cheap Stunts
Drupaldelphia  Shortcuts Cheats And Cheap Stunts
Drupaldelphia  Shortcuts Cheats And Cheap Stunts
Drupaldelphia  Shortcuts Cheats And Cheap Stunts
Drupaldelphia  Shortcuts Cheats And Cheap Stunts
Drupaldelphia  Shortcuts Cheats And Cheap Stunts
Drupaldelphia  Shortcuts Cheats And Cheap Stunts
Drupaldelphia  Shortcuts Cheats And Cheap Stunts
Drupaldelphia  Shortcuts Cheats And Cheap Stunts
Drupaldelphia  Shortcuts Cheats And Cheap Stunts
Drupaldelphia  Shortcuts Cheats And Cheap Stunts
Drupaldelphia  Shortcuts Cheats And Cheap Stunts
Drupaldelphia  Shortcuts Cheats And Cheap Stunts
Drupaldelphia  Shortcuts Cheats And Cheap Stunts
Drupaldelphia  Shortcuts Cheats And Cheap Stunts
Drupaldelphia  Shortcuts Cheats And Cheap Stunts
Drupaldelphia  Shortcuts Cheats And Cheap Stunts
Drupaldelphia  Shortcuts Cheats And Cheap Stunts
Drupaldelphia  Shortcuts Cheats And Cheap Stunts
Drupaldelphia  Shortcuts Cheats And Cheap Stunts
Drupaldelphia  Shortcuts Cheats And Cheap Stunts
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Drupaldelphia Shortcuts Cheats And Cheap Stunts

1,654

Published on

Mason Wendell's presentation from DrupalCamp Philadelphia (Drupaldelphia) …

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,654
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
22
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

×