Mobile First

published by Ruben Hillier on Wed, 08/10/2011 - 10:24
Update: Stiffler clarified this for me:
global.css is the primary when the page is in mobile and should be the main area to begin styling, say you want to change the background color on the wide format then you would add it to the theme_alpha_wide.css and it will override the global.css when the window is in the wide format
here is a link with some more info http://groups.drupal.org/node/156719
+--+
|  |
|  | Mobile
+--+ Out of the box your Omega sub theme will work best if you use global.css for generic size independent stuff to style the mobile device, remember Mobile First!

+-------+
|       |
|       |
|       |iPhone/Android
+-------+ YOURTHEME-alpha-default-narrow.css - (740px wide to 980px) For anything over 740px wide  - smartphones like Androids and iPhones.
+------------+
|            |
|            |
|            |
|            |iPad/Tablet
+------------+ YOURTHEME-alpha-default-normal.css - (981px wide to 1220px) For Tablets, Netbooks and old broken stuff like IEMobile and anything less that IE9.
+-------------------+
|                   |
|                   |
|                   |
|                   |
|                   |
|                   |Workstation
+-------------------+ YOURTHEME-alpha-default-wide.css - (1221px and upwards) For anything wider than 1220px - us old fashioned geeks on our steam powered komputah's

Tags: