VJ Pattern Library

VJ Pattern Library

The Visual Journalism Pattern Library is a living library of reusable patterns and components that acts as a single source of truth and a communication aid for Development, Design and Editorial teams.

Installing the project

Clone the project: git clone https://github.com/bbc/news-vj-patterns.git

Install dependencies: npm i

Build site and start the server: npm start

View in your browser: http://localhost:8000/public

Deploying updates

If you've added a new component, updated an existing one or made a change to the global output of the pattern library, you can run npm run publish to compile the latest pattern library and automatically deploy the output to the gh-pages branch so that it is visible to the world.

Pattern library architecture

Input

Most of the content used to render the component lives in the component itself, in its package.json and README.md files. This information is parsed/copied and used in the component rendered preview.

Additionally, there is a data/ folder which contains a JSON file for some components. This file denotes how the component will render in the Pattern Library. If the file is missing for a component, certain defaults are used - see below:

{
    "simpleFramework": true, // can be consumed by the Simple Framework? Default: true
    "previewable": true, // can be previewed in the Pattern Library? Default: true
    "example": {
        // properties used by the component to populate the preview. Default:
        // { "value": "This is a default test value" }
        "foo": "bar"
    }
}

Output

Each component will have its own HTML file, e.g. h2.html, which is generated from templates/[component].html.hbs. This contains the whole page (menu, header, footer, etc).

If the component is previewable, it will also have a preview file, e.g. h2-preview.html, which is generated from templates/[component]-preview.html.hbs. This is the file that is pulled into the preview in the iframe on the right hand side of the component page.