Mannequin HTML is a command line application that you can use to visualize and work on your static HTML files in the browser. For example, if you have a directory of separate HTML files that represent the "components" of your application, you can use Mannequin HTML to view and work on them individually.
Using Composer, install Mannequin HTML from your project root. From the command line:
$ composer require lastcall/mannequin-html
Next, create a new
.mannequin.php file in your project root. This file is where you will configure Mannequin. Inside of that file:
/** * Create a finder to search and list the static HTML files. */ $htmlFiles = Finder::create() ->files() ->in(__DIR__.'/html') ->name('*.html'); $htmlExtension = new HtmlExtension([ 'files' => $htmlFiles, '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($htmlExtension);
Setting up Components
.mannequin.php file tells Mannequin where to find your components, you still need to describe them to Mannequin. To do that, we use a
.yml file living alongside the
.html file that contains the component. For example, to describe a "Card" component living inside of
card.html, you would create a
card.yml file in the same directory that contains:
# card.yml name: Card group: Molecule
See the full YAML reference here
When you're ready to begin work on your HTML files, you can use the following worklow:
Fire up a live development server so you can see your component. From the command line:
$ vendor/bin/mannequin start
- This will output a URL for the Mannequin UI. Visit it in your browser.
- In the UI, find the component you want to work on.
- Open the HTML file, and make your changes.
- Reload the UI to see how your changes look.