Drupal Omega and Responsive Build out


Published on

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Drupal Omega and Responsive Build out

  1. 1. Responsive Theming / Omega Single shot at building a responsive site
  2. 2. 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. 3. 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. 4. 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/
  5. 5. 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/
  6. 6. What is Responsive
  7. 7. 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.
  8. 8. 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
  9. 9. 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
  10. 10. The Grid
  11. 11. Omega Grid
  12. 12. 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.
  13. 13. 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; }
  14. 14. 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.
  15. 15. 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;}
  16. 16. 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; }}
  17. 17. 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));}
  18. 18. 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
  19. 19. 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);
  20. 20. 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(); });
  21. 21. 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();});
  22. 22. Breakpoints• Breakpoints are basically where you want things to change for the different devices.• I have chosen to use – 1220px – 1024px – 761px – 320px
  23. 23. 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
  24. 24. Happy Father’s Day
  25. 25. Questions: