H 4 H Theme Style Guide

This application is a living style guide, generated from KSS documented styles.

Getting Started

If you haven't yet, install nvm: https://github.com/creationix/nvm

Run the following commands from the theme directory

Use the right version of node with:

nvm use

This command will look at your .nvmrc file and use the version node.js specified in it. This ensures all developers use the same version of node for consistency.

If that version of node isn't installed, install it with:

nvm install

Install npm dependencies with

npm install

This command looks at package.json and installs all the npm dependencies specified in it. Dependencies include gulp, autoprefixer, gulp-sass, etc.

Compiles Sass

npm run compile

This will perform a one-time Sass compilation.

Runs the watch command

npm run watch

This is ideal when you are doing a lot of changes in Sass and you want to make sure every time there is a change it automatically gets compiled to CSS.

Cleans complied directory

npm run clean

This will perform a one-time deletion of all compiled files within the dist/ directory.

Lints JS and SCSS files

npm run lint

This will lint all JS and SCSS files within the 'components' directory. Any directory named 'vendors' will be ignored.

Concat CSS files

npm run concat

This will concatenate all CSS files paying special attention to the order. This concatenated file isn't used within Drupal.