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.
    ​PHP 7.1​
  2. 2.
    ​Node (we recommend NVM)​
  3. 3.
    ​Composer​

Picking a version:

  • 2.x - Drupal 8.x compatible
  • 3.x - Drupal 9.x compatible

Inside a Composer-Based Drupal Instance

  1. 1.
    Require emulsify in your project. composer require emulsify-ds/emulsify-drupal
  2. 2.
    Move into the contrib Emulsify theme directory.cd web/themes/contrib/emulsify-drupal
  3. 3.
    Create your new custom theme by cloning emulsify php emulsify.php "THEME NAME" (Run php emulsify.php -h for other available options)
  4. 4.
    Move into your new custom theme directory cd ../../custom/THEME_NAME/
  5. 5.
    Install the theme dependencies npm install
  6. 6.
    Build theme npm run build
  7. 7.
    Enable your theme and its dependencies*drush then THEME_NAME -y && drush en components emulsify_twig -y
  8. 8.
    Set your custom theme as the default drush config-set system.theme default THEME_NAME -y
* drush then is the correct command for Drush versions >= 9. drush en is the command to use for Drush versions <= 8.
Troubleshooting Installation: See Drupal Installation FAQ.
Note: Once you've created your custom theme, you can remove Emulsify as a dependency of your project. If you'd like to get updates as we push them, solely for educational/best-practice information, feel free to leave it in and receive the updates. Updating Emulsify will not affect your custom theme in any way. You should not however enable both projects - only your custom theme.
If you do decide to remove the Emulsify Drupal dependency, make sure to move the two requires from its composer.json into your project-root composer.json. (The components, and emulsify_twig modules are required for your custom theme to function, and need to be required somewhere in the composer chain.)

Standalone (for prototyping outside of a Drupal install)

  1. 1.
    Clone Emulsify Drupal to your preferred location.
  2. 2.
    cd into that directory and run php emulsify.php "New Theme" --machine-name new_theme --path none. This will create your custom instance next to the one you cloned (you can now delete the git cloned version).
  3. 3.
    cd into your new_theme and run npm install
  4. 4.
    Now you can run npm run develop to start working on the components in isolation.
Previous
Emulsify Design System
Next
Basic Usage
Last modified 9d ago
Copy link
Contents
Installation
Requirements
Picking a version:
Inside a Composer-Based Drupal Instance
Standalone (for prototyping outside of a Drupal install)