Templating

Headstart combines a solid HTML foundation, based on the HTML5 Boilerplate, with light templating support through Handlebars, making the task of managing menu structures, sidebars or footers across multiple pages a lot less intensive.


Layout and Partials

Using layouts is completely optional, but by default you are provided with header.html and footer.html layout parts to lighten up your main content files.

Partials can be used for extracting any piece of your HTMLto make it reusable. For example, a footer with a link might be placed in a file like templates/partials/page_footer.html:

<footer>
    <a href="thebestpage.html">This is a great link to click on</a>
</footer>

Putting your pages together

This is how the default index page would look like when using the page_footer.html partial that was mentioned above:

{{> layout/header}}

<!-- Your HTML here -->
<p>Welcome to Headstart, off you go!</p>

{{> partials/page_footer}}
{{> layout/footer}}

Targeted individual pages

It is possible to make small changes to the templates for an individual page by using this equal statement:

{{#equal templateName 'your-page.html'}}
<!-- Some HTML here -->
{{/equal}}

This makes it easy to have eg. underlined menu items, different <title></title>, etc.


Next step: Asset Conventions