Unlock Lifetime Full Access 50% off

Formats

The HTML edition

The HTML edition is the template itself: plain HTML, CSS and JavaScript with no framework and no build step. Every page is a file you can open, and every setting lives in a couple of small files.

2 min readUpdated Markdown for your agent

Run it locally#

Unzip it and open any page in your browser. A local server is better, because video, fonts and some scripts behave as they will online:

shell
$ npx serve .

What is in the folder#

Click through the real Halden edition. Every template follows the same idea; its own Start here page names the exact files.

Halden · HTML edition

Change the brand once#

The header, footer, menu sheet and page lists are built from one object at the top of assets/site.js. Change the brand name, legal name, contact details and links there, and every page follows:

assets/site.js open in an editor, showing the SITE object with brand Halden, legal name, email, phone, address, nav and menu entries.
assets/site.js in Halden. Most templates use the same SITE object; Northwind keeps its brand in assets/nw-config.js (its Start here page says so).

Site-wide settings#

Layouts and behaviour are switches in assets/boot.js, one object per template (HALDEN_SETTINGS, MEETLY_SETTINGS and so on):

assets/boot.js
window.HALDEN_SETTINGS = {
  header: 'overlay',     // 'overlay' | 'split' | 'pill' | 'mega' | 'announce'
  footer: 'mega',        // 'mega' | 'columns' | 'cta' | 'minimal' | 'centered'
  bar: false,            // notification bar: false | 'top' | 'inline' | 'float'
  theme: 'light',        // 'light' | 'dark' | 'system'
  themeToggle: true,
  languages: ['en'],     // add codes with a strings file in assets/i18n/<code>.js
  cookieBanner: true,
  loader: true,
};

One page can still use a different layout: <header data-header data-variant="split">.

Colours and fonts#

Every colour, surface and radius is a CSS custom property in assets/tokens.css. Change --accent and every button, dot and rule changes with it. Fonts are named there too; the style guide page shows them all at once.

Halden's style guide page: the title Style guide, the house system, and three colour swatches: buff, English red and black.
style-guide.html: check a token change on every component at once.
assets/boot.js open in an editor with the HALDEN_SETTINGS object.
assets/boot.js: the switches, with every allowed value in a comment.

Forms, analytics and SEO#

  • Forms show their success message but send nothing until you connect them. Point the form's action at Formspree, Basin, Netlify Forms or your own endpoint.
  • Analytics aren't included. Templates with a cookie banner fire a consent event (Halden: halden:consent) you can load your analytics on.
  • SEO: every page has its title, description and social image in its <head>. Set your domain in canonical and og:url tags before launch; your template's Start here page shows where.

Host it#

Upload the folder to any static host. There is nothing to build. Step-by-step for Vercel, Netlify and Cloudflare Pages in Deploying.

Still stuck?Write to us with your order number. We reply within one working day.

Contact support