The new face of Omega 4

The new face of Omega 4

By Kathryn McClintock 14th January 2013 Drupal

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 the Delta 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.

Stay in touch – join our newsletter!

 

 

Comments

Pierre Paul Lefebvre's picture
Pierre Paul Lefebvre

Nice! I will give it another try :)

Chris M's picture
Chris M

Love it! Out of curiosity, is this an Omega based theme?

SkidNCrashwell's picture
SkidNCrashwell

Just started building a site on Omega 3 last week, now read this article and switching to 4 straight away! Thanks.

David's picture
David

YAY! Less admin complexity. Cleaner markup. Can wait to take it out for a spin.

Frederick's picture
Frederick

Looking forward to testing it out!

Pari's picture
Pari

Looks great, when will be final version?

androider's picture
androider

"Responsive" for the winner.

Peter James Rankin's picture
Peter James Rankin

Good decisions all around - particularly ditching zones/regions and adding SASS. This should mean also it plays better with panels. I always thought something was missing from zones/regions after coming from Fusion.

Johan's picture
Johan

I just switched from using another base theme to Omega because of zones and regions. Now they are going to drop this feature. Autch :(

zoonunit's picture
zoonunit

NOOOOOOO! No zones/regions? One of the GREAT features of Omega 3 was the ability to change a layout from the UI. This protected non-coders from the headaches of trying to program a template. You mean I have to go back to that primitive approach again?? NO! One step forward, three steps back . . .

Nigel's picture
Nigel

Zones and regions were something that kept me using omega. Omegas move to remove this for the appeal to drupal purists is the wrong move. Omegas move to be more like zen is disastrous. Zen can be for the hardcore devs and omega for the point and click noobs. I am now going to reconsider zen for my needs as there is no point to sticking with omega anymore.

Matthew Donadio's picture
Matthew Donadio

Not really sure if I agree with the statement that Omega 3 doesn't take a mobile first approach. While it may not be the most popular method, the global/default/narrow/normal/wide scheme is mobile first, and it can work well for sites, especially when you use lots of use-specific stylesheets anyway to organize your theme.

dasjo's picture
dasjo

thanks for the great writeup! actually our company is named "epiqo", would be pleased if you could correct that :)

omega 4 enforces frontend development techniques like sass & compass while omega 3 was geared more towards site builders in a point & click manner. looking forward to seeing how omega layouts turn out in the whole panels, context, ds etc. discussion

kathryn mcclintock's picture
Kathryn McClintock

Thanks for the feedback. I'm glad many of you will give Omega 4 a first (or second) try.

@Pari — I'm not sure when the final version will be out. We're using the alpha version on two production sites right now, but update frequently and will move to the stable release when it's available. We didn't run into any caveats with the alpha version.

@Chris M — Yes, the current Amazee Labs site is an Omega 3 sub-theme.

Cellar Door's picture
Cellar Door

For those that used and loved the zones/regions UI don't worry. Right now what we've done is strip Omega back to the basics for power users and purists who did not like all the UI and zones. The tpl is back if you want it, which is a big feature for a lot of people.

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!

Please join us at #drupal-omega and in the issue queue to discuss what you liked/loved and how we can better it for all themers of all types.

zoonunit's picture
zoonunit

@Cellar-Door, that's a great relief! The grid ui was a huge draw for me since I am not a coder. I currently use Omega for everything now. Question: will OM4 compile the zones/regions interface into a tpl file? That would be the ultimate bridge between the two approaches.

fubhy's picture
fubhy

Hi everyone and thanks for the great blog post Kathryn :).

I am the developer behind Omega 4 and just wanted to drop in real quick to confirm that what @cellar-door said is indeed true. We _temporarly_ ditched the part where we forced our users to use the zone/region point&click approach in favor of something that is much purer at it's core.

However, the UI is going to come back in an _optional_ module for people who still want to use it. It is going to be a visual layout builder opposed to the massive list of select/dropdowns that we had in 3.x ... And yes, the reason why we are not in Beta / RC yet is exactly that (plus, we still lack documentation pages for 4.x on d.o).

So, basically... The approach that we took with 4.x was to make everything super lightweight and as fast as possible. Everything is optional, nothing is forced upon our users. You can enable/disable single feature or entire groups of features with a single click (extension sets).

I would like to point out that a few of the most appealing features (personal opinion) was not listed. You can easily keep your template.php clean by providing preprocess/process/theme FILES instead of cluttering your template.php file with those hooks. It's as simple as dropping a 'preprocess/node.preprocess.inc' file in your theme folder for example. This feature has been improved tremendously since 3.x and performs much better now. Oh, and it also works for theme functions ('theme/field.theme.inc').

There is much more to be said but I guess it's better to put that on an dedicated blog post once we are ready to release this thing.

fubhy's picture
fubhy

zoonunit: We will definitely NOT store the configuration the way we stored it before in 3.x... I actually thought of storing them in config entities (yes, config entities) just like the Rules module currently stores rules and then cache them nicely (probably in /sites/default/files ... so yes, they will be in the file system). However, exporting them into an actual .tpl.php file on the system automatically is not going to happen. I might implement a feature though where you can look at the output and then copy&paste it. Automatically exporting them to a theme folder is a permission problem which I don't want to run into.

Mark's picture
Mark

Will there be a way to easily have Omega 3 and Omega 4 themes on the same site, so that we can work on the new theme while the old one is still in place? (For ex., I did not find an easy way to due this with the new Zen theme.)

Art Williams's picture
Art Williams

Nice improvements. I'll have to give a second look. I'm a big fan of Zen 5, but Zengrids (while nice at first) is starting to fall short for me in some of my site designs. I'm curious to see how Omega Layouts holds up.

Does Omega4 include Compass modules with it? Like Compass CSS3? http://compass-style.org/reference/compass/css3/

Thanks for the writeup, Kathryn!

Matthew Donadio's picture
Matthew Donadio

@fubhy Separate includes for field formatters == you are my hero. Have you considered includes for form alters and nodes types (eg, http://drupal.org/node/1818010), too? If not, are you open to patches to support them?

Chris Hartman's picture
Chris Hartman

It's good to see things with Omega have improved. Definitely looking forward to the built-in Sass and old-school templating again. Guess now I have to stop building out my new portfolio in Omega 3.x and move on to 4.x since things seem to look more stable.

fubhy's picture
fubhy

@matthew: yes, separate files for everything that is a preprocess, process or theme hook... @see omega/theme or omega/preprocess for examples. This feature comes without performance penalty because we register those files only once on registry build time and cache them in the theme registry afterwards. A similar feature is possible for form alters but it's not easy to make that perform well because of the way drupal_alter works and the fact that drupal has no central entry point for retrieving a list of valid form ids. If you open an issue for that we can take a stab at it though.

One thing that hasn't been mentioned yet either: omega 4 comes with extensive, built-in drush integration. Something that previously only existed in conjunction with omega tools. You can generate sub themes with many cool sub-options (e.g. from custom starter kits and sub-basethemes... You can also choose a custom destination... E.g. an install profile or even place it in a parent theme... @see ' help osub' for the full syntax). Also you can export or revert your theme settings for easy deploy (we improved exporting so that it does not destroy your .info file formatting anymore).

fubhy's picture
fubhy

@Art Williams: Omega 4 does not make any assumptions in regard to how you are going to build your CSS. You can use Sass, Less or neither. Wether you use compass and any of it's modules or not is up to you either... It all depends on how you set up your config.rb file for the ruby compiler. I encourage you to use sass and compass of course. Also... Wether you use Susy, Zengrids, Singularity or whatnot as your grid framework is totally up to you. Same with Zen btw. ... I am pretty sure that JohnAlbin does not force you to use Zengrids w
If you use Zen (that's not his style :p)

kathryn mcclintock's picture
Kathryn McClintock

And also, @Art — Omega 4 DOES include components of the Compass CSS3 module: border-radius, box-sizing, box-shadow, transition, text-shadow, & images. And of course you can add more... or use none at all.

Mark's picture
Mark

fubhy, you're correct, I used Susy with Zen 5.

Fabian Gander | Cyclodex's picture
Fabian Gander |...

I'm also looking forward, due I also made websites using Omega 3, but I can't share the not mobile first point:

* because Omega 3 was so many times called the "mobile first" approach, even in their documentation. And sure it is, I just made a mobile first website with it.

Anyway looking forward to check out soon Omega 4!

zoonunit's picture
zoonunit

@Fubhy, as to the template files and file rights, why not use the Views export approach and just display the template code in a window? The developer can then copy it and paste into a template file. The beauty of Om3 was that the region stuff insulated designers (who are often not programmers) from the template stuff, which is a programming issue. But I think most designers can at least copy and paste. :-)

TheodorosPloumis's picture
TheodorosPloumis

Zones & Regions was really the bad point of Omega 3. I am very glad to see all these odd stuff gone now...

Will give Omega 3 it a try again! But Omega cannot overcome Zen by any means.

In my opinion, Zen should be a core theme.

Sergio Romecin's picture
Sergio Romecin

nice, when will be final version, please?

Mark's picture
Mark

Been a huge fan right from the beginning. Can't wait to try 4 out now.

David's picture
David

@fubhy, thanks for all of your work on this. Omega3 has been my go-to solution for responsive theming for over a year now. Would you mind addressing this question from further up the thread:

Will there be a way to easily have Omega 3 and Omega 4 themes on the same site?

Walter's picture
Walter

Really glad to hear that will be an option to enable Zones and Regions. I don't understand the "purits" point at all. I'm a coder but Zones and Regions are very helpful for small (and cheap) projects.

fubhy's picture
fubhy

@David asked: Will there be a way to easily have Omega 3 and Omega 4 themes on the same site?

Answer: Well... You can of course always make that work manually by replacing all occurrences of "omega" in Omega 4.x with something custom (e.g. "omega_temp"). But you can't have the same namespace twice on one page... That simply doesn't work :(.

@Walter: Well, we wan't to make Omega 4.x available for power users and purists as well. There are very good and valid reasons for why one should try to produce pure and lean output. There is even more to it than just performance (which in itself should be enough of an argument :) ). But again, don't worry... We will start working on a prototype for people who prefer a UI to build things once the Core is done. Note: Said UI will NOT go into the theme layer. It will be an optional module that one will have to download and enable separately.

PS: I just added a "drush omega-wizard" command to the Drush integration that guides you through the sub-theme creation/generating process. Handy for people who don't want to read the documentation for "drush omega-subtheme" and instead prefer to be prompted for the right input on the go.

https://twitter.com/thefubhy/status/291509721901457408

shunting's picture
shunting

I LOVED regions, zones, and the UI. I want to be creating content and running my site, and modifying template files.

shunting's picture
shunting

Eesh, typo, "not modifying template files."

Quevin's picture
Quevin

Looking forward to trying Omega 4, and using 3 right now for a project. Regarding "mobile first," it's the best approach, although not always what each project demands. Yet, anyway. Perhaps more so in the year ahead (for us, at least). All of us here are so cutting edge, when most clients with mid-size budgets don't care unless we can clearly demonstrate the value to them (and executives/boards). Developing for mobile first may be easier w/ Omega 4 now, but visually planning and designing for various platforms is still very costly. Unless simply go with the default, out-of-the-box design for mobile. These clients don't often have the budget to design for much more than what's expected in a desktop's browser. If more than this is delivered as a theme, then great.

mradcliffe's picture
mradcliffe

You're re-inventing the wheel on layouts in Drupal 7 ignoring contributed modules like Context, Panels, Panelizer, Boxes, Spark..? That doesn't seem community-friendly.

I've been brushing up on my theming skills with Adaptive Theme, which is great because it offers tight integration with Panels just like how Omega 3 was great for Context users.

**So why would I use Omega 4 if I were building a site if I have to learn some new layout system on top of other layout systems that contributed modules provide?**

Please correct me if I'm wrong here, but this doesn't really look usable at all.

fubhy's picture
fubhy

mradcliffe: I am pretty sure you didn't take a look at the layouts in Omega 4 at all. Omega's layouts are 100% page.tpl.php theme hook suggestions. There is no complex system that needs to be learned in order to use it... It's simply a system for managing theme hook suggestions which allows you to cleanly separate multiple page.tpl.php instances from each other. It doesn't even come close to Panels in any way. In fact we are not even trying to do that. Also, funnily enough you mentioned that you are using Adaptive Theme which in fact comes with exactly the same concept for layouts IIRC. Feel free to get in touch with me on twitter or IRC to get into more detail on this.

clo75's picture
clo75

One question (sorry I didn't take a look at the alpha version yet), with Omega 4, will it be possible through a visual interface to adjust columns and gutter widths ?? Or we have to do it manualy ?? Thanks

fubhy (Sebastian Siemssen)'s picture
fubhy (Sebastia...

@clo75: The theme itself does not have such a thing built-in. However, there will be a module-level layout builder that is going to fill that gap. Note: We didn't start with that yet. Purists can start with using 4.x right away, UI-bound users will have to wait for the module to be finished. It is going to come with a pluggable system that will allow different types of grid plugins for the output. You will be able to use it for generating layouts and store them in the db or for exporting layouts in pre-formatted .tpl.php and Sass or plain CSS using your favorite grid plugin.

Mark's picture
Mark

@fubhy, re: "Will there be a way to easily have Omega 3 and Omega 4 themes on the same site?"

Even though Drupal themes haven't done this before (I assume), have you considered making the namespace of the new Omega theme 'omega4' instead of 'omega'? Being able to have the new v4 theme under development alongside the v3 theme seems like it would be a huge benefit.

clo75's picture
clo75

@fubhy, first thank you very much for the feedback and the deep information.

Just one precision, does the future Omega layout builder tool will offer to set dynamically and visualy gutters and colums widths, whathever grid systems used ??, Thanks

paul del signore's picture
paul del signore

would you say it's safe to start using the current Alpha version for a live production site? I'm starting a new site build now and would hate to start with v3 if 4 is ready to release?

daniel truninger's picture
Daniel Truninger

@Paul Del Signore

We have already released a few Omega 4 sites. From a security point of view we do not see any reasons why the most recent version should not be an option.

Here is a selection of our recent Omega 4 releases: The Voice of Switzerland, LikeMag and FIDES Business Partner.

Max's picture
Max

Wow! Just want to say thanks for this very clean theming system! And I am glad the template files are back! Just tried Omega 4, it took me a while to get what to do without any real documentation, but after figuring it out, it seems to works very well.

In short, the steps I took were:
1. create the subtheme with drush
2. manually copy an existing layout directory (for now "simple" or "epoqi") to my new subtheme
3. set this layout to be the main layout under "admin/appearance/settings"
4. and tweak it to my needs

Although I haven´t really researched it yet, my first impression is it looks like not only do you not touch the omega theme, but if the subtheme is generic enough, you can leave that alone too, and limit all designing and tweaking per project to the layouts, even images can be kept there.

Thanks for the love put in this.

Cheers.

Andrew's picture
Andrew

Hi I have followed this blog page and created a test layout based on "simple" (with some region removed). How do I get Drupal/Omega to use different layouts for different sections of my website? (like delta in the past)

I am okay with command lines and don't need any UI helpers, but I do need some pointers.

Is hacking template.php (http://webdevgeeks.com/blogpost/omega-4-sass-and-layouts) the only way to do it at the moment?

I know this will be covered in the documentation eventually, but I am trying to get a head start working on a new project.

Many thanks!

Andrew

kathryn mcclintock's picture
Kathryn McClintock

Hi Andrew,

We've experimented with layouts a bit but haven't had a need for them on any projects so far. That said, I do think using hook_omega_layout_alter in your template.php file is the current solution for switching layouts in Omega 4.

You've probably already seen this Drupal thread, but it's only a few months old and fubhy, Omega's Lead Developer, confirmed using this technique.

Andrew's picture
Andrew

Thanks so much Kathryn,

Yes I read that Drupal thread as well, thanks for the confirmation. Look forward to seeing more from you and everybody on Omega 4.

Andrew

Sam's picture
Sam

I loved the Omega 3 theme and am currently getting stuck in to Omega 4.

My only concern is the learning curve involved as it doesn't follow on from anything before. It's all good keeping up to date in latest technologies but at some point you need to actually make some sites with a bit of haste! Learning new themes certainly slows down that process.

Hoping Omega 4 will be a good investment in my time and have offered help on documentation to get people started without the headaches.

Pages

Add comment

Search form

Latest comments

  • paul Legrand's picture

    excellent it's verry beautifull !!!
    read this also

    paul Legrand
  • machine expresso's picture

    Regardez sans de jure retarder l'excellente tenancier senseo en ce qui concerne tout votre cuisine commandant gratin prix à cause de la t

    machine expresso
  • www.youtube.com's picture

    Νotable ՏEO experts at have experience of different aρproɑches to SEO and hold inѕight into the

    www.youtube.com