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

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 Drupal
http://groups.drupal.org/d4d

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 (mindmeister.com)

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

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 override any markup,
but to you have to?

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

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

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

How Blueprint Works

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

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
http://drupal.org/project/studio
✤ Roll your own

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

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

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
system CSS
✤ Zen is very well documented
✤ THEMENAME.info

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

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
✤ dsm() + Krumo

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

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

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

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 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