Marketing, Communications, and Engagement

Web style guide

Introduction

These components are designed to keep UWHR websites on UW brand and consistent across sites. To use these, you will need the UWHR web team’s stylesheet. The stylesheet includes all dependencies and browser consistent styles.

Because these components are extended from Bootstrap, you also have access to most of Bootstrap core functionality. In fact, this style guide assumes you’ve already started with a Bootstrap-y page.

Here is a sampling of many of the relevant components and features.

Return to top

Type

The UW theme uses two different fonts:

Primary Headings Encode Sans Normal 900

Bold Headlines

Body Open Sans Normal

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident modi alias culpa inventore deserunt accusantium amet earum soluta consequatur quasi. Maiores praesentium, modi explicabo enim dolores quaerat ipsa quos voluptas!

Download Fonts

Font Classes

You have several other options when styling fonts. Here’s the available classes.

  • .thin, .bold, and .beefy
  • .text-xs, .text-sm and .text-lg
  • .purple, .gold, .lightgold and .white

This is a beefy, purple h2 tag.

This is a skinny, gold h3 tag.

This is a text-lg, purple p tag.

<h2 class="beefy purple">This is a beefy, purple h2.</h3>
<h3 class="thin gold">This is a skinny, gold h3 tag.</h3>
<p class="text-lg purple">This is a text-lg, purple p tag.</p>

 

Return to top

Headings

Headings utilize all heading tags from <h1> to <h6>. You can also use the class .h1 to .h6. For the most part, <h1>‘s and <h2>‘s are reserved for the header and hero sections. Be careful of heading hierarchy.

This is an h1 tag.

This is an .h2 class on a p tag.

This is an h3 tag.

This is an .h4 class on a p tag.

This is an h5 tag.
This is an h6 tag.
<h1>This is an h1 tag.</h1>
<p class="h2">This is an .h2 class on a p tag.</p>
<h3>This is an h3 tag.</h3>
<p class="h4">This is an .h4 class on a p tag.</p>
<h5>This is an h5 tag.</h5>
<h6>This is an h6 tag.</h6>
Heading Class

You can also use the class .heading to display other typographic elements with the heading font family.

<p class=”heading”>This is a .heading p tag.</p>

<p class="heading">This is a .heading p tag.</p>

 

Return to top

Colors

Purple evokes passionate pride. It’s the color that stands out as most quintessentially our university and is therefore the dominant color in our communications. Gold symbolizes excellence. It’s a sophisticated hue that speaks to our extraordinary standards and immense quality. And when you combine the two? That’s the UW.”

– the UW Brand Team

Here is a list of the relevant colors. The title, hex color code, and Sass variable (if using CSS preprocessor) is listed.

Primary Colors
Purple
#4b2e83
$purple
Dark Gold
#85754d
$darkgold
Light Gold
#ece9e2
$lightgold
Ultralight Gold
#f6f5f1
$ultralightgold
Body Copy
#3D3D3D
$body-color
Secondary Colors
Gold
#b7a57a
Links
#08d
White
#fff
Black
#000000

 

Return to top

Layout

Layout includes several components and options for your page, including containers, a grid system, and utility classes.

Containers

Containers are the basic building block of any page and are required to use the grid system. You have two choices for containers: .containerand .container-fluid. The former is a fixed-width at each breakpoint until extra-small screen sizes. The latter is 100% width of it’s parent element.

Note for WYSIWYG Users: You do not need to use .containers in the editor. Jump straight to .rows and .col-*-*s for your layout needs.

Here’s the breakdown of .container widths at each screen size.

Name Breakpoint Container Max Width
Extra Small 0 100%
Small 544px 576px
Medium 768px 720px
Large 992px 940px
Extra Large 1200px 1140px
Row

A .row simply wraps around any number of .col-*-* to group elements together horizontally. See examples below.

Columns

Columns are the bread and butter of the grid system. There are many combination of grid elements you can do. So many, that I’m simply going to point you towards Bootstrap’s documentation after offering this simple example.

One of three columns
One of three columns
One of three columns
<div class="container">
  <div class="row">
    <div class="col-sm-4">
      One of three columns
    </div>
    <div class="col-sm-4">
      One of three columns
    </div>
    <div class="col-sm-4">
      One of three columns
    </div>
  </div>
</div>

 

Return to top

Buttons

Buttons are built on top of Bootstrap’s core functionality and classes. You must use .btn for basic buttons or .uw-btn for UW buttons. Additional choices are:

  • .btn-purple, .btn-gold, .btn-lightgold, and .btn-danger
  • .btn-lg and .btn-sm
  • .uw-btn .btn-gold, .uw-btn .btn-purple and .uw-btn .btn-plus
Basic Buttons

Purple Button

Gold Button

Light Gold Button

Danger Button

<a class="btn btn-purple" href="#">Purple Button</a>
<a class="btn btn-gold" href="#">Gold Button</a>
<a class="btn btn-lightgold" href="#">Light Gold Button</a>
<a class="btn btn-danger href="#"">Danger Button</a>
UW Buttons

Default Button
Gold Button
Purple Plus Button
Small Button

<a class="uw-btn" href="#">Default Button</a>
<a class="uw-btn btn-gold" href="#">Gold Button</a>
<a class="uw-btn btn-purple btn-plus" href="#">Purple Plus Button</a>
<a class="uw-btn btn-sm" href="#">Small Button</a>
Sizes

Large Button

Small Button

<a class="btn btn-primary btn-lg" href="#">Large Button</a>
<a class="btn btn-primary btn-sm" href="#">Small Button</a>

 

Return to top

Tables

Tables are composed to two elements: <thead> and <tbody>. Each of these elements is then built up of <tr>s containing <th>s and <td>s.

Give your table element a class of .table to follow style conventions.

# First Name Last Name Job
1 Steven Speicher Front End Developer
2 Sarah Burns UX Designer
3 Jessica Mar Web Developer/Designer
<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Job</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Steven</td>
      <td>Speicher</td>
      <td>Front End Developer</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Sarah</td>
      <td>Burns</td>
      <td>UX Designer</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Jessica</td>
      <td>Mar</td>
      <td>Web Developer/Designer</td>
    </tr>
  </tbody>
</table>
Small Table

Add the class .table-sm to make your table small.

# First Name Last Name Job
1 Steven Speicher Front End Developer
2 Sarah Burns UX Designer
3 Jessica Mar Web Developer/Designer
<table class="table table-sm">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Job</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Steven</td>
      <td>Speicher</td>
      <td>Front End Developer</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Sarah</td>
      <td>Burns</td>
      <td>UX Designer</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Jessica</td>
      <td>Mar</td>
      <td>Web Developer/Designer</td>
    </tr>
  </tbody>
</table>
Striped Table

Add the class .table-striped to make your table striped.

# First Name Last Name Job
1 Steven Speicher Front End Developer
2 Sarah Burns UX Designer
3 Jessica Mar Web Developer/Designer
<table class="table table-striped">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Job</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Steven</td>
      <td>Speicher</td>
      <td>Front End Developer</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Sarah</td>
      <td>Burns</td>
      <td>UX Designer</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Jessica</td>
      <td>Mar</td>
      <td>Web Developer/Designer</td>
    </tr>
  </tbody>
</table>
Responsive Tables

You can wrap the entire table element with the class .table-responsive to make it scroll horizontally on small screens.

<div class="table-responsive">
  <table class="table table-striped">
    ...
  </table>
</div>

 

Return to top

Accordion

Accordions are a good way to show a lot of content in a small area, specifically, content that is related but independent of each accordion panel.

You can create an accordion by wrapping .uwhr-accordion around several .panels. Each .panel has a .panel-heading, which contains a action area and title string, and a .panel-collapse, which holds the panel content and is toggleable.

Remember to change the IDs for the .uwhr-accordion, .panel-link, and .panel-collapse.

Here’s a couple examples: a vanilla .uwhr-accordion, an .accordion-purple, and an .accordion-iconless

Vanilla Accordion

Waistcoat vinyl etsy cred, wolf dreamcatcher cardigan tattooed seitan kogi blog pork belly pabst fixie. Drinking vinegar cardigan put a bird on it leggings wayfarers. Asymmetrical meggings cardigan try-hard, thundercats kickstarter actually semiotics meh. Irony listicle kitsch small batch. Dreamcatcher plaid semiotics, austin roof party small batch paleo deep v wayfarers art party venmo tumblr.

+1 stumptown narwhal, forage deep v ugh synth chicharrones tattooed gentrify health goth craft beer keffiyeh.

Pour-over 90’s cray, fanny pack salvia try-hard kombucha blue bottle pitchfork farm-to-table vinyl selfies tofu drinking vinegar. Brooklyn franzen humblebrag pitchfork cred PBR&B salvia, squid narwhal bushwick williamsburg mustache.

Master cleanse taxidermy pabst, marfa slow-carb lomo authentic jean shorts messenger bag.

Sriracha semiotics schlitz retro tumblr gluten-free tattooed viral distillery scenester. Artisan XOXO hella bespoke sustainable chartreuse portland beard. You probably haven’t heard of them pug tumblr vice, humblebrag semiotics kinfolk.

Kale chips truffaut 3 wolf moon taxidermy godard. Marfa hashtag food truck sartorial yr, fap bicycle rights vice knausgaard cold-pressed. Art party small batch you probably haven’t heard of them master cleanse cold-pressed semiotics.

<div id="uniqueAccordionID" class="uwhr-accordion" role="tablist" aria-multiselectable="true">
  <div class="panel">
    <div class="panel-heading" role="tab" id="headingOne">
      <h5 class="panel-title">
        <a class="collapsed panel-link" href="#collapseOne" data-toggle="collapse" data-parent="#uniqueAccordionID" aria-expanded="false" aria-controls="collapseOne">Sartorial skateboard<i class="fa panel-title-icon"></i></a>
      </h5>
    </div>
    <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
      <p>Waistcoat vinyl etsy cred, wolf dreamcatcher cardigan tattooed seitan kogi blog pork belly pabst fixie. Drinking vinegar cardigan put a bird on it leggings wayfarers. Asymmetrical meggings cardigan try-hard, thundercats kickstarter actually semiotics meh. Irony listicle kitsch small batch. Dreamcatcher plaid semiotics, austin roof party small batch paleo deep v wayfarers art party venmo tumblr.</p>
    </div>
  </div>

  <div class="panel">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h5 class="panel-title">
        <a class="collapsed panel-link" href="#collapseTwo" data-toggle="collapse" data-parent="#uniqueAccordionID" aria-expanded="false" aria-controls="collapseTwo">Pour-over 90's cray<i class="fa panel-title-icon"></i></a>
      </h5>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <p>+1 stumptown narwhal, forage deep v ugh synth chicharrones tattooed gentrify health goth craft beer keffiyeh.</p>

      <p>Pour-over 90's cray, fanny pack salvia try-hard kombucha blue bottle pitchfork farm-to-table vinyl selfies tofu drinking vinegar. Brooklyn franzen humblebrag pitchfork cred PBR&B salvia, squid narwhal bushwick williamsburg mustache.</p>
    </div>
  </div>

  <div class="panel">
    <div class="panel-heading" role="tab" id="headingThree">
      <h5 class="panel-title">
        <a class="collapsed panel-link" href="#collapseThree" data-toggle="collapse" data-parent="#uniqueAccordionID" aria-expanded="false" aria-controls="collapseThree">Master cleanse<i class="fa panel-title-icon"></i></a>
      </h5>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <p>Master cleanse taxidermy pabst, marfa slow-carb lomo authentic jean shorts messenger bag.</p>

      <p>Sriracha semiotics schlitz retro tumblr gluten-free tattooed viral distillery scenester. Artisan XOXO hella bespoke sustainable chartreuse portland beard. You probably haven't heard of them pug tumblr vice, humblebrag semiotics kinfolk. </p>

      <p>Kale chips truffaut 3 wolf moon taxidermy godard. Marfa hashtag food truck sartorial yr, fap bicycle rights vice knausgaard cold-pressed. Art party small batch you probably haven't heard of them master cleanse cold-pressed semiotics.</p>
    </div>
  </div>
</div>
Purple Accordion

Simple add .accordion-purpleto a regular .uwhr-accordion to make it purple.

This is an accordion without icons.

<div class="uwhr-accordion accordion-purple">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h5 class="panel-title"><a class="collapsed panel-link" href="#collapseFive" data-toggle="collapse" data-parent="#accordion">I'm Purple<i class="fa panel-title-icon"></i></a></h5>
    </div>
    <div id="collapseFive" class="panel-collapse collapse">
      <p>This is an accordion without icons.</p>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h5 class="panel-title"><a class="panel-link collapsed" href="#collapseSix" data-toggle="collapse" data-parent="#accordion">A Really Cool Title<i class="fa panel-title-icon"></i></a></h5>
    </div>
   <div id="collapseSix" class="panel-collapse collapse">

     <p>Hi there!</p>
   </div>
  </div>
</div>
Iconless Accordion

Add .accordion-iconless for an accordion without icons in the panel.

This is an accordion without icons.

Hi there!

<div class="uwhr-accordion accordion-iconless">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h5 class="panel-title"><a class="collapsed panel-link" href="#collapseSeven" data-toggle="collapse" data-parent="#accordion">Panel Title<i class="fa panel-title-icon"></i></a></h5>
    </div>
    <div id="collapseSeven" class="panel-collapse collapse">
      <p>This is an accordion without icons.</p>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h5 class="panel-title"><a class="panel-link collapsed" href="#collapseEight" data-toggle="collapse" data-parent="#accordion">Without Icons!<i class="fa panel-title-icon"></i></a></h5>
    </div>
    <div id="collapseEight" class="panel-collapse collapse">
      <p>Hi there!</p>
    </div>
  </div>
</div>

 

Return to top

Blockquote

The blockquote can be used in text bodies to extract important lines or quotes. There should only be other block-level elements like p tags or h tags inside a blockquote.

Standard blockquote. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sodales, sapien imperdiet blandit pretiu habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Nulla cursus vitae velit ut volutpat. Nam eu consectetur velit, at mattis nisl. Donec massa est, porttitor et pretium at, auctor in quam. Nullam elit leo, laoreet it amet sollicitudin luctus, ex odio pretium massa, ac lacinia felis diam sed ipsum. Sed imperdiet nunc vel facilisis facilisis. In varius lacinia fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu nulla odio.

Left blockquote with .blockquote-left or .blockquote-right. Lorem ipsum dolor sit amet, cons.

Nulla cursus vitae velit ut volutpat. Nam eu consectetur velit, at mattis nisl. Donec massa est, porttitor et pretium at, auctor in quam. Nullam elit leo, laoreet it amet sollicitudin luctus, ex odio pretium massa, ac lacinia felis diam sed ipsum. Sed imperdiet nunc vel facilisis facilisis. In varius lacinia fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu nulla odio.

<blockquote><p>Standard blockquote. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sodales, sapien imperdiet blandit pretiu habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></blockquote>
<blockquote class="blockquote-left"><p>Left blockquote with <code>.blockquote-left</code>. Lorem ipsum dolor sit amet, cons.</p></blockquote>

 

Return to top

Forms

Adding .form-controlto any input, select, or textarea element allows you to opt in to a standardized and consistent rendering across all browsers. These are block level element that take up 100% of the parent container. Utilize layout classes to customize your form layout.

Use .form-groupon any div or fieldset to add spacing to related items.

All inputs must have a type attribute.

Example Form


<form>
  <fieldset class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
    <small class="text-muted">We'll never share your email with anyone else.</small>
  </fieldset>
  <fieldset class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </fieldset>
  <fieldset class="form-group">
    <label for="exampleSelect1">Example select</label>
    <select class="form-control" id="exampleSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </fieldset>
  <fieldset class="form-group">
    <label for="exampleTextarea">Example textarea</label>
    <textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
  </fieldset>
  <fieldset class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" class="form-control-file" id="exampleInputFile">
    <small class="text-muted">This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.</small>
  </fieldset>
  <button type="submit" class="btn btn-primary btn-sm m-b">Submit</button>
</form>
Radio

In addition to the browser default radio buttons, you also have access to styled radio buttons. You’ll need to use .uwhr-input and .uwhr-radio classes on a wrapping label element. Don’t forget the .uwhr-indicator.

<label class="uwhr-input uwhr-radio" for="r-one">
  <input id="r-one" name="example" type="radio">
  <span class="uwhr-indicator"></span>
  Option One
</label>
<label class="uwhr-input uwhr-radio" for="r-two">
  <input id="r-two" name="example" type="radio">
  <span class="uwhr-indicator"></span>
  Option Two
</label>
Checkboxes

Checkboxes are similar to the above radio buttons. You will use the class .uwhr-checkbox instead.

<label class="uwhr-input uwhr-checkbox" for="c-one">
  <input id="c-one" type="checkbox">
  <span class="uwhr-indicator"></span>
  Option One
</label>
<label class="uwhr-input uwhr-checkbox" for="c-two">
  <input id="c-two" type="checkbox">
  <span class="uwhr-indicator"></span>
  Option Two
</label>
Stacked

Checkboxes and radios are inline to start. Wrap .inputs-stacked around the inputs to make them on separate lines.

<div class="c-inputs-stacked">
  <label class="uwhr-input uwhr-checkbox" for="s-one">
    <input id="s-one" type="checkbox">
    <span class="uwhr-indicator"></span>
    Option One
  </label>
  <label class="uwhr-input uwhr-checkbox" for="s-two">
    <input id="s-two" type="checkbox">
    <span class="uwhr-indicator"></span>
    Option Two
  </label>
  <label class="uwhr-input uwhr-checkbox" for="s-three">
    <input id="s-three" type="checkbox">
    <span class="uwhr-indicator"></span>
    Option Three
  </label>
</div>
Select

You can use a slightly more stylized select element by using the class .uwhr-select.

What is the best animal?

<p>What is the best animal?</p>
<select name="example" class="uwhr-select">
 <option value="cat">Kitty Cat</option>
 <option value="rabbit">Furry Rabbit</option>
 <option value="doggy">Silly Doggy</option>
</select>

Return to top