Django HTML5 Boilerplate

I am a big fan of the HTML 5 Boilerplate project, and in that past, I have made some half-hearted attempts to incorporate it into a reusable Django module. I think the problem with my attempts and the other attempts that I have found recently on the web is that nobody automated the process of converting H5BP into a django module, so each time H5BP is updated (which happens frequently), somebody has to manually update their module.

This week, I finished a Django HTML 5 Boilerplate (DH5BP), which uses fabric to automatically download H5BP and create the files necessary to maintain the Django module. This way we get the benefit of a Django-friendly H5BP that can easily be updated to the latest version of H5BP.

DH5BP is like any other Python module, and can be included easily into your Django project using Pip. It only requires that you have a version of Django >= 1.3 installed.

How do it…

To install django-html5-boilerplate:

pip install django-html5-boilerplate

Then include DH5BP in your `settings.py`:

INSTALLED_APPS = (
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.sites',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    # Uncomment the next line to enable the admin:
    'django.contrib.admin',
    # Uncomment the next line to enable admin documentation:
    'django.contrib.admindocs',
    ...
    'dh5bp',
    ...
)

H5BP Template

Any template you want to inherit the H5BP page architecture include the following:

{% extends 'dh5bp/base.html' %}
{% load url from future %}
{% block title %}YOUR TITLE HERE{% endblock %}
{% block content %}YOUR PAGE MARKUP HERE{% endblock %}

Additionally, you can define more styles, meta, and other head-related markup in the title block:

{% block head %}
    
    ...
{% endblock %}

The project expects you to create a /static/js/main.js file (see JavaScript notes below) for your primary script. To include JavaScript before or after main.js:

{% block pre_main_script %}
    
{% endblock %}

{% block post_main_script %}
    
{% endblock %}

If the enduser is viewing your site on a version of IE <= 7, then they will be shown a message indicating that they are using an outdated browser. To overwrite that message:

{% block outdated_message %}
    

YOUR MESSAGE {% endblock %}

If you use Google Analytics (GA), then H5BP includes the script for it right into the page. You will need to provide the template variable `DH5BP_GA_CODE` with your GA code to activate the script. You will probably want to use a context_processor for this:

Writing Your Own Context Processors

JavaScript

You will be provided the latest `jQuery`, `modernizr`, and a `console` polyfill from H5BP. In addition, the base template will look for a static file `js/main.js`. Put any JavaScript that is required for all pages of your site here. I have created two blocks (as described above), where you can put JavaScript that needs to be execute before and after the main script.

Urls & Views

The H5BP 404 page was ported over and wired up, as well as a similar looking 500 page. To use these in your project add the following to your `urls.py`:

handler404 = 'dh5bp.views.page_not_found'
handler500 = 'dh5bp.views.server_error'

I have wired up the default `favicon.ico`, `apple-touch-icon.png`, `humans.txt`, `robots.txt`, and `crossdomain.xml` from H5BP as well. To include those into your project, simply append the DH5BP urls to your urls:

from dh5bp.urls import urlpatterns as dh5bp_urls

urlpatterns = patterns('',
    # YOUR URLS
)
urlpatterns += dh5bp_urls

If you choose to change the behavior of these URLs, you can either not include these urls or declare your own version before adding the DH5BP urls (whichever definition occurs first will be the one used by Django).

How it works…

Include and consuming this module should be just like working with other Django-friendly modules. This project has simplified how you incorporate HTML5 Boilerplate into your Django projects and focuses only on solving that problem.

Additionally, it includes a fabric script for keeping the package up-to-date with latest H5BP changes. At the very least, DH5BP will have a new release for every major release of H5BP. However, there is no reason to not update more frequently.

The latest version of the documentation can always be found on the project homepage.