Dig into the omega theme


Published on

The Omega Drupal 7 Base Theme is a highly configurable HTML5/960 grid base theme that uses built-in media queries to make the site responsive. Each zone (group of regions) can be configured for content first layouts, that resize and rearrange themselves depending on the screen size of the user's device.

The presentation will walk-through the theory behind Omega's mobile-first approach, how to use the many configuration options on the theme settings page and pitfalls to avoid.
Additional Resources, Tips & Tricks & How-to can be found here:

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Dig into the omega theme

  1. 1. Lets Dig Into theOmega ThemeOctober 27, 2012 http://bit.ly/omega-training http://bit.ly/omega-tips
  2. 2. brought to you by
  3. 3. Kendall Totten● Bachelors in Communication Technology & Graphic Design from Eastern Michigan University● Drupal Designer & Theme Specialist at Mediacurrent● Web Design = 7+ years● Drupal = 4+ years @Starryeyez024
  4. 4. Welcome!● What’s Responsive Design?● What are Media Queries?● How does Omega use Media Queries?● How do I use Omega to layout my site?
  5. 5. The WhyMobile pageviews in May 2011: 5.8%Mobile pageviews in May 2012: 10.1% Today in US and Western Europe, 90% of mobile subscribers have an Internet-ready phone. source: http://mobithinking.com/
  6. 6. The WhatSo we know we need a mobile-friendly site.How do we make our bulky website lookgood on a mobile device?
  7. 7. Responsive WebDesign (RWD)means designing awebsite in a mannerthat changes thelayout of the sitebased on the widthof the user’s deviceor screen.
  8. 8. Responsive Design
  9. 9. The HowCSS media queries allow us to inspect thephysical characteristics of the devicerendering our work.Specifically, how wide(in pixels) is it?
  10. 10. CSS Media Queries@media screen and(min-device-width: 700px) { body { font-size: 13px } }@media only screen and(min-width: 700px) and (max-width:980px) and (orientation: landscape){ body { line-height: 1.2 } }
  11. 11. Great! How do I makeDrupal Responsive?The OmegaTheme!
  12. 12. The Omega Theme● The Omega Base Theme for Drupal 7 is an HTML5/960 grid base theme that is 100% configurable.● It can be configured for content-first layouts.● Each region can be resized and rearranged within its zone, based on the width of the screen.
  13. 13. Omega Theory● The global.css contains the basic design elements of the site and is always loaded. Then, CSS3 Media queries determine what the size of the window is and additional stylesheets will be tacked on.
  14. 14. Omega Stylesheets● Mobile = global.css● Tablet = global.css + default.css + narrow.css● Normal = global.css + default.css + narrow.css + normal.css● Wide = global.css + default.css + narrow.css + normal.css + wide.css
  15. 15. Modified Queries● Mobile = global.css● Tablet = global.css + default.css + narrow.css● Normal = global.css + default.css + normal.css● Wide = global.css + default.css + wide.cssExample of my narrow layout media query:all and (min-width: 740px) and(max-width: 980px)
  16. 16. Omega Breakpoints● small (mobile) - 0px to 740px wide● narrow (tablet) - 741px to 979px wide● normal (laptop) - 980px to 1219px wide● wide (monitor) - 1220px and wider
  17. 17. Omega Layout 101● 3 Sections: Header, Content, Footer● Each Section holds Zones● Each Zone holds Regions● Each Region can hold blocks● Blocks hold your content!
  18. 18. The Grid System● Each Omega Zone can be a 24, 16, or 12 column grid.
  19. 19. The Grid System Your 12 Column Grid System is like a lego.Region: Region:Sidebar First Sidebar Second Region: Content
  20. 20. The Grid SystemYour 12-column grid layout on a monitor.
  21. 21. The Grid SystemYour 12-column grid layout on a tablet.
  22. 22. The Grid SystemYour 12-column grid layout on drugs.
  23. 23. Site LayoutSo... what happens on mobile? The regions stack.
  24. 24. Site Layout● Use "Position" to arrange Regions on tablets & desktops left to right -> [ 1 ] [ 2 ] [ 3 ]● Use "Weight" to arrange Regions for mobile [ 1 ] top [ 2 ] to [ 3 ] bottom
  25. 25. Debugging
  26. 26. LibrariesFormalize Media Queries =Equal Heights
  27. 27. Toggle Styles● Toggle off extraneous Omega or Drupal stylesheets before you begin writing your custom styles.● If you add a custom stylesheet to your theme .info file, clear the cache, then go to this tab and enable your new CSS file.
  28. 28. Omega is great, but it works even better with its friends.
  29. 29. Omega Tools● Sub-theme Wizard● Drush Integration● Easily Revert Theme Settings● Export Theme Settings (HUGE!)
  30. 30. Omega ToolsOmega only looks to the theme settings pageOR the theme_name.info file CODE: .info file
  31. 31. Delta Module● Delta allows you to make copies of your theme settings = different layouts for different sections of your site (apply as a reaction in Context).● Delta makes things like Page Title & Main page content appear as blocks
  32. 32. Tips for RWD● Make a mobile & tablet wireframe if possible, to visualize how the whole site will look on a smaller device.● Theme the mobile size first● Dont put large background images in the global.css http://bit.ly/omega-tips
  33. 33. Tips for RWD● Designing in Photoshop? Download the grid-lines plugin GuideGuide: www.guideguide.me● Consider the many ways to implement a mobile-friendly menu: http://www.mediacurrent. com/blog/ responsive-design-mobile-menu-options
  34. 34. CSS3 PIE (progressiveinternet explorer) makesIE 6-9 capable of renderingsome of the most usefulCSS3 decoration features:● border-radius● box-shadow● border-image● linear-gradienthttp://drupal.org/project/css3pie
  35. 35. Resources● Modernizr - modernizr.com● HTML5 Shim -code.google.com/p/html5shim● CS Adaptive Images - drupal.org/project/cs_adaptive_image● Adaptive Images -drupal.org/project/adaptive_image● Flexslider - drupal.org/project/flexslider● Display Suite - drupal.org/project/ds● Context - drupal.org/project/context● Style Guide - drupal.org/project/styleguide● Convert images to pure code: http://webcodertools. com/imagetobase64converter
  36. 36. Resources● http://www.fontsquirrel.com● http://caniuse.com● http://mobitest.akamai.com/● http://html5doctor.com/● https://saucelabs.com/● http://www.springbox.com/mobilizer/● http://html.adobe.com/edge/inspect/
  37. 37. Thank You! QuestionsKendall Totten@Starryeyez024www.mediacurrent.com