html.tpl.php

Adaptivetheme is HTML5 so we must set the doctype to be compliant with this version of HTML. AT also uses the very nice idea of printing Internet Explorer conditional class on the HTML element which allows you to target specific versions or a version of IE from within your normal stylesheets - this quite handy if you only need to add occasional overrides and don't want or require the overhead of a full conditional stylesheet.

  • DOCTYPE for HTML5
  • IE conditional classes on the HTML element, much like HTML5 Boilerplate provides.

Adativetheme supplied variables

  • $html_attributes: lanaguge and language direction set to a variable for easy printing.
  • $polyfills: prints IE conditional polyfill scripts enabled via theme settings. variable that prints IE conditional scripts, which can be added via the info file: see - IE Styles and Scripts
  • $skip_link_target: prints an ID for the skip navigation target. For site builders and developer the skip navigation target ID is set through a new variable $skip_link_target. This can be set in your sub-themes Appearance settings under Extensions > Markup Overrides > Accessibility, with the default set to #main-content

The actual template looks almost pretty similar to Drupal 7 cores html template, with a few additions and changes:

<!DOCTYPE html>
<!--[if IEMobile 7]><html class="iem7" <?php print $html_attributes; ?>><![endif]-->
<!--[if lte IE 6]><html class="lt-ie9 lt-ie8 lt-ie7" <?php print $html_attributes; ?>><![endif]-->
<!--[if (IE 7)&(!IEMobile)]><html class="lt-ie9 lt-ie8" <?php print $html_attributes; ?>><![endif]-->
<!--[if IE 8]><html class="lt-ie9" <?php print $html_attributes; ?>><![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)]><!--><html <?php print $html_attributes . $rdf_namespaces; ?>><!--<![endif]-->
<head>
<?php print $head; ?>
<title><?php print $head_title; ?></title>
<?php print $styles; ?>
<?php print $scripts; ?>
<?php print $polyfills; ?>
</head>
<body class="<?php print $classes; ?>"<?php print $attributes; ?>>
  <div id="skip-link">
    <a href="<?php print $skip_link_target; ?>" class="element-invisible element-focusable"><?php print t('Skip to main content'); ?></a>
  </div>
  <?php print $page_top; ?>
  <?php print $page; ?>
  <?php print $page_bottom; ?>
</body>
</html>

IE conditional classes

As you can see there are many IE conditional classes on the HTML element - these can be very useful for pushing styles at different versions of Internet Explorer without requiring an additional stylesheet.

The $polyfills variable

$polyfills is a required addition to the template - to push in IE conditional scripts (JavaScripts and HTC files etc). This was done to keep it cleanly separated from $scripts sine the logic that drives the polyfill system is almost entirely bespoke to Adaptivetheme 7.x-3.x - it can and does enable the ability to add IE conditional scripts from the info file, which makes adding conditional scripts very easy and allows you to avoid having to hack html.tpl.php or otherwise write a lot of code to enable this feature in Drupal 7. See - IE Styles and Scripts

The $classes variable

Adaptivetheme makes heavy use of loading body classes to enabled various features in the theme - these are all set via adaptivetheme_preprocess_html(), in here you will find calls to various load and generate functions, which conditionally load CSS or JS and add body classes - these interact to control the layout and various other style related features.

@see adaptivetheme_preprocess_html()
@see adaptivetheme_process_html()

Last updated 27th April, 2012 - 2:16pm