Overview

The NIWA Bootstrap theme is an implementation of the NIWA Online Systems Style guidelines using the Bootstrap CSS library.

This page illustrates the main features of the theme and how you should use style elements to make great looking web pages.

Using the Bootstrap NIWA Theme.

Include the bootstrap files in your project using the following code

  <link href="http://styleguide.niwa.co.nz/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="http://styleguide.niwa.co.nz/dist/css/bootstrap-theme.min.css" rel="stylesheet" >
  <script src="http://styleguide.niwa.co.nz/dist/js/bootstrap.min.js"></script>

Learn more at: styleguide.niwa.co.nz.

What you will see is essentially the same as getbootstrap.com but using the NIWA theme.

Note: Currently styleguide.niwa.co.nz is an internal URL so for now the guide is made available at http://docs.niwa.co.nz/styleguide

The NIWA Green/Blue Theme

The NIWA Theme is implemented as follows:

1. The variables.less file has been modified to
   • establish the NIWA theme colours
   • set the NIWA grey text levels ( note these are using rgb values not rgba )
   • name and set the default fonts
   • set the default text sizes and line heights
   • change the basic button style
2. The Theme.less file has been modified to establish the flat style
   • remove the 3d gradients from elements in favour of a flat style
   • remove the curved corners from elements in favour of sharp rects.
   • remove some borders and drop shadows from text and boxes
   • add the secondary colours as mixins for text and backgrounds
3. Various other files have been modified to control the style of specific elements
   • panels
   • tables
4. These docs pages have been updated to include this NIWA Theme tab which discusses the style guide in more detail along with sample layout pages that illustrate how we expect applications to look.

Typography

NIWA is all about clarity of communication. This section describes how we use typography to enhance the visual appeal and readability of NIWA systems

NIWA online systems and websites use a clear modern typeface suited to both large and small devices.

Font Faces: Primary Font

Font Faces: Secondary Font

Typographic Scale

Tracking and Kerning

Basic colour contrast

HTML headings

For form, widget and other application pages we will use the semantic styles defined above. However in document pages or pages generated by content management systems we will be exposed to the standard set of HTML Heading styles. Hence we also have to decide which font weights, and shades should be used.

Heading 1 & 2 styles are by default set in the Lake Blue colour for content articles. This only changes when the Heading 1 style is used within a widget casing, in this case the colour of the accent changes to the colour of the body text which is always 85% black

When using Georgia online please refer to the NIWA.co.nz site for a good example of usage. It should be used sparingly as introduction text for articles or reports.

This is Heading 1 - Light 40px - Lake Blue

Date, Time, Metadata - light 12px - 85% black

Introduction Text Style. This is to be used sparingly and only as an introduction to articles that have a lead in paragraph. - Georgia Regular 22px - 85% Black

Dus venim nulluptatem. Et volupta tesere voles consequ aeritatem nullaut atatures corporia voluptaerro temque volutem quidem nonse cus est la velendel esciis erro im autem que sit, tem ipis reium re con rendigenihil idis uta ni cus sit lam sa ditissi molupta ssinumquam, volorum faceri dolo quo berum lantiorere, nisciur, odipsum, cum similit quia qui iunte vendandit voloristia sus mos inciis erciunto quam labore nitam quo blate aciatec aborat. - Regular 14px

Heading 2 - Regular 22px - Lake Blue

lead in para on h2 is bold rather than serifed. Ed quas sequamet volupta sed mo mos ma comnienihil exceaqu iasperr ovitatibus aut hillumque venet optae nullupt atiaspe rnametu ribus, everum coris volest, auta qui dol

Iniae inciis rem aceperum res magnam es doloribus et que dolorum vel imet quo iducil el in rem fugitiantion es et imus reptibus, senis autem faccaborrore voluptatur a suntem sandis ne pero dernatectum voluptat dolor autaquas endigendae peritius. - Regular 14px - 85% Black

Heading 3 - Bold 16px

Iniae inciis rem aceperum res magnam es doloribus et que dolorum vel imet quo iducil el in rem fugitiantion es et imus reptibus, senis autem faccaborrore voluptatur a suntem sandis ne pero dernatectum voluptat dolor autaquas endigendae peritius.- Regular 14px - 85% Black

Heading 4 - Light 16px

Iniae inciis rem aceperum res magnam es doloribus et que dolorum vel imet quo iducil el in rem fugitiantion es et imus reptibus, senis autem faccaborrore voluptatur a suntem sandis ne pero dernatectum voluptat dolor autaquas endigendae peritius.- Regular 14px - 85% Black

Heading 5 - Regular 14px - 85% Black

Iniae inciis rem aceperum res magnam es doloribus et que dolorum vel imet quo iducil el in rem fugitiantion es et imus reptibus, senis autem faccaborrore voluptatur a suntem sandis ne pero dernatectum voluptat dolor autaquas endigendae peritius.- Regular 14px - 85% Black

Heading 6 - 85% Black

Footnote Text - iniae inciis rem aceperum res magnam es doloribus et que dolorum vel imet quo iducil el in rem fugitiantion es et imus reptibus, senis autem faccaborrore voluptatur a suntem sandis ne pero dernatectum voluptat dolor autaquas endigendae peritius. Light 12px

Colour

Primary Colour Values

Accent Colour Values

Gray Colour Values

Title Bar Gradient

Visual Components (Widgets)

A key thematic element of the NIWA visual design is the distinction between pages that represent documents and those that contain widgets or visual components.

Document pages such as this one would typically consist of a large white area upon which a page of text is shown - borders are provided similar to that approaching an A4 piece of paper. On document pages we use the H1..H6 Heading heirarchy and standard HTML elements. The goal here is readability.

Interactive pages in contrast contain a range of informational visual components. These may be navigation elements or forms or presentation elements such as charts, tables and maps. This pages will operate as a number of white panels arranged on a grey background

Panels allow us to have a white background for the key working areas on the screen but avoid the need for border lines to separate out the different elements. Instead the light grey background provides the necessary separation.

Container Sizes

The size of interactive elements should be consistent across all UI. The pixel sizes shown here are primarily for the depth of boxes and title bars, the width is to be considered by the developer. With consideration to line lengths and giving content within the widgets clear space to increase legibility.

Button Effect States

NIWA buttons are very clean and simple - a coloured bordered box around a white button. The button is highlighted in the associated colour on hover and click.

Sign In Dialog Box

Users are required to sign into a system in two instances:

• To access the entire site - all users must be known
• To access part of a site or certain functionality - anonymous users have access to some areas

Any system that allows user to enter or manipulate data must require users to be registered, signed in and authorised for access.

Sign in requires a form containing fields for the username and password along with links to register and reset/ forgotten password functions. Where multiple user domains are allowed then the user must select which domain they are using (e.g internal NIWA, twitter/google OpenID etc).

We specify the terms Sign in, Sign out and Register. Not login etc. Use the term Register if the system is free and Subscribe if payment is required.

Address & Location Selector

Address selection is usually used in conjunction with Location Selection. This is added when it is likely that the location of interest is going to have an address. A river segment where a fish has been caught is unlikely to have an address while the Farm in FarmMet or a House in SolarView probably does have an address.

Address selection consists of a single text entry field and submit button. The user enters the address in any form they want and we rely on Google Reverse Geolocation API to work out the details. If we are targeting a specific point then we will drop a marker at the resulting address, If we are using the field to select an area then we will take the bounding box of the area and zoom and centre the map on that area.

Example:

• In EIB the user can enter ‘Auckland’ and we zoom the map to the Auckland Region. In SolarView we can enter 41 Market Place, Auckland and we drop a marker on the NIWA office.
• The user should be guided as to whether they are choosing a specific address or general area.

Forms and Form Fields

Forms are a key element of the user experience. The NIWA Theme provide two form styles: one for short forms typical of searching and selection activities, the second suited to the longer forms associated with data entry of observations.

Date & Time Selection

Almost all NIWA online systems require users to make one or more time and date selections. In search forms we often require a from and to date. In data entry forms we always require the date of sampling, possibly the time.

In the underlying systems we always transfer and store dates in the ISO format yyyy-mm-ddThh:mm:ss. However users would rarely type this in. Instead we ideally allow any unambigious format to be entered, along with assistance from either a popup calendar entry widget, or a date range slider.

This is used in combination with the other forms and will never be alone in its own selector widget.

Coordinate Selection and Conversion Picker

Researchers in the field need to record the locations where sampling events and samples are taken. They may acquire their location from a map reference or using GPS. In the case of GPS they may record latitude and longitude or may use the local grid system. While lat/long coordinates are the most accurate and are used as the location in underlying databases grid references have the advantage of being shorter, more convenient and more intuitive.

As a result some Location Selection forms also have coordinate entry and conversion functions. The coordinate picker allows users to enter a location in:

• Latitude & longitude as either decimal degrees or degrees, minutes, seconds using the WGS84 datum - i.e that usually given by GPS system.
• NZTM NZ Transverse Mercator 2000 - the current standard NZ projection, Grid references are in metres east and north of the datum point.
• NZMG NZ Map Grid - the older map grid system. potentially still required when people enter historical records. NZGD1949 New Zealand Geodetic Datum 1949

As well as allowing users to enter coordinates in different systems the picker automatically converts between the different systems as the user switches tabs.

Tables

When an activity generates a collection of results we will show them as a table or a list.

• A table view is used when there are multiple columns of results and we want to make best use of the available page space.
• A list view is used when the results are summarised across several lines.

Alignment

Columns of numbers should be aligned on the decimal point. First each cell must have the same number of decimal places, then each cell must be classed "number". Text cells are aligned left and icon cells are centered, though this may change per project to make them stick to a preceding or following cell as required. These classes can be applied to the whole table to match the majority of cells.

Compact Results Table

A compact table list is used to display a set of similarly structured records - usually arising from a database table.

By compact we mean each row fits onto a single line.

These tables may be displayed with a header row, border lines, alternate row background colouring or other features to improve readability. Tables may also have extra interactivity such as a row highlight that follows the mouse, column headings that can sort or filter the table rows, and pagination for long results.

NIWA Theme style - use table niwa-table to get table table-header table-striped table-hover and add a thin line under the table.

Tables should be displayed on a document page or as a panel-body. i.e. on a white background.

Mouse hover state is a dark grey as you scroll down list.

Condensed Table

Condensed reduces the height of the table rows. Use this if there are a many results.

Panelled Table

For results with fewer columns the table can be merged into a panel with a heading.

Lists

A List view used to display a set of records where each item is a summary of the record and a link through to more information about the record.

Think Google results page.

Panelled List View

Use the panelled list view when the results do not fit tidily on a single line, or there is a lot of text, or if we only want to show the user a summary of the record. In most cases the whole row acts a link to a more detailed information page for the record.

Widget size should be limited to displaying 5 results and then fixing at that size and the user scrolls to see more content below the fold.

Article titles should be limited to 3 lines with an ellipsis to indicate further content if the title is longer. Article title uses Body 2 Style.

If there are metadata elements between the title and the main text then use the caption style - e.g for keywords.

Implement this feature using the bootstrap list-group classes. If the list is long enough to require pagination use the bootstrap pagination elements in the panel-footer.

Expanded Results in a Map Popup

When a series of results are shown as a popup over a map we will replace the usual rounded box with the one shown.

The table follows the expanded results table format with the addition of a contact point linking the box to the screen position.

In this format the table should show the first few results followed by a link to a page where the full set of results can be shown.

Note that this style prevents us using box shadows to set off the panel from the underlying page.

Implement this feature using the bootstrap list-group classes follow the panel with a left-triangle or right-triangle div.

Banner

The Green Blue banner is the distinctive feature that identifies NIWA Web applications from others.

Don't make the title too long, it will not wrap nicely on small screens.

The Logo will hide on xs small screens to leave more room for the title. If the banner has a utility menu then this will need specific handling. e.g. move to the nav bar.

Application Title - Page

• Utility text

• Utility link

Navigation Bar

Use the bootstrap navbar navbar-default for the primary navigation bar.

Don't put the Brand info on the bar - this belongs on the green/blue banner above. Nor the utility items such as sign in. This leaves the bar free for main menu items.

Text

Body 2 Style (14px)

Background

220, 221, 222

Inactive Text

99,100,102

Hover Text

76, 76, 78

Hover Background

214, 215, 217

Active Text

0 0 0

Active Background

202, 203, 205

Navigation Tabs

Use Navigation Tabs to switch views at the local level.

Sometimes a panel or page needs to display several alternate views on the content. This might be to switch between sources of information, or views on the results. Use a nav tab list to create a space filling row of buttons.

TAD - Search Panel

This section illustrates the use of tab navigation within a panel.

TAD is a type of content management system for species. It allows users to create a list of descriptive attributes and then set values for these attributes for a range of species.

The display page for a given species lists the attributes as a formatted table with the first column being the attribute name, the second having multiple lines containing the description and other meta-data.

use 'nav nav-tabs nav-justified' to get a row of tabs that fill the available width.

TAD - Results View

This section illustrates the use of tab navigation within a page.

The display page for a given species lists the attributes as a formatted table with the first column being the attribute name, the second having multiple lines containing the description and other metadata.

Use nav nav-pills nav-justified to get a row of buttons that fill the available width.