generator-cwf-theme

Generates a Drupal CWF Bootstrap base theme


Keywords
drupal, drupal 8, boostrap, bootstrap 4, drupal starter kit, task runner, builder, npm, yeoman-generator
License
Apache-2.0
Install
npm install generator-cwf-theme@0.1.51

Documentation


BYOB
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.

npm version

InstallationConfigurationNPM scriptsDrupal ThemeLicense

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-theme

Then generate your new project:

# You need to create folder first, and then inside it run:
yo cwf-theme

Configuration

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.

🤘🤘🤘 Be patient, it does a lot of work for you, copies the Bootstrap files to the theme, enables all needed libraries, generates npm build scripts, creates an icon font and/or icon sprite, generates a basic HTML test page for Bootstrap elements...

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