The Zen Magic starter project

One of the main principles of software development is Don't Repeat Yourself (DRY). When writing code, we spend a lot of time "factoring out" the common parts into reuseable chunks. But when I started each new web development project, I found myself repeating the same steps over and over -- come up with an estimate, customize a contract, download the core CMS files, download the same set of contributed modules/plugins that I use for every site, set up basic configuration, do the same sorts of customizations to my base theme, etc. I decided it was time to DRY up my project management.

So, this time, when I had two new projects to start at the same time, I made a starter project that consists of these parts:

  1. A starter project management directory tree with lots of useful files already created and ready to customize. Under my home directory I have a Projects directory that contains one sub-directory per project, named with the domain name minus the .tld part (such as justmagicdesign). I create each new project directory by copying the ~/Projects/starter directory which contains:
    • documentation
      • ​clientinfo.doc: contact info for main contact & stakeholders, web hosting details, domain registrar details, CMS login info, and any other passwords needed
      • notes.oo3: competitive analysis, links to designs that appeal, sitemap, notes on required features, things to do list, etc. This is an OmniOutliner document since it's for my own use, but I can save it as a PDF to share.
      • estimate.xls: a worksheet for coming up with an estimate for a new project
      • contract.doc: a template contract ready to be customized for a project
      • drupal-howto.doc: ready-to customize user documentation for a Drupal site (one of the last things completed and handed over)
      • wordpress-howto.doc
    • assets
      • mockup.psd: a template with grid columns and useful guides.
      • color-scheme.ase: a swatch file to add to the Photoshop pallete (made at a site like kuler.adobe.com or colourlovers.com).
      • logo.ai: the Illustrator version of the logo if it exists (ideally create if it doesn't).
      • image-source: an initially empty directory for keeping other stock photos or psd files in their original state.
      • fonts: web fonts purchased for this site, if any
    • invoices
      • invoice.xls: a template Excel spreadsheet for an invoice.
      • invoice-[1-n].xls: submitted invoices.
    • backups: an initially empty directory in which to put backup tar.gz files and exported database .sql.gz files.
  2. A starter theme called Zen Magic which is based on the awesome, new Drupal Zen 5 theme. This Zen Magic theme contains the overrides I always do for typography and basic styling since Zen is quite sparse (intentionally) in this area. I also customized Zen to allow more flexible layout with a 12--column, 960px max grid, possible full-width headers and footers, possible faux columns in the main area, etc.
  3. Two directories under ~/Sites called drupal and wordpress. (I work on a Mac, so Sites is standard.) The drupal directory uses the multi-site feature so that the Zen Magic theme is in ~/Sites/drupal/sites/all/themes/zenmagic and I create a new directory under drupal/sites for each new project. Each project has a child theme of Zen Magic in its drupal/sites/<project>/themes. The drupal/sites/all/modules directory has the contributed modules that I use on almost every site. The wordpress directory, similarly, has the latest version of WordPress and a core set of plugins.
  4. Databases called starter-drupal and starter-wordpress with good, basic configuration. When I start a new project, I copy the appropriate database. For example, the Drupal database would have the Pathauto module already enabled and URL patterns set up for each standard content type. Similarly, it would have the WYSIWYG module enabled with the CKEditor already installed and WYSIWYG profiles and text formats already configured.

I've had the starter Projects directory tree for a long time, but the idea of a starter Drupal/modules directory (or WordPress/plugins), the starter Zen child theme and the starter database is new. Using them, I've written a simple shell script that creates a new development site for me, including editing /etc/hosts and the Apache configuration files so I can immediately visit the new development site on my Mac.

Having the template files saves a lot of time and having the same directory structure and file names means I don't have to spend any time remembering where things are for a particular project. Note that I also create a new Mailbox in Mac Mail with the project name so I can easily find all email related to the project. If you are a freelancer like Diane and I, you probably have the same project management needs that we do and you may find some of these ideas useful for your own projects. Do you do something similar? Any ideas for improvement?

Thanks to Gábor Hojtsy for the Drupal theming picture.

About Maria Greene

Maria Greene's picture
Maria wears the propellor hat at Just Magic Design. She has a degree in Computer Science from Brown University and has been making websites since 2002. Besides web development, Maria tries to keep up with her three school-age kids and serves on the boards of several non-profits. Her husband adds joy to her life and her dog adds slobber.

Add your comment