How to Use Pattern Lab for Drupal 8 Theming

April 10, 2018 - 15:52

Patternlab is a dynamic organizational and prototyping tool for Drupal theming. By theming with pattern lab, your custom theme allows us to manage and build components in accordance with the required workflow using atomic design concepts1.

Using Pattern Lab for Drupal 8 Theming

Instead of rendering default Drupal templates, we can introduce pattern lab to include twig files using atomic concepts. It allows us to include external twig files by overriding the specific templates.

Steps for Installing Pattern Lab

  1. Install Node and NPM versions using NVM

    Initially we need to get the software packages from our Ubuntu repositories that will allow us to build source packages.

    sudo apt-get update
    sudo apt-get install build-essential libssl-dev

    Once these packages are installed, we can download NVM installation scripts from project’s github page.

    curl -sL  
    https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh-o install_nvm.sh

    Now inspect the installation script with nano

    nano install_nvm.sh

    Run the script with bash

    bash install_nvm.sh

    It will install the software into a subdirectory of your home directory at ~/.nvm. It will also add the necessary lines to your ~/.profile file to use the file. To gain access to the nvm functionality, we have to run the following command:

    source ~/.profile

    Now we have installed NVM, our next step is to install isolated Node.js versions. To find out the available version you can type

    nvm ls-remote

    In the output window, we can see the latest version as v8.9.4.We can install that by typing

    nvm  install 8.9.4

    Usually NVM will be switched to latest installed version or you can tell NVM to use the just downloaded version by typing

    nvm use 8.9.4

    The current version of Node can be checked by running the code

    node -v

    If you have multiplied Node-js version, you can see what is installed by typing

    nvm ls

    If you wish to set one of the version as default, you can type

    nvm alias default 
  2. Create Custom Theme (my_theme)

    NOTE: It is recommended to refer Emulsify (serves as a starter kit for Drupal 8 theme) for getting the exact folder structure and architecture of the Drupal 8 theme.

    Emulsify Drupal 8

    It is necessary to include the JS, CSS and the fonts of the dist folder into the libraries file in the custom theme.

  3. NPM Install

    Patternlab-npm-install.png
    Output:
    patternlab_packageinstall.png

  4. NPM- Start

    patternlab-npm-start.png
    Output:
    patternlab_emulsify.png

    When NPM start is completed, node packages will be installed to the custom theme and compiles the SASS files to CSS and JS added in the patterns, which is required for the generation of theme will be saved in the dist folder.

    Get in touch with us for your Drupal 8 Theming requirements!
    References:
    1. Atomic Web Design by Brad Frost

Get Drupal updates straight to your inbox

To prevent automated spam submissions leave this field empty.

Post your comments / questions