trades-starter/README.md

Local Service Demo Starter

A small, reusable one-page website for local service businesses. It uses plain HTML, CSS, JavaScript, and JSON; there is no package manager, build step, or framework.

Run locally

The page loads data/business.json with fetch, so open it through a local web server rather than directly as a file:// URL.

From this directory, run:

python3 -m http.server 8000

Then visit http://localhost:8000.

Make it yours

1. Edit the business details, navigation, hero, services, about copy, and contact details in data/business.json.
2. Add a logo under assets/logo/ and set logo and logoAlt in the JSON. Leave logo empty to use the business name as a text mark.
3. Replace hero.image with an image path in assets/images/ (or a hosted image URL), and update hero.imageAlt.
4. Change the four --brand-* values at the top of css/theme.css to update the palette.

The sample business and hero photo are demo content. Replace both before publishing. The sample photo is remotely hosted; use a local image if the demo needs to work without an internet connection.

Data contract

data/business.json is the content contract between the business-generation workflow and this template.

Templates may change their layout, styling, sections, and components, but should continue to accept the same JSON structure.

Optional fields may be empty. The template should render gracefully when optional content such as logos, testimonials, opening hours, or images is unavailable.

Do not add business facts to the template itself. Business-specific content belongs in data/business.json.

Files

• index.html contains the page structure.
• css/base.css contains resets, shared type, and layout foundations.
• css/components.css contains the page sections and responsive styles.
• css/theme.css contains the replaceable brand variables.
• js/main.js loads the JSON and fills the page content.
• data/business.json contains the sample business content.
• assets/images/, assets/icons/, and assets/logo/ are for replaceable media.

Demo workflow

This starter is designed for fast prospect demos.

1. Clone the repository.
2. Replace the sample business data in data/business.json.
3. Add the prospect's logo and hero image.
4. Update the brand colours in css/theme.css.
5. Run the site locally.
6. Check mobile layout, links, contact details, and placeholders.
7. Run Davidson CI and Lighthouse.
8. Deploy to a temporary public URL.
9. Verify the live URL before sending it to the prospect.

Demo rules

• Do not invent reviews, certifications, services, locations, or claims.
• Replace all sample content before publishing.
• Keep structural changes minimal unless the business genuinely needs them.

Goal

A real business should be able to go from "yes, show me" to a personalised live demo in under 45 minutes.