Responsive Theming / Omega by lVi34y

VIEWS: 52 PAGES: 26

									Responsive Theming / Omega

                  Single shot
         at building a responsive site

  http://www.slideshare.net/timwhelan/drupal-omega-and-responsive-build-out
                         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 - css
ul.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/ Helvetica, Verdana, Arial,
    width: 101.7%;                                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 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.
                               Tablet Portrait
So 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 Helvetica, Verdana, Arial,   width: 100%;
    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.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));
}
                       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
      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_img
   http://drupal.org/project/adaptive_image
Happy Father’s Day
Questions:

								
To top