Ashwin Sundar

Django Template Language

“Front-end” in web development refers to the visual appearance of an application or website. In Django, a web development framework, the front-end is created in DTL (Django Template Language), which is a superset of HTML (Hypertext Markup Language).

DTL represents the “what” of the page - the actual contents. The “how” of the page - how the page appears - is defined by CSS (Cascading Style Sheets).

DTL Files

Here’s an example of a DTL file.


{% load static %} <link rel = "stylesheet" href = "{% static 'css/stats-pane.css' %}">
<div class = "stats-pane">
    <div class = "stat-component-A">
        {% include "components/stat-component.html" with title="Cages" numdetail=stats.cage_count %}
    <div class = "stat-component-B">
        {% include "components/stat-component.html" with title="Mice" numdetail=stats.mice_count %}
    <div class = "stat-component-C">
        {% include "components/stat-component.html" with title="Efficiency Index" numdetail=stats.efficiency green=9 yellow=4 red=0 %}

Here is what is happening in this file:


Here are the contents of the stat-component.html file:

{% extends "components/generic-square.html" %}
{% block content %}
    {% load static %} <link rel = "stylesheet" href = "{% static 'css/components/stat-component.css' %}">
    <div class = "stat-container">
        <div class = "stat-title">
            {{ title }}
        {% if numdetail > green %}
        <div class = "stat-numdetail stat-green">
        {% elif numdetail > yellow %}
        <div class = "stat-numdetail stat-yellow">
        {% elif numdetail > red %}
        <div class = "stat-numdetail stat-red">
        {% else %}
        <div class = "stat-numdetail">
        {% endif %}
            {{ numdetail }}
{% endblock content %}

CSS Files

CSS describes how the elements of the page appear. Here is the CSS file used by the stats-pane.html file described in the first section:


.stats-pane {
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: center;
  align-items: center;

This definition applies styling characteristics to elements that have an attribute of class = "stats-pane". In this case, the stats-pane is defined as a layout style called flexbox2, and the elements of the flexbox should appear as rows. The gap between each element is set to 10 pixels, and finally the contents are center-aligned.


While DTL contains some Python-esque language features, it only permits a small subset of the Python language to be run. This is a design choice - permitting arbitrary Python code to run can be dangerous. That said, DTL is fairly powerful and extensible via custom filters and tags3.

CSS takes some time to become acquainted with and ultimately master. The core specification is constantly improving. This guide is a good way to understand the modern contours and best-practices of CSS in 2023.

  1. Template extensions are part of a larger Django topic called template inheritance ↩︎

  2. ↩︎

  3. ↩︎