Building a Frankenstein monster & how to maintain it (DrupalCon DC 2009 notes)

Building a Frankenstein monster & how to maintain it
morton.dk

 Setup: ideal

• clients give you enough time to get the job done
• the clients don't bitch about small stuff, and pays in advance
• wire framing is complete! "nothing's gonna change, ever!"

Setup: reality

• limited time theming is the last in line: after design & functionality
• the client can't understand the site before it's completely done
• wire framing missing for 25% of the site

Designer ideal:

• understands Drupal
  • knows limits and not gonna bitch about them
  • uses a grid system

Designer reality:

• don't care about mighty Drupal
• Have no clue of limits
• Don't use grids: "I don't do boxes! I'm an artist"

Developer: ideal:

• all output is overwritable through theme();
• not have lots of CSS files

Reality:

• hardcoded HTML
• $styles full with css files from a ton of modules - with a ton of classes

Editor ideal

• only adds words & predefined images to the content
• kindly ask to have changes in the css if something's gotta change
• knows that inline styles are made by satan

Editor reality

• copy-paste directly from word
• throw in classes to the style.css
• adds inline styles anyway

Themer ideal

• knows every corner of theme()
• works hard and long and listens to the codes, pm's & designers
• always makes the wise choice

Themer reality

• don't know every corner of theme()
• uses {display: none}
• +10% hotter than the rest - that's just a fact

To control the monster: the mothership:
Basic starting theme & subtheming

In the mothership theme:

• mothership.info
• page.tpl.php
• node.tpl.php
• style.css
• template.php

Keep mothership as theme as possible.

Subtheme:

• subtheme.info
• page.tpl.php
• node.tpl.php
• style.css
• template.php

overrides in subtheme for page.pl.php, node.tpl.php

Note: if you need a node-foo.tpl.php as a subtheme override, you need a node.tpl.php in your subtheme, too.

mothership: only the most common elements; as little as possible

subthemes: everything else

files

• mothership.info includes meta, regions, features, stylesheets, conditional styles, scripts
• subtheme.info: adds "base theme", stylesheets
• mother/style/reset.css: clean up browser hell, resent font size, remove img borders, .clearfix, clear-break, ... these can be found online
• mother/style/drupal.css: makes block admin workable, menus, tabs, drupal stuff...
• mother/style/grid.css: "width sized class definitions", grid-1 {width: 60px}; grid-2{width:140}...
  • google: mark boulton & grids
  • 960.gs
  • blueprintcss.org
• mother/style.css: basic layout, design, colors...
• style/grid.css: overrides
• style/styles.css: overrides
• styles.css: quickfixes, clean it up every so often, move the good stuff up into style/style.css

StyleStripper module

• selectively remove all unwanted .css files from theme (from other modules, core, etc.)
• different settings for different themes

References

• http://drupal.org/theme-guide
• http://www.alistapart.com/articles/howtosizetextincss