{% extends 'layouts/application.html' %} {% block content %}
  1. Layout & Structure
  2. App Bar

Layout

App Bar

Side Nav

Content Toolbar

Content Sidebar

Content Panel

App Structure

Every Innovative application should follow a similar application structure. Consider this the backbone of the UI frame. There are 5 top level components.

  1. App Bar
  2. Side Nav
  3. Conent Toolbar
  4. Content Sidebar
  5. Content Panel

These are custom elements, independent of any front-end library. Making these custom removes dependencies. So when it’s time to swtich frameworks the general structure of Innovative applications remains intact.

layout structure example
Markup
              {% include "index/code-example-layout.html" %}
            

Structure

The App Bar is an extension of the toolbar with specialized elements such as the Nav Icon, Title, and Subtitle.

Nav Icon

The App Bar accommodates a Side Nav icon.

Title

The Title in the App Bar indicates the section of the greater application the user is in.

Logo

The App Bar also incorporates a logo or image. The use case for this is open ended—but this implementation is used in this version of the Style Guide.

Subtitle

The App Bar shrinks the inline subtitle, and changes its color to a lighter tint of the App Bar background color.

The nav icon at the left side of the app bar can be:

  • A control to open a navigation drawer
  • Omitted if no navigation is required from this screen

The title in the app bar reflects the current page. It can be an app title, page title, or a page filter.

Icons on the right side of the app bar are app-related actions or trays.

full app bar example practical app bar example
Markup
              {% include "index/code-example-app-bar.html" %}
            

App Bar Trays

The App Bar can contain high level app actions that allow a librarian, at any time, to perform actions while maintaining context, and remaining the the current section.

An example use case for this is creating a tray for librarians to quickly access incomplete workforms they may have started in other areas of the application.

Text vs. Icon

Adding text to App Actions may increase clarity around App Bar actions. It may also increase accessibility. However, we can only maintain text on desktop screen sizes.

Any App Actions should be reduced to icon only buttons below tablet sized screens.

app bar tray example

Structure

The Side Nav should be used for top level in-app navigation.

The Side Nav should be broken up into sections. Each section can contain a combination of text, or text and iconography.

If the decision is made to use iconography, the entire section must utilize iconography as well.

side nav example
Markup
              {% include "index/code-example-side-nav.html" %}
            

Structure

The content toolbar is also an extension of the toolbar with virtually no additional classes.

Its singular structural difference is that it controls every element below it in its hierarchy.

If sitting below an App Bar, it too can contain actions and trays. However, any action taken in the Content Toolbar cannot change context that would otherwise be controlled by the App Bar.

Primary Actions

Actions listed in the Content Toolbar should be those primary to the content defined by the toolbar’s title. Do not overcrowd this area.

The More Button

If there are actions beyond those that are primary, consider using a “more” button in order hide those inside of a tray.

Text vs. Icon

Adding text to Actions may increase clarity around Content Bar actions. It may also increase accessibility. However, we can only maintain text on desktop screen sizes.

Be consistent with your icon use. If using icons, try to use them with every action.

content toolbar example content toolbar with dropdown example content toolbar with image example

Color & Size

The Content Toolbar, like normal toolbars, can vary in color and size.

Color

The Content Toolbar can vary in color. It can match or be a brighter/darker version of the App Toolbar color. Additionally, it can match the Content Panel background color.

Do not vary the color of the Content Toolbar. For example: if our App Bar is teal, our Content Toolbar should not be orange.

Size

The Content Toolbar, like a standard toolbar, can be presented in two size options.

  • 56px
  • 100px

The 100px toolbar size can accommodate inline and stacked Title or Subtitle text.

content toolbar with color example content toolbar default height example content toolbar default height with color example

Structure

The Content Sidebar is an optional element that controls the display of the Content Panel.

It may include navigational elements, filtering or faceting elements, as well as search results.

The Content Sidebar is an absolute positioned element which scrolls vertically if its content extends past the y-axis.

A common active state is used for any element selected that is manipulating the Content Panel.

content sidebar example
Markup
              {% include "index/code-example-sidebar.html" %}
            

Facets

A faceting sidebar can contain a variety of elements. All of which filter anything inside of the Content Panel.

Keywords

Sidebar faceting can contain keyword searching. Any keyword submitted is added to the facet parameters below. This allows you to string together an array of keywords.

Facet Sections

Facet Sections can expanded and collapsed at any time, as these can get quite long. Facet Sections are comprised of check boxes. Any time a facet is checked, it is added to the facet parameter section. It can be removed by unchecking it’s box, or removing it from the parameters section.

content sidebar facets example
Markup
              {% include "index/code-example-sidebar.html" %}
            

Grid

The default Bootstrap grid applies inside of the Content Panel. All content should, by default, respond to varying window sizes.

The actual grid sizes and breakpoints need to be discussed with the development team.

As a designer, you essentially have free reign over how you’d like to represent the data at hand inside of this content area.

All representations of this data can change or be manipulated by the Content Sidebar or Content Toolbar—this is includes navigation, search, faceting, adding data, etc.

content panel grid example
{% endblock %}