Drupal Omega and Responsive Build out
Upcoming SlideShare
Loading in...5
×
 

Drupal Omega and Responsive Build out

on

  • 5,073 views

 

Statistics

Views

Total Views
5,073
Views on SlideShare
5,073
Embed Views
0

Actions

Likes
1
Downloads
41
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

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

Drupal Omega and Responsive Build out Drupal Omega and Responsive Build out Presentation Transcript

  • 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 Were 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 { .menu li a { .menu li:nth-child(8) a { border: none; } background-color: #434343; background: #434343; list-style: none; border-right: 1px solid #fff; margin: 0 0 0 -10px; color: #ffffff; display: block; .menu select { display:none; } padding: 0; Float: left; text-align:center; font: 400 13px/ width: 101.7%; Helvetica, Verdana, Arial, sans-serif;} padding: 10px; text-align: center; text-decoration: none; text-transform: uppercase;.menu ul { border-top: #333333 solid 2px; } width: 12.5%;.menu ul li { /*TRANSISTIONS*/ color:#ffffff; -webkit-transition: background 0.5s ease; display: block; -moz-transition: background 0.5s ease; list-style: none; -o-transition: background 0.5s ease; margin: 10px auto; -ms-transition: background 0.5s ease; overflow: hidden; transition: background 0.5s ease; padding: 0px; }} .menu li:last-child a { border-right: 0; margin: auto; }
  • Nth childThis 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 PortraitSo for the portrait view I changed the 8 navigation items to 4/4..menu { .menu li:nth-child(4) a { width: 101%; border-right: none;} }.menu li a { #region-user { font: 400 11px/1.4 width: 100%; Helvetica, Verdana, Arial, sans-serif; } width: 25%; #region-menu}.menu li:nth-child(5) a, #block-menu-menu-certificates-sub-menu li:nth- child(4) a {.menu li:nth-child(6) a, width:25%;.menu li:nth-child(7) a, }.menu li:nth-child(8) a {border-bottom: none;}
  • Turn navigation into a Dropdown menu@media max-width 761 > above.menu select { display:none; }.sub-menu select { display:none; } .menu li a { display:none;@media max-width 320px } .sub-menu select {.menu select { background-color:#ffc000; background-color:#ffc000; margin: 5px; display:inline-block; padding: 0px; margin: 5px; text-align: center; padding: 0px; width: 90%; text-align:center; } width:90%; ul.sub-menu { } background-color: #000000;.menu ul { border: 0; display:none; }}
  • 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 .infolibraries[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 nameDropdown.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 classDropdown.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_img http://drupal.org/project/adaptive_image
  • Happy Father’s Day
  • Questions: