Let's dig into the Omega Theme!
•
16 likes•6,365 views
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
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (12)
Similar to Let's dig into the Omega Theme!
Similar to Let's dig into the Omega Theme! (20)
More from Mediacurrent
More from Mediacurrent (20)
Recently uploaded
Recently uploaded (20)
Let's dig into the Omega Theme!
- 1. By Kendall Totten @starryeyez024 http://bit.ly/omega-tips
- 2. Let’s dig into the Omega Theme! By Kendall Totten @starryeyez024 http://bit.ly/omega-tips
- 4. BROUGHT TO YOU BY THE GOOD FOLKS AT DO DRUPAL RIGHT http://bit.ly/omega-tips
- 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. 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
- 9. Responsive web design uses media queries with proportion-based grids to adapt the layout to the viewing environment. http://bit.ly/omega-tips
- 11. Why is Responsive Design Important?
- 12. 75 million Americans access the web from mobile phones... Mobile searches have quadrupled from 2010... <insert infinite stats about mobile usage here>
- 19. 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
- 20. 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
- 23. Responsive Drupal Themes (+HTML5) • Omega! • AdaptiveTheme • Zen • Responsive HTML5 Boilerplate • eClean • Artica • Simpliste • Domicile Retrofit
- 24. Responsive Drupal Themes (+HTML5) • Omega! • AdaptiveTheme • Zen • Responsive HTML5 Boilerplate • eClean • Artica • Simpliste • Domicile Retrofit
- 25. The Omega Theme The Omega Base Theme for Drupal 7 is an HTML5/960 grid base theme that is 100% configurable. Each zone (group of regions) can be configured for content-first layouts. Each region can be resized and rearranged within its zone, based on the width of the screen.
- 26. Omega Theory = Mobile First! The global.css that contains the basic design elements of the site is always loaded. Then, CSS3 Media queries determine what the size of the window is and additional stylesheets will be tacked on.
- 27. Omega Theory = Mobile First! 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
- 28. 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
- 29. Math is hard, use grids! 320px - Each Omega zone 86px ...? can be customized to use a 12, 16, or 24 column grid system.
- 30. BFFs 4 EVA Omega Delta Omega Theme Module Tools
- 31. BFFs 4 EVA Omega Delta Omega Theme Module Tools
- 32. Omega Tools • Subtheme Wizard (3.x only) • Drush Integration • Revert Theme Settings • Export Theme Settings
- 33. 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!
- 35. Theme With CSS3
- 38. Win the IE Battle PIE (progressive internet explorer) makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features: • border-radius • box-shadow • border-image • multiple background images • linear-gradient as background image http://drupal.org/project/css3pie
- 39. Win the IE Battle PIE (progressive internet explorer) makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features: • border-radius • box-shadow • border-image • multiple background images • linear-gradient as background image http://drupal.org/project/css3pie
- 40. Are We There Yet? http://caniuse.com
- 41. Are We There Yet? http://caniuse.com
- 42. 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
- 44. Thank You! http://bit.ly/omega-tips
Editor's Notes
- \n
- \n
- \n
- \n
- BUY - tart.\n
- BUY - tart.\n
- \n
- \n
- \n
- \n
- \n
- \n
- We all know mobile is not going away. We need to learn how to design our websites for it.\n
- So where does the magic come in?\n
- \n
- \n
- Media queries are the idea that we can politely ask whatever device the user has, &#x201C;How many pixels wide are you?&#x201D; You would never want to ask a woman this, but with browsers, it&#x2019;s ok.\nThen we adjust the layout accordingly.\n
- Media queries are the idea that we can politely ask whatever device the user has, &#x201C;How many pixels wide are you?&#x201D; You would never want to ask a woman this, but with browsers, it&#x2019;s ok.\nThen we adjust the layout accordingly.\n
- Media queries are the idea that we can politely ask whatever device the user has, &#x201C;How many pixels wide are you?&#x201D; You would never want to ask a woman this, but with browsers, it&#x2019;s ok.\nThen we adjust the layout accordingly.\n
- For those of you who think of CSS Media Queries like Leprachauns, you&#x2019;ve heard of them, but you&#x2019;ve never seen one, well here you are.\nYou can either wrap each stylesheet in a media query....\n
- or go inside the stylesheet itself, and wrap individual styles in a media query... OR\n
- Find a Drupal theme that will do it for you!!\n
- Find a Drupal theme that will do it for you!!\n
- These are all some great Drupal themes that are Responsive and use HTML5 elements\nbut which one is the best? Well it depends...\n\n
- OMEGA: Besides media queries, Zone and region configuration, you can also toggle libraries and stylesheets on or off, as well as advanced elements (breadcrumbs, feed icons, menus) - and I&#x2019;ll show you how in just a minute\n
- Mobile first is not just a nice ideology of how we should try to approach design (although we should). It&#x2019;s actually the way Omega is built.\n
- \n
- Just for handy reference, here are the breakpoints. \n
- Forget trying to calculate layouts on your own, let Omega build you a grid system! DEMO!\n
- \n
- \n
- \n
- \n
- The Delta module was originally created to compliment the powerful Omega base theme, but now works with ANY theme\nExport theme settings to a feature!\n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- We&#x2019;ll talk about modernizer a bit later, but it helps bring older browsers up to speed with CSS3 properties\n
- \n