WARNING - IMPORTANT NOTICE: Information in this page is undergoing a MAJOR rewrite. Information in this page is partially incorrect and should not be used for setting up CSS styling strategy, Check back later for the most complete and correct version.
When working with Omega 3.x and the Responsive Grid, the major responses for the changing layouts is to load other CSS files to provide alternative layout or styling for the currently available resolutions and screen size. thus when working with Omega 3.x you will find in the "css" folder of your newly created subtheme few CSS files ranging from the very general to the very specific.
By default the weights, loading order and overrides of these files are pre-set for you. like Drupal, Omega is very modular, extensible and configurable. meaning that you can change the weights and in turn the load order of the default provided CSS or the ones you create.
In this section you will learn about how these files load by default and how you can change their weights or add your own.
The Default Order of Which the Provided CSS Files are Weighted:
- By default your mobile.css have the highest weight in all your Style Sheets (loads last after everything else). by giving the mobile.css the highest weight by default Omega 3.x conforms to the standards of Mobile First design where you are supposed to design your site for the mobile first.
- Next your styles.css loads before mobile.css giving it the next highest weight in the list
- Then comes SUBTHEME-alpha-default.css
- And then the layout specific CSS like SUBTHEME-alpha-default-LAYOUT.css and so on.
Including Custom CSS and Changing Group Assignment and Wights:
You can also include CSS AFTER the Grid CSS by setting the group tag in the options array in the .info file like follows:
css[file.css][option][group] = 2001 (that would be AFTER the grid CSS since that is being included with 2000)
For the .info CSS files everything is being included with group CSS_THEME by default (The highest weighted CSS group in Drupal )
So the big picture structure is ... mobile -> styles -> default -> layout specific (unless overriden in [options][group])
Extending Grid and CSS beyond Omega 3.x Provided alpha-default:
The above defaults and settings are all related to the "alpha default" the Grid provided by Omega 3.x because the Grid is named "alpha_default". in general it is Your custom styles ===> Grid styles ===> Grid attached styles ===> Grid attached layout specific styles
Since the above is so custom you cant be any more specific since you can place your styles anywhere you want. If this is confusing you, your best bet would be to inspect your HTML output and you will sure be able to figure it out yourself. that will give you a pretty good picture of the inclusion order
As you can see from the above you can customize and extend Omega 3.x to any level of sophistication and complexity that suites your layout needs, this is why we believe it is the best Drupal theme around that fulfills the needs of hard-core Enterprise CMS developer to the little guy who wants to keep things simple and use the default settings with ability to layout a fantastic site from the UI in the shortest time possible, Enjoy!