Beginner and Intermediate Guide to HTML5 / CSS3 in Drupal

| Live Blog Posts

This is our live blog of the session “Beginner & Intermediate Guide to HTML5 / CSS3 in Drupal” by Kendall Totten from Mediacurrent.com. It was given at Drupal on the Bayou in New Orleans this week.

Kendall introduced HTML5 and CSS3 and explained how they are related to Drupal. She gave examples of Drupal modules and themes that already allow us to use HTML5 and CSS3 in Drupal.

Introduction

Upgrading to HTML5 is as simple as:

  1. Changing your doctype to:<!DOCTYPE HTML>
  2. Reset your CSS stylesheet: http://html5doctor.com/html-5-reset-stylesheet/

A key idea of HTML5 is that we’ll move away from meaningless <div> tags to more specific tags such as <header> and <footer>. The posh word for this is semantic.

This isn’t just better for people reading our code. It’s also better for machines like search engines and mobile devices who read our code.

Practical Content Examples

<article>
 <header>
 <h1>This is my header</h1>
 <p>By Richard Clark</p>
 </header>
 <p>Main text of my article</p>
 </article>

html structure

We can also have <section> tags which are usefully labelled:

<article>
 <header>
 <h1>This is my header</h1>
 <p>By Richard Clark</p>
 </header>
 <section id="what-are-outline">
 <h2>What are document outlines?</h2>
 <p>Main text/p>
 </section>
 <section id="outlines-in-html5">
 <h2>Outlines in HTML5</h2>
 <p>Main text</p>
 </section>
 </article>

A Practical Image Example

We can also display images with more useful information:

<figure>
 <img src="/yay.jpg">
 <fig caption>
 yay!!!
 </figcaption>
 </figure>

Microdata

Microdata allows us to very accurately define what kind of content is on a page. For example, this would label a whole area of your page as being an event: {copdecitation}<div itemscope itemtype="http://data-vocabulary.org/Event">{/copdecitation}

There is a Microdata module being developed for Drupal: http://drupal.org/project/microdata.

MicroFormats

Microformats are very similar to Microdata but they drill down to specific sections on the page. For example:

<span class="street-address">265 Main Street</span>
 <span class="locality">Drupaltown</span>
 <span class="region">Drupal Province</span>

Drupal Themes with HTML5

  • Omega
  • Adaptive Theme
  • Genesis
  • HTML5 Base
  • Boron
  • Zentropy
  • Plink

Kendall’s favorite is Delta module. Here’s comparison from Digett.com:

html5 Drupa themes

HTML5 Modules

22 are already available for Drupal 7. These include:

  • Video: upload and play in any format.
  • HTML5 Tools: support for several HTML plugins plus support for Views.
  • Aloha Editor: Provides an HTML5-friendly WYSIWYG Editor.

SVG (Scalable Vector Graphics)

New graphics file format and language, based on XML. Worth checking out SVGWOW.com. Abode Illustrator allow export to SVG.

Dealing With Internet Explorer

PIE (Progressive Internet Explorer) makes Internet Explorer 6 to 9 recognize a lot of CSS3 tags. Here’s an easy way to use it in Drupal: http://drupal.org/project/css3pie.

Media Queries

Automatically works out how wide the browser is and so tells the media on the screen how large it needs to be. Code sample:

<link rel="stylesheet" media="screen and (max-width: 700px)" href="/css/narrow.css">


<link rel="stylesheet" media="screen and (min-width: 701px) and (max-width: 900px)" href="/css/medium.css">

<link rel="stylesheet" media="screen and (min-width: 901px)" href="/css/wide.css">

CSS3 Fonts

Import fonts directly via CSS. Google has a font library available with live previews and implementation options: http://www.google.com/webfonts. This will make your site a touch slower but it much easier than older solutions.


About the author

Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. Steve's work straddles the line between teaching and web development.