WVU Brand
Patterns

WVU Brand Patterns is a theme for making WVU-branded websites. It is built with Sass and works with WVU’s CleanSlate content management system.

Bitbucket Examples

Quickly develop website themes by including ready-made HTML and Sass partials, which output and style WVU-branded design patterns.

Patterns are referenced using Radius tags. They look like this:

  <r:partial name="patterns/wvu-masthead" />

Which outputs the following:

  <div class="wvu-masthead">
    <div class="wvu-masthead__container">
      <a class="wvu-masthead__logo" href="http://www.wvu.edu/"><span class="wvu-masthead__university-name">West Virginia University</span>Digital Services</span></a>
      <r:partial name="patterns/wvu-masthead__search-bar" />
    </div>
  </div>

Patterns can contain partials (which reference other patterns). In the examples shown above, partials that reference other patterns are highlighted in orange.

The HTML which is output using the code above is styled when we import a corresponding Sass partial into our scss/2-modules/modules-dir.sass file:

  @import 'wvu-masthead'

The WVU Brand Patterns theme includes patterns for the official WVU masthead, hero unit, sub features, navigation, typography, WVU footer, and various other elements. These elements can be viewed here, along with the required code.

Instructions

Clone/download the Brand Patterns theme from Bitbucket.
Have UR - Digital Services create a repo for your new theme in the CleanSlate Themes project on Stash (you can tell us to include the patterns by default if you want, skipping steps 1 and 3).
Copy the files you want from the WVU Brand Patterns theme into your new theme.
If you have Ruby and Sass installed, use the following command in Terminal from within your theme’s top-level directory:
```
sass --watch scss/styles.scss:stylesheets/styles.css
```
Otherwise, you can use the latest version of Gulp, Prepros, or Codekit to compile your Sass.
Test your theme in Hammer.
Push and sync your theme.

Configuration

The WVU Brand Patterns theme comes with Boubon/Neat. Want to use your own grid or mixin library instead? No problem, just remove the references to Bourbon and Neat from the plugins.sass and the layouts-dir.sass files and include your own.

Include any additional modules you want from the scss/2-modules directory and a corresponding layout from the scss/3-layouts directory. You must also include a matching HTML partial in your theme’s templates (found in the 'views' directory).

Easily change design elements using Sass variables in your scss/1-base/variables.scss file (or create your own variables file). For example, the following code changes the site’s masthead to show a gold background with a blue Flying WV w/Signature, blue links, and a blue search button.

  $wvu-masthead-background: 'gold'

Examples

Below are example templates created using the WVU Brand Patterns theme:

Have suggestions or want to submit a new pattern?