Create a new D9 theme

Mediacurrent Theme Generator

The Mediacurrent theme generator is a scaffolding tool that has evolved with the years to provide a production-ready Drupal 8 theme that is component-based ready out of the box.

Exercise: Create a new D9 theme

Watch the video tutorial, or follow the instructions below.

  1. In your Drupal 8 site, create a new folder for your theme (i.e. /themes/custom/training_theme). Although you can use any name you wish, all exercises in this curriculum use training_theme.

  2. In your command line app, change into the newly created directory (training_theme), type the following command and press Return:

nvm install 14.16.1 && node -v > .nvmrc

The command above will install the NODEJS `14.16.1` and create a new hidden file in your project called .nvmrc where that version of Node will be declared as the default version for this project.

  • Next run this command:

npm install -g npm@6.14.12

The theme generator is compatible with NPM 6.

  • Run the following command:

npm create yo mc-d8-theme

Respond to the on-screen prompts as follows:

  1. Assign a Human readable name to your theme

  2. IMPORTANT: When the What is your theme's machine name? question comes up, be sure it matches the name of the directory you created above (i.e. training_theme).

  3. Type a description for your theme

  4. Select Use stable as your base theme

  5. Type Y and press Return when Should we update the .gitignore to ignore compiled files? comes up. This will hide /dist from git to avoid having to commit already compiled files.

  6. While you can select any demo components from the list, we recommend the following ones:

    1. Drupal Messages

    2. Drupal Tabs

WARNING: The theme's machine name should always match the directory you created in the first step above (i.e. training_theme).

  • After the theme has been successfully created, type the following commands from the theme's root:

npm run build

npm run watch

  • Click the URL provided at the end of the last command's output (http://localhost:3000\), to access Pattern Lab.

If you wish to access Pattern Lab using Drupal's URL, use the following path:

If you don't have HTTPS enabled, use HTTP in the url above.

Resources

Project: https://github.com/mediacurrent/theme_generator_8

PreviousFront-end toolingNextComponent Architecture

Last updated