Guidelines¶
- Use 4 space indentation and not tabs
- Use underscores for html file naming
- Use double-quotes “ for all attributes including django-template tags
- Use lowercase for all attributes
- HTML has to validate using W3C guidelines
- HTML should validate the WCAG 2.0 A guidelines
- HTML should be modular and reusable, do not use easy names like “job” or “item” on top level. Use “addon-jobs” instead
- Always use space indendation after django tags such as {% if %}, {% forloop %}, {% block ... %} and others
- Ignore to rule on top for {% if %} or {% forloop %}
- All templates should be placed within the roots templates/ folder
- In general code readability first
Example¶
{% block content %}
<div class="plugin-blog">
{% if true %}
<p>Hello World</p>
{% endif %}
</div>
{% endblock content %}
{% addtoblock "js" %}<script src="{% static "js/libs/class.min.js" %}"></script>{% endaddtoblock %}
{% addtoblock "js" %}
<script>
jQuery(document).ready(function ($) {
alert('hello world');
});
</script>
{% endaddtoblock %}
IDs vs Classes¶
You should always use classes instead if id’s. Classes represent a more OOP approach of adding and removing style sets like box box-wide box-hint.
Try to avoid declaring ID’s at all. They should only be used to reference elements or for in-page navigation such as: <label for="field-username">..</label><input type="text" id="field-username" /> or /some/url#whats-new
Elements¶
Try to keep the html structure simple and avoid unnecessary elements. It is sometimes easier to use a single div with a single class rather than multiple divs with multiple classes:
<div class="addon-blog">
<h2>My Blog</h2>
<p>Hello World</p>
</div>
We don’t need to add specific classes to the h2 as we can control the inner style using .addon-blog. However more complicated structures such as lead, content, author, meta infos, tags can require their own class names:
<div class="addon-blog">
<h2>My Blog</h2>
<p class="blog-lead">Hello World</p>
<div class="blog-content">
<h3>Details</h3>
<p>More</p>
<p>Content</p>
</div>
<div class="blog-author">Dummy Man</div>
<ul class="blog-tags tags">
<li><a href="#">News</a>
<li><a href="#">Blog</a>
<li><a href="#">Tags</a>
</ul>
</div>