Simple Website Framework

Footer Columns

Monday April 20th, 2026

Written by Scary le Poo

The site footer is made up of columns, each one driven by a simple HTML file. Editing footer content is no different from editing any other page — open the file, change the text, save it.


Where the footer files live

All footer files are stored in pages/footer/. They must be named in sequence:

pages/footer/footer1.html
pages/footer/footer2.html
pages/footer/footer3.html

The framework automatically detects how many footer files exist, so adding or removing a column is as simple as adding or removing a file. No configuration changes are needed.


What a footer file looks like

A footer file has two optional comment tags at the top, followed by your content:

<!-- sectiontitle: My Section Title -->
<!-- footertype: html -->

<p>Your footer content goes here.</p>

The sectiontitle comment

The sectiontitle comment sets the heading displayed above that column's content. If you leave it out, the column will show a generic label like Section 1.

<!-- sectiontitle: About Us -->

The footertype comment

The footertype comment tells the framework how to treat the content in that file. There are two options:

Value Behaviour
html Content is rendered as plain HTML. Use standard tags like <p>, <a>, <ul> etc.
md Content is rendered as Markdown. Links, bold, and other Markdown formatting will work.

If you leave the footertype comment out, the framework defaults to html.


Adding a footer column

Create a new file in pages/footer/ following the numbering sequence. For example, if you already have footer1.html, footer2.html, and footer3.html, create footer4.html. The framework will pick it up automatically on the next page load.


Removing a footer column

Delete the file for the column you want to remove. If you remove a file from the middle of the sequence — for example, deleting footer2.html while footer3.html still exists — the framework will stop counting at the gap, so footer3.html will not be shown. Keep the files in an unbroken sequence.


A complete example

<!-- sectiontitle: Get In Touch -->
<!-- footertype: html -->

<p>Have a question? <a href="contact">Send us a message</a>.</p>
<p>We're also on <a href="https://github.com">GitHub</a>.</p>