Components Demo Drupal 8 Theme

The Components Demo theme was created by Mario Hernandez of Mediacurrent for the purpose of demonstrating how to integrate components into Drupal 8.

Read the blog post

This theme was the result of a 3 part blog series titled Integrating Componens with Drupal 8.

Tools used on this theme include KSS Node for building a living styleguide, along with Gulp, Sass, and others.

For a great walkthrough of KSS Node, check out my budy's Zack Hawkins presentation from Drupal Camp Atlanta.

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. Some of the dependencies include gulp, autoprefixer, gulp-sass and others.

Runs default task

npm run build

This will run whatever the default task is.

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 Sass changes and you want to make sure every time a change is saved 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.

Possible issues and how to fix them

You may encounter the following errors while running npm install:

Can not locate gulp-cssnano, gulp-order or gulp-concat

To fix these errors you can install those plugins individually by running npm install gulp-cssnano, npm install gulp-order or npm install gulp-concat