Drupal Omega and Responsive Build out
-
Upload
tim-whelan -
Category
Technology
-
view
6.547 -
download
1
description
Transcript of Drupal Omega and Responsive Build out
Responsive Theming / Omega
Single shot at building a responsive site
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
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.
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/
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/
What is Responsive
Drupal 7 – Responsive Themes
• Omega• Adaptivetheme• Zen 7.x-5.x• Fusion – not out of the box.
• Would love to discuss the difference between any of these.
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
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
The Grid
Omega Grid
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 it into a select menu for the mobile sites.
Main Nav - cssul.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; }
Nth child
This the css3 way to target specific elements within the unordered listMain 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.
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(6) a, .menu li:nth-child(7) 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.
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; }
Template.phpfunction 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));}
Custom js in .info libraries[nasaepdn_custom][name] = nasaepdn navigation dropdownlibraries[nasaepdn_custom][description] = Convert navigation to dropdown menu.libraries[nasaepdn_custom][js][0][file] = dropdown.jslibraries[nasaepdn_custom][js][0][options][weight] = 15
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');
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 $("<select />").appendTo(".menu"); // Create default option "Go to..." $("<option />", { "selected" : "selected", "value" : "", "text" : "Main Navigation", }).appendTo(".menu select"); // Populate dropdown with items $(".menu a").each(function() { var el = $(this); $("<option />", { "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(); });
JS subnav code (Same as main except tag)
Dropdown.js bottom
// Create the SUB NAVIGATION dropdown base $("<select />").appendTo(".sub-menu"); // Create default option "Go to..." $("<option />", { "selected" : "selected", "value" : "", "text" : "Sub Navigation", }).appendTo(".sub-menu select");
// Populate dropdown with items $(".sub-menu a").each(function() { var el = $(this); $("<option />", { "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(); });
Breakpoints
• Breakpoints are basically where you want things to change for the different devices.
• I have chosen to use– 1220px– 1024px– 761px– 320px
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_imghttp://drupal.org/project/adaptive_image
Happy Father’s Day
Questions: