UX Framework
Templates
Search the component library

Templates

v1.0.0-beta.1
Download UI Kit v1.9.0

A standard set of page structures for a variety of use cases.

Download UI Kit v1.9.0

Usage Guidelines

Every page should utilize one or more of these templates to create it’s high level structure.

Features

  • Consistent dimensions for a variety of useful page structures
  • Responsive strategies for each template
  • Accessible implementation

Dependencies

None

Documents

UX Accessibility Checklist

Template usage

Stacking

Multiple templates may be stacked to create a single page.

Spacing

The joints can either abut directly or use the predefined standard/large spacings.

Backgrounds

Each template may specify it’s own full width border (color or image) or let the default background show through.

Borders

Stacked templates may also specify separating borders, either container width or full viewport width.

Presentation Strategies

Templates define set content areas which are designed to work with the Presentation Strategies component for actually filling them with content.

Responsive Behavior

Templates are designed to work at each breakpoint, adjusting the arrangement of content areas as appropriate. For more complex designs you may specify different templates for each breakpoint.

A page consisting of three stacked layouts.

The three spacings available for stacked templates. (Shown with container width borders.)

Single Column

The simplest page template, it takes up the full 12 columns available at every breakpoint. The standard Application Header is automatically included outside the grid. There is an option to position the content area directly below the header or to include a standard amount of spacing.

The single column layout with optional spacing after the header.

Two Column

This template devotes 8 columns to a main content area and the remaining 4 to a sidebar which appears on either side (prefer the right where it makes sense). At medium and smaller breakpoints the content areas stack, with the option to put the sidebar above or below the main content area.

The two column layout at larger breakpoints.

Responsive view with the main content on top.

Sidebar content on top.

Static Column

The static column presents a single column of fixed width which is centered in the page. At smaller breakpoints it transitions to full width fluid behavior. This column comes in two different sizes (small at 480px and large at 800px) and is handy for presenting modals or small pieces of content like sign in forms.

A column of static width at larger viewports.

Changelog

1.0.0-beta.1

Initial version.