node package manager



A gulp plugin for fabricating pages using Handlebars, JSON, and front-matter.

Turn this:

title: Document Name
name: World
<h1>{{home.greeting}}, {{name}}!</h1>
{{> button}}

into this:

<!doctype html>
<html lang="en">
    <title>Document Name</title>
    <h1>Hello, World!</h1>
    <a href="#" class="button">Click me!</a>



$ npm install --save-dev gulp-fabricate


var fabricate = require('gulp-fabricate');
var gulp = require('gulp');
gulp.task('templates', function () {
    return gulp.src('src/templates/pages/**/*')



Type: String
Default: default

Default layout template.


Type: String or Array
Default: src/templates/layouts/**/*

Files to use a layout templates.


Type: String or Array
Default: src/templates/materials/**/*

Files to use a partials/helpers.

Type: String or Array
Default: src/data/**/*.json

JSON files to use as data for templates.



  • Layouts: wrapper templates
  • Pages: individual pages
  • Materials: partial templates; registered as "partials" and "helpers" in Handlebars
  • Data: JSON data piped in as template context


Layouts are wrappers for page templates. You can define as many layouts as you want by creating .html files in your layouts folder.

Example layout:

<!doctype html>
<html lang="en">
    {% body %}

Page content is inserted in the {% body %} placeholder.

Context can be passed from a page to the layout via front matter.

The layout a page uses is also defined in front matter:

layout: custom-layout
title: My Custom Layout

This would use custom-layout.html.

When no layout property is defined, the page uses the default layout.


Pages can be templated using Handlebars.

Example page:

title: Document Name
name: World
<h1>{{home.greeting}}, {{name}}!</h1>
{{> button}}

This outputs a page that uses the default layout (since no layout was defined).

The front matter block at the top provides context to both the layout and the page itself.

Context is also piped in from data files (see below). In this example, {{home.greeting}} refers to the greeting property in home.json.


Materials are partial templates; think of them as the materials used to build pages.

They are accessible as either a "partial" or a "helper":

<!-- partial -->
{{> material-name}}
<!-- helper -->

Any file in the glob defined in config.templates.assemble.materials is turned into a partial/helper and can be accessed as such. For example, assume the components contains materials:

└── components
    ├── button.html
    └── form-toggle.html

The content within these files can be accessed in templates as such:

{{> button}}
Partial vs Helper

The main difference between materials as partial vs helper is the way in which you pass data into the material. When a material is defined as a partial, you can pass it context. When a material is used as a helper, you can pass it a "helper class" parameter, which is helpful when writing OOCSS.


Assume items is an array of items. You can pass the items to the partial:

{{> material-name items}}

Your material-name.html file could look like:

{{#each item}}


You can pass a "helper class" to the helper:

{{material-name "foo-bar"}}

Assume your material-name.html looks like:


The helper will output:

<div class="foo-bar">Material</div>


Data for templates is defined as JSON.

The data folder can contain several .json files:

└── data
    ├── home.json
    └── contact.json


  "greeting": "Hello"

The data within each file can be accessed in the templates using dot notation: