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