Mannequin

Configuration

Mannequin configuration lives in the .mannequin.php at the root of your project. You should create this file, starting from the following example:

/**
 * Create a finder to search and list the Twig template files.
 */
$twigTemplates = Finder::create()
    ->files()
    ->in(__DIR__.'/templates')
    ->name('*.twig');

$twigExtension = new TwigExtension([
    'finder' => $twigTemplates,
    'twig_root' => __DIR__,
]);

/*
 * Create and return the configuration.  Don't forget to return it!
 */
return MannequinConfig::create()
    // JS and CSS can either be local (relative paths from the root),
    // or remote (absolute URLs)
    ->setGlobalJs(['https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.1/js/foundation.min.js'])
    ->setGlobalCss(['https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.1/css/foundation.css'])
    ->addExtension($twigExtension);

Twig Configuration

The TwigExtension is what tells Mannequin how to access your Twig templates. The mandatory arguments are the finder and the twig_root, but you can pass in twig_options as well:

<?php

$twigExtension = new TwigExtension([
    // A Symfony Finder object.
    'finder' => $drupalFinder,
    // The path to your Drupal root.
    'twig_root' => __DIR__,
    // Optional: An associative array of options
    // to pass to the Twig environment.
    'twig_options' => [
      'debug' => true
    ]
]);

For more documentation on the Finder, see the Symfony Finder documentation. For information on the twig_options array, see the Twig documentation.

The TwigExtension also has a couple additional methods you can use.

<?php
// Register a new Twig namespace so @atoms/X.html.twig loads the template
// in themes/mytheme/patterns/atoms/X.html.twig.  If you want to use
// templates from this namespace as components, be sure to add them to your
// finder as well.
$twigExtension->addTwigPath('atoms', 'themes/mytheme/patterns/atoms');

Mannequin Config

The MannequinConfig class handles configuration for Mannequin in general (the non-Drupal parts). The configuration has a number of methods you can use to define your setup:

<?php

$config = MannequinConfig::create();

// Add an extension to the Mannequin configuration:
$config->addExtension($drupalExtension);

// Set the CSS files that are used for every component.  CSS can be referenced
// using a relative path, in which case it will be looked up
// relative to your .mannequin.php, or an absolute URL.
$config->setGlobalCss([
    'themes/mytheme/css/theme.css',
    'http://example.com/theme.css',
]);

// Set the JS files that are used for every component.  JS can be referenced
// using a relative path, in which case it will be looked up
// relative to your .mannequin.php, or an absolute URL.
$config->setGlobalJs([
    'themes/mytheme/js/theme.js',
    'http://example.com/theme.js'
]);