Skip to main content

Utilities

Use custom utilities in combination with Bootstrap 4.3 to brand your website with WVU’s colors, typography, and elements. You can even design a website without touching the CSS or theme files, if that’s what you want. Or if you have the desire and the know-how, relevant utilities have corresponding mixins that allow you to easily incorporate these styles into your own Sass. It’s up to you!

Typography

Want to easily change a type element to Helvetica Black Condensed or Iowan Old Style Italic? Use our typography utilities.

Read More

Color

Want to easily style text, buttons, borders, and backgrounds? Use our color utilities.

Read More

Elements

Want to add a slash, Flying WV pattern, or grid pattern to spice up an element? Our element utility classes make it easy.

Read More

Background Effects

Add a multiply, lighten, or vignetting effect to an element’s background image to create visually striking content.

Read More

Background Positioning

Sometimes you need to crop a background image at different breakpoints. Our background positioning utilities allow you the flexibility to do this.

Read More

Combining Background Utilities

You don’t have to limit yourself to one background image effect. See what combinations work best.

Read More

Putting It All Together

Combine our typography, color, and background effects with Bootstrap’s utilities to create visually striking layouts in no time.

Read More

All WVU Utilities

Selector Options What it does Dependencies Mixin Version Introduced
helvetica-neue N/A Applies Helvetica Neue to a text element. N/A helvetica-neue() 1.0.0
helvetica-neue-bold N/A Applies Helvetica Neue and bold font weight to a text element. N/A helvetica-neue-bold() 1.0.0
helvetica-neue-light N/A Applies Helvetica Neue Light to a text element. N/A helvetica-neue-light() 1.0.0
iowan-old-style N/A Applies Iowan Old Style to a text element. N/A iowan-old-style() 1.0.0
iowan-old-style-italic N/A Applies Iowan Old Style Italic to a text element. N/A iowan-old-style-italic() 1.0.0
iowan-old-style-black-italic N/A Applies Iowan Old Style Black Italic to a text element. N/A iowan-old-style-black-italic() 1.0.0
wvu-bg-blend-mode-lighten N/A Applies a luminosity effect (WVU Blue) to a background image applied to the same element. Needs a background image applied to the same element. wvu-bg-blend-mode(lighten) 1.0.0
wvu-bg-blend-mode-luminosity--{value} 10 - 90 (in increments of 10) Adds a luminosity effect to a background color and image applied tot he same element. Numbers determine contrast. Needs a background image and background color utility class applied to the same element. wvu-bg-blend-mode(luminosity) 1.0.0
wvu-bg-pattern-blue N/A Applies a blue background pattern to an element. N/A wvu-bg-pattern(wvu-blue) 1.0.0
wvu-bg-pattern-gold N/A Applies a gold background pattern to an element. N/A wvu-bg-pattern() 1.0.0
wvu-bg-pattern-grid N/A Applies a grid pattern to an element. Needs a wvu-z-index-content class applied to the content inside the element. wvu-bg-pattern(grid) 1.0.0
wvu-bg-pattern-grid-transparent N/A Applies a grid pattern to an element. Needs a wvu-z-index-content class applied to the content inside the element. wvu-bg-pattern(grid-transparent) 1.0.0
wvu-bg-pattern-grid-zoomed N/A Applies a zoomed-in grid pattern to an element. Needs a wvu-z-index-content class applied to the content inside the element. wvu-bg-pattern(grid-zoomed) 1.0.0
wvu-bg-pattern-grid-zoomed-transparent N/A Applies a zoomed-in grid pattern to an element. Needs a wvu-z-index-content class applied to the content inside the element. wvu-bg-pattern(grid-zoomed-transparent) 1.0.0
wvu-bg-pattern-slashes-gold-blue N/A Applies transparent gold and blue slashes over a background image applied to the same element. Needs a background image applied to the same element and a wvu-z-index-content class applied to the content inside the element. wvu-bg-pattern(slashes-gold-blue) 1.0.0
wvu-bg-pattern-slashes-gold-blue-white N/A Applies transparent gold, blue, and white slashes over a background image applied to the same element. Needs a background image applied to the same element and a wvu-z-index-content class applied to the content inside the element. wvu-bg-pattern(slashes-gold-blue-white) 1.0.0
wvu-bg-position-{value} center, bottom, top, left, right Positions a background image. Needs a background image applied to the same element. N/A 1.0.0
wvu-bg-position-{breakpoint}-{value} Where breakpoint is one of sm, md, lg, xl and {value} is one of center, bottom, top, left, right Positions a background image. Needs a background image applied to the same element. N/A 1.0.0
wvu-bg-position-{breakpoint}-{value}--{percentage} Where breakpoint is one of sm, md, lg, xl; {value} is one of center, bottom, top, left, right; and {percentage} is a number 5 - 100 in increments of 5 (5, 10, 15, 20). Positions a background image. Needs a background image applied to the same element. N/A 1.0.0
wvu-bg-position-spacer-{value} top, md-top, bottom, md-bottom Adds space above or below text in a hero component on either mobile or md breakpoint and below. Should only be used with a component that has a full-bleed background image with text overlayed. N/A 1.0.0
wvu-bg-none N/A Removes background image from element. N/A N/A 1.0.0
wvu-bg-size-cover N/A Sets background-size property of an element to none. N/A N/A 1.0.0
wvu-bg-vignetting--{opacity} 10 - 90 in increments of 10 Adds a vignetting effect over a photo to improve legibility of text that is overlayed. Needs a background image applied to the same element. wvu-bg-vignetting($wvu-vignetting-opacity, left) 1.0.0
wvu-bg-vignetting--right N/A Shifts vignetting effect so that text can be overlayed on the right side of the component. Needs a wvu-vignetting--{opacity} class applied to the same element. wvu-bg-vignetting($wvu-vignetting-opacity, right) 1.0.0
wvu-first-line-gold N/A Makes the first line of a block of text gold. N/A wvu-first-line-gold() 1.0.0
wvu-overflow-hidden N/A Sets the overflow property of an element to hidden. N/A N/A 1.0.0
wvu-shout N/A Applies Helvetica Neue Black Condensed and appropriate line-height to a text element. N/A wvu-shout() 1.0.0
wvu-slash N/A Adds a slash to an element. If you are using this on a header within a container that has centered text, you need to add a d-inline-block utility to the header. wvu-slash($color, $width, $position) 1.0.0
wvu-slash--{color} blue, gold, white Changes the color of a slash. Needs a wvu-slash class applied to the same element. wvu-slash($color, $width, $position) 1.0.0
wvu-slash--{position} center, center-bottom, right, right-bottom Changes the position of a slash. Needs a wvu-slash class applied to the same element. wvu-slash($color, $width, $position) 1.0.0
wvu-slash--skinny N/A Changes the width of a slash to make it skinny. Needs a wvu-slash class applied to the same element. wvu-slash($color, skinny, $position) 1.0.0
wvu-ul-slashes N/A Changes bullets on a ul to slashes. N/A wvu-slashes($color) 1.0.0
wvu-ul-slashes--{color} blue, gold, white Changes the bullet colors on a ul. Needs a wvu-ul-slashes class applied to the same element. wvu-slashes($color) 1.0.0
wvu-z-index-content N/A Keeps your content above background images when using vignetting, grid, etc. N/A N/A 1.0.0
wvu-z-index-max N/A Sets the z-index of an element to 9999. N/A N/A 1.0.0