{% extends 'base.html' %} {% load crispy_forms_tags %} {% load verbatim %} {% block base_header_additional_head %} {% endblock %} {% block base_content %}

NAV Style Guide

{# INTRODUCTION #}

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.

{# Page headers #}

Page headers

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 %}

{# Headings #}

Headings

h1 - never used

h2 - also never used

h3 - Normally used as heading

h4 - seldom used

h5 - Normally used as 'second' heading
h6 - not used
{# Left column #} {# PANELS #}

Panels

Used to divide content into groups. Also useful if the page is very 'grey'. White panel should be used in almost all cases

.panel
.panel .white
{# Right column #}
{# BUTTONS #}

Buttons

.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
{# Left column #} {# Alert boxes #}

Alert boxes

.alert-box — This is a link inside text
.alert-box with close span anchor x
.alert-box.success — This is a link inside text
.alert-box.success.with-icon
.alert-box.alert — This is a link inside text
.alert-box.alert.with-icon
.alert-box.warning — This is a link inside text
.alert-box.warning.with-icon
.alert-box.info — This is a link inside text
.alert-box.info.with-icon
{# Right column #}
{# TABLES #}

Tables

table .listtable
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
table .listtable.expand
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
.alert-box.error.inside-table.with-icon
Footer 1
table .vertitable
Heading Something Something else
Longer Heading Something Something else
Head Something Something else
{# TABS #}

Tabs

{# NAV tabs #}
NAV Tabs

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.

{# JQuery UI tabs #}
jQuery UI Tabs

These tabs need javascript to work. You can link to url to access content with AJAX. If you do that you can use the aria-controls attribute on the list element to say what element the content should go in. Otherwise it just follows order.

{# Tabs #}
{# TABS #}

We have vertical tabs. They also collapse to accordion layout on small screens. As you see, they are far from perfect...

{# Right column #}
{# Row #}
{# FORMS #}

Forms

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 %}
{# FONTS #}

Icons

We use Font Awesome icon fonts. They are used in buttons as well as general icons. Example:

Awesome

They 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 &#x with a \).

{# column #}
{# row #} {# OTHER TIDBITS #}
{# User chioce pattern #}

Quick action pattern

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 works

This is a demo of the action pattern thingy

Don't
{# left column #}
{# Dropdowns #}

Dropdowns

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.

{# Right column #}
{# row #} {% endblock base_content %}