Shortcuts, Cheats
and Cheap Stunts!
Rethink your workflow to fix a lame design and rock your theme development.

Mason Wende...
This session is not about Drupal.
It’s about overcoming Drupal.
Yes, I know it’s being redesigned. :)

Drupal.org
Drupal is just
one tool we use.


✤   A List Apart

✤   Boag World

✤   Armies of blogging designers

✤   Design for Drupa...
Dealing with
Drupal Markup &
Wild Wild West of Contrib
While still making pretty sites
Design/Theming Workflow
Where to start?




✤   Inspiration

✤   Started a design

✤   Wireframes

✤   Mindmap (mindmeiste...
Design Assumptions



✤   We like legible type.

✤   It will have some configuration of columns.

✤   We might as well esta...
Plenty of Room for Creativity
Lace in Translation
Plenty of Room for Creativity
Bristol Riverside Theatre Company
Plenty of Room for Creativity
Drupal.org Redesign

Mark Boulton Design
Know Where You’re Going

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

✤   What are you designing for?

✤   <div>Markup!</div>
Know Where You’re Going

✤   What are you designing for?

✤   <div>Markup!</div>

✤   Nodes, Blocks, Views
Know Where You’re Going

✤   What are you designing for?

✤   <div>Markup!</div>

✤   Nodes, Blocks, Views

✤   You can ov...
Know Where You’re Going

✤   What are you designing for?

✤   <div>Markup!</div>

✤   Nodes, Blocks, Views

✤   You can ov...
CSS Frameworks

✤   Blueprint CSS (blueprintcss.org)

✤   960.gs
CSS Frameworks

✤   Blueprint CSS (blueprintcss.org)

    ✤   CSS reset

    ✤   Solid yet flexible grid system

    ✤   Se...
How Blueprint Works
Blueprint Tools


✤   http://kematzy.com/
    blueprint-generator/

✤   http://toki-woki.net/p/Boks/

✤   http://bluecalc....
Apply to Photoshop
http://www.canarypromo.com/birdfeed
Build Your Site
Build Your Site




✤   We’re skipping development. Everyone else today has you covered.
BONUS: Use Drush
http://drupal.org/project/drush
Theming
Applying Your Design & Grid
Wireframe Your HTML



✤   Paper

✤   Boks or other tool

✤   Hand-code HTML
Now, Back to Drupal
We are at DrupalCamp, after all.
What Starter
Theme?
✤   Zen
    http://drupal.org/project/zen

✤   Stark
    http://drupal.org/project/stark

✤   Studio
 ...
What Starter
Theme?
✤   Zen
    http://drupal.org/project/zen

✤   Stark
    http://drupal.org/project/stark

✤   Studio
 ...
What Starter
Theme?
✤   Zen
    http://drupal.org/project/zen

✤   Stark
    http://drupal.org/project/stark

✤   Studio
 ...
What Starter Theme?

✤   Going w/ a stripped down Zen

✤   Zen is very well documented
What Starter Theme?

✤   Going w/ a stripped down Zen   ✤   Override most theme and
                                      ...
What Starter Theme?

✤   Going w/ a stripped down Zen   ✤   Override most theme and
                                      ...
Putting it Together
HTML Wireframe
Putting it Together
Page Template
Putting it Together
Unstyled HTML
Putting it Together
Just Blueprint CSS
Putting it Together
Finished Site
Tools in Drupal

    Drupal Theming Modules

✤   Devel
    http://drupal.org/project/devel

    ✤   theme developer
Tools in Drupal

    Drupal Theming Modules

✤   Devel
    http://drupal.org/project/devel

    ✤   theme developer

    ✤...
Tools in Drupal

    Drupal Theming Modules

✤   Devel
    http://drupal.org/project/devel

    ✤   theme developer

    ✤...
Tools in Drupal

    Drupal Theming Modules

✤   Devel
    http://drupal.org/project/devel

    ✤   theme developer

    ✤...
Tools in Drupal

    Drupal Theming Modules

✤   Devel
    http://drupal.org/project/devel

    ✤   theme developer

    ✤...
Browser Tools



✤   Firebug (Firefox)

✤   Firebug Lite (others)

✤   Inspector (webkit)
Totally Control Markup & CSS
Plus the power of Drupal. Pretty sweet.
BONUS: Compass / SASS
Syntactically Awesome Style Sheets

Http://compass-style.org/
Shortcuts, Cheats
and Cheap Stunts!
Rethink your workflow to fix a lame design and rock your theme development.

Mason Wende...
Drupaldelphia  Shortcuts Cheats And Cheap Stunts
Upcoming SlideShare
Loading in...5
×

Drupaldelphia Shortcuts Cheats And Cheap Stunts

1,672

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,672
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
22
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
  1. ¿Le ha llamado la atención una diapositiva en particular?

    Recortar diapositivas es una manera útil de recopilar información importante para consultarla más tarde.

×