Report template kit

CCM report template

One JSON file and one Python script build a standalone report with paper texture, ink drawings, and a stage that changes as the reader scrolls.

01 / make a report

Four steps from a download to a page.

Copy the folder for your new report. The download unpacks to a folder that already builds.
```
unzip template.zip
cd CCM-report-template
```
Edit report.json with a text editor. Every heading, paragraph, statistic, link, and color on the page comes from that one file.
Run the build from the copied folder. Python 3.11 or later works with no packages to install.
```
python3 build.py
```
Open index.html in a browser. The export is one file and it opens from disk.

Build a second report beside the template by naming its content file and its output.

python3 build.py my-report.json --output ../my-report/index.html

To load the stylesheet and the script from this folder instead of embedding them, pass the base URL. That export needs the network; the default one does not.

python3 build.py report.json --output starter.html \
  --assets-url https://jamditis.com/ccm-report-template

Rebuild after each edit. Changes typed into the exported HTML disappear on the next build.

02 / what you get

{{mark_count}} marks, five colors, two type families.

The marks

Every drawing holds {{mark_count}} marks. Stroke count, size, weight, and jitter come from the mark's own index, so each one is a sibling of the others and none is a copy. They are an illustration, not a chart.

The palette

Every other color on the page is mixed from these five, so a new theme moves the whole report and leaves no stranded gray behind.

The type

A story is only the beginning.

Serif: body, headings, the quote.

Follow the connections.

Sans: labels, buttons, captions, byline.

Both families are already on the reader's machine, so an export asks no font server for anything. Large figures run in Times for its lining numerals.

03 / section types

Five kinds of section, in any order.

Give every section a unique id that starts with a lowercase letter, such as key-findings. Use letters, digits, and hyphens. The ids main and top are reserved. The contents menu follows the order of the sections, and quote sections are left out of it because they carry no title.

Type	Fields beyond type and id
prose	`label`, `title`, `paragraphs` (list of text)
scrolly	`label`, `title`, optional `center_label`, `steps`
findings	`label`, `title`, `items`: each has `value`, `title`, `text`, and optional `unit` and `note`
quote	`text`, `attribution`
methods	`title`, `paragraphs`, `sources`: each has `label`, `url`

A scrolly section needs at least one step, and each step names a layout of {{layouts}}, a caption describing the state in plain text, and a highlight. The README.md in the download lists every field and what it accepts.

04 / download

Take the kit.

Download template.zip Read the sample report

The ZIP holds the whole kit: build.py, package.py, the content file report.json, report.css, report.js, favicon.svg, the built index.html and the hosted-asset starter.html, this guide and the template it is built from, the README, and the design system. It leaves out the social image, because every published report needs its own.

The sample report's counts are invented. Replace the content, the notice, and the template link with your own verified work before you publish.