{% extends 'base.html' %} {% load crispy_forms_tags %} {% load verbatim %} {% block base_header_additional_head %} {% endblock %} {% block base_content %}
Use this guide to get a hint of what components you should use when creating content for NAV. The code is not provided - we expect that you are familiar enough with developer tools to get the information you need.
As we use Foundation 5, the components available there will not be listed unless there is relevant information regarding the component and how we use it.
The page header for a tool or equivalent is created by including the
template nav_header.html
. This template expects a tool
to be defined. It must contain 'name' and 'description' members.
For existing tools: {% verbatim %}
{% load tools %} {% with tool=current_user_data.tools|get_tool:'toolname' %} {% include 'nav_header.html' %} {% endwith %}{% endverbatim %}
A fake tool for a page that is not a tool: create a dictionary with a 'name' and a 'description' key. Pass it to the template. {% verbatim %}
{% with tool=somedict %} {% include 'nav_header.html' %} {% endwith %}{% endverbatim %}
Used to divide content into groups. Also useful if the page is very 'grey'. White panel should be used in almost all cases
.button | This color is the primary color, used for intended primary actions |
.button.small | The most used buttonsize |
.button.small | Icons should be on the left, otherwise they serve no purpose in helping the user scan |
.button.small i.pad-right | Use .pad-right to create some margin to the icon |
.button .tiny | A very small button. |
.button .secondary | Used for actions that are not primary |
.button .alert | Used for instance for deleting stuff |
.button .success | This button exists |
.button .small .expand |
Heading 1 | Heading 2 | Heading 3 |
---|---|---|
Content 1 | Content 2 | Content 3 |
Content 1 | Content 2 | Content 3 |
Content 1 | Content 2 | Content 3 |
Footer 1 |
Heading 1 | Heading 2 | Heading 3 |
---|---|---|
Content 1 .alert-box.inside-table |
Content 2 | Content 3 |
Content 1 .alert-box.warning.inside-table |
Content 2 | |
Content 1 | ||
Footer 1 |
Heading | Something | Something else |
---|---|---|
Longer Heading | Something | Something else |
Head | Something | Something else |
These tabs work by loading a new page for each tab, that is, the tab goes to the same page where the tab content changes. They do not require javascript to work.
The advantage with these tabs is that, in addition to not require Javascript (if that is an advantage), they also collapse to accordion layout on small screens.
We use django-crispy-forms for "easy" and nice form layout. The advantages are:
There are many customizations done to the crispy forms. Basically, if you need to create forms - ask on mail/jabber/irc.
{% crispy form1 %} {% crispy form2 %}We use Font Awesome icon fonts. They are used in buttons as well as general icons. Example:
AwesomeThey can also be used in css-classes. That requires a bit of black magic which someone has posted solutions to. Here is a brief teaser:
.someclass:after|before { font-family: FontAwesome; content: "\f06a"; }
The list of codes is located
here
(replace the with a
\
).
To quickly let a user do a choice without directly displaying a form, we use this pattern. It uses Foundation content dropdowns, but also needs javascript for the decline action. Thus it's kinda code-verbose, but nice for the user.
I want to see how it worksThis is a demo of the action pattern thingy
In addition to the Foundation dropdowns we use Select2 dropdowns. Select2 is nice when the content in the dropdown needs to be searchable, and it supports optgroups which Foundation does not. Also, Select2 has a wealth of other stuff it can do.