Dig into the omega theme
-
Upload
drupalcampatlanta2012 -
Category
Technology
-
view
2.684 -
download
4
description
Transcript of Dig into the omega theme
Let's Dig Into theOmega ThemeOctober 27, 2012
http://bit.ly/omega-traininghttp://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 Why
Mobile 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 What
So we know we need a mobile-friendly site.How do we make our bulky website look good on a mobile device?
Responsive Web Design (RWD) means designing a website in a manner
that changes the layout of the sitebased on the width of the user’s device or screen.
Responsive Design
The How
CSS media queries allow us to inspect the physical characteristics of the device rendering 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 make Drupal Responsive?
The Omega Theme!
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.css
Example 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:Sidebar First
Region:Sidebar SecondRegion:
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 & desktopsleft to right -> [ 1 ] [ 2 ] [ 3 ]
● Use "Weight" to arrange Regions for mobile[ 1 ] top[ 2 ] to[ 3 ] bottom
Debugging
Libraries
Formalize
Equal Heights
Media Queries
=
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 only looks to the theme settings page OR the theme_name.info file
CODE:.info file
Omega Tools
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● Don't 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 (progressive internet explorer) makes IE 6-9 capable of rendering some of the most useful CSS3 decoration features:● border-radius● box-shadow● border-image● linear-gradient
http://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 [email protected]