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 = ;const renderer = handlebars; helpers; const template = renderer;console;
Then from within your template you can use:
{{{atom "kitten"}}}{{{molecule "basket"}}}{{{organism "cattery"}}}
To load in your atomic components.