In a previous post, we took a look at some of the major changes with the Omega 4 base theme. This time around we’re going to get our hands dirty and actually start using this powerful set of tools for Drupal theme development.

Before we get too far along, we need to get clear on a few major points. Omega 4 is a really big change in the way many have been working with Omega theme in the past. It’s now much more akin to the Zen base theme (heck, you can even use Zen grids in your themes without much fuss) and it requires the skills of a front-end dev to use to its full potential.

The beginner-friendly UI layout tools are gone. Setting up a “best practice” development environment may also be a bit of a speed bump. So the first step in using Omega as intended, is to get your workspace set up with the tools you’re going to need.

What follows is intended for folks who already have some experience with Drupal, Sass, Compass and have at least heard of Drush.

Install Drush

I have to admit, it took me a while to get used to frequently working on the command line. I found it tedious and error typo prone. But out of necessity, I made the adjustment. If you want to get the most from Drupal as a themer, the command line is inescapable. Just surrender and things will be easier for you.

The main command line tool for Drupal is Drush and Omega 4 pretty much requires it. I say “pretty much”, because you can get by without it, but you’ll have to live with notices being displayed on your site if you make any changes to the theme settings.

Instead of repeating instructions on installing Drush, I'll point you to some good links below that should get you sorted out. I have yet to find instructions in one place that cover everything, so you may have to piece things together from a couple of sources. A quick heads up for Microsoft fans, Drush and Windows are not really friends, although there is an attempt to bridge the gap.

Links on Installing Drush:

• Video: Installing Drush on Mac OS X
• Installing Drush on *nix
• Configuring Drush on OS X Lion and MAMP 2.0

The last link has a great tip on configuring Drush to use MAMP’s MySQL - something that is often not mentioned in the instructions for installing Drush on a Mac. If you’re not using MAMP, you’ll need to do something similar for whatever set up you have going.

Managing your Gems

OK, this is where things depart from what you might be used to in working with Drupal themes. Because Omega 4 uses Sass, Compass and other tools written in Ruby, it’s advised you use software that helps manage the versions of the Ruby gems used for a particular theme project.

This is especially true if you’re using the Susy and Breakpoint gems as they have versions that have short lives and are sometimes not backwards compatible. This means that if you don’t use the set up that is outlined in the links I’m about to share, someone following up on your work may get errors when your code doesn’t compile. No bueno!

The original post outlining the optimal dev set up is here, however, I found it confusing. A better explanation is provided by the maintainer of Omega 4, Sebastian Siemssen. As you'll see from those links, many people will have to do a lot of set up before they can even begin using Omega as recommended.

I’m a big fan of Omega theme and I think the changes are very positive and sensible, but I also wonder what the impact of the additional complexity will be on adoption. I know a lot of designers in particular for whom this will be challenging, to say nothing of beginners.

Your First Omega 4 Base Theme

With all the set up out of the way, things now get easier. Omega has a number of commands available in Drush that are a big help. We just open a Terminal window, make sure we’re in the directory for the site we’re working on and run the following command:

drush omega-wizard

You’ll be walked through a few simple steps for creating an Omega sub-theme and all the files and folders you’ll need to get started will be automatically created.

You’ll probably end up making some changes to the theme settings for your site (via the admin page) which will trigger a notification urging you to export your theme settings to the .INFO file. Previously this was done using Omega Tools, but now you need to do it with Drush.

First, you run this command to export the theme settings:

drush omega-export

Then you’ll need to clear the database of the settings with this command:

drush omega-revert

If you’re into the whole brevity thing, then you can use this command to do it all in one go:

omega-export --revert

The Path Ahead

Now that you’ve got your Omega 4 sub-theme set up, all you need to do is dig in and get coding! To understand how Omega theme structures its CSS files, take a look at the SMAACSS website. SMACSS is an attempt to create something of a style guide for organizing CSS. It can help you create CSS files that make both maintenance and collaboration a whole lot easier.

In a future post, I’ll be building on today’s topic by discussing how to create layouts in Omega 4. If you haven’t heard of layouts, they are essentially the replacement for the UI tools. However, there is a lot more to them than that, so if you’re interested in following along, sign up for my blog updates.

Farther down the line, I’ll also be going over alternate ways of building Omega 4 layouts - namely by using Panels which is now supported by Omega theme. Pretty exciting stuff!

Any questions or comments on this post may be politely left below.