Template Basics
===============
This page shows the minimal HTML structure every Feather Flow template needs.
You will create the first file of the Demo Planner running example - a single
cover page with a background image and a title.
**Key topics**
* Minimal HTML boilerplate for a planner template.
* The ``base`` variable and how it keeps asset paths working.
* The ``.page`` div pattern and page sizing.
* Adding a full-page background image.
* Generating the HTML output with pyplanner.
Minimal template
----------------
Create a new file ``planners/demo/demo.html`` with the following content. The
``planners/demo/`` directory and its ``assets/`` subfolder already exist in the
repository with pre-made background images. Our Demo Planner uses half-letter
paper (5.5 x 8.5 in):
.. code-block:: html+jinja
Demo Planner
There are a few things to notice here.
The ``base`` variable
~~~~~~~~~~~~~~~~~~~~~
Every template receives a ``base`` variable. Prefix every asset path with it:
.. code-block:: html+jinja
Pyplanner sets ``base`` to the template's directory path so that asset references
work regardless of where the output file is written. For PDF generation it
becomes an absolute ``file://`` URI so the headless browser can find every
asset.
The ``.page`` div
~~~~~~~~~~~~~~~~~
Every planner page lives inside a ``
