Search…
Emulsify Design System
Starters
Emulsify Drupal
Basic Usage
Advanced Usage
FAQ
Systems
Compound
Supporting Projects
Emulsify CLI
Twig Extensions
Webpack & Babel
Style Guide
Gatsby Theme Emulsify
Resources
Help and Support
Component-Driven Design
Packaging For Multiple Properties
Powered By GitBook
Emulsify Drupal
Install the component library (Storybook/Webpack) for prototyping and/or as a Drupal theme

Installation

Requirements

  1. 1.
    ​Node (we recommend NVM)​
  2. 2.
    ​Emulsify CLI (Not strictly recommended, but all docs will assume its use)

Picking a version:

  • 4.x - Drupal 9.x compatible
  • 2.x - Drupal 8.x compatible (No longer supported)

Inside a Composer-Based Drupal Instance

The recommended method of installing the Drupal Starter is via the Emulsify CLI. Before you follow the steps below, verify you have the CLI installed npm install -g @emulsify/cli.
Here's a video walkthrough that quickly shows these steps, plus a little more about the CLI
  1. 1.
    In your project root, initialize a theme based on the Drupal starter emulsify init "My Awesome Theme" (Using your preferred theme name)
  2. 2.
    Move into your new theme cd web/themes/custom/my_awesome_theme
  3. 3.
    Install the Compound system emulsify system install --repository https://github.com/emulsify-ds/compound.git --checkout 1.1.0
  4. 4.
    Build theme npm run build
  5. 5.
    Enable your theme and its dependencies* **drush then THEME_NAME -y && drush en components emulsify_twig -y
  6. 6.
    Set your custom theme as the default drush config-set system.theme default THEME_NAME -y
  7. 7.
    See the FAQ for the final step to avoid the .git can't be found error
* drush then is the correct command for Drush versions >= 9. drush en is the command to use for Drush versions <= 8. ** if it's not already a part of your project, run composer require drupal/components drupal/emulsify_twig to get the required Drupal modules.

Standalone (for prototyping outside of a Drupal install)

  1. 1.
    Install the starter at your preferred location, and pass a starter* (like Drupal) emulsify init "My Awesome Theme --platform drupal . (The preceding snippet uses . to indicate "the current location")
  2. 2.
    cd into that directory and install your system. emulsify system install --repository https://github.com/emulsify-ds/compound.git --checkout 1.1.0
  3. 3.
    Now you can run npm run build to simply compile things, or npm run develop to start working on the components in isolation.
  4. 4.
    See the FAQ for the final step to avoid the .git can't be found error
* If you don't pass a starter, the CLI will try to figure out your environment, but if it can't it'll fail. By passing one explicitly the CLI skips the "try to figure it out" step, and just uses what you pass.
Previous
Emulsify Design System
Next
Basic Usage
Last modified 4mo ago
Copy link
Contents
Installation
Requirements
Picking a version:
Inside a Composer-Based Drupal Instance
Standalone (for prototyping outside of a Drupal install)