Guidelines and Best Practices
Comment Your Code
The WVU Design System is built on open iteration and collaboration. In order to follow
this principle, others who build WVU websites might want to use your code and easily
adapt it to their own needs. Or if you leave WVU, the person who must take over
your sites will want to know how and why you coded your sites like you did. This
requires you to include extensive comments in your code that make it easy to understand.
To understand how to better plan, write, and manage content, you can do no better than to reference 18F’s content guide.
Design and Layout
All pages must contain a masthead, navigation, and footer. Your masthead must contain a logotype or wordmark, displayed at the top left. Your website should have a clearly defined set of navigation links near the top of the page that remains consistent throughout the site. In general, follow the same rules in the WVU Brand Guide when designing individual elements. Below are some common pitfalls and suggestions.
Body copy should not be on a textured or colored background. It should be dark gray on a white background for easier readability. If text is over a photo, crop the photo in a way that makes the text more legible or use a vignetting effect.
Create a large enough contrast in scale between elements to create a strong visual
hierarchy. For example, use the
display-* utility classes on a headline to grab a viewer’s attention. If two elements should
not compete for attention, consider creating more contrast in scale between them.
Don’t center large bodies of text. This can cause the eye to lose track of where
each line begins as the user reads the text. Use less text or left-align it.
Layout and Spacing
Use the grid to align elements and create unity. Page elements should not look like they are floating or crashing into each other. Keep spacing consistent and avoid visual tension. The outer container width of all page elements is set in the variables file in the WVU Design System theme. The max container width is 1400 pixels. You should not change this width.
Your site layout should have a balance of positive and negative space. It should
not look cluttered so as to hinder legibility or the visual hierarchy. Components
(horizontal page sections) should generally use the same top and bottom padding
py-5 for their outer containers.
Follow gestalt principles of design. For example, group elements according to the law of proximity. Users perceive a relationship between items that are grouped together. If a headline is disjointed from its description and call to action, users will not perceive these elements to be related at a glance.
Texture and Graphics
Subtle gradients, highlights, drop-shadows and reflections can give your site a polished look. However, overuse of these effects can cause visual distraction and dilute the overall WVU brand, and should generally be avoided. The elements on your site should not be styled with thick borders, rounded corners, or other arbitrary styling. Stay within the framework.
When writing code, WVU Design System components do not need to be namespaced. This
is because the system is primarily utility-based, and there is no need to identify
individual components in order to style them with CSS. However, if you want to
namespace components, we recommend using the
BEM format (Block, Element, Modifier) with a
For example, if you have a block (we call them “components”) you’ve named
hero and you want to style an element inside the block named
might add a class to that element called
wvu-hero__title. If you want
to add a modifier class to that element that changes its color to blue, you might
add another class called
If you are a CleanSlate developer, editable region names should also follow this
format. For example, if you have an editable region that allows the content editor
to edit only the
h2 element of a
wvu-hero component, name the region
Supported Web Browsers
Supported web browsers include the latest versions of Internet Explorer (IE 11), Chrome, Safari, Edge and Firefox. We do not include support for IE’s compatibility mode, and no longer support depreciated versions of Internet Explorer 6, 7, 8, 9 and 10.
Supported browsers specifically refers to any sites in CleanSlate content management system or any web applications made by University Relations – Digital Services — unless otherwise listed.
Usability & Performance
Google Page Speed Insights to evaluate your site’s performance. No WVU web
page should score worse than 80 when checked with this tool.
What about scrolling?
Doesn’t all my content have to appear “above the fold”? No. Your most important information
should appear near the top of your page. However, screen resolution and browser
viewport dimensions vary from computer to computer. Generally, users expect to
scroll and it is best to meet user expectations. To learn more, see Luke Wroblewski’s
There is No Fold.
Can I have a slideshow?
There are many reasons you shouldn’t include a slideshow on your site. Users only tend to click on the first panel that is displayed, they frustrate users, and even though many slideshows technically meet accessibility guidelines, they really aren’t accessible.