Your SlideShare is downloading. ×
Dig into the omega theme
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Dig into the omega theme

1,938
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 …

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:
http://www.kendallsdesign.com/blog/omega-theme-responsive-design-resources

Published in: Technology

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,938
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
31
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Lets Dig Into theOmega ThemeOctober 27, 2012 http://bit.ly/omega-training http://bit.ly/omega-tips
  • 2. brought to you by
  • 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. 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. 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. The WhatSo we know we need a mobile-friendly site.How do we make our bulky website lookgood on a mobile device?
  • 7. Responsive WebDesign (RWD)means designing awebsite in a mannerthat changes thelayout of the sitebased on the widthof the user’s deviceor screen.
  • 8. Responsive Design
  • 9. The HowCSS media queries allow us to inspect thephysical characteristics of the devicerendering our work.Specifically, how wide(in pixels) is it?
  • 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. Great! How do I makeDrupal Responsive?The OmegaTheme!
  • 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. 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. 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. 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. 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. 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. The Grid System● Each Omega Zone can be a 24, 16, or 12 column grid.
  • 19. The Grid System Your 12 Column Grid System is like a lego.Region: Region:Sidebar First Sidebar Second Region: Content
  • 20. The Grid SystemYour 12-column grid layout on a monitor.
  • 21. The Grid SystemYour 12-column grid layout on a tablet.
  • 22. The Grid SystemYour 12-column grid layout on drugs.
  • 23. Site LayoutSo... what happens on mobile? The regions stack.
  • 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. Debugging
  • 26. LibrariesFormalize Media Queries =Equal Heights
  • 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. Omega is great, but it works even better with its friends.
  • 29. Omega Tools● Sub-theme Wizard● Drush Integration● Easily Revert Theme Settings● Export Theme Settings (HUGE!)
  • 30. Omega ToolsOmega only looks to the theme settings pageOR the theme_name.info file CODE: .info file
  • 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. 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. 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. 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. 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. 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. Thank You! QuestionsKendall Totten@Starryeyez024www.mediacurrent.com