Modules

Modules are components or subcomponents that can be placed in your page or in another module. Examples are Navigation, Hero Image, Teaser or a Slideshow.

A module consists of the following files (by default):

File	Description
module.hbs	handlebars template for the html output
module.js	javascript boilerplate, initialized by the data-init="{{modulename}}" in the html output
module.md	markdown file for preview documentation
module.data.js	data structure of module, meta-informations & data

Adding a module

you can add a new module to your project by running the scaffold task

gulp scaffold

• choose module
• name your module, will be transformed to machine-code for filenames, classnames & pluginnames
• decide wether you need a JS and a CSS file, creating these files does add references in the bundling main.js and main.scss files.

Scaffold template

When creating a new module using the scaffold task a template/boilerplate is used to clone it. it is located here: ./source/modules/.scaffold. in these template-files are placeholders that get replaced with your module name {{name}}. feel free to change the templates to your project-specific needs.

Manually adding a module

If you prefer adding a module by yourself you need to add the following files in order to make it work, use the scaffold template for cloning. be sure to add all necessary files (see above).

After cloning & changing the module to your needs be sure to reference the according *.js and *.scss file in the ./source/assets/js/main.js and ./source/assets/css/main.scss

Extending modules

Meta data

Data defined in the meta object of the page.data.js is mainly used for the index-page. please refer to Index for available options.

Adding partials

In case you want to separate your module template you can add partials, this files need to have a underscore suffix, e.g. _list_item.hbs - these files have no dependencies to a data.js file and a markdown file.

Using Data

All data should be placed in the module.data.js. Defined as Javascript Object.

Passing options to the Javascript Plugin

To overwrite default options of a modules javascript plugin, you can pass options with the data-{{modulename}}-options attribute.

<div class="mod_mymodule" data-init="mymodule" data-mymodule-options='["foo": "bar"]'>...</div>

All passed options are merged with the options defined in the Javascript plugin.

Passing data to the Javascript Plugin

...