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.
- gulp: Task runner to automate development tasks
- gulp-sass: Sass plugin for Gulp.
gulp-sourcemaps: To generate the sourcemaps
gulp-autoprefixer: To add vendor prefixes
eslint: To validate JS code
stylelint: To validate SCSS code using stylint-scss
gulp-imagemin: To minify PNG, JPEG, GIF and SVG images
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
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
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.
To compile the assets in development mode along with generated source maps.
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.
Lastly, delete all the compiled assets.
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 uninstall -g generator-drupal-theme-init
Clone the repository and run
npm install to get all the dependencies
git clone email@example.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.
Navigate to a folder you would love to scaffold a new Drupal theme and run:
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