Finance Project 7: Starting the UI


When I’m building web apps I like to get the look and feel in place while I’m developing. There is a school of thought that says it’s better to get the functionality right and then worry about the CSS later, but for me the two are so intrinsically related that I prefer to develop them together.

There is a sound technical reason for my approach – every page template will need CSS and it’s much easier to put the relevant CSS in as the pages are built than to go back and edit them all later. Switching between CSS frameworks is a lot of work, so it’s a decision to make up front.

I considered various frameworks, such as Bootstrap, but I quite like Google’s Material Design look – it’s simple and helps my apps to look right on mobile – well, on Android at least…

I’ve used the Materialise CSS framework before, so this time I thought I’d try Material Design Lite. One of the nice things about it is the ability to change the colour scheme simply by selecting a different hosted CSS file using the customise tool:

To incorporate it into my Django app I needed to decide how to structure my templates. Templates can extend other templates, by fleshing out blocks defined in those templates. For example, a simple base template might contain:

<html>
<body>
{% block content %}{% end block %}
</body>
</html>

A template that extends the base template would then contain:

{% extends "base.html" %}
{% block content %}>
<P>This is the page contents</P>
{% endblock %}

Ideally the top level base template will contain only that which is going to be common to every single page, with a placeholder for the page content. You can then create several different templates for types of page that extend the base, and finally have individual templates for each page that extend the intermediate templates.

I decided to include the header in my base template, and because the header div includes the menus I put placeholders in for them so that they could be optional:

<!doctype html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.deep_purple-red.min.css" />
    <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
    
    <title>Finance</title>
  </head>
  <body>
    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
        <header class="mdl-layout__header">
            <div class="mdl-layout__header-row">
            <span class="mdl-layout-title">Finance</span>
            <div class="mdl-layout-spacer"></div>
                {% block topmenu %}{% endblock %}
            </div>
        </header>

        {% block sidemenu %}{% endblock %}

        <main class="mdl-layout__content">
            <div class="mdl-grid">
                {% block content %}{% endblock %}
            </div>
            
        </main>
    </div>
  </body>
</html>

This approach allows me to have pages with no menus at all, or different menus according to content. I could’ve used an intermediate template, with the base template having a single placeholder for the entire body, but every page will have a header so I think my approach helps to avoid repetition.

My next template will be used for most pages, and extend the base template to flesh out the menus:

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

{% block topmenu %}
<nav class="mdl-navigation mdl-layout--large-screen-only">
    <a class="mdl-navigation__link" href="">Link</a>
    <a class="mdl-navigation__link" href="">Link</a>
</nav>
{% endblock %}

{% block sidemenu %}
<div class="mdl-layout__drawer">
    <span class="mdl-layout-title">Finance</span>
    <nav class="mdl-navigation">
    <a class="mdl-navigation__link" href="">Link</a>
    <a class="mdl-navigation__link" href="">Accounts</a>
    <a class="mdl-navigation__link" href="">Account Categories</a>
    <a class="mdl-navigation__link" href="">Account Types</a>
    </nav>
</div>
{% endblock %}

Obviously I’ll flesh out the actual links later when I know what I want.

Finally, the templates for the actual pages will extend the page template and add the content – in this case a simple index.html:

{% extends "finance/page.html" %}
{% block content %}
<P>
And this is where we put the contents
</P>
{% endblock %}

Note that I didn’t have to include the content block in the page template – the index.html template extends page.html which itself extends base.html, so blocks in base.html are available in index.html.

This split also means that if I wanted a page that didn’t have the menus, I could simply extend directly from base.html and still have the design I need. As I go along, I’ll probably need other templates for specific page types that extend page.html – for example, separate templates for lists and forms.

The next step will be to flesh out the list and form screens for maintaining the accounts.

in Finance Project

Related Posts