Views UI

A bespoke UI system for Views.

Key Principles

Start with Bootstrap — this library is an extension of bootstrap (currently version v3.3.7). Wherever possible, we use Bootsrap components and extend them to bring them visually into line with Views. There are also some stand-alone components for things Bootstrap won’t do.

Modularity — a system of discrete, reusable components.

Legibility — descriptive class names that help developers understand how the CSS works when they look at a component.

Falls back to Bootstrap — For quick fixes and protoyping new features, the development team can use the whole Bootstrap library. Some components won’t look very Views, but they’ll work when necessary, and we can quickly work to align components once they’re in use.

Usage

Include jQuery, bootstrap CSS and JS (v3.3.7), and views.css. You can find these in this package:

js/vendor/jquery-3.1.1.min.js (the library will work with any version of jQuery copatible with Bootstrap v3.3.7)
js/vendor/bootstrap.min.js
css/vendor/bootstrap.min.css
css/views.css

The examples here also use Chart.js and some JS to make the examples work. These are at:

js/vendor/Chart.min.js
js/app.js

The library is written in SCSS. If you edit the source, the root SCSS file to compile from is at:

/scss/views.scss

# for example
sass scss/views.scss:css/views.css

If you add new files, make sure they’re imported into src/scss/views.scss.

Markup

Wherever we can, we extend Bootstrap (see /components.html), but there are some standalone components too. Stand-alone components a couple of simple rules:

depend as little as possible on nesting and specific HTML tags
follow a naming convention to make code more readable, navigable and organised, and prevent it from interfering with Bootstrap

For example, the vws-c-side-nav component in the examples uses the following markup:

<ul class="vws-side-nav">
    <li><a class="vws-c-side-nav__link vws-c-side-nav__link--dashboard vws-is-active" href="">Dashboard</a></li>
    <li><a class="vws-c-side-nav__link vws-c-side-nav__link--statistics" href="">Statistics</a></li>
    <li><a class="vws-c-side-nav__link vws-c-side-nav__link--summary" href="">Statistics Summary</a></li>
    <li><a class="vws-c-side-nav__link vws-c-side-nav__link--reports" href="">Reports</a></li>
</ul>

But it could be implemented like this:

<div class="vws-c-side-nav">
    <div class="vws-c-side-nav__link vws-c-side-nav__link--dashboard vws-is-active">Dashboard</div>
    <div class="vws-c-side-nav__link vws-c-side-nav__link--statistics">Statistics</div>
    <div class="vws-c-side-nav__link vws-c-side-nav__link--summary">Statistics Summary</div>
    <div class="vws-c-side-nav__link vws-c-side-nav__link--reports">Reports</div>
</div>

If you need extra elements to implement UI functionality, for example, you could add levels of nesting like this:

<div class="vws-c-side-nav">
    <div>
        <div>
            <div class="vws-c-side-nav__link vws-c-side-nav__link--dashboard vws-is-active">Dashboard</div>
            <div class="vws-c-side-nav__link vws-c-side-nav__link--statistics">Statistics</div>
            <div class="vws-c-side-nav__link vws-c-side-nav__link--summary">Statistics Summary</div>
            <div class="vws-c-side-nav__link vws-c-side-nav__link--reports">Reports</div>
        </div>
    </div>
</div>

All three examples will work in exactly the same way with the Views UI CSS.

Class names

Every class in the library is globally namespaced with a prefix, vws-, followed by a class prefix that indicates what role the class has and where you’ll find it. Currently we’re using three types:

c- is a specific, self-contained component — each component is in it’s own file in src/scss/components
is- and has- are state: eg, vws-has-sidebar-extended — these classes describe a state for a component, so they’re defined within specific components
l- is a layout helper to provide consistent ways to create spacing, etc. — these are currently in src/scss/layout.scss
i- is an icon — these are currently in src/scss/components/icons.scss

Images

All images are inlcuded in:

/img/

The image directory used in all CSS rules can be set globally by setting the $config-img-dir variable in the config file at:

config.scss

The example HTML page currently uses placeholder images in the example dashboard modules.

Icons

Views UI uses the Gizmo icon set from Symbolicons. See /icons.html to see all icons and find class names.

There’s specific CSS in place to make Gizmo and custom Views UI icons work for the vws-c-side-nav and vws-c-apps-nav components — see examples for details.

There are some custom icons, which can be used in the same way as the Gizmo set, replacing the ss- prefix with vws-i-. These also work with vws-c-side-nav (See the navigation here for an example). Currently available custom icons are:

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