UI Standards¶
Click here for Standards
Click here for Django / Python Code Standards
Click here for Documentation
Click here for Ember / JavaScript Code Standards
Click here for Security Standards - Development
Click here for Sys-Admin and Configuration Management
Click here for Technology Standards
Accessibility¶
We really want to make our sites accessible. For a good introduction, see the How I do an accessibility audit YouTube video.
Adam Wathan (Tailwind UI) referred to http://html5doctor.com/ …
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:
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>
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/v4.7.0/icon/history:
usage audit / history / log / logging
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>
https://fontawesome.com/v4.7.0/icon/arrow-circle-right:
usage next previous
icon <i class="fa fa-arrow-circle-right"></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>
https://fontawesome.com/v4.7.0/icon/arrow-circle-left:
usage previous next
icon <i class="fa fa-arrow-circle-left"></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/v4.7.0/icon/star:
usage star, highlight
icon <i class="fa fa-star"></i>
https://fontawesome.com/v4.7.0/icon/cog:
usage settings
icon <i class="fa fa-cog" aria-hidden="true"></i>
https://fontawesome.com/v4.7.0/icon/sign-in:
usage Login / Sign in
icon <i class="fa fa-sign-in" aria-hidden="true"></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 (or cross - opposite to a tick)
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' }}
In python:
>>> x.strftime('%d/%m/%Y %H:%M')
'20/05/2011 10:55'
Tags¶
From Two Scoops of Django, the convention we follow is
<app_name>_tags.py e.g. cms_tags.py.