I have been working with Drupal theming for quite some time now, and the most tiring task in setting up a new theme is scaffolding a theme with all the necessary tools and plugin. Although we have the Drupal console command to create a new theme it doesn't scaffold the necessary tools for me. Generally I end copying the directories and files from a previous project to assemble and build a theme.

Yeoman to the rescue

Yoeman is a scaffolding tool to set up and build web applications. It has a great number of generators available to create a project using Angular, React, HTML, etc. I extend the webapp and created a new generator which uses Twig.js

Why not use Yeoman to automate the whole scaffolding process of setting up a new theme. So, I came up with drupal-theme-init project which uses Yeoman to set up a new Drupal theme that works on Drupal 8 as well as Drupal 9. 

Drupal theme init Generator

The drupal-theme-init generator is ann open source project hosted on Github. You can check out the repository here - https://github.com/malabya/drupal-theme-init

The drupal-theme-init generator uses the following tools to scaffold a Drupal theme.

Getting started

Before starting, ensure that you are using at least the latest LTS release of Node.js, once Node.js has been installed, we recommend installing yarn

npm i -g yarn

Also install Yeoman and generator-drupal-theme-init using npm (we assume you have pre-installed node.js).

npm install -g yo
npm install -g generator-drupal-theme-init

Navigate to the themes directory and create the theme directory

cd [DRUPAL_ROOT]/themes
mkdir drupal_theme
cd drupal_theme

To generate the theme files and directories

yo drupal-theme-init

The generator will ask a few basic questions about the theme like what should be the theme human-readable name, machine name, description for the theme, base theme, and package. Please make sure that the machine name should match the directory name.

Once the files & directories are created the generator will run yarn install to install all the dependencies of the project. After which Gulp will compile the SASS & JS to build the dist directory which will hold the compiled CSS, JS & minified image assets for the theme to work.

Development using drupal-theme-init

The project provides several useful commands to develop & build frontend assets.

To compile CSS, JS & minify images in production mode i.e compressed assets without source maps. This can be used to build the frontend assets on production environments.

yarn build

To compile the assets in development mode along with generated source maps.

yarn build:dev

To compile the SASS, JS & image assets as you develop, use the watcher to make changes and have them compiled as you save as well as generate source maps.

yarn watch

Lint the ES6 JavaScript files and SASS files with eslint and stylint

yarn lint

Lastly, delete all the compiled assets.

yarn clean

Future plans

Here are a few updates which I plan to include in the project.

  • KSS Node to generate a style guide
  • Give control to the user to add the regions as per their theme requirement
  • Option to use Pattern lab (which I am planning to learn)
  • Optionally include a CSS framework like Bootstrap/Foundation
  • Have some solid tests!!!...

Contributing to the project

If you like to contribute to the project, fix some bugs or add a new feature I will be happy to accept contributions to the project in the form of feedback, bug reports and even better - pull requests 🙂

Uninstall the previous package downloaded via npm

npm uninstall -g generator-drupal-theme-init

Clone the repository and run npm install to get all the dependencies

git clone git@github.com:malabya/drupal-theme-init.git
cd drupal-theme-init
npm install

The most reasonable way to carry out an integration test is to utilize npm's link to assist us with linking the generator in the global node modules.

npm link

Navigate to a folder you would love to scaffold a new Drupal theme and run:

yo drupal-theme-init

You should be ready to go. Any changes made to the local project will reflect upon running npm link and scaffolding a new project with yo drupal-theme-init