Django Frontend Skeleton

This post is a tad late (15 days to be exact) but I released my first open source Python package into the wild. Meet Django Frontend Skeleton.

In a nutshell, Django Frontend Skeleton is a basic Django template skeleton built on HTML5 Boilerplate and Twitter Bootstrap. With the convenience of an installable Django application, create custom templates built on top of one of the most well-known, widespread templates (HTML5 Boilerplate) and a robust front-end framework (Twitter Bootstrap.)

Getting started

  1. install ‘django-frontend-skeleton’ (pip install, add to your requirements file, etc.)
  2. add ‘frontend.skeleton’ to your INSTALLED_APPS
  3. extend the skeleton’s base template in your template(s) {% extends ‘skeleton/base.html’ %}

At this point you’re all setup and ready to go, and have several common static assets at your disposal:

  1. Modernizr (2.6.2, included in base)
  2. jQuery (1.8.3, included in base)
  3. Twitter Bootstrap javascript (2.2.1, included in base)
  4. Twitter Bootstrap CSS (2.2.1, bootstrap and bootstrap-responsive are included in base)
  5. Twitter Bootstrap icon sprites (kind of 404’s in the CSS right now, oops)
  6. Normalize.css (1.0.2)
  7. HTML5 Boilerplate CSS (although I don’t know how useful it is without modifications)

Depending on whether or not TEMPLATE_DEBUG is set, either full or minified versions of these static files will be served. jQuery will even take advantage of being served from Google’s Hosted Libraries if TEMPLATE_DEBUG is false.

Extending

Chances are you’ll want to extend or change Django Frontend Skeleton’s base template to fit your needs, lucky for you there are several handy block tags for you to take advantage of. I’m not going to list them all, so take a look for yourself.

In order to use the blocks you’ll have to load the template tag set that you’re wanting to use:

  • {% load h5bp %}
  • {% load bootstrap %}

Then just change your intended block:

{% block bootstrap_js %}
{% bootstrap_ js affix %}
{% endblock bootstrap_js %}

Und so weiter, und so weiter…

Twitter Bootstrap

There is some magic going on with Twitter Bootstrap’s javascript template tag, and the credit deservingly goes to Ryan Brady for his Django Bootstrapped, which appears to be no longer maintained.

If loading all of Twitter Bootstrap’s javascript is too heavy handed, you can easily pick and choose what you want. Your options include:

The next immediate release, which will hopefully happen this week, will include actual docs and fix the glyphicons 404. I would like to thank my co-workers Derek Stegelman and Garrett Pennington for their help and support, and all the wonderful authors who make these things happen.