How CSS works in Omega - "Ogres are like Onions... They have LAYERS"

Last updated February 27, 2013. Created by Cellar Door on October 4, 2011.
Edited by bisonbleu, jay-dee-ess, brylie, stieglitz. Log in to edit this page.

CSS is where Omega gains its power. Through CSS media queries, Omega has the ability to determine the width of the browser and respond accordingly. Understanding how this response happens is critical to creating a working responsive theme in Omega. All the css files you’ll want to focus on editing are found in your sub-themes css folder at sites/all/themes/yoursubthemename/css

NOTE: When the responsive grid is disabled, the “Primary Layout” is used. By default this is set to the “normal” width. In this case, using global.css and yoursubthemename-alpha-default-normal.css files will load and thus you will want to put your edits in one of these.

Know thy Layers

Learning how these various layers affect each other, you will begin to see how best to create your stylesheets to achieve the desired effect. The layers we will be discussing and their shorthand are as follows:

• global.css = global
• yoursubthemename-alpha-default.css = default
• yoursubthemename-alpha-default-narrow.css = narrow
• yoursubthemename-alpha-default-normal.css = normal
• yoursubthemename-alpha-default-wide.css = wide

Inheritance is key

The best way to think of these layers is as transparent panes of glass, upon which you are creating your styles. What is placed on the bottommost layer will show through to the others unless an identical style is placed over the top of it on a higher layer. This inheritance of your style from one layer to the next will help prevent bloated css files that have duplicate styles on each layer.

Using the stacked glass illustration, global.css is your bottommost layer which if not overwritten will have its style inherited by all layers.

*NOTE* Omega is a “Mobile First” theme design. This means that the theme is built up from the mobile experience and progressively enhanced until the desktop version is shown. Mobile-first design will be the basis for the whole experience, and global.css will allow you to create a seamless responsive environment for your users.

Layer upon layer

The layer structure of the default responsive css files is (from bottom to top): global → default → narrow → normal → wide . As the media queries respond with the browser width, the css files are either stacked on or taken off in the order listed above. For example, a media query of normal will stack up global, then default, then narrow, and lastly normal. Thinking back to the layered glass illustration, the stacked css files will then layer on their style leaving the areas not overridden to show through. This layering effect allows you to make changes at each consecutive layer as the browser width increases while keeping uniformity in the site from inheritance. Keeping a good sense of what file you want to edit in order to achieve the desired effect will take some getting used to, but, in time, lean css code is possible with only the overridden values in each layer of styling.