Recently the Omega 4 base theme, despite its beta status, has been declared ready for production use. Since I’ve always been a big fan of Omega, I thought I’d write up an overview and share a few observations.
First, let me say that I really like the changes. Omega 4 is a significant improvement on Omega 3 and over the course of this post I’ll explain why I think this is the case. That said, there are major changes that some may find challenging.
Omega has been known for providing a powerful set of tools that could be easily used by non-technical site builders. It wasn’t necessary to be a front-end developer in order to get a lot of value from Omega. Things have changed.
As the documentation states, Omega 4 is, “completely targeted at moderate to advanced themers.” The browser tools you used in Omega 3 to modify grids and layouts are gone and a knowledge of more advanced tools and techniques are required to use Omega 4 as intended.
Let’s go over some of the changes.
Layouts
As I mentioned, one of the keys to the popularity of Omega theme has been its relative ease of use for non-technical users. By providing browser-based grid and region configuration tools, it has allowed site builders to modify page layouts without knowledge of HTML, CSS or even grids, for that matter.
With Omega 4 those tools are now gone, replaced with what are now called, “layouts”. The current Omega documentation says that layouts make, “creating variations of page.tpl.php in code or the use of the Delta module unnecessary.”
I agree with the part about Delta - it’s gone. But it seems to me that layouts are very similar to the page.tpl.php file. Take a look below at the file structure of a layout I’ve created for a theme I’m working on. It's very simple. The layout is named “Basis” to give you an idea of the naming convention.
You’ll see that the layout has three files:
basis-layout.tpl.php
basis.layout.inc
preview.png
The basis.layout.tpl.php file is where the markup for the layout is located and, as I said, seems like a version of page.tpl.php. If I’m wrong about this, please correct me in the comments. I’ve read elsewhere that it’s a lightweight, theme-based replacement for Panels Everywhere, but it looks like page.tpl.php to me. I may be missing something.
The basis.layout.inc file has information similar to what you might see in the .INFO file. See if any of this looks familiar:
name = Basis
description = The default layout for Basis theme.
preview = preview.png
template = basis-layout
; Regions
regions[header] = Header
regions[branding] = Branding
regions[preface] = Preface
regions[highlighted] = Highlighted
regions[help] = Help
regions[content] = Content
regions[sidebar-first] = First sidebar
regions[sidebar-second] = Second sidebar
regions[footer] = Footer
; Stylesheets stylesheets[all][] = css/layouts/basis/basis.layout.css
All that’s happening is that you’re giving the layout a name, specifying the stylesheet that is used for the layout and defining the regions that are used. In a future post I’ll go over creating a new layout from scratch, but you’ll see in the screenshot below what you end up with in the theme settings - the layout I’ve created is blue with those in red provided by Omega.
Once you have a layout defined, you can apply it to a specific page, content type, etc. via the Context Omega module (which is really slick, by the way). Again, I’ll go over this in more detail in a future post, but if you don’t feel like waiting you’ll know the pieces you need to get started with your own layouts.
Another important note is that Omega 4 layouts are available to the Panels module, so after a themer gets an Omega sub-theme set up, site builders could use Panels or Display Suite to modify things as needed.
Susy Grids
Omega 4 comes with the Susy grid framework by default. Susy is what allows you to build responsive layouts and after playing around with it, I think it was a great choice.
Susy focuses on your responsive grid - nothing else. I’ve worked with other frameworks - for example, Zurb’s Foundation - and they often come with a lot of other bells and whistles. By comparison, the simplicity of Susy is refreshing.
One of the cool things about Omega 4 is, if you don’t want to use Susy, you don’t have to. You can plug in any grid system you prefer, edit your layouts if needed and you’re all set. If you’re up to speed on your Sass + Compass, it’s really easy.
I’ve decided I’m going to stick with Susy for my Omega projects and my advice for those new to grids is to do the same. The reason I say this is because most of the future tutorials and documentation will be written using Susy in the examples. If you get stuck and go searching for help, you’ll be more likely to get it if you’re using the default grid framework.
That said, people who are familiar with grids, templates and the like will be able to use any grid system they like without hassle.
Sass + Compass
It isn’t required that you use Sass + Compass with Omega 4, but I highly recommend it. It seems to me that the Drupal community in general is standardizing on Sass + Compass and it makes a lot of sense to invest in learning how to use these tools and techniques.
After spending some time with Omega 4, my feeling is that if you’re not going to use Sass + Compass on your projects, maybe Omega isn’t a good choice. You could certainly do it, but there is a lot of stuff you’ll be missing out on and you’d definitely be making things harder for yourself.
SMACSS
A potentially confusing change (at least until you get the hang of it) is the use of SMACSS, or Scalable and Modular Architecture for CSS. It’s not a technology, but rather a way of organizing your CSS.
Until I started playing around with Omega 4, I had only heard about SMACSS and decided it was a good idea I’d take up someday. Well, “someday” has arrived. I have to admit, I was a little confused at first about where I should be putting things. In fact, I’m not 100% sure I’ve got it perfectly straight now.
It’s yet another thing you’ll need to get the hang of to use Omega 4 as intended. Despite the extra cognitive load this change adds, I think it’s a good choice. It’s forward looking and will allow themers to more easily maintain their CSS.
Polyfills
To help your themes play nicely with all the browsers out there, Omega 4 comes with a number of polyfills that you can enable for your themes.
If you’re not familiar with a polyfill, it’s a plugin that provides functionality that a particuar browser lacks. Most polyfills allow designers to use CSS3 and HTML5 features on clunky browsers like IE 8 and below.
Here are the polyfills that come with Omega 4:
Selectivizr.js
CSS3 Media Queries JS
Respond.js
CSS3 PIE
HTML5 shiv
This is a nice selection and you can easily add any others that your project might require.
Before You Get Started
Prior to setting up your Omega 4 development environment, I recommend you read this post. Unfortunately, I did not read it before I got started and so I’ve got to go back and fix things. I almost always work solo, so it’s not urgent, but I wish I had seen this post before I got started.
And finally, here’s another useful post that will help you get things set up properly as you begin working with Omega 4. It’s actually where I found the first link on how to do a proper set up, but it includes a few other things you may find useful.
Did your Head Explode?
Lots of changes, huh? Omega 4 is very forward in its approach and there may be a lot of new stuff to learn depending on how well you’ve been keeping up with changing tools and techniques. Overall, this is a good thing, although I do realize that many will be put off by such massive changes.
It will be interesting to see if Omega retains its popularity, but in my opinion it’s a great base theme for experienced Drupal themers and a nice improvement on Omega 3. If you’d like to read my future posts on Omega 4 and other things Drupal, be sure to sign up for updates.
If you have any comments or corrections, you may politely leave them below.