You're not logged in.
  1. Documentation
  2. how to guides
  3. frontend development
  4. create new theme
  5. cmcc 10

Creating a New Theme - CMCC 10

Last updated 3 minutes ago
This guide has multiple versions

Learn how to create a new theme in the Frontend Workspace

LightbulbWhat you'll learn

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

Person reading a bookPrerequisites

  • Node.js
  • Frontend Workspace

WristwatchTime matters

Reading time: 3 to 5 minutes

Person in front of a laptopShould 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

  1. Run yarn install. The script is now ready to be used like all provided scripts.

  2. 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

  1. 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.

  2. Run yarn install from the root of the Frontend Workspace to install the dependencies of the new theme before the theme can be used.

  3. 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
Copyright © 2024 CoreMedia GmbH, CoreMedia Corporation. All Rights Reserved.
how to guides

 studio fundamentals

 quick start

 managing content

 studio development

 backend development

 frontend development

 monitoring and logging

 security

 byside