Brand Apply the Elements

Web

Unprecedented flexibility is a hallmark of the revised brand standards. For the web, they introduce a new approach to creating websites that can be more customized to individual unit needs while reflecting WSU’s core identity elements.

concept

The goal is to reflect both the unity and diversity of WSU while providing a positive visitor experience across all University web pages.

The vertical column or spine seen at the left of this page in desktop view appears on all pages and contains the essential brand, content, and usability essentials. The remainder of the page is essentially a blank canvas awaiting your creativity.

In addition to the column you see, the Spine is also an unseen skeleton or framework undergirding the page. While the column is more rigid and global, the framework is exceedingly flexible and customizable. The feature list below is a sampling of some of the ways the Spine aims to enable and uphold our unified diversity.

timeline

The 1.0 version of WSU’s new web framework was released on June 30th, 2014. There are a few ways to implement the Spine framework for your own site.

note

Development continues apace. If you are a developer or web designer, you are more than welcome to take part in its development on GitHub.

The earlier standards and Template Designer tool for the existing WSU web templates remain available online during the  transition to the new web framework.

spine colors info
spine options info
campus ready info
grid columns
grid behavior info
extra large sizes
under the hood

consistency and flexibility

The framework makes every effort to achieve consistent positioning, graphics, and behavior within the Spine's vertical column. At the same time it enables great flexibility on the remaining page. For example, with a switch, the Spine supports three kinds of commonly used grids: Fluid, Fixed, and Hybrid. Feel free to click one above and observe the page's behavior as you shrink your window size. The default is "hybrid".

responsive

Big brother, meet your kid brother, the smartphone. We love him too. The Spine framework provides a responsive grid that enables sites to flex and fold to fit whatever device. The default width is comprised of fifteen 66 pixel columns, the main content area being twelve of those.

spine colors

A chameleon of sorts, to complement the style and tone of your design, the spine can be easily switched between several sets of tints and shades within our primary colors of gray and crimson.

Notice that the column order at full size is 2 -> 1. A .reverse class on the parent section switches the float direction to right at full-size, but flips it back left at mobile sizes for an alternative ordering. One day this will be supplanted by flexbox order.

cropping or bleeding

It's gruesome, but for site cover pages, the Spine's head can be "severed" or cropped for an even blanker slate for your design. Alternatively, the spine — which by default is 198px wide and the full height of the browser's window — can be bled off the left side of the window, as it is here.


tool belt included

Out-of-the-box, the Spine includes local and WSU-wide search, a consistent presentation of contact information, easy sharing via the most popular social networks, and a print tool that automatically formats the page for letter-sized paper. Search solution can be customized with alternate sources or even replaced entirely.

nesting and grouping

Related articles and images can be nested so that they hang together in groups when the page flexes and folds for mobile. Notice how these nested color blocks hang together if you pull your browser window to a narrow width.

resolution independence

Those whiskers are ticklish at life size. The Spine is built entirely with vector based graphics so that it is prepared for high resolution displays and zooming.


campus ready

The signatures for each urban campus and for other top level units are pre-baked into the Spine, both the vertical signature for large devices and the horizontal for small. 

The campus signatures are activated by adding, for example , a .wsu-vancouver-signature or .wsu-tricities-signature class to html or body.

The skeleton grid eschews padding and margins by default to allow for seamless designs. However, adding a "gutter" class, as in this section, provides gutters for equally spaced column interior content (30px).
These columns have also been equalized with the "equalize" class to allow for aligning background images. Were using "border-box" box-sizing on our columns to enable padding without breaking our responsive math.

Vestibulum cursus ultricies tellus, sed fermentum mauris mattis vitae. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam condimentum ligula ut dictum scelerisque. Aenean mattis erat ac tortor accumsan, vitae tincidunt dui feugiat. Vestibulum hendrerit metus id justo tristique, a pharetra nibh lobortis. Sed eu dolor nec metus blandit egestas ac at elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus ac mollis mauris. Sed aliquet ipsum in dapibus euismod.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dolor neque, scelerisque quis mauris quis, fringilla eleifend est. Phasellus purus leo, commodo sit amet ipsum ac, lacinia auctor nulla. Nam sed nunc fermentum, condimentum ligula sit amet, facilisis urna. Vestibulum pharetra dui turpis, vitae elementum dui gravida in. Quisque ut lectus aliquet, lobortis risus vitae, placerat metus. Duis nisl eros, mattis non fermentum eget, luctus sed tortor. Nunc tempus nulla eget erat ornare, quis mattis turpis tincidunt. Vivamus semper elit at metus consequat, vitae dapibus urna posuere. Nunc iaculis arcu sed ante mollis, vitae varius orci rhoncus. Nullam luctus tristique pretium. Ut tincidunt, velit ullamcorper aliquet molestie, nisl lectus interdum felis, quis blandit nisi tortor non elit. Ut sit amet ipsum consectetur, tempor tellus at, ultrices elit. Sed a mauris enim. Sed vitae odio vestibulum massa vulputate lacinia.

Nam a dolor diam. Sed bibendum sit amet arcu id vehicula. Duis dictum rhoncus velit vel porttitor. Nullam scelerisque fermentum massa. Proin suscipit facilisis tincidunt. Aenean et tempor augue. Nullam gravida feugiat diam, vel blandit turpis ornare et. Sed sed arcu quis augue ultricies porta id vitae ante. Donec at ante sed mauris mollis rutrum eu sit amet lectus.

.equalize makes columns equally tall... or short