Theme-in-a-Gem

Today’s guest post hails from Paul Campbell. Paul is a passionate web developer from Dublin. He runs HyperTiny, a small, agile Rails shop. Paul has worked with Engine Yard, producing projects including RailsPlugins.org, railsdevelopment.com and recently Engine Yard University.

Maintaining brand identity across a variety of apps that make up a company’s web presence can be a daunting task. Having worked recently on Engine Yard University, our brief was to create an app that integrated completely with the design of engineyard.com. We needed to build a completely independent app, with its own database and source repo, but deployed to a sub-url of engineyard.com, sharing the header, footer and CSS styles.

This isn’t a particularly difficult task: just take what we need from http://www.engineyard.com and incorporate it into our app. In fact, this is what we did initially. This, however, will quickly become unmanageable. What if there is more than one other app to maintain? How do we keep the header and footer in sync?

The answer, ultimately, will probably be to build the apps that needed to be embedded on http://www.engineyard.com as mountable Rails Engines … Rails 3.1 may make this a reality, but right now, it’s still a bit of a way off.

Enter our engineyard-theme gem. This gem is primarily for Engine Yard internal use, but we thought it serves as a good case study in how to share your company’s header and footer across apps.

The gem provides three main things:

• a generator for generating the stylesheets locally
• "header" and "footer" helpers that shirt and pant a template with the markup required to theme the app
• an embedded Rails app to make changes to the stylesheets simple for designers

http://www.engineyard.com and http://www.engineyard.com/university are now using the gem for their header and footer styles. Any time the theme is updated, a new gem is released, we redeploy any apps that use it, and all of the sites will share exactly the same theme.

It’s a very simple solution, but also very effective. Keeping the header and footer wrapped up in a gem gives us all the power of the gem distribution system, the confidence to update the design at any stage knowing it won’t be too much hassle to keep it in sync across apps, and the flexibility of having multiple apps powering a single site. Pretty neat!