brandai/starterkit-mustache-brandai

StarterKit for Brand.ai integration with Pattern Lab

starterkit-mustache-brandai

A pattern tree built for the Brand.ai and Pattern Lab integration., _(*1)

Installation

You can import the StarterKit using one of the following commands:, _(*2)

PHP

``` bash php core/console --starterkit --install brandai/starterkit-mustache-brandai, <sub>(*3)</sub>

#### Node


``` bash
npm install brandai/starterkit-mustache-brandai
gulp patternlab:loadstarterkit --kit=starterkit-mustache-brandai

Note: use --clean=true if you want Brand.ai patterns to replace your current patterns, otherwise keep it false., <sub>(*4)</sub>

You can learn more about Pattern Lab StarterKit installations in the Pattern Lab wiki: https://github.com/pattern-lab/patternlab-node/wiki/Importing-Starterkits., <sub>(*5)</sub>

Description

• In this StarterKit you'll find patterns that display your style data from Brand.ai under BRANDAI menu item. Pattners:, <sub>(*6)</sub>

  • Colors
  • Fonts
  • Typography
  • Logos
  • Icons
  • Images

• You can use these elements and your style data as standard Pattern Lab components, and the data as mustache data access flow., <sub>(*7)</sub>

• Note: for a font to be rendered correctly, include your font directly in Pattern Lab.

Synchronizing data

This starter kit contains style-data.json representing an example project from Brand.ai., <sub>(*8)</sub>

To have Pattern Lab use data from your design library, replace the default style-data.json with the style-data.json that's available for your design library. You can find the latter by visiting the data export app on Brand.ai. See an example data export page., <sub>(*9)</sub>

You can download the style-data.json file and copy it to your source folder. Alternatively, you can automate this process by running a brandai-cli command. This makes it easy to update Pattern Lab as your design library changes., <sub>(*10)</sub>

Here's how you'd do it., <sub>(*11)</sub>

To use the cli

npm install brandai-cli --global

Then execute the below command that will download the JSON style data from Brand.ai and copy it to the destination folder., <sub>(*12)</sub>

brandai json --dest source/_data --organization <organization> --library --<design library>

More details can be found in brandai-cli, <sub>(*13)</sub>