What's the difference between global.css and default.css files in Omega theme? I´m still testing the Omega theme, and trying to get its templates and css files to work out for me. I´ve already read at the documentation and issues´ replies at Drupal forums.

They say:


  Think of global as the 'mobile first' template and this this is where
  most of your css will go.


Ok, so for mobile I use only global.css and for other resolutions I use all the other templates.


  The default template is for desktop resolutions where the css is
  different for that of mobile. The remaining templates are really just
  for exceptions and other values to address scaling up to wider
  resolutions.


This is what confuses me, because the other css files are narrow, normal and wide. So I think narrow should be for 7" screens, normal for 10" screens and wide for all the other, bigger screens (usually the desktop). So where fits default template?


  Try resizing your browser window to see the changes between layouts.


I´ve tried that, setting just a line of code in every css file, determinig different body background colors for each case.
global.css showed on the mobile screen.
global.css showed on the 7" tablet on portrait mode.
narrow.css showed on the 7" tablet in landscape mode.
normal.css showed on the 10" netbook.
wide.css showed on the 19" desktop screen.

The color that I´ve set at the default.css file didn´t showed. I´ve took mozilla firefox and resized the browser manually, and all the other templates showed just fine, but default settings never appeared.

I´ve asked this at Drupal community forums, but I would like to know what you think about this. Thanks!
Ok, this is really one of the confusing aspects of Omega.  Once you grasp it, though, it does make life easier.

The full explanation is found in the Omega Theme Documentation Handbook under How CSS works in Omega - "Ogres are like Onions... They have LAYERS".

global.css applies to all layouts (hence the name).  Since they apply to all layouts, this is the mobile-first sheet.

mytheme-alpha-default.css applies to all of the non-mobile layouts, which is when the grids kick in.

Then the narrow, normal, and wide sheets stack depending on which breakpoint you are on.

So if you are mobile, you just get global.css

Narrow, you get global.css + mytheme-alpha-default.css + mytheme-alpha-narrow.css

Normal, you get global.css + mytheme-alpha-default.css + mytheme-alpha-narrow.css + mytheme-alpha-normal.css

Wide, you get global.css + mytheme-alpha-default.css + mytheme-alpha-narrow.css + mytheme-alpha-normal.css + mytheme-alpha-wide.css

The best way to think about this is (in order):


How does my site need to look on mobile?  Make global.css
How do things change when the grid system kicks in?  Make mytheme-alpha-default.css
How does my site look when I am on a portrait table?  Make mytheme-alpha-narrow.css
How do things change when I am on a normal desktop?  Make mytheme-alpha-normal.css
How do things change when I am on a widescreen monitor?  Make mytheme-alpha-wide.css


In other words, don't think of this as four different layouts; think of it as a base layout that you apply changes to as you get wider.