Getting Started Guide

Looking to create a CleanSlate theme? The "Getting Started Guide" is a great way to learn the process of creating a theme. Follow the steps below to get up and running quickly. It is required that all newly developed themes follow the web standards and guidelines for creating your site.

We've also made the CleanSlate Theme Development Tutorial Series—a five hour video series designed to take you from zero to hero when creating CleanSlate themes. The series is available to watch on this site or as a playlist on YouTube.


Make a Request

CleanSlate Theme Development Tutorial Series
Video #5 Getting access and creating sites


Step 1: Fill out the " Theme Developer - CleanSlate Request Form"to request a:

  • new user account for CleanSlate and Bitbucket
  • new site in CleanSlate
  • new theme repository in Bitbucket

CleanSlate Request Form 

Step 2: Wait for a response from University Relations - Web. Generally we will respond to your request within 1-2 days with a notification that your request has been completed.

Step 3: Log in with your WVU Login credentials to check your request. Once you receive your notification from University Relations - Web, you need to double check CleanSlate and Bitbucket to make sure it has been properly setup.

Please notify University Relations - Web if you are having problems with your accounts.

Requirements

To work with a CleanSlate theme, you must be familiar with the following technologies:

  • HTML
  • CSS
  • Javascript
  • Command Line basics
  • Git

Step 1: At its core, CleanSlate uses HTML, CSS and Javascript to create themes. If you need to brush up on any of these technologies, check out the Introduction to HTML and the Learn CSS courses on Codecademy.

NOTE: While technically not required, most CleanSlate themes use Sass ("CSS with superpowers") as a language that compiles to CSS. To brush up on how to use Sass, check out the Learn Sass course on Codecademy.

Step 2: Knowing some command line basics will help you navigate your file system and interact with a CleanSlate theme via Git. To learn the basics of traversing the command line, visit Codecademy's Learn the Command Line. Lesson 1 deals with file system navigation.

Step 3: CleanSlate uses Git to version control our themes and keep everything and everyone up-to-date. If you're not familiar with Git, visit:  

Knowing the following git commands are essential to working with CleanSlate themes: git status, add, commit, push, pull and clone.

We cover what prerequisites you need to know in video #3 of the CleanSlate Theme Developer Tutorial Series and suggest resources that will help you get up to speed.

CleanSlate Theme Development Tutorial Series
Video #3 Prerequisites

Local Setup

Once you're ready to make changes to a theme, you have to get the theme on your local computer to make your changes.

Step 1: Clone the theme repository from Bitbucket in the ~/Sites/cleanslate_themes directory on your local computer. You may need to make a Sites folder and a cleanslate_themes folder if you have not done so already. If you need a refresher on how to use Git, refer to the Requirements section above.

Step 2: If you are using a Mac you will need to adjust your computer settings to  view hidden files in your theme.

We cover how to set up your local machine for CleanSlate theme development in video #6 of the CleanSlate Theme Developer Tutorial Series.

CleanSlate Theme Development Tutorial Series
Video #6 Setting up your computer for CleanSlate theme dev.


Create Your Theme

CleanSlate Theme Development Tutorial Series
Making a CleanSlate Theme


Step 1: Use the WVU Design System, Supertheme or Brand Patterns as your theme. Before you start writing code, we strongly recommend you download and use the Design System, Supertheme or Brand Patterns as a starting point for your CleanSlate theme. These templates are approved, accessible, and branded. It's likely that the repository you requested from the "Make a Request" section above will already have one of these boilerplates added to the theme.

Step 2: Structure your theme the right way. Every theme in CleanSlate needs to have the correct theme structure. Without the correct structure, your theme will not work in CleanSlate. Visit  Theme Creation Rules to learn more about setting up a new CleanSlate theme. You should also check out the CleanSlate Toolkit boilerplate for a working, barebones example of a theme's structure.

Theme Creation Rules

Step 3: Make your template D.R.Y. Learn how to use  layouts and the r:yield tag to make your template more flexible.

Layouts and r:yield

Step 4: Make use of Radius/Liquid tags specific to CleanSlate. These could include Partials, Editable Regions and Radius/Liquid tags to create navigation. See Convert a Theme to CleanSlate or use the Tag Index to reference all of the available Radius/Liquid tags for CleanSlate theme development.

Convert a Theme to CleanSlate

Tag Index


Add Your Theme to CleanSlate

Step 1: Git add, commit, push and then sync. To make your changes live you will need to push your local theme changes using Git and then sync your theme in CleanSlate. 

Make Your Changes Live

Step 2: Start adding content to your site. Visit the  content publishing section of this site to learn more about managing your content.  

Content Publishing

Step 3: CleanSlate employs a 10 minute cache for themes and content changes. If you make a change and don't see it reflected in production, it's likely due to the cache. To learn how to bypass the cache and see your changes immediately, see our documentation on Caching in CleanSlate.


Working Locally

You may tire of having to make a change to HTML, CSS or Javascript, then commit the change, push, and Sync Theme in CleanSlate. Luckily, you can develop your CleanSlate theme locally.  Hammer Virtual Machine is a virtualized theme development tool for the CleanSlate CMS template rendering engine. Hammer was created to help you iterate quickly on themes and template markup on your local computer.

Hammer

Learn how to install Hammer VM in video #14A of the CleanSlate Theme Development Tutorial Series and how to work with Hammer VM in video #14B.

CleanSlate Theme Development Tutorial Series
Video #14 Part 1: Hammer VM install


CleanSlate Theme Development Tutorial Series
Video #14 Part B: Using Hammer VM to work on themes locally

Launching the Site

Step 1: You must submit your designs via ConceptBoard.

Give us at least 5 business days to review your design upon submitting your original concept. You can submit images or a link to a *.sandbox site. We will provide feedback in the board comments and give you the go-ahead to build the site (if you haven't already done so). Once you think you are ready to go live, submit the website for formal approval. You must submit your final *.sandbox.wvu.edu URL at least one week prior to your intended launch date. Please include Adam Glenn and Mike Esposito on the approval request, and ONLY these approvers. Mike and Adam G. will sign off on your design.

Step 2: Submit the Website Launch and URL Request Form.

This is the final step to launch your website in production. When submitting the request, please allow ample time for confirmation of approval, DNS registration, service assignment, and remaining system configuration tasks.



Where to go next:

Continue reading the pages nested under this Getting Started Guide:

Last updated on July 15, 2024.

We welcome all questions, feedback and bug reports. If you're having an issue, we usually need the following information:

  • A brief description of the issue
  • A link to the page where you saw the issue
  • Screenshots that illustrate the problem - How do I take a screenshot?

Kindly email CleanSlate@mail.wvu.edu for help or use the form on the request help page.