handlebars-atomic-design-helpers v2.1.0

Handlebars Atomic Design Helpers

A set of helpers to make writing CSS/HTML components using an atomic design library easier.

Installation

npm install --save handlebars-atomic-design-helpers

Usage

You have to first create an atomic component library with subfolders atoms, molecules and organisms with handlebars templates for each component such as:

./atomic-library/atoms/kittens/kittens.hbs
./atomic-library/molecules/basket/basket.hbs
./atomic-library/organisms/cattery/cattery.hbs

They're nested in folders of the same name so you can place CSS and behaviour JS in the same place.

You can then load the library using javascript:

const helpers = require('handlebars-atomic-design-helpers');
const renderer = handlebars.create();

helpers.register(renderer, path.resolve(__dirname, './atomic-library'));

const template = renderer.compile(yourTemplateContentsHere);
console.log(template({
  kittens: [
	'One',
	'Two',
	'Meow'
  ]
}));

Then from within your template you can use:

{{{atom "kitten"}}}
{{{molecule "basket"}}}
{{{organism "cattery"}}}

To load in your atomic components.