I’ve had design coming out my ears the past couple weeks while working on the the designs and themes for “DrupalCon DC”:http://dc2009.drupalcon.org, “DC Bikes”:http://www.outsideindc.com/bikes, “Stumble Safely”:http://www.stumblesafely.com, and the New America Foundation’s recently launched “State of State Health”:http://health.newamericafdn.org. Working around the clock on theming has been a good reminder of how even veteran Drupal themers can use some brushing up on their fundamentals. Inspired in part by this “simple sticky”:http://www.flickr.com/photos/mortendk/2328480745, I put together a wallpaper that includes the reminders and diagrams I found myself needing the most.

!http://farm4.static.flickr.com/3223/3059365978_77f9656dde.jpg?v=0!

Metrics

Should this logo go 10 pixels wider? 50? How big is 100 pixels again? Metrics gives you a quick visual scale of different measurements so you can get on the same page with your teammates about how big that logo really should be.

Fonts

Choosing the right font for that special occasion can be tricky. Here’s a display of the most common web fonts in both Camel Case and UPPERCASE to help you decide what font is right for you.

Color

Color pickers are great, but wouldn’t it be better if you could command RGB hex values on your own? An RGB color wheel reminds you which values you need to achieve different parts of the color spectrum, and a hex value scale helps you blend colors right from your text editor. A palette of 20 trendy colors has been thrown in for reference and good measure.

Shorthand

Keep your CSS tight and simple. A quick reminder of the most used CSS shorthands: backgrounds, fonts, and box model.

Internet Explorer

Last but not least, the best defense against IE is a good offense: don’t write code that IE won’t understand. This short list of CSS and JavaScript pitfalls to avoid will help you minimize your head-scratching, head-banging IE debugging nightmare even if it can’t actually fix everyone’s favorite browser.

The Themer’s Cheatsheet is available for download in several different colors — “blue”:http://flickr.com/photos/developmentseed/3058529333/in/set-72157610091884576/, “green”:http://flickr.com/photos/developmentseed/3058529205/in/set-72157610091884576/, “red”:http://flickr.com/photos/developmentseed/3059365856/in/set-72157610091884576/, and “black”:http://flickr.com/photos/developmentseed/3059365898/in/set-72157610091884576/ if you do that. The original SVG has been released to the Public Domain. Enjoy!

http://svn3.cvsdude.com/devseed/sandbox/graphics/themers_cheatsheet