handlebars-atomic-design-helpers

2.1.0 • Public • Published

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.

Readme

Keywords

none

Package Sidebar

Install

npm i handlebars-atomic-design-helpers

Weekly Downloads

4

Version

2.1.0

License

MIT

Last publish

Collaborators

  • tviplayer