Skip to content

User interface

Jump to bottom Edit New page
joke2k edited this page Mar 23, 2012 · 5 revisions

Base html file

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>OpenMunicipio{% block title %}{% endblock %}</title>

    {% block head_css_includes %}
    <link rel="stylesheet" href="{{ STATIC_URL }}css/styles.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="{{ STATIC_URL }}css/print.css"  type="text/css" media="print" />
    {% endblock head_css_includes %}

    <style type="text/css">
      {% block extra_style %}{% endblock %}
    </style>

    {% block head_js_includes %}
    <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    <script type="text/javascript" src="{{ STATIC_URL }}js/jquery.min.js"></script>
    {% endblock head_js_includes %}

    <script type="text/javascript" charset="utf-8">
      {% block extra_js %}{% endblock %}
    </script>

    {% block extra_head %}{% endblock %}
  </head>
  <body>
    ...
    {% block footer_js_includes %}{% endblock %}
  </body>

Extending templates

  • Override {% block head_css_includes %}{% endblock head_css_includes %} to include new css files
  • Override {% block extra_style %}{% endblock %} to include "spare" css code
  • Exactly the same as above holds for JS files and code, plus {% block footer_js_includes %}{% endblock %}
  • When overriding a block, use {{ block.super }} to keep inherited content
  • Empty blocks will not contain any space, eg. {% block head_css_includes %}{% endblock head_css_includes %}
  • Never ever use hardcoded paths, use {{ STATIC_URL }} and named urls instead
  • If a template block spans across multiple rows, use blockname in closing tag {% block blockname %} Some content here {% endblock blockname %}
  • spaceless tag may be handy
  • No i18n support will be provided
  • Use a 2-spaces indentation
  • In forms, method is lowercase: <form method="post" ... >...</form>

References

Template names and urls

  • Templates have .html extension
  • Detail templates: singular-model-name_detail.html
  • List templates: singular-model-name_list.html

CSS

  • Example CSS paragraph/notation: name { name: value; name: value; name: value; }

Misc

  • Each view will be provided with a proper documentation: what is passed to templates, how to use it?
Add a custom footer
Add a custom sidebar
Clone this wiki locally