Design Specifications

Grid & Media Queries

The CLF design is based on a 12-column fluid grid system. This grid uses percentages instead of pixels for column widths. The UBC brand identity elements (logo, a place of mind tagline and wordmark) are integrated in this grid system and its importance lies in ensuring layout consistency on websites that are using the CLF.

The grid system is combined with CSS3 media queries, to create several break points in the layout on various displays. Breakpoints are used for ensuring the layout looks good and functions well on the viewport in question and that all the content is visible, readable and easily accessible. These break points determine the screen resolution when elements on the page can:

shift position (e.g. stack vertically instead of being displayed horizontally side by side)

shrink or expand

become visible (even though they are not displayed on other screen sizes)

become hidden (even though they are displayed on other screen sizes)

The fluid grid has a set of breakpoints where the width of the container, column and gutters changes:

Responsive Classes

For faster mobile-friendly development, use these utility classes for showing and hiding content by device. Below is a table of the available classes and their effect on a given media query layout (labeled by device).

Note: These classes should be used on a limited basis to avoid creating entirely different versions of the same site. Their usage is intended to complement each device's presentation. Responsive utilities should not be used with tables, and as such are not supported.

Dimensions

The CLF is built on a flexible 12-colum grid, and the grid column and gutter sizes change size at different viewport sizes. Please consult the table below to view pixel dimensions for the header and the grid at various sizes.

Theme Options

Option 1: White on Blue

Generally used for executive units and UBC's top-level sites, the White on Blue is a good option for units that need a strong university brand presence. For the Unit Name background color, units can use the UBC grey or their own unit color if they have chosen one (see specifications).

Option 2: White on Grey

White on Grey offers a more neutral tone and is recommended for UBC's administrative units. For the Unit Name background color, units can use the UBC blue or their own unit color if they have chosen one (see specifications)..

Option 3: Grey on White

Grey on White is the most neutral theme and works well for units with a strong sub-identity. The soft colours shift the focus to the content rather than the Brand Identity elements. For the Unit Name background color, units can use their the UBC grey or their own unit color if they have chosen one (see specifications).

Option 4: Blue on White

Blue on White offers the same advantages as Option 3 and works well for units with a strong sub-identity. For the Unit Name background color, units can use the UBC blue or their own unit color if they have chosen one (see specifications).

Layout Options

This default layout is available in all the colour themes listed above: White on Blue, Blue on White, White on Grey and Grey on White. For this layout, the CLF footer spans 100% of the viewport width, while using the Bootstrap fluid grid system.

Please note the set of guidelines that apply to the default layout CLF.

Option 1: Default CLF, white on blue.

Option 2: Full width, center aligned

This layout is available in all the colour themes listed above: White on Blue, Blue on White, White on Grey and Grey on White. The full width layout makes use of the entire background area and should be used with wide, high quality graphics or for types of content that require a large area (e.g. large data tables). For this layout, the CLF footer has a fixed width, while using the Bootstrap grid.

With this layout, you can either make use of the entire width of the content area: view working template.

Please note the set of guidelines that apply to the full-width CLF. Keep in mind the site's performance if using large images.

Option 2: Full width, center aligned CLF, white on blue.

Option 3: Full width, left aligned

This layout is available in all the colour themes listed above: White on Blue, Blue on White, White on Grey and Grey on White. The full width layout makes use of the entire background area and should be used with wide, high quality graphics or for types of content that require a large area (e.g. large data tables). View working template.

Please note the set of guidelines that apply to the full-width CLF. Keep in mind the site's performance if using large images.

Colours

UBC Colours

Colour is an emotional expression of identity and the primary colour, UBC Blue, combined with a crisp, bright UBC White creates a powerful ambassador of the UBC Brand. The secondary colour UBC Grey is available in a range that allows for sheer and transparent looks.

Unit Colours

Choosing a Theme Colour Option

If your unit doesn't have a specific colour, use a theme option combination of the UBC Blue or the UBC Grey.

Using a Specific Unit Colour

Unit colours may be used as backgrounds for the Unit Name and also in the content areas. There are certain requirements for unit colours used in conjunction with type, and they are meant to ensure strong contrast, legibility and compliance with web accessibility standards:

Use only solid colours (do not use gradients) for the Unit Name background

Use solid background colours at an equivalent of 50% grayscale or above (illustrated below)

Use only reverse type (white) for the Unit Name (Note: Arial is the only typeface that can be used for the Unit Name)

Note: If you are unsure of your choice, you can run a colour accessibility check to make sure the contrast ratio is at least AA compliant.

Selecting a Colour Translation Across Media

Some units have chosen a specific sub-identity colour that they use consistently throughout communication materials, including print and digital applications, and the web. Finding an accurate colour match across media can require special attention to ensure colour integrity. In cases when the automated translation (i.e. CMYK to RGB) fails to capture the colour intention, it may be necessary to visually adjust channels in order to find a stronger custom match. Respect the hue and adjust the chroma to suit the media.

Typography

The default font used on the CLF is Arial (Regular and Bold).

The Hoeffler & Frère-Jones font Whitney is UBC’s institutional typeface. The Whitney web font is available at no cost to all UBC websites with the CLF (Common Look & Feel) Templates. The web font is only available to UBC departments whose websites:

Typography Specifications

The default body text size is 14px with a line-height of 20px. The default type sizes, spacing and alignment have been carefully selected to ensure strong contrast and legibility on various screen sizes.

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5

h6. Heading 6

Units can make changes to type and heading sizes, but need to keep in mind readability, color contrast and alignment on various screen sizes. Please test a text sample on small, medium and large screen sizes before deciding on type size.

In addition to typography, the CLF also includes a comprehensive set of icons .

Styles & Scripts

Bootstrap, the underlying design framework for the UBC CLF, comes with a wealth of built-in CSS styles and UI (user interface) components that have been tested and proven compatible with Responsive Web Design techniques, touch screen devices, and popular browsers. We've taken advantage of this by integrating these features with the default CLF package (Why reinvent the wheel, right?). But we've taken extra steps to ensure that they align with UBC's brand colours and that they meet web accessibility standards.

Note: While these colors are recommended, units are free to customize the look and feel of all UI elements.

Javascript

Guidelines

Guidelines for the UBC CLF are defined in three categories:

Minimum Requirements;

Highly Recommended; and

Optional

Minimum Requirements

There are parts of the CLF that are mandatory or required for all UBC websites. This ensures that UBC websites have a minimum level of uniformity in visual presentation and functionality, hence the term "common look and feel". The parts defined as minimum requirements are marked in red.

Highly Recommended

These parts of the CLF, while optional, are critical elements we highly recommend that you keep intact and incorporate into your site.

The CLF Templates have been designed following best practices in usability and have been rigourously tested for compatibility across multiple browsers, operating systems, devices, and screen resolutions. Furthermore, the design and code meets web accessibility standards. Any modifcations to the highly recommended parts may result in undesirable effects and compatibility issues. The parts defined as highly recommended are marked in yellow.

Optional

Finally, the optional part of the CLF is the area where units have the freedom to create and incorporate custom design styles. The part defined as optional is marked in green.

Sections of the CLF - Mandatory, highly recommended and optional

1 Global Utility Button

2 Brand Identity Header

3 Campus Identification (if applicable)

4 Faculty Name (if applicable)

5 Unit Name

6 Brand Identity Footer

7 Global Utility Footer

8 Background*

*Except for the full-width CLF theme which makes use of the entire background area

Do's and Don'ts

While the CLF is highly flexible and customizable, there are a few areas and items that should not be altered in any way, to ensure a consistent and predictable experience across all UBC websites.

Please note that all the UBC brand assets (logo, tagline, signature) contained in the CLF templates and on this guidelines website are intended for web use only. If you require assets for other purposes such as print media, please consult the UBC Brand website.

Do add your full Unit Name, vertically centered on the unit name bar

Do add your Faculty Name (smaller type size) right above the Unit Name (larger type size)

Do add your administrative Unit Name, vertically centered on the unit name bar

Do not change the Unit Name type color, you must always use reverse type (white)

Do not change the Unit Name and Faculty Name (if applicable) typeface, you must always use Arial

Do not include any logos or graphics in place of / near the Unit Name

Do not modify the Brand Identity Header and its content in any way

Do not modify the Brand Identity Footer or the Global Utility Footer and their content in any way

You should also consider the following design guidelines:

If your unit identity includes the UBC Logo, avoid stacking it with the UBC Logo in the Brand Identity Header.

In general, avoid UBC Logo versions in close proximity.

The dimensions of the UBC Logo have been kept intentionally minimal in the Brand Identity Header. Units repeating the UBC Logo (crest) should alter the scale of their own logo so that the size is substantially different from the one in the Visual Identity Header in order to provide visual clarity and to add interest to the page.