Skip to main content

Beginner’s Guide

This guide is written primarily for those who work at West Virginia University and have been tasked with building or managing websites in CleanSlate, our in-house content management system. However, items 1-7 below should apply to any system you are working with.

What You Need to Know

If you are building for CleanSlate, you will need to know how CleanSlate themes work, and be able to make customizations to your theme. At minimum, you should also know the following:

  • HTML 5. You will need to know how to create semantic markup and build templates with accessibility in mind. This will also help when applying Bootstrap’s or WVU’s utility classes.
  • Sass. Our websites are built with Sass. If you want to make customizations to a component, or include your own CSS, you need to know how to manipulate Sass. This includes understanding how variables and mixins work. See this handy Sass guide to learn more. We also use Gulp to compile our Sass (see below), but you can also use a program like Prepros. You should also be familiar with tools like Inspector in order to test your CSS in a browser.
  • Accessibility. We use SiteImprove’s browser extension to test our pages for accessibility.
  • Command line. This is where we install packages, boot local development tools like Hammer, and download and push changes to your project repo. We recommend iTerm 2 as a good command line interface.
  • NPM. This is a package manager that will install some of the tools you need to build websites for CleanSlate. For example, it will automatically download Bootstrap and Gulp by simply running an npm install command in your terminal. Each project contains instructions on how to install NPM.
  • Git. We store our themes in Git repositories. If you want to create or edit a theme, you first need to check out the theme, make edits locally, test your edits locally, and when ready, add, commit, and push your changes back to the repo. You should also know how to work with branches. This allows multiple people to work on the same project without overwriting each other’s code. It is beyond the scope of this website to teach you how to use Git. We recommend that you learn Git and learn Git branching.
  • Gulp. Gulp is a task manager that will allow you to do things like compile your Sass. In order to run Gulp from the command line, you will need to install a number of programs, including Node.js and Xcode (if you are on a Mac).
  • Hammer. Hammer is a tool we developed that lets you test your CleanSlate themes locally.
  • CleanSlate. You will need to be familiar with programming concepts such as loops, variables, and so on. See the CleanSlate documentation for more info.

Building a Theme

This is where you download the source files. The source files include a number of standard templates. You can use those, edit them, or create your own.

Create a Theme Using the WVU Design System

Building a Template Using a Design System Component

The easiest way to use our components with CleanSlate.

Build a CleanSlate Template Using a WVU Design System Component

Using Super Template (formerly Super Theme)

The Super Template lets you create templates dynamically through the CleanSlate admin by adding components to one of ten “slots” in a given page’s custom data. 

Check out the Super Template Tutorial