Mannequin Style Guide

Mannequin Drupal is a command line application that you can use to visualize and work on your Drupal Twig Templates in the browser. For example, you might use it to work on the templates inside of an existing custom theme.

Currently is tested and works well with Drupal 8.

To integrate it with your theme you need to install the tool with composer.

In the root of your project run:

composer require lastcall/mannequin-drupal

When finished create a .mannequin.php in the root of the project.

<?php
// .mannequin.php
use LastCall\Mannequin\Core\MannequinConfig;
use LastCall\Mannequin\Drupal\DrupalExtension;
use Symfony\Component\Finder\Finder;

// Describe where to find Drupal templates.
// See https://symfony.com/doc/current/components/finder.html
$drupalFinder = Finder::create()
    // Templates can live in your normal templates directory.
    ->in(__DIR__.'/web/themes/mytheme/templates')
    ->files()
    ->name('*.twig');
    
$drupalExtension = new DrupalExtension([
    'finder' => $drupalFinder,
    'drupal_root' => __DIR__,
]);

return MannequinConfig::create()
  ->addExtension($drupalExtension)
  ->setGlobalJs([
    // themes/mytheme/js/theme.js  
  ])
  ->setGlobalCss([
    // themes/mytheme/css/theme.css
  ]);

Update path to your templates directory - it’s looking for .html.twig and .twig

Update path to CSS and JS.

Navigate to web folder and run: ../vendor/bin/mannequin start this will start the live dev server. This server only runs on your local.

Then navigate to the URL displayed in the command line and you will be able to see the style guide.

Meta information about components is represented in the Twig comments. To learn more about it read the documentation.