Skip to main content

Drupal theme basics for modern browsers

Sep 26 '14

You are starting your next Drupal project but Drupal 7’s templates don’t have built-in fall backs for older browsers or updated HTML5 markup. This tutorial will cover how to bootstrap new projects to start creating beautiful templates without worrying about meeting front-end standards.

HTML5 Boilerplate to kickoff

Let’s first replace the following code to upgrade the documents to HTML5 standards. Gone are the days of transitional HTML and onto the world of simplified markup to keep all of us sane. Also, we need to make sure that we have the proper IE comments so your grandma can see your awesome website on IE 7. Thank you to Paul Irish for putting in the hard work to create HTML5 Boilerplate and Modernizr to make front-end development easier.

  1. Head over to /modules/system/html.tlp.php
  2. Copy the file into your templates files in /docroot/sites/all/themes/custom/*yourtheme/templates
  3. Replace the Doctype declaration with the following

<!-- [if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
 
<!-- [if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
 
<!-- [if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
 
<!-- [if gt IE 8]><!--> <!--<![endif]-->

Add proper meta information

Now that we have a shiny new HTML5 theme in our Drupal project, let’s also add the correct meta tags into the head section. You certainly can hard-wire the following code into the template, but the recommended Drupal way to add head meta information is to preprocess HTML with a PHP array in the template.php file. We pass the information through a preprocessor in order to take advantage of Drupal’s caching system. Take the following code and add it to your template.php file of your theme’s folder.

/**
* Preprocesses the wrapping HTML.
*
* @param array &$variables
* Template variables.
*/
function YOUR_THEME_NAME_preprocess_html(&$vars) {
drupal_add_html_head(array(
'#type' => 'html_tag',
'#tag' => 'meta',
'#attributes' => array(
'http-equiv' => 'X-UA-Compatible',
'content' => 'IE=edge'
),
), 'http_equiv');
 
drupal_add_html_head(array(
'#type' => 'html_tag',
'#tag' => 'meta',
'#attributes' => array(
'name' => 'viewport',
'content' => 'width=device-width, initial-scale=1',
),
), 'viewport');
}

Target older browsers with Modernizr.js

Modernizr is a fantastic way to manage cross-browser issues by targeting specific features and adding classes to your HTML file. For instance, if you create awesome CSS3 transition animations, you can create fallbacks in order to target users with older browsers to create a better user experience. Head over to Modernizr for more information and download the latest file.

  1. Navigate to your Javascript folder or create a new folder in your template called ‘js’
  2. Add the following code to the end of your template
    .info file scripts[] = js/responsive-menus.js
  3. Refresh your browser and check to make sure yournow has a lot of classes attached targeting the features of your browser

Wrap up

You’re done! You now have added some basic necessities for any front-end developer to create beautiful templates for modern browsers and devices on Drupal. HTMl5 Boilerplate makes life easier by taking the guess work out of how to get started and fills gaps in Drupal’s templates. Now what are you waiting for? Start theming!