Views

This is a complete list of standalone (non-Bootstrap) UI components.

vws-c-content

Defines the main content area.

Elements:

• vws-c-content__heading: the main heading for the content in the main content area

Example:

<div class="vws-c-content">
    <h2 class="vws-c-content__heading">Welcome Gavin Mellor</h2>
    …
</div>

vws-c-dashboard-grid

Defines the grid used to position dashboard elements.

Elements:

• vws-c-dashboard-grid__item: a grid item in the dashboard grid layout

Variations:

• vws-c-dashboard-grid__item--large: a double width dashboard grid item

Example:

<div class="vws-c-dashboard-grid">
    <section class="vws-c-dashboard-grid__item">
        …
    </section>
</div>

vws-c-dashboard-module

Defines an individual dashboard module.

Elements:

• vws-c-dashboard-module__header: the container for the dashboard module’s heading
• vws-c-dashboard-module__heading: the dashboard module’s main heading
• vws-c-dashboard-module__sub-heading: the dashboard module’s sub-heading
• vws-c-dashboard-module__body: the dashboard module’s main content container
• vws-c-dashboard-module__number: a large type statistic within the body of a dashboard module

Example:

<section class="vws-c-dashboard-module">
    <header class="vws-c-dashboard-module__header">
        <h1 class="vws-c-dashboard-module__heading">…</h1>
        <p class="vws-c-dashboard-module__sub-heading">…</p>
    </header>
    <div class="vws-c-dashboard-module__body">
        …
    </div>
</section>

vws-c-main-stage

Defines the area that slides to cover the sidebar.

This component is affected by the parent class, vws-has-expanded-sidebar — see notes about the Collapsing Sidebar below.

Example:

<div class="vws-c-main-stage">
    …
</div>

vws-c-side-nav

Defines the left-hand navigation menu.

Elements:

• vws-c-side-nav__link: a link in the left-hand nav menu. Apply the vws-is-active state class to a link for the active nav item.
• vws-c-side-nav__sub-nav: a list of sub items.

Modifiers:

• vws-c-side-nav__link--sub-link: a link in a list of sub items.

Variations:

Add any of the Gizmo icons to a nav item with ss-[icon name]:

• vws-c-side-nav__link ss-desktop: link with desktop icon.
• vws-c-side-nav__link ss-piechart: link with piechart icon.
• vws-c-side-nav__link ss-barchart: link with barchart icon.
• vws-c-side-nav__link ss-picture: link with picture icon.

Add any of the custom Views UI icons to a nav item with vws-i-[icon name]:

• vws-c-side-nav__link vws-i-contacts: link with Contacts icon.
• vws-c-side-nav__link vws-i-work: link with Work icon.
• vws-c-side-nav__link vws-i-evidence: link with Evidence icon.
• vws-c-side-nav__link vws-i-reporting: link with Reporting icon.
• vws-c-side-nav__link vws-i-admin: link with Admin icon.

Nav items can have an active state:

• vws-is-active: link with active state

Example:

<ul class="vws-c-side-nav">
    <li><a class="vws-c-side-nav__link ss-desktop vws-is-active" href="">Dashboard</a>
        <ul class="vws-c-side-nav__sub-nav">
                <li><a class="vws-c-side-nav__link vws-c-side-nav__link--sub-link" href="">Sub Item 1</a></li>
                <li><a class="vws-c-side-nav__link vws-c-side-nav__link--sub-link vws-is-active" href="">Sub Item 2</a></li>
            </ul>
        </li>
    </li>
    <li><a class="vws-c-side-nav__link ss-piechart" href="">Statistics</a></li>
    <li><a class="vws-c-side-nav__link ss-barchart" href="">Statistics Summary</a></li>
    <li><a class="vws-c-side-nav__link ss-picture" href="">Reports</a></li>
</ul>

vws-c-side-panel

Defines the fixed left-hand side panel area.

Elements:

• vws-c-side-panel__toggle: the button at the bottom-left which toggles the sidebar between collapsed/extended states (note: toggle behaviour requires javascript — see notes about the Collapsing Sidebar below).

Notes:

• The Views icon is affected by the `vws-is-* classes.

Example:

<header class="vws-c-side-panel">
    …
    <div class="vws-c-side-panel__toggle">Open/Close Menu</div>
</header>

vws-c-top-bar

Defines the static bar at the top of the screen.

Example:

<div class="vws-c-top-bar">
    …
</div>

vws-c-user-nav

Defines a link to user-specific options. This might link to a profile or settings page, or could become a drop-down/popup menu at a later date.

Elements:

• vws-c-user-nav__link: the button/link

Example:

<div class="vws-c-user-nav">
    <a class="vws-c-user-nav__link" href="">Gavin Mellor</a>
</div>

vws-c-apps-nav

Defines navigation in the top bar for Views apps.

Elements:

• vws-c-apps-nav__link: the button/link

Variations:

Each of the four main Views apps has a specific style using a custom icon:

• vws-c-side-nav__link vws-c-side-nav__link--contacts: link with contacts icon.
• vws-c-side-nav__link vws-c-side-nav__link--work: link with work icon.
• vws-c-side-nav__link vws-c-side-nav__link--evidence: link with evidence icon.
• vws-c-side-nav__link vws-c-side-nav__link--reporting: link with reporting icon.

Nav items can have an active state:

• vws-is-active: link with active state

Dropdown sub-navigation:

• This component supports sub-navigation items via nested ul tags — see the example below.

Notes:

• This component depends on specific markup, see the example below.
• This nav element collapses into a hamburger nav below 750px. Note the vws-apps-hamburger nav element in the example.
• The apps buttons are affected by the `vws-is-* classes.

Example:

<a href="#" class="vws-apps-hamburger js-hamburger-toggle">Apps Menu</a>
<nav class="vws-c-apps-nav js-hamburger-nav">
    <ul>
        <li>
            <a class="vws-c-apps-nav__link vws-c-apps-nav__link--contacts" href="">Contacts</a>
            <ul>
                <li><a class="vws-c-apps-nav__link" href="">Sub Nav Item 1</a></li>
                <li><a class="vws-c-apps-nav__link" href="">Sub Nav Item 2</a></li>
                <li><a class="vws-c-apps-nav__link" href="">Sub Nav Item 3</a></li>
                <li><a class="vws-c-apps-nav__link" href="">Sub Nav Item 4</a></li>
            </ul>
        </li>
        …
    </ul>
</nav>

vws-c-views-logo

Defines the main Views logo and title that sits at the top-left of the screen.

Elements:

• vws-c-views-logo__img: a container for the logo image
• vws-c-views-logo__text: the Views title text that sits next to the logo

Notes:

• The Views icon is affected by the `vws-is-* classes.

Example:

<a class="vws-c-views-logo" href="">
    <span class="vws-c-views-logo__img">
        <img src="/img/views-logo.svg">
    </span>
</a>

vws-c-breadcrumbs

Defines a list of breadcrumbs. See Breadrumbs docs.

vws-c-pie-chart

Defines a pie chart with a legend.

Elements:

• vws-c-pie-chart__legend: the legend container
• vws-c-pie-chart__legend-title: the legend title
• vws-c-pie-chart__legend-items: the legend items container
• vws-c-pie-chart__legend-item: a single legend item
• vws-c-pie-chart__legend-item-color: the colored box representing the legend item’s color in the pie chart (note that the colour must be inserted into the style property when the legend item is generated)
• vws-c-pie-chart__legend-title: the legend title

Example:

<div class="vws-c-pie-chart">
    <div class="vws-c-pie-chart__legend">
        <h3 class="vws-c-pie-chart__legend-title">First Name</h3>
        <ul class="vws-c-pie-chart__legend-items">
            <li class="vws-c-pie-chart__legend-item">
                <span class="vws-c-pie-chart__legend-item-color" style="background-color: #fc5a5d"></span>
                Marisa
            </li>
            …
        </ul>
    </div>
    <div class="vws-c-pie-chart__pie-container">
        <div class="vws-c-pie-chart__pie">
            <canvas id="example-js-pie-chart"></canvas>
        </div>
    </div>
</div>

vws-c-action-btn

Defines a button style for UI action buttons.

Modifiers:

• vws-c-action-btn--download: button with download icon

Example:

<a class="vws-c-ui-header__ui vws-c-action-btn vws-c-action-btn--download">Export</a>

vws-c-ui-header

Layout component that defines layout for the content header with title and, optionally, UI components.

Elements:

• vws-c-ui-header__heading: left floated element to contain a title and/or breadcrumbs
• vws-c-ui-header__ui: right floated element to contain UI elements like buttons or search field

Example:

<div class="vws-c-ui-header">
    <h2 class="vws-c-ui-header__heading vws-c-content__heading">Statistics</h2>
    <a class="vws-c-ui-header__ui vws-c-action-btn vws-c-action-btn--download">Export</a>
</div>

vws-c-data-table

Defines a data table.

Note: for tables to scroll horizontally on small screens, the block (vws-c-data-table) must be applied to the HTML table element’s parent element, and vws-c-data-table__table applied to the HTML table element. See the example below.

Elements:

• vws-c-data-table__table: the HTML table element
• vws-c-data-table__header: the table header row
• vws-c-data-table__header-item: a table header cell
• vws-c-data-table__row: a table row
• vws-c-data-table__item: a table cell

Example:

<div class="vws-c-data-table">
    <table class="vws-c-data-table__table">
        <thead>
            <tr class="vws-c-data-table__header">
                <th class="vws-c-data-table__header-item">First Name</th>
                <th class="vws-c-data-table__header-item">Last Name</th>
                <th class="vws-c-data-table__header-item">Column Title</th>
                <th class="vws-c-data-table__header-item">Column Title</th>
                <th class="vws-c-data-table__header-item">Column Title</th>
                <th class="vws-c-data-table__header-item">Column Title</th>
            </tr>
        </thead>
        <tbody>
            <tr class="vws-c-data-table__row">
                <td class="vws-c-data-table__item">Marisa</td>
                <td class="vws-c-data-table__item">Smith</td>
                <td class="vws-c-data-table__item">Field Entry</td>
                <td class="vws-c-data-table__item">Field Entry</td>
                <td class="vws-c-data-table__item">Field Entry</td>
                <td class="vws-c-data-table__item">Field Entry</td>
            </tr>
        </tbody>
    </table>
</div>

Collapsing Sidebar

The sidebar state defaults to its collapsed state. To expand it add the vws-has-expanded-sidebar class to an element which is the parent of both vws-c-main-stage and vws-c-side-panel. For example:

<body class="vws-has-expanded-sidebar">
    …
    <header class="vws-c-side-panel">
        …
    </header>
    <div class="vws-c-main-stage">
        …
    </div>
    …
</header>

Apps/Sections Themes

The sidebar colour and active apps-nav link should demonstrate to the user which of the main Views apps/sections they’re currently looking at. This theming is applied by adding a class to the HTML body tag:

<body class="vws-is-contacts">
    …

Available classes:

.vws-is-contacts
.vws-is-work
.vws-is-evidence
.vws-is-reporting
.vws-is-admin