webtemplate-dpaw 0.2

Base HTML templates for DPaW Django projects

This project consists of a basic Django application containing HTML templates that provide a starting point for web applications used by the Department of Parks and Wildlife. The base template consists of a mobile-friendly HTML5 template with a fixed top navbar containing the DPaW logo, plus static assets. The project also contains functional examples of login and logged out templates.

The base template is based upon HTML5 Boilerplate styled with Bootstrap 3, with some additional styling via the Bootflat UI kit.

Installation

1. Install via pip: pip install webtemplate-dpaw.

2. Add 'webtemplate_dpaw' to INSTALLED_APPS.

3. Ensure that the staticfiles application is included and configured correctly.

4. Ensure that you have defined the following named URLs: login and logout (this requirement can be overriden, see below).

5. Extend the included base template by placing the following at the head of your own templates: {% extends "webtemplate_dpaw/base.html" %}

6. Place page content within the required blocks (see below).

Included CSS and JavaScript

The base template currently includes the following CSS and JavaScript assets (served via JSDelivr):

1. Modernizr 2.8.3 (HTML5 polyfills)

2. Bootstrap 3.3.2 (CSS & JS)

3. Bootflat UI kit 2.0.4 (Bootstrap style extension)

4. jQuery 2.1.3 (DOM traversal, etc.)

Additional styling can be included by extending the base_style or base_js blocks and calling {{ block.super }}, like so:

{% load static from staticfiles %}

{% block base_style %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'css/custom.css' %}">
{% endblock %}

You can also overide these blocks completely to use completely different CSS or JS, or use the extra_style and extra_js blocks you don’t feel like typing {{ block.super }}.

Template blocks

The base template contains a number of block tags that are used to render the content of your project. The main template content blocks are as follows:

• navbar_links - used to define navigation links in the top navbar.

• page_content - used to contain the page’s main content.

• page_footer - used to contain a page footer area.

• navbar_auth - used to display either a Login or Logout link.

Note that the navbar_auth block contains {% url %} templatetags with named URLs called login and logout. If this is not required or inappropriate for your project, simply override the navbar_auth block.

In addition, a number of context variables are defined:

• page_title - used to populate the page <title> tags.

• site_title - used to populate the projects’s title in the top navbar.

Context variables should be passed to templates in every view.

Examples

To populate the main content area with a narrow left sidebar and content area that fills the whole screen width and will collapse elegantly on narrow or mobile displays:

{% extends "webtemplate_dpaw/base.html" %}

{% block page_content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2" id="sidebar">
            {% include "sidebar.html" %}
        </div>
        <div class="col-xs-12 col-sm-8 col-md-9 col-lg-10">
            {% block page_content_inner %}{% endblock %}
        </div>
    </div>
</div>
{% endblock %}

To include a right-aligned copyright line in the footer area:

{% extends "webtemplate_dpaw/base.html" %}

{% block page_footer %}
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12">
            <hr>
            <p class="pull-right">&copy; 2015 Department of Parks and Wildlife</p>
        </div>
    </div>
</div>
{% endblock %}

To include no navigation links in the top navbar and to prevent the automatic “navbar button” from showing on narrow displays, overide the navbar_button and navbar_links blocks:

{% extends "webtemplate_dpaw/base.html" %}

{% block navbar_button %}{% endblock %}
{% block navbar_links %}{% endblock %}