Templates

This project comes with three built-in templates.

base.html

base.html is the base template that all other templates inherit from.

The template is setup to use Twitter Bootstrap in the responsive mode. Twitter Bootstrap will provide your project with a simple grid system and a lot of handy CSS modules.

The template is also setup to use Django Compressor to join and minify CSS and JS assets. It’s important to use the smallest number of groups that make sense to reduce the number of HTTP requests that have to be made to render the page.

CSS files are placed in the head and JS files are placed at the very bottom of the document to increase page load time.

The following is a line by line walk through of the template.

<body>

content

<div class="container">
  {% templatetag openblock %} block content {% templatetag closeblock %}
    <div class="hero-unit">
      <h1>Hello, world!</h1>
      <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
      <p><a class="btn btn-primary btn-large">Learn more &raquo;</a></p>
    </div>
    <div class="row">
      <div class="span4">
        <h2>Heading</h2>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
      </div>
      <div class="span4">
        <h2>Heading</h2>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
      </div>
      <div class="span4">
        <h2>Heading</h2>
        <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
      </div>
    </div>
  {% templatetag openblock %} endblock {% templatetag closeblock %}

jQuery

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="{% templatetag openvariable %} STATIC_URL {% templatetag closevariable %}vendor/js/jquery-1.8.2.min.js"><\/script>')</script>

bootstrap.js

{% templatetag openblock %} compress js {% templatetag closeblock %}
  <script src="{% templatetag openvariable %} STATIC_URL {% templatetag closevariable %}vendor/js/bootstrap.js"></script>
{% templatetag openblock %} endcompress {% templatetag closeblock %}

main.js

{% templatetag openblock %} compress js {% templatetag closeblock %}
  <script src="{% templatetag openvariable %} STATIC_URL {% templatetag closevariable %}js/ga.js"></script>
  <script src="{% templatetag openvariable %} STATIC_URL {% templatetag closevariable %}js/main.js"></script>
{% templatetag openblock %} endcompress {% templatetag closeblock %}

404.html

404.html is the template that is used to render 404 errors.

This template is just a simple extension on the base.html template. It provides a basic not found page.

500.html

500.html is the template that is used to render 500 errors.

Note

This template is not provided with any context. So you can’t use any variables inside it, including common ones like {% templatetag openvariable %} STATIC_URL {% templatetag closevariable %}.

This template cannot extend base.html because it doesn’t have access to any context variables.

By default it’s just a very simple error page. Hopefully your users won’t see this much.