Your SlideShare is downloading. ×
0
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 ar...
Why Me!?• Ever since Drupal Con March 2012 I have been  learning and pushing responsive theming.• Denver2012.drupal.org• T...
Sessions at DrupalCon To check out• Tues - Rethinking responsive building techniques with Drupal• Tues - HTML 4 S - While ...
Reference Links…• http://dropbox.headscapedev.com/projects/wireframes/demo.htm   – Shows you grid formats• http://styletil...
What is Responsive
Drupal 7 – Responsive Themes•   Omega•   Adaptivetheme•   Zen 7.x-5.x•   Fusion – not out of the box.• Would love to discu...
Why I chose Omega• Most of what I heard initially was about  Omega• Most of the talk at DrupalCon was about  Omega• It see...
Things to consider and run through•   Theme - Omega•   Grid width, Columns & Gutters•   Navigation – css-tricks.com•   Per...
The Grid
Omega Grid
Navigation• I wanted the navigation to  respond for the Portrait view  on tablets• However because of the  amount of navig...
Main Nav - cssul.menu li {                               .menu li a {                                  .menu li:nth-child(...
Nth childThis the css3 way to target specific elements within the unordered listMain nav:.menu li:nth-child(8) a { border:...
Tablet PortraitSo for the portrait view I changed the 8 navigation items to 4/4..menu {                                   ...
Turn navigation into a Dropdown menu@media max-width 761 > above.menu select { display:none; }.sub-menu select { display:n...
Template.phpfunction nasaepdn_preprocess_page(&$variables) {drupal_add_js(drupal_get_path(theme, nasaepdn) ./js/dropdown.j...
Custom js in .infolibraries[nasaepdn_custom][name] = nasaepdn navigation dropdownlibraries[nasaepdn_custom][description] =...
Give the sub-navigation a different class nameDropdown.js (top)$(#block-menu-menu-certificate-sub-menu ul.menu).removeClas...
Javascript to split the menu classDropdown.js middle…//So I needed to target the sub-menu class separately// JavaScript Do...
JS subnav code (Same as main except tag)Dropdown.js bottom// Create the SUB NAVIGATION dropdown base$("<select />").append...
Breakpoints• Breakpoints are basically where you want things to  change for the different devices.• I have chosen to use  ...
Images• I do not have a fool proof plan for images.• I am using percentage for the images on the site.• I currently only h...
Happy Father’s Day
Questions:
Drupal Omega and Responsive Build out
Upcoming SlideShare
Loading in...5
×

Drupal Omega and Responsive Build out

6,638

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,638
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
45
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "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:
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×