Skip to content
Sign inJoin waitlist

Titen 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 the brochure, adding and removing pages, projects, services and posts
Making it look like your brand Colours, the logo, fonts, the Tailwind classes, rebuilding the stylesheet, the style guide
Forms Making the project, Contact and newsletter forms 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 “Titen”, the contact details 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), the two videos (Editing the site) and brochure.pdf.
  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 project, service and post has its own file in projects/, services/ and blog/, and each project category its own page (residential.html, …).
  • 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 search, the accordion, the service list, the slideshows, the videos, the forms 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 projects every week, choose the Titen Astro or Titen Next.js edition instead: a new item is one entry in a data file, and every page, list, search and sitemap line follows (Editing without touching HTML).

Getting help

Section titled “Getting help”