Skip to content
Sign inJoin waitlist

Kalme documentation — HTML

Everything you need to go from the downloaded folder to a published site. Read in this order, or jump to what you need.

Guide What it covers
Editing the site Opening the site, editing text, links, images, videos and prices, adding and removing pages, services, projects and posts
Making it look like your brand Colours, fonts, the Tailwind classes, rebuilding the stylesheet, the style guide
Forms Making the Contact form deliver to you
Editing without touching HTML Your options when someone else needs to edit the site without touching HTML
Going live Pre-launch checklist, uploading, domains, what to do after launch
Troubleshooting and questions Errors, questions and answers

In a hurry: the first 15 minutes

Section titled “In a hurry: the first 15 minutes”
  1. Open index.html in your browser. That is the whole site — no install, no build.
  2. Open the folder in a code editor (VS Code is a good free one).
  3. Replace “Kalme”, the contact details, the booking link and the demo domain across all files with your editor’s find and replace in files (Editing the site).
  4. Replace the photos in assets/images/ — same file name, same proportions, and every page picks them up — and the three videos (Editing the site).
  5. Replace the icons and the share image in the root folder (icon.svg, apple-icon.png, opengraph-image.png).
  6. Put your form endpoint in assets/js/config.js (Forms).
  7. Upload the folder to your host (Going live).

How this template is put together

Section titled “How this template is put together”
  • One HTML file per page. about.html is /about.html; each service, project, post and legal text has its own file in services/, projects/, blog/ and legal/.
  • One stylesheet. assets/css/style.css, built from src/css/style.css with Tailwind CSS. You only rebuild it when you use a class that isn’t in the site yet or change the theme (Making it look like your brand).
  • One script. assets/js/main.js runs the menu, the accordion, the pricing switch, the videos, the form and the motion. You don’t need to edit it. Your settings go in assets/js/config.js.
  • No framework, no dependencies at runtime. The pages work from any static host, and even straight from disk.

If you will add posts and case studies every week, choose the Kalme Astro or Kalme Next.js edition instead: a new item is one entry in a data file, and every page, list and sitemap line follows (Editing without touching HTML).

Getting help

Section titled “Getting help”