Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Let's dig into the Omega Theme!

14,905 views

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, pitfalls to avoid, and what's on the forecast for Omega 4.x!

Additional Resources:
bit.ly/omega-tips

Published in: Technology
  • Be the first to comment

Let's dig into the Omega Theme!

  1. 1. By Kendall Totten @starryeyez024http://bit.ly/omega-tips
  2. 2. Let’s dig into theOmega Theme! By Kendall Totten @starryeyez024 http://bit.ly/omega-tips
  3. 3. http://bit.ly/omega-tips
  4. 4. BROUGHT TO YOU BYTHE GOOD FOLKS AT DO DRUPAL RIGHT http://bit.ly/omega-tips
  5. 5. About Me• My name is Kendall Totten• Bachelors in Communication Technology & Graphic Design from Eastern Michigan University• Drupal Designer & Theme Specialist at Mediacurrent• Working in the Drupal space for about 4 years• Working with Drupal since version 5.x @starryeyez024 http://bit.ly/omega-tips
  6. 6. You may want to know...• What’s Responsive Design?• What are CSS Media Queries?• How does Omega use Media Queries?• How will Omega change my life? http://bit.ly/omega-tips
  7. 7. What isResponsive Design?
  8. 8. Responsive web designuses media queries withproportion-based grids to adaptthe layout to the viewingenvironment. http://bit.ly/omega-tips
  9. 9. Why isResponsive Design Important?
  10. 10. 75 million Americans access theweb from mobile phones...Mobile searches havequadrupled from 2010...<insert infinite stats aboutmobile usage here>
  11. 11. CSSMedia Queries
  12. 12. CSS Media Queries
  13. 13. CSS Media Queries
  14. 14. Code Sample<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Resolution Dependent Layout</title> <link rel="stylesheet" type="text/css" href="css/style.css"> <link rel="stylesheet" media="screen and (max-width: 700px)" href="css/narrow.css"> <link rel="stylesheet" media="screen and (min-width: 701px) and (max-width: 900px)" href="css/medium.css"> <link rel="stylesheet" media="screen and (min-width: 901px)"href="css/wide.css"></head><body> <div id="page-wrap">    <div id="header">Header</div>                 <div id="main-content">Content</div>                     <div id="secondary-one">Secondary</div>    <div id="secondary-two">Extra</div>                   </div>   </body></html> http://css-tricks.com/6206-resolution-specific-stylesheets http://css-tricks.com/6731-css-media-queries
  15. 15. Code Sample@media print { body { font-size: 10pt } } @media screen { body { font-size: 13px } }@media only screen and (min-device-width: 980px) and (min-width: 980px),(max-device-width: 1024px) and (min-width: 1024px) and (orientation:landscape) { body { line-height: 1.2 } } http://css-tricks.com/6206-resolution-specific-stylesheets http://css-tricks.com/6731-css-media-queries
  16. 16. ResponsiveDrupal Themes
  17. 17. Responsive DrupalThemes (+HTML5)• Omega!• AdaptiveTheme• Zen• Responsive HTML5 Boilerplate• eClean• Artica• Simpliste• Domicile Retrofit
  18. 18. Responsive DrupalThemes (+HTML5)• Omega!• AdaptiveTheme• Zen• Responsive HTML5 Boilerplate• eClean• Artica• Simpliste• Domicile Retrofit
  19. 19. The Omega ThemeThe Omega Base Theme for Drupal 7 is anHTML5/960 grid base theme that is 100%configurable.Each zone (group of regions) can beconfigured for content-first layouts.Each region can be resized andrearranged within its zone, basedon the width of the screen.
  20. 20. Omega Theory =Mobile First!The global.css that contains the basic designelements of the site is always loaded.Then, CSS3 Media queries determine what thesize of the window is and additionalstylesheets will be tacked on.
  21. 21. Omega Theory =Mobile First!Mobile = global.cssTablet = global.css + default.css + narrow.cssNormal = global.css + default.css + narrow.css+ normal.cssWide = global.css + default.css +narrow.css + normal.css + wide.css
  22. 22. OmegaBreakpointssmall (mobile) - 0px to 740px widenarrow (tablet) - 741px to 979px widenormal (laptop) - 980px to 1219px widewide (monitor) - 1220px and wider
  23. 23. Math is hard,use grids! 320px -Each Omega zone 86px ...?can be customized touse a 12, 16, or 24column grid system.
  24. 24. BFFs 4 EVA Omega Delta Omega Theme Module Tools
  25. 25. BFFs 4 EVA Omega Delta Omega Theme Module Tools
  26. 26. Omega Tools• Subtheme Wizard (3.x only)• Drush Integration• Revert Theme Settings• Export Theme Settings
  27. 27. Delta Module• Delta allows you to make duplicates of your theme settings page (read = layout templates)• Use these templates as a reaction in Context. </awesomesauce>• Delta makes things like page title, main content, & breadcrumbs appear as blocks!
  28. 28. Theme WithCSS3
  29. 29. The Compatibility Battle
  30. 30. Win the IE BattlePIE (progressive internet explorer) makes InternetExplorer 6-9 capable of rendering several of the most usefulCSS3 decoration features:• border-radius• box-shadow• border-image• multiple background images• linear-gradient as background imagehttp://drupal.org/project/css3pie
  31. 31. Win the IE BattlePIE (progressive internet explorer) makes InternetExplorer 6-9 capable of rendering several of the most usefulCSS3 decoration features:• border-radius• box-shadow• border-image• multiple background images• linear-gradient as background imagehttp://drupal.org/project/css3pie
  32. 32. Are We There Yet? http://caniuse.com
  33. 33. Are We There Yet? http://caniuse.com
  34. 34. JS Resources• Modernizr - modernizr-1.6.min.js • Download from: http://www.modernizr.com/• IE6 ping fix - dd_belatedpng.js • Download from: http://www.dillerdesign.com/experiment/ DD_belatedPNG/• HTML5 Shim -html5.js (comes included with Omega!) • Download from: http://code.google.com/p/html5shim/• Media-size responsive images - respond.js • Download from: https://github.com/scottjehl/Respond#readme
  35. 35. http://bit.ly/omega-tips
  36. 36. Thank You! http://bit.ly/omega-tips

×