Menu icon Foundation
Help Using zf-Handlebars

Foundation 6 is using HandlebarsJS to create the HTML output to the dist file. I am curious will there be additional documentation about how to expand this feature? As I currently can't even find what file in Foundation 6 is dictating {{> body}}.

The following structure is something I would like to achieve:

globals
- header.html
- footer.html
- styles.html
- scripts.html
...

layouts
- default.html

pages
- one-column.html
- two-column.html
- three-column.html
...

partials/components
- sign-up.html
- hero.html

The basic idea is to spin off the core templates and adding the ability to have reusable chunks for every template. I know this is achievable using just handlebars, However, Foundation 6 has already setup a handlebar instance and would like to enhance it even further.

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta class="foundation-mq">
    <title>{{Title}}</title>
    <meta name="description" content="{{description}}" />
    {{> styles}}
</head>
            
<body>
    {{> header}}
    {{> body}}
    {{> footer}}
    {{> scripts}}
</body>
         

#pages/two-column.html

<div class="medium-28 columns">

    <!-- Main Column -->

</div>

<div class="medium-8 columns">

    {{> parital/sign-up}}

</div>

foundation 6Handlebarstemplates

Foundation 6 is using HandlebarsJS to create the HTML output to the dist file. I am curious will there be additional documentation about how to expand this feature? As I currently can't even find what file in Foundation 6 is dictating {{> body}}.

The following structure is something I would like to achieve:

globals
- header.html
- footer.html
- styles.html
- scripts.html
...

layouts
- default.html

pages
- one-column.html
- two-column.html
- three-column.html
...

partials/components
- sign-up.html
- hero.html

The basic idea is to spin off the core templates and adding the ability to have reusable chunks for every template. I know this is achievable using just handlebars, However, Foundation 6 has already setup a handlebar instance and would like to enhance it even further.

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta class="foundation-mq">
    <title>{{Title}}</title>
    <meta name="description" content="{{description}}" />
    {{> styles}}
</head>
            
<body>
    {{> header}}
    {{> body}}
    {{> footer}}
    {{> scripts}}
</body>
         

#pages/two-column.html

<div class="medium-28 columns">

    <!-- Main Column -->

</div>

<div class="medium-8 columns">

    {{> parital/sign-up}}

</div>
Julian Ćwirko over 3 years ago

You can download advanced template and go follow the instructions from here: http://foundation.zurb.com/sites/docs/starter-projects.html#zurb-template

Then you can read more about Panini here: http://foundation.zurb.com/sites/docs/panini.html it is responsible for managing handlebars templates in the advanced starter kit from the link above.