Understanding Omega Theme

One of the themes for Drupal 7 that has caught a lot of people's attention is Jake Strawn's Omega theme. Omega incorporates a number of features that are unique among Drupal themes and that can provide site builders with some cutting edge tools for building the next generation of websites.

Responsive Design and the 960 Grid

To really appreciate what Omega has to offer, it's important to understand two concepts: the 960 grid and responsive web design. Both of these concepts will be familiar if you're a designer, but for others a brief introduction will be helpful.

Designers have been using grids to lay out pages since long before the Web came along. The 960 grid, developed by Nathan Smith, defines a grid on a web page that is 960 pixels wide. The 960 pixel container is divided into a series of columns that are separated by gutters. The most common layout is 12 columns that are 60 pixels wide with 20 pixel gutters between the columns and 10 pixel margins on both the right and left edges as you see below.

These columns and gutters allow designers to define widths for the various elements on the page and maintain alignment. Once we install the starter kit, you'll see how it makes use of this grid to aid site builders in creating page layouts.

Responsive web design is the brainchild of Ethan Marcotte. It addresses the challenge faced by designers of creating sites that render in a user-friendly way across a wide range of devices. If you have ever browsed a site designed for a desktop on your mobile, then you know it can sometimes be challenging. Until responsive design, this problem was often addressed by creating an entirely separate site for mobile users.

Marcotte's proposal is to avoid this inefficient duplication and instead create sites that respond dynamically to the viewport of the user's browser. This is accomplished using three design techniques: fluid grids, flexible images and CSS media queries. For our current discussion, we really only need to understand fluid grids and media queries.

The concept of a fluid grid is related to the 960 grid. Both are used for the same purpose: to assist designers in laying out the elements on a web page. But instead of a grid that is a fixed 960 pixels wide, it uses the proportions of the 960 grid, with the absolute width of the columns changing dynamically as the browser window expands or contracts.

So let's just take an extreme example and say our browser window is twice the 960 grid - 1920 pixels. In this case our 12 columns that were previously 60 pixels wide would now be 120 pixels wide and our 20 pixel wide gutters would now be 40 pixels wide. But even though they have doubled in size, they exist in the same proportion to each other.

The second aspect of responsive design that we need to understand is media queries. Media queries are actually pretty straighforward. They are a part of the CSS3 specification and tell browsers to conditionally load a stylesheet depending on the browser viewport width. A media query looks like this:

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="mobile.css" />

What this code does is load a stylesheet called 'mobile.css' if a browser width of 480 pixels or less is detected, which happens to be the size of a mobile device's viewport in landscape mode. Using this neat little trick, you can provide multiple stylesheets that alter page layouts so they're optimized for different browser viewport widths.

We'll see how Omega uses these media queries to change the location of the theme's regions to provide a better experience for mobile users. And although it doesn't use a fluid grid by default, it does use media queries to enable stylesheets at certain viewport sizes that render layouts with different column widths in a way similar to a fluid grid. Of course, if you prefer, there is a setting to make your grid completely fluid.

Installation

An important point to keep in mind is that Omega is a base theme. That means it's not suitable for use by itself, but is rather meant to be extended by a sub-theme. To make this task easier, Omega comes with several starter kits. We begin our installation by downloading Omega and placing it in the themes directory:

sites/all/themes

Next, open up the Omega directory and find the 'starterkits' folder. Inside you'll find three other folders that each contain a starter kit. In this example, we're going to choose the omega-html5 starter kit so we can use some HTML5 goodness in our sub-theme. Simply copy the omega-html5 folder and paste it in your themes directory. You should end up with your starter kit sitting side by side with Omega like so:

Configuring Your Sub-Theme

We're not quite ready to get started, however. We need to do a little configuration first. Let's start by renaming the starter kit. Since Omega is named after a letter in the Greek alphabet, let's continue with that naming convention and call our sub-theme 'Zeta'. 

We now need to go into our Zeta sub-theme and make some changes to the theme's .INFO file. The first step is to rename the .INFO file to match the name chosen for the sub-theme.

Next, open up the .INFO file. There are two lines that need to be deleted in order for our sub-theme to be visible to Drupal. 

Near the top of the file are two lines 'hidden' and 'starterkit' that need to be deleted. While you have this file open, go ahead and change the name setting at the very top of the file as well as add a description of your sub-theme. When you're done, save the file and return to your sub-theme folder.

We're almost ready to enable our sub-theme, but first we need to rename a couple other files so they are recognized as belonging to our new sub-theme. Go into the css folder and change the names of the files there that begin with 'YOURTHEME'. All you want to do here is replace 'YOURTHEME' with the name of your sub-theme.

Enabling Your Sub-Theme

OK, so we're ready to enable our sub-theme. Go to the appearance tab of your Drupal site and notice that you now have three new themes listed there. Two of those themes, Omega core and Alpha, are not suitable for use as a primary theme, but in order to get our sub-theme working we do need to enable Omega core. For the purposes of this review, you can safely ignore the Alpha theme. 

Once you have Omega core enabled you should enable your sub-theme and set it as the default.

Now that we have set our sub-theme to the default, let's go to our home page to take a look at what we have.

Not what you were expecting, huh? By default, both a grid overlay and debugging blocks are enabled. This allows site builders to see all of the available regions as well as have a handy visual aid to see exactly how any elements added to a layout will line up with other parts of the page.

Before we go any further, we need to talk about some concepts and terms that Omega uses that you may not be familiar with. If you've worked with themes before, you'll understand the concept of regions. They are the areas defined in our theme where we can place content and other page elements like navigation, forms, ads or whatever. Some common regions are Header, Content and Footer.

Omega places its regions in a larger container called a zone and zones are likewise placed in containers called sections. Take a look below at the structure of the Content section.

The area in the image above that is outlined in red is the Content section. In it are three zones. The first zone which is represented by the green block at the top is the Preface zone. It contains three regions, Preface First, Preface Second and Preface Third. Likewise, the Content zone, which is indicated by the blue overlay, has three regions, Sidebar First, Content and Sidebar Second. When we get to zone and region configuration, we'll revisit this layout, but for the time being simply note that the Sidebar First and Sidebar Second regions each span three columns.

Key Configuration Settings

Let's take a look now at the settings for our Omega sub-theme. I won't go through all of these settings, but I do want to point out a couple that really make Omega unique. First of all notice the setting below.

By default the responsive grid is enabled. It may not be immediately apparent what this means for you, but go back out to your home page and slowly resize your browser.

As the browser viewport becomes smaller, alternate stylesheets are applied which change the page layout until at 740 pixels, a layout suitable for mobile devices is active. This is made possible by the use of media queries, which we discussed earlier. 

These media queries can be adjusted on the Grid settings tab. The three layouts you can set the media queries for are narrow, normal and wide. These media queries determine when the corresponding stylesheets in your theme's css folder are loaded by browsers.

Zone and Region Configuration

The final thing we'll look at is the zone configuration options. Remember when I asked you to make note of the fact that both the Sidebar First and Sidebar Second regions were three columns wide? Let's go into the 'Zone and region configuration' tab and take a look at the settings for these two regions.

Notice the width settings indicate that each region is set to be three columns wide. Let's do a little experiment and try to tweak our layout by adjusting these widths. I'll set my Sidebar First to five columns and my Sidebar Second to one column. Let's take a look at how this has affected our homepage.

You can see that the sidebar regions have adjusted and our Content zone now has quite a different layout. This gives site builders a lot of flexibility when configuring page layout, but it doesn't end there. By installing the Delta module, also authored by Jake Strawn, along with the Context module, you can configure layouts for different content types, users or anything else that the Context module can see.

Wrapping It Up

There is a lot more to the Drupal Omega theme than I've touched on in this post. I actually think there's enough material with the entire stack - Omega theme, the Delta and Omega Tools modules - to fill a small book. But hopefully I've been able to demonstrate what makes Omega unique and why you should consider using it for your site. Comprehensive documentation is available on the Development Geeks site if you need more convincing.

Although there are a lot of cool things about Omega, the key advantage in my opinion is its use of responsive design (more on Drupal responsive design). Mobile web use is exploding, and there will be an increasing expectation from mobile users that sites accomodate them. With Omega this is much easier and site builders are provided with a powerful base theme on which to construct the next generation of Drupal websites.