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>