Home > Blogs > Drupal Theming Toolkit

Drupal Theming Toolkit

By  Mar 9, 2009

Topics: Web Development

Programmers and designers have a huge range of tools available from Vim and Emacs to Illustrator and Inkscape. But there are also those in-between folks who are responsible for taking graphic files and converting them into the template files that are applied to Web CMSes. In the Drupal world these people are known as "themers." During my DrupalCon presentation this past week in Washington, DC, I asked themers to blog their toolkit so that we can learn from one another and work towards a "best practices" toolkit. This post shows you my top six favorite tools in my Drupal theming toolkit.

This list of tools includes those which are useful to both Drupal themers and general Web site developers:

  1. Browser plugins--make your browser a Web development environment instead of just a Web browsing window. Firebug allows you to edit your CSS files on the fly and to easily locate any element in the HTML source for your page. Victor Kane also recommends the Web developer's toolbar.
  2. Testing services--stop asking your friends to take screen shots for you and start using one of these two testing services. The free service BrowserShots.org is perfectly suited to most people. It gives free screenshots from a variety of different configurations. The paid service, BrowserCam.com, is perfect for those who need to test interactive features as well. I have a BrowserCam account that I use to test fly-out menus on the sites I build.
  3. The Drupal Devel module--a helper module for Drupal developers and themers. This module comes with an amazing Themer Info tool that allows you to "see" the contents of node and page variables.
  4. Personal design library--Web sites change. Your favorite site today might be completely different tomorrow. Find a tool which allows you to save your favorites into a reference library. My favorite of tool is the browser plugin, Zotero. It was originally created for researchers, but it works well for designers too.
  5. CSS Grid Systems--these CSS frameworks allow you to quickly create new Web sites that work in "all" browsers. One of the best documented grid systems is 960.gs. There is also a Drupal base theme that uses the 960 grid and a comparison chart that summarizes which of the base themes use what grid system (if one is used at all).
  6. Version control--I don't care which system you use, as long as you use something to maintain a history of your text files! I personally enjoy the distributed version control system, Bazaar. A short tutorial of how I use it to upload my theme files to a Web server is available on the Bazaar Web site.
These six tools help me to work faster and more efficiently when creating and customizing themes for Drupal. This list just begins to scratch the surface of the amazing tools that are available to Web site developers. What else is in your toolkit?