HTML

The following templating concepts are optional. As an alternative, you can simply use the final HTML files from the dist/ folder.

Nunjucks

With Nunjucks, you'll be able to compile the HTML source files from src/html to dist/ using a rich and powerful templating language. You can read more about Nunjucks on the official website https://mozilla.github.io/nunjucks/

Nunjucks Variables

A variable looks up a value from the template context. If you wanted to simply display a variable, you would do:

{% set username = "joe" %}
{{ username }}

This looks up username from the context and displays it. Variable names can have dots in them which lookup properties, just like javascript. You can also use the square bracket syntax.

{{ foo.bar }}

https://mozilla.github.io/nunjucks/templating.html#variables - reading variables
https://mozilla.github.io/nunjucks/templating.html#set - setting variables

Nunjucks Template Inheritance

Template inheritance is a way to make it easy to reuse templates. When writing a template, you can define "blocks" that child templates can override. The inheritance chain can be as long as you like.

If we have a parent layout template in src/html/layouts/example.html that looks like this:

{% block header %}
This is the default content
{% endblock %}

<section class="left">
  {% block left %}{% endblock %}
</section>

<section class="right">
  {% block right %}
  This is more content
  {% endblock %}
</section>

Then a child template or page from src/html/pages/my-page.html can extend this layout:

{% extends "layouts/example.html" %}

{% block left %}
This is the left side!
{% endblock %}

{% block right %}
This is the right side!
{% endblock %}

The output in dist/my-page.html would be:

This is the default content

<section class="left">
  This is the left side!
</section>

<section class="right">
  This is the right side!
</section>

https://mozilla.github.io/nunjucks/templating.html#template-inheritance - template inheritance concept
https://mozilla.github.io/nunjucks/templating.html#super - rendering the parent block
https://mozilla.github.io/nunjucks/templating.html#extends - extending a template
https://mozilla.github.io/nunjucks/templating.html#block - template sections
https://mozilla.github.io/nunjucks/templating.html#include - include template partials

Front Matter

Any page in src/html/pages can contain a YAML front matter block and will be processed as a special file. The front matter must be the first thing in the file and must take the form of valid YAML set between triple-dashed lines. Here is an example from src/html/pages/index.html:

---
title: Dashboard
slug: index
layout: app
new_button_label: New Report
breadcrumb:
- title: Dashboard
---
{% extends 'layouts/account.html' %}

Table of Contents

Frontend Matter

Beautifully crafted Bootstrap themes and templates for modern web apps.

Themes

Templates

Company

Illustrations by Freepik Storyset