bbc/handlebars-atomic-design-helpers

Name: handlebars-atomic-design-helpers

Owner: BBC

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

Created: 2016-10-05 13:25:06.0

Updated: 2017-05-11 13:46:50.0

Pushed: 2017-01-04 12:55:53.0

Homepage:

Size: 9

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

Handlebars Atomic Design Helpers

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

Installation

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:

omic-library/atoms/kittens/kittens.hbs
omic-library/molecules/basket/basket.hbs
omic-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:

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

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

t template = renderer.compile(yourTemplateContentsHere);
ole.log(template({
ttens: [
'One',
'Two',
'Meow'

Then from within your template you can use:

tom "kitten"}}}
olecule "basket"}}}
rganism "cattery"}}}

To load in your atomic components.