This is a presentation I gave at the Broward Drupal Users Group, on using Drupal 7 and the Omega 7 framework. The combination allows theme designers to work in one subtheme that can target literally any device. The layout will reconfigure itself based on the results of media queries.
2. Theming Drupal for multiple devices. Jeppy64.com browarddrupal.org Framework The Concept: 1
3. Theming Drupal for multiple devices. Jeppy64.com browarddrupal.org Every site The Concept: 4 1 Framework
4. Theming Drupal for multiple devices. Jeppy64.com browarddrupal.org The Concept: 4 1 Framework Every site 2 Cover all devices
5. Theming Drupal for multiple devices. Jeppy64.com browarddrupal.org The Concept: 1 Framework + 4 Every Site + 2 Cover all devices 7
6. Theming Drupal for multiple devices. Jeppy64.com browarddrupal.org The Answer: Drupal 7 Omega 7
7. Theming Drupal for multiple devices. Jeppy64.com browarddrupal.org Drupal 7 + Omega 7 Things to consider... Tablets Phones Device Native Resolution Pixels Per Inch Diag. Size iPad 1024x768 132 9.7” Xoom 1280x800 160 10.1” Streak 800x480 186 7” Galaxy 1024x600 170 5” Playbook 1024x600 170 7” Device Native Resolution Pixels Per Inch Diag. Size Iphone 4 960x640 326 3.5” Torch 480x360 188 3.2” EVO 4G 800x480 217 4.3” N800 800x480 225 4.1” Atrix 4G 960x540 275 4”
8. Theming Drupal for multiple devices. Jeppy64.com browarddrupal.org Drupal 7 + Omega 7 What is the Omega Framework? Omega is an evolved implementation of the 960.gs in Drupal supporting HTML5, giving you full control over your layout, advanced region placement and controls, and contextual layouts provided by the Delta and Context modules. * 12, 16 and 24 Column Layouts. * HTML5 & XHTML Starterkits * Content first layouts with push/pull classes. * Quickly disable groups of and individual regions. * Every regions size and placement configurable. * Custom page titles, breadcrumb, dropdown menus. * Apply custom CSS classes to any region/zone. * Enable/Disable core Omega CSS. * Create contextual layouts with the Delta module.
9. Theming Drupal for multiple devices. Jeppy64.com browarddrupal.org Drupal 7 + Omega 7 What is the Omega Framework? Adding Regions
10. Theming Drupal for multiple devices. Jeppy64.com browarddrupal.org Drupal 7 + Omega 7 What is the Omega Framework? Region Types
11. Theming Drupal for multiple devices. Jeppy64.com browarddrupal.org Drupal 7 + Omega 7 What is the Omega Framework? Zone Configuration
12. Theming Drupal for multiple devices. Jeppy64.com browarddrupal.org Drupal 7 + Omega 7 What is the Omega Framework? Adding/Moving Zones
13. Theming Drupal for multiple devices. Jeppy64.com browarddrupal.org Drupal 7 + Omega 7 What is the Omega Framework? Other Omega Terms & Concepts * Content First Layouts * Prefix & Suffix Classes * Push Pull Classes * Zone Template Editing
14. Theming Drupal for multiple devices. Jeppy64.com browarddrupal.org Drupal 7 + Omega 7 3.x Roadmap for Omega Segmentation of Alpha > Omega Omega will be splitting into two "base" themes. Alpha will become the minimalistic base theme with all the preprocess functionality, as well as the basic grid structures. Omega will become the "enhanced" base theme with many more options and configurability. This will allow for many users to enable core functionality of the 960 grid, HTML5, and advanced preprocess functionality without the added weight of some of the Omega features for those that may not use/need them. Enabling Omega (which will become a subtheme of Alpha) will give all the advanced features, including the new responsive grid and more.
15. Theming Drupal for multiple devices. Jeppy64.com browarddrupal.org Drupal 7 + Omega 7 3.x Roadmap for Omega Responsive & Extendible grids After some of the lead work on adaptive/responsive layouts in Omega (http://groups.drupal.org/node/137424) The new 3.x version will really capture a simplified and extendible way to configure grids. By default, Alpha/Omega will provide the default mobile layout (regions stacked), a narrow grid (720px), a normal grid (960px), and a wide grid (either 1200px or larger). These are broken in the Alpha core as "narrow", "normal", and "wide". Each grid set has a series of files that are auto-loaded based on settings for 12, 16 and 24 column grids. These are now broken out into individual files so that if you are only using 12 columns site-wide that the CSS loaded is more efficient. The 24 column grid is being redone so that rather than the 950 usable pixels (by Nathan Smith) actually now will fall in line (940 usable px) with the 12 and 16 so that they can all be mix/matched as needed. The flexibility I've seen here already is amazing, and allows for ANY subtheme to define overrides for the narrow, normal and wide grids with ease, and generate your own grid css (will be documentation, and a script soon that will handle this easily)
16. Theming Drupal for multiple devices. Jeppy64.com browarddrupal.org Drupal 7 + Omega 7 3.x Roadmap for Omega Zone/Region Flexibility In Omega 2.x zones were introduced, which allowed for a logical way to group regions into their grid container. However, these WERE coded in a way such that it was reading the placement and order of these items out of the .info file only. In 3.x, now you will be able to reassign the "section" (zones above content, content, and zones below content) which a zone is tied to through the interface, as well as assigning regions to another zone. This makes everything entirely flexible, and will allow for other regions/zones to be placed in the content zone, which was currently limited to the primary content region & sidebars. This flexibility gives us the power to move forward with the Omega UI and allow for drag and drop placement of the regions/zones where ever we decide, as well as the ability to quickly create new zones AND regions ON THE FLY. This will be powered by Omega UI, and using drupal_alter, can inject those new zones regions that aren't defined in the .info file, as well as provide an export/rewrite of the .info to push changes back to code.
17. Theming Drupal for multiple devices. Jeppy64.com browarddrupal.org Drupal 7 + Omega 7 3.x Roadmap for Omega Region Ordering In 2.x only dynamic zones (using push/pull classes for content first ordering) were allowed to be ordered. In 3.x ALL regions will have weights, and those using static can be ordered, which will change the order those regions appear in source. Dynamic regions will behave in a similar manner that they have, by assigning a "primary" region (content region for example) that is the region that will always be first in source order, and the width of that region will be determined to take up any space left over by the presence/absence of other regions in the zone. The other "non-primary" regions in the dynamic zone will be allowed to be weighted also, but will be rendered in source in the order they are placed in for the settings. So the primary region is always first in source, but the non-primary regions are ordered in the way a static zone would be by placing them in source in the order chose via settings.
