Components¶

There are three basic framework components provided by Nuit that can be enabled on a per-app or per-template basis. These are the top bar, left menu and right menu.

Top Bar¶

The top bar is Nuit’s implementation of Foundation’s Top Bar component. It provides a global application menu on the right hand side (defined in settings.py with the NUIT_APPLICATIONS variable), a logo and an optional number of links. This is enabled by extending from nuit/base.html and setting topbar to True.

By default, if you provide an app_title to the extend tag, the Top Bar will contain a link to the root of your application next to the logo on the left. To add additional menu items, define the top_bar_menu block and add some menu_item template tags:

{% extend 'nuit/base.html' topbar=True app_title='My App' %}
{% block top_bar_menu %}
    {% menu_item name='A Menu' link='http://www.google.com' %}
{% endblock %}

Left Menu¶

The left menu is intended for use as the main menu of an application, designed to alter on a per-application basis. It is situated on the left of the screen until the screen size drops to ‘small’ (mobile screens etc.), where the menu items are then accessible under the hamburger icon in the top bar. It’s enabled by extending from nuit/base.html and setting leftmenu to True.

By default, this menu will be empty. There is a special template tag, app_menu, designed for use within the left_menu block, that builds the application menu for you, and adds an optional header. An example usage:

{% extend 'nuit/base.html' leftmenu=True %}
{% block left_menu %}
    {% app_menu "My App" %}
        {% menu_item name='A Menu' link='http://www.google.com' %}
    {% end_app_menu %}
{% endblock %}

You can also use the menu_section template tag to add additional sections to this menu, before or after the main application menu.

Right Menu¶

The right menu is intended for use as a page-specific menu. It floats on the right of the screen until the screen size drops to ‘medium’ (tablets, narrow windows etc.), where the items are then available under a gear icon in the top right. Links appear directly beneath the gear, whereas more detailed data structures appear in a modal dialog box with an activation link beneath the gear. It is eneabled by extending from nuit/base.html and setting rightmenu to True.

By default, this menu will be empty. It is designed for use with the menu_section template tag, to be populated with whatever content is necessary for each particular page by overriding the right_menu template block. In order for the medium (and under) drop-down gear menu to work properly, each menu_section needs to be given a unique ID per page. See the menu_section docs for more details.

Example usage:

{% extend 'nuit/base.html' rightmenu=True %}
{% block right_menu %}
    {% menu_section 'Links' is_list=True %}
        {% menu_item name='A Menu' link='http://www.google.com' %}
    {% end_menu_section %}
    {% menu_section link_name='Details' %}
        <p>Some details about this page</p>
    {% end_menu_section %}
{% endblock %}

Breadcrumbs¶

Nuit includes a block in the base template which you can fill with menu_item elements to create a breadcrumb trail on each page. The last breadcrumb in each trail is intended to indicate the current page, and is therefore styled as such. The breadcrumbs block needs to be overriden, and will be displayed if your template extends from nuit/base.html and sets breadcrumbs to True. Remember, {{block.super}} may be needed if you use hierarchical templates.

Example usage:

{% block breadcrumbs %}
    {{block.super}}
    {% menu_item name='Publishers' link='/publishers/' %}
    {% menu_item name='New' link='/publishers/new/' %}
{% endblock %}

Loading Animation¶

Renders the HTML for a loading animation. Unlike the previous components, this can be included in any location in a template and uses Django’s include syntax, rather than a template block. Takes two optional arguments:

size¶

Default:	32

The size of the loader. There are a number built into Nuit: 16, 32, 48, 64, 80, and 96. This is applied by adding a class of nuit-loader-sizeXX, where XX is the defined size. You can use this in your own stylesheets to define your own size styles if necessary - see Customising with SASS for more details.

loading_text¶

Default:	None

Text to display with the loader. If not set, no text will be displayed.

To use, include the nuit/includes/loader.html template. Example usage:

{% include 'nuit/includes/loader.html' with size=64 loading_text='Loading...' %}

Customising with SASS¶

To build your own loader classes, use the following SASS mixin:

.nuit-loader-sizeMASSIVE {
  @include nuit-loader(1000px);
}

This can be imported from nuit/_mixins.scss:

@import "nuit/_mixins";

You can then reference the size in your templates:

{% include 'nuit/includes/loader.html' with size='MASSIVE' %}

Forms¶

Nuit provides a foundation_form template tag to enable complex rendering of HTML forms, for use with Django’s Form classes. See the Forms documentation for more detail.

Messages¶

Nuit’s Base Template templates will display any messages logged with Django’s messaging framework at the top of the content area.