Omega's Grid Layout Settings

Fri, 06/24/2011 - 09:29 -- James Sinkiewicz

Screen Shot

One Newbie's Understanding:

For the last few days I have been trying to get my head around the Omega 3.x theme's grid layout settings. This article attempts to describe my understanding of these settings. I am not a Drupal or Omega theme expert by any means, but someday I would like to become one and I believe that writing these articles helps me achieve that goal. This confession should also be interpreted as a disclaimer or warning to those reading this. I probably have misunderstood a thing or two, and in any event, the Omega 3.x theme is in Beta 1 as of this writing and is changing often, so use this information with caution.

Enabling the Responsive Grid

Near the very top of the Grid Settings section is a check box to "Enable the responsive grid". This is the heart of the Omega theme.

It is what allows you to resize the browser window, or display the page on different devices, and control how the page is styled. It is absolutely impressive to watch a web page change its layout to accommodate the size of the browser window in real time! This feature is what made me decide to standardize all my web building efforts around the Omega base theme.

The current version of the theme comes with four built-in layout sizes; Narrow (720px), Normal (960px), Wide (1200px), and Fluid (%width). These are listed in the Grid Settings section of the theme's setting. You don't want to confuse these with the "Grid System" selection, which is set to "Default (960px)" by default. Depending on what theme you are using for your administrative theme, you may need to scroll down, or un-collapse some headings to find the settings for the Narrow, Normal, Wide and Fluid layouts.

The Fluid layout in not checked by default is is meant only as an alternative to the Narrow layout. You will also find a selection for "Primary layout", which is set to "Normal" by default. As the help text states, this setting determines which layout to use if the "Enable the responsive grid" check box, located at the top of the settings page, is not selected. Below that, each layout has a selection box to "Use this layout with the responsive grid". In most cases you will want to select the Narrow, Normal, and Wide layouts. By selecting these, code is placed into the <head> tag area of the web page to load CSS stylesheets that control the styles for each of these layouts. I will discuss the "Weight" setting a bit later, but for now let's turn our attention to the "Media query" input text box.

Layout settings

Having never seen a media query before in my life, I knew I had a lot to learn when I scrolled down the page and saw this in the Normal Layout ~ Media query text input box:

all and (min-width: 980px) and (min-device-width: 980px), all and (max-device-width: 1024px) and (min-width: 1024px) and (orientation:landscape)

At first glance, this looked like an inscription you would find on a strange piece of metal on a ranch near Roswell, New Mexico! Luckily the setting's title, "Media Query", gave me something to search the internet on and I came across a ton of pages on the topic. Some are more technical like Media Queries W3C Candidate Recommendation. The best one I found written for people that cannot interpret alien hieroglyphics was at http://css-tricks.com/. Reading his article on "Different Stylesheets for Differently Sized Browser Windows" gave me a clearer, but child-like understanding of Media Queries, and luckily was relevant to how the Omega theme actually uses media queries.

What is a Media Query?

In its most basic form, it is a way to swap out one stylesheet for another, based on condition(s). Let's say you wanted to use a different CSS stylesheet for your web page depending on whether it was being viewed in a browser or being output to a printer. That represents an excellent use case for Media Queries. Another is to swap stylesheets based on the size of the screen trying to display it, like mobile vs. desktop web browsers. The Omega theme, in an effort to be responsive to browsers' different and changeable viewing area, uses media queries to try to swap out CSS stylesheets based on data reported by the device itself.

Interpreting the Media Query Input Text Box

The media query input box 'default text' for the "Normal Layout" in the "Default (960px) layout settings" area listed above can be broken down as follows:

all - the target media type the styleseheet will apply to if the "condition" is met. As the name would imply, "all" indicates the stylesheet applies to all media types, including those such as ‘screen’ or ‘print’. Other types include ‘braille’, ‘handheld’, ‘projection’, ‘tty’, and ‘tv’.

and - AND is Boolean logic that results to "TRUE" if the condition before the AND and the the one after are met. (I thought about telling a humorous Boolean story here, but everyone would wonder if it was TRUE or FALSE.)

(min-width: 980px) - min-width refers the the viewport (viewable page area) in CSS pixels of the browser window or the <HTML> tag default width. This is different from the "browser size". If you were to add a Firefox extension like FirePicker (also known as FireSizer),  you would quickly find that the browser window size is not the same as the viewport size. Browser "chrome" elements like scroll bars are the among the reasons for the difference. The condition being tested here is that the viewport width is greater than 980 pixels. Humans would probably prefer it read (min-width>980px), but those Roswell aliens are colon retentive.

and - Here is another one of the AND's, so we keep adding conditions that must be TRUE to the list of conditions

(min-device-width: 980px) - okay, this is where the aliens try to confuse the normal human being. This looks strangely familiar to (min-width: 980px). The "device" part signifies the physical screen pixel capabilities of the device displaying the content, as opposed to the size of the browsers' viewport CSS pixel area being displayed on that screen.

, - This barely perceptible comma is alien hieroglyphics for the Boolean OR logical expression. I've been to Oregon (OR), and if you remove an "m" from the word "comma", you would understand how the aliens got confused. In human speak, it means that IF all the conditions before the comma OR all the conditions after the comma result in TRUE, the entirety of the phrase results in TRUE.

all and (max-device-width: 1024px) and (min-width: 1024px) - I think we can now discern this section of the media query given the information presented above.

and (orientation:landscape) - quoting the W3C: ""The ‘orientation’ media feature is ‘portrait’ when the value of the ‘height’ media feature is greater than or equal to the value of the ‘width’ media feature. Otherwise ‘orientation’ is ‘landscape’. " In human speak, if your browser viewport is wider than it is tall, it is in landscape "mode". This condition adds that test.

A Human Interpretation of the Media Query

After all that, what does the media query above really mean? Well, according to the "Hitchhikers Guide to the Media Query, Second Edition, Interpreting Alien Hieroglyphics for Fun and Profit", the above tests for the condition:

If you are any type of media device, be it a desktop PC, mobile phone, etc., and your browser window is open to at least 980 pixels and your physical screen size is capable of displaying that size window without scaling, or even still, if you can do the same thing at 1024 pixels when the width of that window is greater than your height, then I have a stylesheet I want you to use.

Width: A Visual Representation of my Mental Image

When I think of 'width' versus 'device-width', it is easy for me to get confused. After reading many articles about their differences, I created a mental image of what those differences are. By studying the image below, you too will have this same mental image and it will be stuck there forever each time you read a media query string! (Evil laugh!) The thing to take away from this image is that even though the device-width is changed, the web page width has not. If you want your web page to fit into a device-width of 640px, then you have to style your webpage for that width, test for it on the device that is calling for the page, and serve up the correct and targeted stylesheet with a carefully crafted media query.

Media Queries: All for not?

Now that you might have a better understanding about how Omega uses the Media Query to target a device's web browser with the appropriate stylesheet, you will be disappointed to learn that this can be a lot of work for nothing! Why? As Jakub Suder explains quite well in his article Tips for creating mobile sites... Devices Lie! Like the height and/or weight on a woman's driver's license, the device "width" reported by a mobile device should be taken only as an approximate.

The myth: min-width and max-width

Mobile browsers like to lie about their true size in an effort to make web pages that were not specifically designed for a smaller screen look "better". A mobile phone might have a device-width (screen size) of 320 pixels, but lie about their viewport size and say it was 980 pixels, then scale the web content to fit. If you tried to target that mobile phone with a "(min-width:320px) and (max-width:480)"  media query condition, it would result in FALSE because the mobile device is a dirty rotten lying scoundrel.

906 gird layout settingsThe myth continues! min-device-width and max-device-width

So now that you know not to trust those nasty little mobile devices to tell you the truth about their viewports, you decide to pull out the truth serum and ask them how many pixels their screen size really is with the 'device-width' media query condition. They are forced to tell you the truth that it is in fact only 320px. (The nicer devices sometimes apologize for lying to you and offer to buy your dinner.) If you target your media query conditions to catch this with "(min-device-width:320px) and (max-device-width:480)" you will get the stylesheet you want selected, but the mobile device would then scale the web page three times its size to a 'simulated' 980px and make your carefully crafted and targeted stylesheets for that beautiful mobile web page "look as if you opened the mobile version of the site in a desktop browser", as Jake puts it.

So how do you solve the problem of the deceptive device width? The Omega theme tries to deal with this by using the <meta viewport> in the <html> tag, but his is a topic for another article.

Watching your 'Weight': A Final note

It is possible to define several media queries (by checking the boxes for Narrow, Normal, and Wide) and for some or all of them to result to TRUE. So how does the Omega theme resolve this possible conflict? That is where the "Weight" checkbox comes into play. While all layouts with a checkbox selected that result to TRUE will be added to the HTML code for that page, the media query with the 'heaviest' weight will be listed last and therefore take cascaded precedence over the others. So be sure to make the correct choices here. Carefully crafted media queries, together with the Weight selector make for infinite possibilities of CSS style!

Acknowledgements: I'd like to thank Jake Strawn (@himerus) for creating the Omega theme and Sebastian Siemssen (@thefubhy) for his support and patience in helping me understand some of the Omega 3.x theme's inner workings.

Share: 

Comments

Submitted by Peter on

This is REALLY useful! Thanks for taking the time to research it.

Submitted by John on

This was a very useful article which has helped me get to grips with using Omega as a base theme. Thank you!

Submitted by Jekis on

This is great job! Thank you.

Submitted by Leroy on

Hi James, Great job well done, I'm a neebi to Omega and this really helped, I'm also try to put some kind of tutorials platform together for slow learners like myself, starting from local host to drupal, modues, views and hopefully omega. I'll keep you posted

Cheers

Submitted by Dan on

Hi, great post. Many thanks.
For this media query you mention above " all and (max-device-width: 1024px) and (min-width: 1024px) -" , Isn't that only true for a browser that is bigger than the screen? i.e. It only evaluates to true if the browser is stretched beyond 1024px and the screen's max size is that size. So in "human speak", as you say, The browser will have a horizontal scroll bar if it's larger than 1024px because the screen's size is 1024px.

thx.

Submitted by admin on

Remember to take the entire media query in context. There are ANDs and ORs in the entire query. The browser will not have a left/right scroll bar because Omega 960 grid layouts dimensions are smaller than the media query screen size declarations. On some operating systems/browsers, you could possibly stretch the browser window out between media query thresholds (wider than the screen) but all you get is more white space to the left/right of your content, not scroll bars. In Windows 7 for example, it will not allow you to stretch a window (or browser) wider than the screen resolution.

Submitted by Steve on

James

Great article and very funny. I've been using Omega for 12 months, but so far everything I have created has been 960 fixed. On my latest project, I decided to go responsive and in my research found your article. Well written and has helped me with the some of the confusions and given me points to research.

Great job!

Submitted by baf139 on

Hey,
Do you know how to add a new layout to the UI? Like i need one called small, that responds to a different media query.

Submitted by admin on

I don't really know how to do that. Omega gives us an interface to select (and customize) the media queries related to wide, narrow, etc. layouts. You really need to stick with those.

However, Omega just uses this method to determine which css files to load and in what order in the HTML on page load. This is just for our convenience. I don't think there is any reason why you cannot put your custom media query css declarations in any of those pre-defined css files.

For instance, in the custom-theme-alpha-default-wide.css you could add something like this:

@media all and (max-width:240px) {body {background: blue;}

Add new comment