The new face of Omega 4, Part II

Omega 4 looks very different than Omega 3. When we first wrote about some of their differences back in January, we reported on four major themes:

1. Zones & Regions
2. SASS
3. Pluggable Layouts
4. Polyfills

After getting our hands dirty for the first time with the new theme, these were the most obvious changes. And while these topics are still important to note for those still looking to make the transition from 3 to 4, there are other improvements to the theme which also deserve attention.

In general, Omega 4 is a vastly more flexible version of its predecessor. As a follow-up post to our original findings, here are even more reasons why:

Extensions

Essentially, Omega 4’s theme extensions have been improved in four areas: layout, development, asset management, and compatibility improvements. We’ve touched on the new layouts before, but there’s more to them you should know:

Total L​ay​out Control

With Omega 4 Layouts, you can define how pages are laid out through code. There are no predefined breakpoints which makes for a completely fluid (truly responsive) site.

Layouts can be added via the “layouts” folder of an Omega 4 sub-theme.

Given the file structure in the example above, you could even switch your layout contextually with a hook_omega_layout_alter function:

This feature completely removes the need for the Delta module commonly used with Omega 3.

Devel​opment, made easier

Some cool new features have also been added to assist in the theme development process. In a nutshell (and taken from a great resource, Omega 3.x vs. Omega 4.x - Comparing Apples and Oranges), Omega 4 provides the following development additions:

• Rebuild theme registry on page load
• Rebuild CSS and JS aggregates on page load
• Browser width indicator
• LiveReload
• Region demo mode

(Some pretty spiffy improvements if you ask us...)

Asset Management

As in the Magic module, Omega 4 now makes use of Frontend best practices like moving JavaScript files to the footer, and excluding certain Javascript & CSS. Polyfill libraries (as discussed in our first Omega 3 post) are also readily available through the theme’s settings.

These features make for better site performance and happier Frontend lives.

Browser & Viewport Compatibility

Conditional HTML classes are now added, for example “lte-ie9” in Internet Explorer versions 8 and below. This is a big win when optimizing sites for cross-browser consistency.

There’s also Cleartype support for Windows, customizable Viewport metatags, and ChromeFrame & IE Edge support.

Drush Integration

Next — the powers of Drush! If you navigate (via the command line) to a Drupal site with Omega 4 & Drush installed, there’s a slew of new Omega-specific commands, with two notable ones being omega-wizard (owiz) and omega-guard (ogrd).

Omega-wizard is a guide through the process of setting up and enabling a subtheme, and omega-guard enables the use of Omega 4‘s LiveReload built-in support.

Have a look at the others as well. Omega-export and omega-revert can greatly assist during site-deployments.

Preprocess, Process, and Theme Files

And if you’re a developer fed up with the days of having cluttered, unorganized template.php files, this one’s for you. :)

Omega 4 allows the themer to provide separate preprocess, process and theme functions to their Drupal site via organized, structured theme files. These files are autoloaded and are no longer to blame for overloaded template.php files, especially in the case of themes requiring a heavy load of PHP.

Also, according to fubhy, the Omega 4 developer, “this feature has been improved tremendously since 3.x and performs much better now.”

SMACSS

Finally, and if you didn’t know already, SMACSS is where it’s at. Omega 4 has adopted the “Scalable and Modular Architecture for CSS” principals and applied them directly to both of its available subtheme starterkits.

If you’re not familiar with SMACSS however, it’s basically just a guiding set of methodolgies to write maintainable CSS. Due to CSS’s flexible nature, it’s easy to make a mess of it. SMACSS helps with that.

And if you’re going to use the omega-wizard Drush feature, go ahead and choose the “extended” starterkit. It has a fuller SASS structure included with more modular components, making it easier to understand and organize your project and different Drupal components.

So that's it for now! We're still loving Omega 4. Are you?