Review: Omega Base Theme for Drupal 7
I’m always on the hunt for a better base theme. I stuck with Zen for many a Drupal 6 project, and then switched to Fusion once I learned the ways of the grid. For a recent Drupal 7 project however, I decided to go a new direction and give the Omega base theme a try. I had heard some buzz about the theme at Drupalcon, and the theme’s feature set caught my attention. Amongst the selling points for me:
- Flexible theme with tons of layout choices
- Fully HTML5
- Uses an “Adaptive” Grid
- Contextual Layouts (w/ the companion Delta module)
- Import/export of theme settings (w/ with the Omega Tools module)
So without further ado, on to the review!
Flexibility is a Virtue
Omega uses a three-tiered hierarchy of containers which can be built up to create a variety of layouts. Regions live in zones, and zones live in sections. There are a whopping 23 sections (e.g. header first, content second, sidebar first, etc.), which can be placed in any of 8 zones (e.g. header zone, menu zone, preface zone, etc.), which can placed in any of 3 sections (header, content, footer), in any order.
Its not the simplest system, but its powerful. Add in some options like “Force this region to be rendered” and “Provide full width wrapper around this zone”, and you have the flexibility to create any layout you can dream up. I found myself doing much less mucking around in tpl.php files than I would with another base them.
Welcome to the Grid
Omega uses the now standard 960 grid system, giving you the choice of 12 column, 16 column, and 24 flavors. Like Fusion, it gives you a “grid overlay” debug mode, which displays the grid on top of your theme. It has questionable utility, but it looks cool. I suppose you could use it demonstrate that your sub-theme adheres to the grid, after completion. If you haven’t used a grid before to streamline your development and improve your designs, Omega is a great place to start.
Adapt and Overcome
There are plenty of grid-based base themes, but Omega is the first one to offer what the module author has dubbed an “adaptive grid”. It works like this: You define different display settings. By default Omega comes with settings for “wide”, “normal”, “narrow”, and “mobile”. You specify the window sizes that which these settings to apply to. For example, you could set “normal” to apply to a browser window that’s between 480 and 1024 pixels. You could set “wide” to apply to anything greater than this range, and set “mobile” to anything less than this range.
When viewing the theme, Omega will use a different grid width depending on the current browser window width. Using the example above, a browser window 1000 pixels wide would invoke the normal grid, 960 pixels wide. Stretch your browser window out to 1600 pixels wide, and the wide grid will automatically be invoked, widening the page to 1200 pixels. Shrink your browser window down to 400 pixels wide, and the mobile setting will be invoked, removing the grid entirely and making each block full fluid width, stacked on top of one another for easy mobile scrolling and good visibility.
The same Omega subtheme at 2 different browser widths: normal (left) and mobile (right).
To see it in action is pretty cool. It’s like having the flexibility of a fluid width theme with the certainty of a fixed-width theme.
All the magic happens through css3 media queries. You could achieve the same effect outside of Omega by writing your own media queries, but letting Omega do it for you is much easier.
Its All About Context
There’s a companion module to Omega called Delta, which piggybacks on top of the Context module, and lets you specify different theme settings for different contexts. For example, you could have a left and right sidebar as a default, but then put both sidebars on the right just for the home page. Truth be told, I didn’t have a need for this on the project I used Omega for, but it seems like a great idea. On a project with multiple layouts, I could see this module saving some time I’d otherwise have to spend editing tpl.php files.
I’m an Importer-Exporter.*
Omega has another companion module known as Omega Tools, that has a handy theme settings importer/exporter. This was incredibly useful for my project, as I was able to tweak theme settings, then copy and paste them back into my subtheme’s .info file, essentially making them new defaults. For anyone building a contrib theme based on Omega or using Omega in a distribution, you want this feature…trust me!
All in all I found Omega to be flexible, well-organized, and a pleasure to work with. The whole adaptive grid thing is a real innovation, and I’ll be curious where Omega maintainers
himerus Jake Strawn, Development Geeks and Sebastian Siemssen take it in future versions of the theme.
One caveat I’ll make in my endorsement is that Omega isn’t the simplest base theme to start with. The extra theme settings, the hierarchy of regions, and the adaptive grid all make for a bit more work. For novice themers, I’d recommend they start with simpler like Zen, which is also a great base theme in its own right. Then give Omega a try when you're ready!
*If you got this reference, you watched too much TV in the 90s.