CWF DRUPAL THEME GENERATOR
Generates a starter kit theme based on Build Your Own Bootstrap principle,
with best practices we at Circle Web Foundry use on our projects.
Installation • Configuration • NPM scripts • Drupal Theme • License
Installation
First, install Yeoman and generator-cwf-theme using npm (we assume you have pre-installed node.js).
npm install -g yo
npm install -g generator-cwf-themeThen generate your new project:
# You need to create folder first, and then inside it run:
yo cwf-themeConfiguration
The generator will ask you a bunch of questions to get you up and running. Most of these are self-explanatory, but some maybe not so much.
- Would you like to create your own Icon Font
- Creates a npm script so you can generate your own Icon Font, set with all SCSS mixins. - Would you like to use Svg sprites?
- Creates a SVG sprite that is included in the theme and can easily be used in Twig templates.
NPM scripts
The generator will build a set of npm scripts.
To run each command type npm run "COMMAND_NAME", here's a list of commands:
| Command | Does... |
|---|---|
scss-lint:fix |
Lints the SCSS files following the rules set in the .stylelintrc file and if can fixes errors and warnings |
lint:js |
Lints the JS files using the rules in .eslintrc.json following the Drupal standards. |
lint:fix |
Tries to automatically fix linted JS errors and warnings. |
image:min |
Minifies images in the src/images directory and moves them to the /dist/images folder. |
favicon |
Will convert the favicon.svg file to the appropriate ICO file. |
css:scss-lint |
Lints the SCSS files following the rules set in the .stylelintrc file. |
css:scss |
Compiles all SCSS files from src/scss to dist/scss. |
css:prefix |
Autoprefixes files following settings from the .browserslistrc file. |
serve |
Start a new server with the url you entered and watches for CSS & JS file changes in the dist folder. |
image:icons |
Generates an icon font from all the SVG files in the scr/images/icons folder. |
watch:icons |
Watches the scr/images/icons folder for changes |
image:sprite |
Compress separate SVG files from scr/images/svg and combines them into one SVG "sprite". |
watch:svg |
Watches the scr/images/svg folder for changes. |
build:images |
Runs all image related scripts: icons, sprites and image minifications. |
build:js |
Minifies the main JS file. |
build:css |
Runs all SCSS and CSS related scripts. |
build |
Runs all build scripts. |
watch:css |
Watches SCSS files for changes and runs all related scripts. |
watch:images |
Watches all image files for changes and ... runs all related scripts. |
watch |
WATCHES ALL FILES AND RUNS APPROPRIATE SCRIPTS |
TL;DR npm run build and npm run watch is all you need.
Drupal theme
From the generator a new Drupal base theme will emerge.
You should immediately go to the theme settings page and check out what's there.
License
Apache-2.0 © Ivan Buisic
