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
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
12. 75 million Americans access the
web from mobile phones...
Mobile searches have
quadrupled from 2010...
<insert infinite stats about
mobile usage here>
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
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!
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
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