• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Let's dig into the Omega Theme!
 

Let's dig into the Omega Theme!

on

  • 14,011 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 ...

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

Statistics

Views

Total Views
14,011
Views on SlideShare
7,969
Embed Views
6,042

Actions

Likes
15
Downloads
131
Comments
0

8 Embeds 6,042

http://drupalmexico.com 3623
http://www.mediacurrent.com 1800
http://www.drupalmexico.com 603
http://abtasty.com 8
http://mediacurrent.com 4
http://mis-gryphon.mediacurrentstaging.info 2
http://translate.googleusercontent.com 1
http://d7dev1.antolabs.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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, “How many pixels wide are you?” You would never want to ask a woman this, but with browsers, it’s ok.\nThen we adjust the layout accordingly.\n
  • Media queries are the idea that we can politely ask whatever device the user has, “How many pixels wide are you?” You would never want to ask a woman this, but with browsers, it’s ok.\nThen we adjust the layout accordingly.\n
  • Media queries are the idea that we can politely ask whatever device the user has, “How many pixels wide are you?” You would never want to ask a woman this, but with browsers, it’s ok.\nThen we adjust the layout accordingly.\n
  • For those of you who think of CSS Media Queries like Leprachauns, you’ve heard of them, but you’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’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’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’ll talk about modernizer a bit later, but it helps bring older browsers up to speed with CSS3 properties\n
  • \n

Let's dig into the Omega Theme! Let's dig into the Omega Theme! Presentation Transcript

  • By Kendall Totten @starryeyez024http://bit.ly/omega-tips
  • Let’s dig into theOmega Theme! By Kendall Totten @starryeyez024 http://bit.ly/omega-tips
  • http://bit.ly/omega-tips
  • BROUGHT TO YOU BYTHE GOOD FOLKS AT DO DRUPAL RIGHT http://bit.ly/omega-tips
  • 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
  • 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
  • What isResponsive Design?
  • Responsive web designuses media queries withproportion-based grids to adaptthe layout to the viewingenvironment. http://bit.ly/omega-tips
  • Why isResponsive Design Important?
  • 75 million Americans access theweb from mobile phones...Mobile searches havequadrupled from 2010...<insert infinite stats aboutmobile usage here>
  • CSSMedia Queries
  • CSS Media Queries
  • CSS Media Queries
  • 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
  • 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
  • ResponsiveDrupal Themes
  • Responsive DrupalThemes (+HTML5)• Omega!• AdaptiveTheme• Zen• Responsive HTML5 Boilerplate• eClean• Artica• Simpliste• Domicile Retrofit
  • Responsive DrupalThemes (+HTML5)• Omega!• AdaptiveTheme• Zen• Responsive HTML5 Boilerplate• eClean• Artica• Simpliste• Domicile Retrofit
  • 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.
  • 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.
  • 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
  • OmegaBreakpointssmall (mobile) - 0px to 740px widenarrow (tablet) - 741px to 979px widenormal (laptop) - 980px to 1219px widewide (monitor) - 1220px and wider
  • Math is hard,use grids! 320px -Each Omega zone 86px ...?can be customized touse a 12, 16, or 24column grid system.
  • BFFs 4 EVA Omega Delta Omega Theme Module Tools
  • BFFs 4 EVA Omega Delta Omega Theme Module Tools
  • Omega Tools• Subtheme Wizard (3.x only)• Drush Integration• Revert Theme Settings• Export Theme Settings
  • 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!
  • Theme WithCSS3
  • The Compatibility Battle
  • 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
  • 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
  • Are We There Yet? http://caniuse.com
  • Are We There Yet? http://caniuse.com
  • 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
  • http://bit.ly/omega-tips
  • Thank You! http://bit.ly/omega-tips