The new face of Omega 4

We've been big cheerleaders for Omega as a responsive base-theme for Drupal for a while now… since around the time of DrupalCon London. And although the community has HUGELY embraced Omega… making it the second-most-installed Drupal theme after Zen, there has always been a bit of controversy surrounding Omega 3 in terms of how it approached responsive web design.

Some of those critiques included:

• Omega 3 was more "adaptive" than truly responsive (due to the definition of set breakpoints based on device widths).
• Configuring Zones and Regions was confusing and laborious.
• Omega 3 did not take a mobile-first approach.

The good news is that Omega 4 has addressed these issues of its predecessor head-on. In fact, Omega 4 looks quite a bit different than Omega 3.

If you're more of a skimmer, here's a quick overview (in list-form) of how Omega 4's changed:

• Zones & regions: GONE
• SASS out of the box
• A new (pluggable!) layout & grid system
• Optional polyfills for CSS3 & HTML5 support in older browsers

Zones & Regions

For starters, zones and regions have been totally abandoned. There have been many folks who have tried to explain how to wrap your head around how to configure these things. Remember this screen?

Well, no more. Omega 4 has gone back to the tried and true page.tpl.php file which is a) standardized for Drupal and b) better for markup control. Themer purists will undoubtedly appreciate this reversion.

Edit: For those that want the old UI we are working on it to make that an option and will allow you the same power that to control things as was in 3.x but now we're not forcing it on everyone. This is largely what's holding back the RC release but we're working quick to fix that! (See excerpt from Cellar Door's comment below.)

SASS

Omega 4 ships with SASS out of the box. This addition will be hugely important for keeping Omega a cutting-edge contender as a popular Drupal base-theme.

And for those looking to improve their SASS skills, the media queries, variables, and mixins that ship with Omega 4 are a great learning tool for novice or intermediate SASS-ers:

Just look at all that SASSY goodness!

Pluggable Layouts

In the Omega 4 theme settings, you can now choose to enable layouts. Layouts are a new feature that provide functionality much like what theDelta and the Context modules achieved together. Essentially, you can have completely unique layouts for different sections or pages of your site.

There is currently only one available layout, Epiqo, to use as a starting point, but it's chock-full of more SASS techniques.

If you'd like to employ this built-in feature in an upcoming Omega 4 project, simply copy the Epiqo layout into your sub-theme, and rename it and its contents much in the same way you would when manually creating a sub-theme. From there, you should add only layout-specific code, and nothing relating to styles (colors, typography, etc...).

Polyfills

For anyone responsible for browser testing or device testing, polyfills are becoming essential scripts to include on your site. Polyfills provide themers the ability to quickly enable CSS3 and HTML5 technologies in legacy browsers, saving hours of testing and work-arounds.

In Omega 4, there are already 5 optional scripts available to enable across your site:

While this certainly doesn't mark every improvement, these are the changes we felt most during the development of our first and second Omega 4 projects.