[Drupal] About Omega - An HTML5, responsive, grid960 Drupal theme

If you are a web developer then in some point of time some client may have asked you to develop sites one for desktop and one for mobile, (probably in iPhone) with almost same contents. If you meet that client again after 2 or 3 years he will ask you to develop more than 5 sites to view it in different popular devices. I don't think it is a good solution to have bespoke designs for each device, since our device landscape is rapidly progressing. So we developers should start thinking radically to meet with this issue.

Its high time to move toward a future friendly web. A future web where nobody is really not interested in window width,resolution, devices portrait and landscape modes.Yes i am talking about Responsive web design.

Since I am now exclusively dealing with Drupal, my search for a responsive theme ended at Omega.Responsiveness was the main feature that attracted me to omega, but later I found that Omega had got some really cool staff beyond responsiveness, that make Drupal theming more easy. As the theme contributor Jake Strawn says Omega is is a highly configurable HTML5/960 grid base theme that is 100% configurable.If you are the one who always searches for the shortest path to do somthing with out compromising to quality, then omega is the best choice.It helps you to write less and do more.

Theming using Omega is different from normal drupal theming.The main difference is that it contains Section, Zones, Regions instead of only 'Regions' that make it highly configurable.Omega is more powerfull when you use following modules along with it Omega Tools, Delta and Context.

Configuring Omega.

Lets assume you had installed and enabled above mentioned modules.Then Install and enable Omega theme, ohoo I forgot to say Omega is a base theme, so never set it as your default theme.Instead create a subtheme of Omega. The Omega Tools module will help you to create a sub theme of Omega. Omega is coming with two starterkits. Select your required one, finish your setup and download or install the subtheme directly.Now make this subtheme as your default theme.

The most important feature of Omega theme is its large number of setting to customize it.So lets look into the Settings of Omega theme.

In the Grid settings we can choose between 960gs or fluid system. Also we have the right to enable or disable responsive feature of the theme. If you had enabled the responsive feature, then Omega gives you 3 layouts ie, Narrow, Normal, Wide.This layouts help to make omega responsive.There are corresponding css files which loads for each layout.You can find the default media queries for each layout which determines when to load the css files.The basic css loading format is like this

0px to 740px wide - global.css 
	741px to 979px wide - global.css + default.css + narrow.css 
	980px to 1219px wide - global.css + default.css + normal.css
1220px and wider - global.css + default.css + wide.css

One more thing I forgot to say Omega is developed according to the “Mobile first approach”. Thats why global.css is loaded in all layouts.

The Zone and Region configuration helps us customize the layout of the theme.Almost everything in our theme is configurable through this setting.

As I already told you Omega has got Sections, Zones, Regions. Sections contains zones and zones contains regions

There are 3 sections in Omega theme; Header, Content, Footer.

shows the default zones of Omega theme.It also possible to add our own zones and regions to Omega.It is done with the help of the .info file. Just add the following code to anywhere in info file and flush the cache and see the zones loaded to settings pages.Same with Regions.

zones[zone_name] = 'Zone Name' 
regions[region_name] = 'Region Name'

You can add or remove any number of zones to any section.Same with Regions; ie any number of regions can be added to zones. Then the question may be how you can style each zone and region; the answer is also simple, with the help of .tpl files.Suppose we want to style the User zone in header section, then just create zone—user.tpl.php in your templates folder. And add your styles, the contents in that zone is available in the variable $content. Same with Regions just replace zone with region, interesting isn't it?

What to do if you need some regions disabled or added in some specific pages like Home page, contact page etc.Here comes the use of Delta and Context Module.

We can add template in the Delta module and configure it.The configuration helps to customize our Omega settings to that context only.So you can remove or add regions or zones in this template that will reflect in that template only. Then you have to use the Context module where to use this template based on the context condition. Delta will be available in the reaction section of context. By this way we can have customized design in different pages with little effort.Sounds great?

So in my experience Omega is Fluid, Responsive and Highly Configurable.One thing you have to remember is that Omega only supplies the base requirements for the design to be Responsive and Fluid.It will not be fully Responsive and Fluid until you don't know how to make fluid grids and flexible images in your custom CSS. Anyway Omega is the best base theme choice for the future-oriented web design.