What's the difference between global.css and default.css files in Omega theme?
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.