Motiflab NPM | npm.io

Motiflab

Motiflab is a style guide tool for building components and is similar to Pattern Lab, Fractal or Astrum but much simpler to use or get started with.

Motiflab is focused around components and not atomic design, because it tends to be too fragmented. The basic idea behind Motiflab is to support many templating engines and make it easier for developer to preview and show components.

Motiflab

Installation

Motiflab is written in NodeJS so installation is pretty simple.

npm install motiflab --save-dev

Or if you want to install it globally.

[sudo] npm install -g motiflab

Running Motiflab

Before you execute this read entire documentation.

After install you can run Motiflab by motiflab ./example/components where first argument is path to the components folder.

$ motiflab --help
Usage: motiflab [options]

  -h, --help       displays help
  --source String  folder where components are located - default: ./
  --listen Int     port on which service is listening - default: 7000
  --serve          start server

If you installed it as --save-dev you can use it from package.json file.

{
  "scripts": {
    "motiflab": "motiflab --source examples/website1/ --serve"
  }
}

Project structure

Each project has simple directory and file system.

components/
  project.json
  group-name/
    component.njk
    component.json

Groups can be nested.
Component view (component.njk) can have different name from component meta data (component.json) but it is advised they share the same name.
Assets such as JS, CSS can be hosted outside of components folder. If you use Sass you will probably have this separated.

project.json

In root of

{
  "client": {
    "name": "Example",
    "url": "https://example.com"
  },
  "breakPoints": [
    {
      "label": "Full width",
      "width": "100%"
    },
    {
      "label": "Mobile",
      "width": "360px"
    }
  ],
  "assets": {
    "css": [
      "./example/assets/style.css"
    ],
    "js": [
      "./example/assets/style.js"
    ]
  }
}

Client info is displayed in UI.
Break points are rendered as a select box and you can change all the widths of components easily.
Assets are included into each components. All you need to provide is array of relative paths to files.

Component

Each component has two files.

Template (component.njk)

<h3>{{ title }}</h3>

<ul>
  {% for element in elements %}
  <li>{{ element }}</li>
  {% endfor %}
</ul>

{% include "./partial.njk" %}

Meta data (component.json)

{
  "name": "Example card",
  "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
  "file": "component.njk",
  "engine": "nunjucks",
  "display": {
    "width": "100%"
  },
  "context": {
    "title": "nunjucks card",
    "elements": [
      "Titanium",
      "Vanadium",
      "Chromium",
      "Manganese",
      "Iron"
    ]
  }
}