The latest version Zen 7.x-6.x adopted Style-guide Driven Development approach. For those who are not familiar with the Style-guide Driven Development, you should watch John Albin's presentation. The new aGov distribution theme is also built on top of Zen 7.x-6.x. Style-guide Driven Development is awesome, and the latest Zen 7.x-6.x will be released very soon. However, getting started with subtheming Zen 7.x-6.x can take a lot of learning. Particularly, if we compare to the previous Zen sub-theming:

• The old zen requires: SASS and Compass, which also requires Ruby
• The new zen requires: 494 Node.js modules and 1 Ruby module (yes, Ruby is still needed, at least for now, even we have Node.js)

In order to simplify the installation, Node.js module update, and overall process. I decided to put them in containers, therefore, I can use a few commands to take care of them all. On the other hand, because the development tools will be in containers, I will never worry about Node.js or other things running even if I am not doing the Zen subtheming work on this computer.

Below is my documentation, (if you are not familiar using Docker for Drupal development, please see this short tutorial, it's extremely easy: https://insready.com/en/blog/testing-new-drupal-8-installation-2-docker-...):

Zen 7.x-6.x-dev subtheme Node.js modules installation
Go to the subtheme folder

docker run -it --rm -v "$PWD":/usr/src/app -w /usr/src/app node:5.6-slim npm install --unsafe-perm

gulp watch the development
Go to the subtheme folder

docker run -it --rm -v "$PWD":/usr/src/app -w /usr/src/app insready/zen-subtheming ./node_modules/.bin/gulp watch

Notes: all the containers above for development tools are self terminated after you stop them. Because these containers don't need to be saved.

Happy Style-guide Driven Development!

Tag: Drupal PlanetZenSASSNode.jsDockerRuby