Mediacurrent Theme Generator
A scafolding tool built by your friends at Mediacurrent, to quickly build a modern, component-driven, Drupal 8 or 9 theme.
Yeoman generator for Drupal Themes - lets you quickly set up a Drupal 8 theme with sensible defaults and best practices.
- What's New
- Using the Theme Generator
- The New Theme
Using the Theme Generator
First a note about using Node.js via NVM
While not a requirement we like to use NVM to manage the version of Node per project.
While the theme generator can be run anywhere, it's happiest when it's run from an empty directory you'd like to become your theme.
Create a new Drupal theme
Create a new directory. Example:
Move into the new directory you created above, and install Node:
nvm install 12.10.0 && node -v > .nvmrc
This will install version
v12.10.0of NodeJS (Preliminary tests have shown issues with newer versions of node at this time).
It will create
.nvmrcin the root of your project.
Next we want to make sure our package manager is up to date:
From now on, when working on this theme change into its directory and run
nvm useand NVM will switch to the specified version for you.
Create a new theme (Do not change this command):
npm create yo mc-d8-theme
You should be taken through a series of questions that allow you to pick the best options for your theme.
IMPORTANT: Your theme's machine name should always match the directory name you created in step 1 above.
More info if you're interested in how this stuff works:
The New Theme
Drupal Module Dependencies
The following is supported by your new theme.
- Pattern Lab (Node)
- Component-Based Workflow
- ES6+ (With Source Maps)
- Image Compression
- Live reloading
The theme generator allows you to (optionally) add example components.
- Card List
- Drupal Messages (Based off of the Classy base theme)
- Drupal Tabs
These can include both component and Drupal templates that are added to the appropriate place during theme generation. Your theme.libraries.yml is also updated to include the relevant libraries.
This can also be run within a pre-existing theme using:
npx yo mc-d8-theme:starter-kit
Crate new Components
You can also generate base components with the right files in place using:
npm run generate
This is helpful if you are building out a new theme and would like to quickly create lots of new components with the libraries already wired up.
A Word About Commiting ./dist Files
TLDR: Don't do it if you can avoid it.
Every time Pattern Lab is rebuilt the cache busting strings will change on CSS and JS files.
dependencyGraph.json will also be updated every single time which makes reviewing pull requests rather difficult.
Optimally we want to gitignore all
/.dist files and run
npm run build as part of a continuous integration process.
Stuff You Might Want To Change
Change what browsers your theme supports by updating browserslist within
package.json. For options take a look at browserslist.
- Swap out
screenshot.pngwith your own theme image.
- Remove or replace the font files in
- Change the colors in
Provided by default are seven npm scripts that point to Gulp tasks. We run gulp through npm scripts.
Run the default build task (gulp in this instance) and everything in it. This is the equivalent to running
gulpon the command line with Gulp installed globally.
npm run build
Compile Sass and JS.
npm run compile
Watch files and run tasks when they change.
npm run watch
Compress png and svg assets.
npm run compress
Build Pattern Lab.
npm run styleguide
Lint Sass and JS files.
npm run lint
Delete compiled Sass, JS and style guide files from the /dist directory.
npm run clean
Would you like to contribute? Want to make a few changes or fix a bug? COME ON OVER!
Clone down this repo
git clone firstname.lastname@example.org:mediacurrent/theme_generator_8.git
generator-mc-d8-theme if you have previously installed it:
npm ls -g -depth=0 to see what global node modules are installed.
npm uninstall generator-mc-d8-theme -g
Use the node version of the generator
nvm install nvm use
Install the generator's dependencies
Link your local generator files to npm:
Now whenever you run
yo mc-d8-theme it'll use your locally cloned mc-d8-theme generator. Any updates done to the generator can be tested in real time.
Break off a feature branch dive right in. After you've got something you'd like to add, push back to the repo and pull request against develop.
To test the changes you've made locally, ensure your new theme uses the same version of node as the generator.