DRY Principle in Django HTML Templates

Developers waste a lot of time in managing their code, even more than time took to write it…

Investing in some time at the beginning could save a LOT in later stages.

I was developing a web app in Python using Django and had to create 3 screens — Sign In, Sign Up and Forgot Password. The layout was identical, using a same background pic at left and fields at the right. There was only a slight variation in three screens

Definitely some code reuse was possible. Moreover, I also had to think about the remaining screens to come into picture. Django comes with a templating engine out of the box and has template extending functionality.

I came up with the following plan.

There is always a part of an HTML page which is shared by ALL the screens, like downloading bootstrap css, js, jquery etc. — this is Section A.

A lower hierarchical section is shared by pages with common tasks — signin, signup, forgot password. — Section B

Remaining part is unique to each page — Section C.

Section A : base.html

{% load static %}
<html>
<head>
<title>Car Portal</title>
<link rel="stylesheet" href="{% static 'bootstrap/bootstrap.min.css' %}">
<script src="{% static 'bootstrap/jquery-3.1.1.min.js' %}"></script>
<script src="{% static 'bootstrap/bootstrap.min.js' %}"></script>
</head>
<body>
{% block baseContent %}{% endblock %}
</body>
</html>

Section B : base_log.html

{% extends "base.html" %}
{% load static %}
{% block baseContent %}
<link rel="stylesheet" href="{% static 'css/base_log.css' %}">
<div class="row">
<div class="col-md-8 login-background" style="background-image: url('{% static 'images/background_login.jpg' %}');">
</div>
<div class="col-md-4 login-sidepane">
<img src="{% static 'images/logo.png' %}" class="login-logo">
<div class="login-sidepane-content">
{% block content %}{% endblock %}
</div>
</div>
</div>
{% endblock %}

Section C [1] : signup.html

{% extends "base_log.html" %}
{% load static %}
{% block content %}
<form method="post"> {% csrf_token %}
<input style="margin-top:15%;" type="text" class="form-control textfield" id="username" name="username" placeholder="Username">
<input style="margin-top:30px;" type="text" class="form-control textfield" id="email" name="email" placeholder="Email">
<input style="margin-top:30px;" type="password" class="form-control textfield" id="password" name="password" placeholder="Password">
<input type="image" class="center-btn" src="{% static 'images/buttonf_signup.png' %}">
</form>
{% endblock %}

Section C [2] : signin.html

{% extends "base_log.html" %}
{% load static %}
{% block content %}
<form method="post"> {% csrf_token %}
<input style="margin-top:15%;" type="text" class="form-control textfield" id="username" name="username" placeholder="Username">
<input style="margin-top:30px;" type="password" class="form-control textfield" id="password" name="password" placeholder="Password">
<p class="fgt-pwd"><a href="/portal/forgot_password">Forgot Password?</a></p>
<input type="image" class="center-btn" src="{% static 'images/buttonf_login.png' %}">
</form>
<div class="down-div">
<a href="/portal/signup">
<img src="{% static 'images/buttone_signup.png' %}" class="downright-btn">
</a>
</div>
{% endblock %}

And so on … Section C [3] : forgot_password.html

Please comment for any possible improvement…