Mason Wendell, Canary Promotion + Design

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

This session is not about Drupal.

Drupal.org

It’s about overcoming Drupal.Yes, I know it’s being redesigned. :)

Drupal is just one tool we use.

✤ A List Apart

✤ Boag World

✤ Armies of blogging designers

✤ Design for Drupalhttp://groups.drupal.org/d4d

Dealing withDrupal Markup &Wild Wild West of Contrib While still making pretty sites

Design/Theming Workflow

✤ Inspiration

✤ Started a design

✤ Wireframes

✤ Mindmap (mindmeister.com)

Where to start?

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 CreativityLace in Translation

Plenty of Room for CreativityBristol Riverside Theatre Company

Mark Boulton Design

Plenty of Room for CreativityDrupal.org Redesign

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 Photoshophttp://www.canarypromo.com/birdfeed

Build Your Site

Build Your Site

✤ We’re skipping development. Everyone else today has you covered.

BONUS: Use Drushhttp://drupal.org/project/drush

ThemingApplying Your Design & Grid

Wireframe Your HTML

✤ Paper

✤ Boks or other tool

✤ Hand-code HTML

Now, Back to DrupalWe are at DrupalCamp, after all.

What Starter Theme?✤ Zen

http://drupal.org/project/zen

✤ Starkhttp://drupal.org/project/stark

✤ Studiohttp://drupal.org/project/studio

✤ Roll your own

What Starter Theme?✤ Zen

http://drupal.org/project/zen

✤ Starkhttp://drupal.org/project/stark

✤ Studiohttp://drupal.org/project/studio

✤ Roll your own

What Starter Theme?✤ Zen

http://drupal.org/project/zen

✤ Starkhttp://drupal.org/project/stark

✤ Studiohttp://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

✤ Zen is very well documented

✤ Override most theme and system CSS

✤ THEMENAME.info

What Starter Theme?

✤ Going w/ a stripped down Zen

✤ Zen is very well documented

✤ Override most theme and system CSS

✤ THEMENAME.info

Putting it TogetherHTML Wireframe

Putting it TogetherPage Template

Putting it TogetherUnstyled HTML

Putting it TogetherJust Blueprint CSS

Putting it TogetherFinished Site

Tools in Drupal

Drupal Theming Modules

✤ Develhttp://drupal.org/project/devel

✤ theme developer

Tools in Drupal

Drupal Theming Modules

✤ Develhttp://drupal.org/project/devel

✤ theme developer

✤ dsm() + Krumo

Tools in Drupal

Drupal Theming Modules

✤ Develhttp://drupal.org/project/devel

✤ theme developer

✤ dsm() + Krumo

✤ Admin Modulehttp://drupal.org/project/admin

Tools in Drupal

Drupal Theming Modules

✤ Develhttp://drupal.org/project/devel

✤ theme developer

✤ dsm() + Krumo

✤ Admin Modulehttp://drupal.org/project/admin

✤ Custom Show Grid Module

Tools in Drupal

Drupal Theming Modules

✤ Develhttp://drupal.org/project/devel

✤ theme developer

✤ dsm() + Krumo

✤ Admin Modulehttp://drupal.org/project/admin

✤ Custom Show Grid Modulecanarypromo.com/birdfeed/category/drupaldelphia

Browser Tools

✤ Firebug (Firefox)

✤ Firebug Lite (others)

✤ Inspector (webkit)

Totally Control Markup & CSSPlus the power of Drupal. Pretty sweet.

Http://compass-style.org/

BONUS: Compass / SASSSyntactically Awesome Style Sheets

Mason Wendell, Canary Promotion + Design

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

http://canarypromo.comhttp://canarypromo.com/birdfeed/category/drupaldelphiahttp://twitter.com/canarymason

http://blueprintcss.orghttp://960.gs

http://drupal.org/project/studiohttp://drupal.org/project/zenhttp://drupal.org/project/starkhttp://drupal.org/project/drushhttp://drupal.org/project/develhttp://drupal.org/project/admin

http://compass-style.org