Skip to main content
  • Home
  • Getting Started

Getting Started

Getting started is easy. Just download our compiled CSS, download the source files, or request a CleanSlate theme.

Download Source Files

Compile the WVU Design System with your own asset pipeline by downloading our source Sass and documentation files. This option requires a Sass compiler for compiling your CSS.

Download Source

Request a CleanSlate Site

Request a site through our normal CleanSlate site development request process and let us know you want to use the WVU Design System theme. We will get you all set up.

CleanSlate Site Development Request

NOTE: If you are downloading the sources files and testing locally, you need to have a local server running in order to see the fonts correctly. If you just want to play around with the basic starter template and see the fonts, and aren’t already using a local server, you can easily set one up using the http-server-package. Once installed, just cd into your project directory and run http-server. It will serve files from your public directory and you can view it at http://localhost:8080/. Just create an HTML page in your public directory using the code from the Starter Template below.

Details

The following is meant to give developers a broad idea of how the System works. If you are a CleanSlate developer, all of the following is already included in your theme files when you request a site. The following is just for reference on general concepts.

Starter Template

Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Below is a starter template you can use. Then use our utilities and components to build out your templates.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- WVU Design System CSS -->
    <link rel="stylesheet" href="/stylesheets/styles.css">

    <!-- Fontawesome CSS -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    
    <!-- JavaScript to include WVU’s fonts -->
    <script src="https://fast.fonts.net/jsapi/36d8cd92-7cc7-499b-b169-0eed9d670283.js"></script><!-- WVU’s font package, valid for *.wvu.edu, *.wvutech.edu, & localhost -->

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    
    <!-- WVU Design System JS -->
    <script src="/javascripts/vendor/responsive-nav/responsive-nav.js"></script>
    <script src="/javascripts/responsive-nav-dropdown--custom.js"></script>
    <script src="/javascripts/vendor/twitter-fetcher/twitterFetcher_min.js"></script>
    <script src="/javascripts/vendor/fontfaceobserver/fontfaceobserver.js"></script>
    <script src="/javascripts/fontfaceobserver__custom.js"></script>
    
  </body>
</html>

Hosted Assets

The following logos and patterns are available for you to use in your website theme.

http://static.wvu.edu/global/images/logos/potomac-state/potomac-state-logo--1.0.0.svg",
http://static.wvu.edu/global/images/logos/potomac-state/potomac-state-logo__blue--1.0.0.svg",
http://static.wvu.edu/global/images/logos/potomac-state/potomac-state-logo__blue-signature--1.0.0.svg",
http://static.wvu.edu/global/images/logos/wvu/flying-wv--2.0.0.svg",
http://static.wvu.edu/global/images/logos/wvu/flying-wv__black--1.0.0.svg",
http://static.wvu.edu/global/images/logos/wvu/flying-wv__blue--1.0.0.svg",
http://static.wvu.edu/global/images/logos/wvu/flying-wv__white--1.0.0.svg",
http://static.wvu.edu/global/images/logos/wvu/wvu-logo--2.0.0.svg",
http://static.wvu.edu/global/images/logos/wvu/wvu-logo__blue--2.0.0.svg",
http://static.wvu.edu/global/images/logos/wvu/wvu-logo__blue-signature--2.0.0.svg",
http://static.wvu.edu/global/images/logos/wvu/wvu-logo__white--2.0.0.svg",
http://static.wvu.edu/global/images/patterns/wvu/background__gold--1.0.0.svg",
http://static.wvu.edu/global/images/patterns/wvu/background__grid--1.0.0.svg",
http://static.wvu.edu/global/images/patterns/wvu/background__grid-transparent--1.0.0.svg",
http://static.wvu.edu/global/images/patterns/wvu/background__grid-zoomed--1.0.0.svg",
http://static.wvu.edu/global/images/patterns/wvu/background__grid-zoomed-transparent--1.0.0.svg
http://static.wvu.edu/global/images/patterns/wvu/background__topo-black-transparent--1.0.0.png";
http://static.wvu.edu/global/images/patterns/wvu/background__topo-white-transparent--1.0.0.png";
http://static.wvu.edu/global/images/patterns/wvu/background__white--1.0.0.svg

Iconography

We use Font Awesome for our icons. Please see their documentation on how to use.

How to Include WVU’s Typography

We use fonts.com. All *.wvu.edu sites can access our typography palette. The main typography palette is included in our base theme by default. But if you want to see the code, here it is:

<script src="https://fast.fonts.net/jsapi/36d8cd92-7cc7-499b-b169-0eed9d670283.js"></script>

Here are the CSS selectors used to assign each font to a class:

font-family:'IowanOldStyleW01-Roman';
font-family:'IowanOldStyleW01-Italic1120392';
font-family:'HelveticaNeueW01-97Blac';
font-family:'Helvetica Neue LT W01_75 Bold';
font-family:'HelveticaNeueW01-45Ligh';
font-family:'HelveticaNeueW01-55Roma';
font-family:'IowanOldStyleW01-BlackI';
font-family:'IowanOldStyleW01-Black';

We have created classes that correspond to each typeface. To style HTML using these fonts, see our utility classes.

If you don’t need to use the full range of fonts included in WVU’s typography palette, you can use a slimmed-down version that only uses Helvetica Neue Black Condensed and Helvetica Neue Light. This will save you some page load time. Use this script instead:

<script src="https://fast.fonts.net/jsapi/3f7b1335-4c99-4404-92cf-3ba0e32e8f17.js"></script>

CSS selectors:

font-family:'HelveticaNeueW01-45Ligh';
font-family:'HelveticaNeueW01-97Blac';

Sites without a *.wvu.edu URL

If you have a URL that is not a .wvu.edu domain (for example a development site on a 3rd party vendor’s server), contact Adam Glenn from University Relations - Digital to get the URL whitelisted in our Fonts.com account.

Including Bootstrap

The WVU Design System is built on top of Bootstrap version 4.3. It is included as a dependency and installed automatically when you download the source files and follow the instructions on the Git repo. Be sure to familiarize yourself with Bootstrap’s documentation.

Include What You Need

You can reduce the file size of your CSS by including only the Sass files that you need. See Bootstrap’s documentation on theming.

Overrides

We’ve overridden some of Bootstrap’s variables in our starter theme. You don’t have to do anything to configure them. For reference, the overrides are shown here:

$sizes: (
  10: 10%,
  20: 20%,
  25: 25%,
  30: 30%,
  40: 40%,
  50: 50%,
  60: 60%,
  70: 70%,
  75: 75%,
  80: 80%,
  90: 90%,
  100: 100%,
  auto: auto
);

$theme-colors: (
  "wvu-blue": $wvu-blue,
  "wvu-gold": $wvu-gold,
  "wvu-neutral--white": $wvu-neutral--white,
  "wvu-neutral--black": $wvu-neutral--black,
  "wvu-neutral--dark-gray": $wvu-neutral--dark-gray,
  "wvu-neutral--light-gray": $wvu-neutral--light-gray,
  "wvu-neutral--dark-brown": $wvu-neutral--dark-brown,
  "wvu-neutral--brown": $wvu-neutral--brown,
  "wvu-neutral--light-brown": $wvu-neutral--light-brown,
  "wvu-accent--dark-blue": $wvu-accent--dark-blue,
  "wvu-accent--blue": $wvu-accent--blue,
  "wvu-accent--light-blue": $wvu-accent--light-blue,
  "wvu-accent--brown": $wvu-accent--brown,
  "wvu-accent--mustard": $wvu-accent--mustard,
  "wvu-accent--orange": $wvu-accent--orange,
  "wvu-accent--dark-green": $wvu-accent--dark-green,
  "wvu-accent--green": $wvu-accent--green,
  "wvu-accent--light-green": $wvu-accent--light-green,
  "wvu-accent--red": $wvu-accent--red,
  "wvu-accent--burnt-orange": $wvu-accent--burnt-orange,
  "wvu-accent--yellow": $wvu-accent--yellow
);

$grid-breakpoints: (
  xs: $wvu-bp-xs,
  sm: $wvu-bp-sm,
  md: $wvu-bp-md,
  lg: $wvu-bp-lg,
  xl: $wvu-bp-xl
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1360px
);

$spacer: 2rem;

$spacers: (
  0: 0,
  1: ($spacer * .25),
  2: ($spacer * .5),
  3: $spacer,
  4: ($spacer * 1.5),
  5: ($spacer * 3),
  6: ($spacer * 6)
);

$blue: #006FE6;
$card-border-radius: 0;
$card-border-width: 0;
$card-bg: transparent;
$dark: $wvu-neutral--black;
$display1-size: 7rem;
$font-size-base: 1rem;
$emphasized-link-hover-darken-percentage: 0%;
$font-family-sans-serif: $helvetica-neue-fallback;
$jumbotron-bg: transparent;
$jumbotron-padding: 4rem;
$lead-font-size: ($font-size-base * 1.5);
$link-decoration: underline;
$pink: #DB1A74;
$small-font-size: 80%;
$nameSpace: 'wvu';

Utilities, Components & Themes

Once you are set up, you are ready to use our utilities and HTML components. Utilities are classes that can be used inline to style HTML or mixins that a frontend developer can use in when creating custom Sass.

Components are the building blocks (or sections) of a site. Use these to structure the templates in your theme. Check out our component library (just copy and paste the code) and example themes for some inspiration.

Ready to launch?

Once you’ve built your site, put all the content in, made sure your site is accessible, your site must go through our approval process.