Django HTML Template: SB Admin 2

In this article, I’ll explain my approach to working with a Django HTML template and optimizing template inheritance in Django. In general, I consider myself a backend developer, but I do have to deal with a lot of HTML/CSS/JavaScript during my development. Mostly when I start a new project, I begin by selecting an appropriate HTML template for it and then deconstructing the template until it’s modular and optimized for inheritance.

For demonstration purposes, I’ll Djangofy an extremely popular Bootstrap-based admin dashboard template called SB Admin 2. You can download the template here.

Djangofying SB Admin 2

Here are the steps I take when creating a Django HTML template.

I start by downloading the template from the link above and unzipping it to a folder called “Backup_template” in my project directory. I don’t usually add this folder to my git, so I’ll just add it to my .gitignore file.
I now proceed to copy all the assets of the template — that is, the css, js and images — to the static folder of my Django project. I might create a separate folder called “dashboard” in the static folder just to differentiate it from other static files.
Then, I create a folder called “dashboard” in the templates directory of my Django project. This is where all the html files will live.
My next step is to look for a file called index.html in the Backup_templates folder. This is usually the main file of the template.
I now create a file called base.html in the “dashboard” folder that I created in step 3. This file will contain all the common elements — such as the navbar and the footer — that need to be included in all pages of the dashboard. It will also have several blocks defined for overriding in the child templates. Some common block elements I always include are:

{% block extrahead %} {% endblock extrahead %} {# within the <head></head> tags to include extra css and js files that the child templates might need. #}

1
2
3
4

{% block extrahead %}
{% endblock extrahead %}

{# within the <head></head> tags to include extra css and js files that the child templates might need. #}

{% block extrastyle %} {% endblock extrastyle %} {# just before the <body> tag to write some simple page-level css in <style></style> elements. #}

1
2
3
4

{% block extrastyle %}
{% endblock extrastyle %}

{# just before the <body> tag to write some simple page-level css in <style></style> elements. #}

{% block navbar %} {% endblock navbar %} {# for page-level navbar changes #}

1
2
3
4

{% block navbar %}
{% endblock navbar %}

{# for page-level navbar changes #}

{% block content %} {% endblock content %} {# where the main content of child templates are written. #}

1
2
3
4

{% block content %}
{% endblock content %}

{# where the main content of child templates are written. #}

{% block extrajs %} {% endblock extrajs %} {# just before the closing </body> tag to write some page-level javascript, or include js libraries. #}

1
2
3
4

{% block extrajs %}
{% endblock extrajs %}

{# just before the closing </body> tag to write some page-level javascript, or include js libraries. #}
The next step is to modify all links to external files to use the {% static %} tag.For example,
<link rel=”shortcut icon” type=”image/png” href=”favicon.ico”/>
becomes
<link rel=”shortcut icon” type=”image/png” href=”{% static ‘favicon.ico’ %}”/>Remember to {% load staticfiles %} at the top of the template.
I include a “title” variable within the <title></title> tags to dynamically send the page title from the views.It looks like this: <title>Mysite: {{ title }}</title>
Optionally, I create a folder called “includes” within the “dashboard” directory. Within it, I create a file called head.html, to store global css, font and js includes. Then I just include it into the <head> tag of base.html like so:{% include ‘dasboard/includes/head.html’ %}A similar thing can be done for footers.
Now that the base.html template is ready, I can then go on to create the individual pages of my app by just extending it. For example, a sample page could be:

sample_page.html
XHTML

{% extends "dashboard/base.html" %} {% block content %} <p>This is a sample page.</p> {% endblock content %}

1
2
3
4
5

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

{% block content %}
<p>This is a sample page.</p>
{% endblock content %}
In this way, I can create lots of different pages with a coherent inheritance tree. I’ve found it to be a good structure that allows me to quickly make changes at any level of the inheritance. That being said, I don’t usually create too many levels of inheritance because it might turn out to be too difficult to manage.

Conclusion

You can find a Djangofied version of SB Admin 2 here. It’s not perfect, but it illustrates my approach really well.

I hope this was a helpful introduction to Djangofying an HTML template. You can build on it and create a manageable system of your own. If you have any suggestions or feedback, feel free to leave a comment below.

Happy coding!

Djangofying SB Admin 2

Conclusion

Leave a Comment Cancel reply