This session / presentation has been archived here:

http://magicspark.com/lab/tutorials/firebug-css-and-zen-sub-theme-system

Please leave comments in the magicspark lab, I will continue to evolve the tutorial and I would like to have your help via comments, questions, and suggestions.

Thanks! Jason

Learn how to take a simple concept drawing, create content types and then rock out your page and node template files with clean css.

We will skip the psd and jump right into the sauce.

part one: clarity and focus
+ welcome and overview
+ good questions to ask to further the creative process
- what is your business or intention for this website?
- who are you communicating to?
- after launch, what outcome will define success?

+ information design
- content types
- taxonomy

part two: things to understand to make use of the tools
+ css overview http://w3.org/TR/CSS21
- #ID and .class
- boxes margins and padding
- !important stuff
- why and how to cascade
- what's this em stuff?

+ firebug, web inspector
- installation and setup http://getfirebug.com
- usage

+ zen project page
- download and enable: curl -s http://ftp.drupal.org/files/projects/zen-5.x-1.1.tar.gz | tar xvzf -
- stuff you should read before pokin at it

+ STARTERKIT
- what to copy to override the foundation
- template.php

+ Zen CSS architecture
- layout.css
- html-elements.css
- your new theme (subtheme)

part three: a practical conversation about putting it all together
+ menu system
+ adding new theme regions and why or not
+ node-content_type_name.tpl.php
+ page.tpl.php
+ $body_classes
+ bueller?