Responsive Theming With Omega

7/29/2019 Responsive Theming With Omega

1/26

Responsive Theming / Omega

Single shot

at building a responsive site


2/26

Who is

Savannah College of Art and Design for Graphic Design and

Computer Presentation

Started developing web pages around 1999 mostly front end

Been working with Drupal for 3 years

Just started coding in Drupal this march

I consider myself a Designer and Themer


3/26

Why Me!?

Ever since Drupal Con March 2012 I have been

learning and pushing responsive theming.

Denver2012.drupal.org

There are a lot of presentations about how to

set up Omega but none describing the process

to building out the site.


4/26

Sessions at DrupalCon To check out

Tues - Rethinking responsive building techniques with Drupal

Tues - HTML 4 S - While We're Waiting for the Revolution

Wed - UX design for every screen

Thurs - Keynote - Luke Wroblewski Thurs - Creating Responsive and Mobile-First Drupal Themes

Thurs - A Responsive Project Process

http://www.lukew.com/ff/entry.asp?1514 http://futurefriend.ly/
http://denver2012.drupal.org/program/sessions/rethinking-responsive-building-techniques-drupalhttp://denver2012.drupal.org/program/sessions/html-4-s-while-were-waiting-revolutionhttp://denver2012.drupal.org/program/sessions/ux-design-every-screenhttp://denver2012.drupal.org/keynote/luke-wroblewskihttp://denver2012.drupal.org/program/sessions/creating-responsive-and-mobile-first-drupal-themeshttp://denver2012.drupal.org/program/sessions/responsive-project-processhttp://denver2012.drupal.org/program/sessions/responsive-project-processhttp://denver2012.drupal.org/program/sessions/creating-responsive-and-mobile-first-drupal-themeshttp://denver2012.drupal.org/keynote/luke-wroblewskihttp://denver2012.drupal.org/program/sessions/ux-design-every-screenhttp://denver2012.drupal.org/program/sessions/html-4-s-while-were-waiting-revolutionhttp://denver2012.drupal.org/program/sessions/rethinking-responsive-building-techniques-drupal


5/26

Reference Links

http://dropbox.headscapedev.com/projects/wireframes/demo.htm Shows you grid formats

http://styletil.es/

Design Process Templates for Responsive

http://www.bbc.co.uk/gel/ Style Guide Ideas

http://responsinator.com/

Device Testing online

http://responsify.it/ Create your own Responsive Template

http://resizemybrowser.com/

http://whatsmy.browsersize.com/
http://dropbox.headscapedev.com/projects/wireframes/demo.htmhttp://styletil.es/http://www.bbc.co.uk/gel/http://responsinator.com/http://responsify.it/http://resizemybrowser.com/http://whatsmy.browsersize.com/http://whatsmy.browsersize.com/http://resizemybrowser.com/http://responsify.it/http://responsinator.com/http://www.bbc.co.uk/gel/http://styletil.es/http://dropbox.headscapedev.com/projects/wireframes/demo.htm


6/26

What is Responsive


7/26


8/26

Drupal 7 Responsive Themes

Omega

Adaptivetheme

Zen 7.x-5.x Fusion not out of the box.

Would love to discuss the difference betweenany of these.


9/26

Why I chose Omega

Most of what I heard initially was about

Omega

Most of the talk at DrupalCon was about

Omega

It seemed very easy out of the box.

It just worked after installation Easy to make a sub theme


10/26

Things to consider and run through

Theme - Omega

Grid width, Columns & Gutters

Navigation css-tricks.com Percentages

Javascript (Custom) - css-tricks.com

@media Breakpoints Images


11/26

The Grid


12/26

Omega Grid


13/26

Navigation

I wanted the navigation to

respond for the Portrait view

on tablets

However because of the

amount of navigation

throughout the site I turned itinto a select menu for the

mobile sites.


14/26

Main Nav - css

ul.menu li {

background-color: #434343;

list-style: none;

margin: 0 0 0 -10px;

padding: 0;

text-align:center;

width: 101.7%;

}

.menu ul { border-top: #333333 solid 2px; }

.menu ul li {

color:#ffffff;

display: block;

list-style: none;

margin: 10px auto;

overflow: hidden;

padding: 0px;

}

.menu li a {

background: #434343;

border-right: 1px solid #fff;

color: #ffffff; display: block;

Float: left;

font: 400 13px/ Helvetica, Verdana, Arial,sans-serif;

padding: 10px;

text-align: center;

text-decoration: none;

text-transform: uppercase;

width: 12.5%;

/*TRANSISTIONS*/

-webkit-transition: background 0.5s ease;

-moz-transition: background 0.5s ease;

-o-transition: background 0.5s ease;

-ms-transition: background 0.5s ease;

transition: background 0.5s ease;

}

.menu li:last-child a {

border-right: 0; margin: auto; }

.menu li:nth-child(8) a { border: none; }

.menu select { display:none; }


15/26

Nth child

This the css3 way to target specific elements within the unordered list

Main nav:

.menu li:nth-child(8) a { border: none; }

Sub nav:

#region-menu

#block-menu-menu-certificate-sub-menu li:nth-child(4) a {

width: 20%;

}*Using Firebug to find the elements id and classes.


16/26

Tablet Portrait

.menu {

width: 101%;

}

.menu li a {

font: 400 11px/1.4 Helvetica, Verdana, Arial,sans-serif;

width: 25%;

}

.menu li:nth-child(5) a,



.menu li:nth-child(8) a {

border-bottom: none;

}

.menu li:nth-child(4) a {

border-right: none;

}

#region-user {

width: 100%;}

#region-menu

#block-menu-menu-certificates-sub-menu li:nth-child(4) a {

width:25%;

}

So for the portrait view I changed the 8 navigation items to 4/4.


17/26

Turn navigation into a Dropdown menu

@media max-width 761 > above

.menu select { display:none; }

.sub-menu select { display:none; }

@media max-width 320px

.menu select {

background-color:#ffc000;

display:inline-block;

margin: 5px;

padding: 0px;

text-align:center;

width:90%;}

.menu ul {

display:none;

}

.menu li a {

display:none;

}

.sub-menu select {

background-color:#ffc000;

margin: 5px;

padding: 0px;

text-align: center;

width: 90%;

}

ul.sub-menu {background-color: #000000;

border: 0;

}


18/26

Template.php

function nasaepdn_preprocess_page(&$variables) {

drupal_add_js(drupal_get_path('theme', 'nasaepdn') .'/js/dropdown.js', 'file');

drupal_add_css('http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css', array('group'

=> CSS_THEME, 'type' => 'external'));

drupal_add_css(drupal_get_path('theme', 'nasaepdn') . '/css/ie8.css', array('group' =>

CSS_THEME, 'browsers' => array('IE' => 'lte IE 8', '!IE' => FALSE), 'preprocess' => FALSE));

drupal_add_css(drupal_get_path('theme', 'nasaepdn') . '/css/ie9.css', array('group' =>

CSS_THEME, 'browsers' => array('IE' => 'IE 9', '!IE' => FALSE), 'preprocess' => FALSE));}


19/26

Custom js in .info

libraries[nasaepdn_custom][name] = nasaepdn navigation dropdown

libraries[nasaepdn_custom][description] = Convert navigation to dropdown menu.

libraries[nasaepdn_custom][js][0][file] =

dropdown.jslibraries[nasaepdn_custom][js][0][options][weight] = 15


20/26

Give the sub-navigation a different class name

Dropdown.js (top)

$('#block-menu-menu-certificate-sub-menu ul.menu').removeClass('menu').addClass('sub-menu');

$('#block-menu-menu-courses-sub-menu ul.menu').removeClass('menu').addClass('sub-menu');

$('#block-menu-menu-resources-sub-menu ul.menu').removeClass('menu').addClass('sub-menu');


21/26

Javascript to split the menu class

Dropdown.js middle

//So I needed to target the sub-menu class separately

// JavaScript Document

jQuery(document).ready(function($) {

// DOM ready

// All your code here

$('#block-menu-menu-about-sub-menu ul.menu').removeClass('menu').addClass('sub-menu');

$('#block-menu-menu-certificate-sub-menu ul.menu').removeClass('menu').addClass('sub-menu');

$('#block-menu-menu-courses-sub-menu ul.menu').removeClass('menu').addClass('sub-menu');

// Create the MAIN NAVIGATION dropdown base $("").appendTo(".menu");

// Create default option "Go to..."$("", {

"selected" : "selected",

"value" : "",

"text" : "Main Navigation",

}).appendTo(".menu select");

// Populate dropdown with items

$(".menu a").each(function() {

var el = $(this);

$("", {

"value" : el.attr("href"),

"text" : el.text(),

}).appendTo(".menu select");});

// To make dropdown actually work

// To make more unobtrusive: http://css-tricks.com/4064-unobtrusive-page-changer/

$(".menu select").change(function() { window.location = $(this). find("option:selected").val(); });


22/26

JS subnav code (Same as main except tag)

Dropdown.js bottom

// Create the SUB NAVIGATION dropdown base

$("").appendTo(".sub-menu");

// Create default option "Go to..."

$("", {

"selected" : "selected",

"value" : "",

"text" : "Sub Navigation",

}).appendTo(".sub-menu select");

// Populate dropdown with items

$(".sub-menu a").each(function() {

var el = $(this);

$("", {

"value" : el.attr("href"),

"text" : el.text(),

}).appendTo(".sub-menu select");

});

// To make dropdown actually work

// To make more unobtrusive: http://css-tricks.com/4064-unobtrusive-page-changer/

$(".sub-menu select").change(function() {

window.location = $(this).find("option:selected").val(); }); $( "#accordion" ).accordion();

});


23/26

Breakpoints

Breakpoints are basically where you want things to

change for the different devices.

I have chosen to use

1220px

1024px

761px

320px


24/26

Images

I do not have a fool proof plan for images.

I am using percentage for the images on the site.

I currently only have one main image but will be changing that

into a rotating image soon.

Css-tricks has a great article with good indepth image

discussion. http://css-tricks.com/which-responsive-images-solution-should-you-use/

Acquia webinar about Delivering the Right Mobile Experience. The group is working on a images module.

http://www.acquia.com/resources/acquia-tv/conference/delivering-right-mobile-experience-drupal-may-29-2012

http://www.vml.com/

http://drupal.org/project/resp_img

http://drupal.org/project/adaptive_image
http://css-tricks.com/which-responsive-images-solution-should-you-use/http://drupal.org/project/resp_imghttp://drupal.org/project/resp_imghttp://css-tricks.com/which-responsive-images-solution-should-you-use/


25/26

Happy Fathers Day


26/26

Questions:

Documents

Responsive Theming With Omega