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

Dig into the omega theme

on

  • 2,574 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 and pitfalls to avoid.
Additional Resources, Tips & Tricks & How-to can be found here:
http://www.kendallsdesign.com/blog/omega-theme-responsive-design-resources

Statistics

Views

Total Views
2,574
Views on SlideShare
2,545
Embed Views
29

Actions

Likes
3
Downloads
30
Comments
0

3 Embeds 29

https://twitter.com 27
https://si0.twimg.com 1
http://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

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

Dig into the omega theme Dig into the omega theme Presentation Transcript

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