UI Standards

Accessibility

We really want to make our sites accessible. For a good introduction, see the How I do an accessibility audit YouTube video.

The GOV.UK, Testing for accessibility web pages are probably worth reading.

Dashboard

Note

Public pages will normally be in the web app.

The dash app is generally for pages where the user has to be logged in.

The settings app is generally for pages where a member of staff can configure settings, add records to look-up tables etc.

These are not a hard and fast rules. We will often want other apps where the user needs to be logged in.

Projects will normally have a dashboard and a settings page. The URL for the dashboard must be named project.dash and the URL for the settings page must be named project.settings e.g:

# from 'dash/urls.py'
url(regex=r'^$',
    view=DashView.as_view(),
    name='project.dash'
    ),
url(regex=r'^settings/$',
    view=SettingsView.as_view(),
    name='project.settings'
    ),

An app can make it easy for a developer to add items to the dashboard or settings template by making an <app-name>/_dash.html or <app-name>/_settings.html template e.g:

{% include 'cms/_dash.html' %}
{% include 'cms/_settings.html' %}

For example code, see:

Forms

To make forms look good on desktop and mobile, see Forms.

Icons

Align

To vertically align icons (from Fixed Width Icons), use the fa-fw class e.g:

<i class="fa fa-search fa-fw"></i>

Apps

invoice

Usage

http://fontawesome.io/icon/cogs/:

usage         audit/superuser
icon          <i class="fa fa-cogs"></i>

http://fontawesome.io/icon/calendar/:

usage         calendar/booking
icon          <i class="fa fa-calendar"></i>

http://fontawesome.io/icon/check/:

usage         tick
icon          <i class="fa fa-check"></i>

http://fontawesome.io/icon/clock-o:

usage         waiting
icon          <i class="fa fa-clock-o"></i>

http://fontawesome.io/icon/cloud-download/:

usage         download
icon          <i class="fa fa-cloud-download"></i>

usage         Report
icon          <i class="fa fa-table"></i>
caption       Report

usage         Download CSV (prefer 'fa-cloud-download' for a download)
icon          <i class="fa fa-file-excel-o"></i>
caption       Download CSV

http://fontawesome.io/icon/envelope-o/:

usage         mail/email
icon          <i class="fa fa-envelope-o"></i>

http://fontawesome.io/icon/exclamation-triangle/:

usage         warning
icon          <i class="fa fa-warning"></i>

https://fontawesome.com/icons/link:

usage         internal link
icon          <i class="fa fa-link"></i>

http://fontawesome.io/icon/external-link/:

usage         external link
icon          <i class="fa fa-external-link"></i>

http://fontawesome.io/icon/file-code-o/:

usage         template - html
icon          <i class="fa fa-file-code-o"></i>

http://fontawesome.io/icon/header/:

usage         header/footer
icon          <i class="fa fa-header"></i>

http://fontawesome.io/icon/home/:

usage         home
icon          <i class="fa fa-home"></i>

http://fontawesome.io/icon/gbp/:

usage         money/payments
icon          <i class="fa fa-gbp"></i>

https://fontawesome.com/icons/history:

usage         audit / history
icon          <i class="fa fa-history"></i>

http://fontawesome.io/icon/magic/:

usage         workflow
icon          <i class="fa fa-magic"></i>

http://fontawesome.io/icon/paperclip/:

usage         attach
icon          <i class="fa fa-paperclip"></i>

http://fontawesome.io/icon/pencil-square-o/:

usage         edit
icon          <i class="fa fa-edit"></i>

http://fontawesome.io/icon/info/:

usage         help, information, info
icon          <i class="fa fa-info-circle"></i>

http://fontawesome.io/icon/phone/:

usage         phone
icon          <i class="fa fa-phone"></i>

http://fontawesome.io/icon/plus/:

usage         add, create
icon          <i class="fa fa-plus"></i>

http://fontawesome.io/icon/refresh/:

usage         retry, sync
icon          <i class="fa fa-refresh"></i>

http://fontawesome.io/icon/reply/:

usage         dash (back)
icon          <i class="fa fa-reply"></i>

https://fontawesome.com/icons/shield-check:

usage         gdpr
icon          <i class="fa fa-shield"></i>

http://fontawesome.io/icon/shopping-cart/:

usage         money/payments
icon          <i class="fa fa-shopping-cart"></i>

https://fontawesome.com/icons/sort/:

usage         sort / up / down
icon          <i class='fa fa-sort'></i>
icon          <i class='fa fa-sort-asc'></i>
icon          <i class='fa fa-sort-desc'></i>

http://fontawesome.io/icon/file-text-o/:

usage         page
icon          <i class="fa fa-file-text-o"></i>

http://fontawesome.io/icon/search/:

usage         search
icon          <i class="fa fa-search"></i>

http://fontawesome.io/icon/tachometer/:

usage         dashboard
icon          <i class="fa fa-tachometer"></i>

http://fontawesome.io/icon/trash-o/:

usage         delete
icon          <i class="fa fa-trash-o"></i>
or...         <i class="fa fa-times"></i>

https://fontawesome.com/v4.7.0/icon/undo:

usage         undo, undelete
icon          <i class="fa fa-undo"></i>

http://fontawesome.io/icon/user/:

usage         user
icon          <i class="fa fa-user"></i>

Pure

Grid

Two columns

<div class="pure-g">
  <div class="pure-u-1 pure-u-md-1-2">
    <!-- spacing -->
    <div class="l-box">
    <div class="r-box">

Table

<table class="pure-table pure-table-bordered">
  <thead>
    <tr valign="top">
      <th>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr valign="top">
      <td>
      </td>
    </tr>
  </tbody>
</table>

Template

Date

Short date e.g. 05/09/2015 13:30:

{{ item.checkout_date|date:'d/m/Y H:i' }}

Tags

From Two Scoops of Django, the convention we follow is <app_name>_tags.py e.g. cms_tags.py.