drupaldelphia shortcuts cheats and cheap stunts
DESCRIPTION
Mason Wendell's presentation from DrupalCamp Philadelphia (Drupaldelphia)July 31, 2009TRANSCRIPT
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