Skip to main content

Theme Creation Rules

When making CleanSlate themes, you must follow the following rules when making a theme:

  • Your theme must have the following four folders at the top level and they must be named: images, javascripts, stylesheetsand
    • Within viewsyou must have a layoutsfolder.
    • Inside the layoutsfolder, you must have a default.htmlfile.
    • Inside your viewsfolder, you must have a template called frontpage.html. You're probably also going to want a template called backpage.htmlif your theme has more than one page.
  • Your theme must have a config.ymlfile in the root.
  • Your theme should have a .gitignorefile in the root.
  • Your theme should have a README.mdfile in the root that has:
    1. Your theme's name
    2. A short description of your theme
    3. Your (the developer's) name
    4. The Bitbucket Repository URL
    5. Site URL
    6. A list of any required dependencies or software needed to work with the theme (e.g., if you're using Sass, you could say that you used GulpJS and Gulp Sass to make the site). Please include version numbers here, if appropriate.
    7. Any other notes, comments or reminders that would be helpful to those unfamiliar with the project.

Directory structure for themes in CleanSlate

Your theme's structure should look similar to the image above. You should check out the CleanSlate Toolkit boilerplate for a working example of a theme's structure.

Note:You can have other top level folders in your theme; however, they will not be publicly readable from your site's URL (e.g., will not load in your browser).

Note 2: There is one exception to the folder rule. You can have a folder named public and it will be publicly readable. You can put anything in there you like; however, it shouldn't be CSS or javascript. We usually put fonts in the public folder at public/fonts. The code repository makes use of the public folder.

Last updated on January 4, 2021.

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 for help or use the form on the request help page.