Creating a New Theme - CMCC 10

Last updated 15 days ago

This guide has multiple versions

CMCC 11
CMCC 10

Learn how to create a new theme in the Frontend Workspace

What you'll learn

Building a theme foundation that can be extended to meet your needs

Prerequisites

Node.js
Frontend Workspace

Time matters

Reading time: 3 to 5 minutes

Should I read this?

This guide is for Frontend Developers.

The CoreMedia Frontend Workspace provides a script to easily create a new minimum theme skeleton, including brick configuration and theme inheritance. It works on macOS, Windows, and Linux.

Quick Overview

yarn install
yarn run create-theme <name>
yarn install
cd themes/<name>-theme

Installation

Run yarn install. The script is now ready to be used like all provided scripts.
Verify that you have Node = 14.x on your machine. You can use nvm to easily switch Node versions between different projects.

This tool does not need a Node backend. The Node installation is only required for tooling.

Usage

To create a new theme, run (replace <name> with a name according to the note below):
```
yarn run create-theme <name>
```
This will create a directory with the pattern <name>-theme inside the themes folder, containing the initial theme structure as described in Theme Structure.

The tool lets you decide which bricks you want to include into your dependencies when creating the theme and asks if you want to keep the unused bricks as commented out dependencies in your newly created theme. It also allows you to select an existing theme as the parent of the new one. Learn more about how to extend themes in Theme Inheritance.
Run yarn install from the root of the Frontend Workspace to install the dependencies of the new theme before the theme can be used.
Switch into the newly created directory with cd themes/<name>-theme and start working.

The theme name should be a simple ASCII name. Whitespace and special characters are stripped, and the name will be lowercase.

This guide has multiple versions

CMCC 11
CMCC 10

Is this page useful?