Template Vanilla Site MIT

Event Conference

A dense, structured single-track conference website template built with semantic HTML, CSS, and vanilla JavaScript. Light, neutral, and typography-driven: a sticky header with brand mark, date, anchor nav, theme toggle, and responsive mobile drawer; an editorial hero with a clamp() headline, facts grid (dates / location / talks / capacity), and a live countdown card; an about section with highlights table and a four-up stat row; a speakers grid (avatar initials, name, role, talk); a two-day schedule with an ARIA tablist (arrow-key nav, Home/End) and a time-rail slot list; a venue section with details table; a capped sponsorship tier list; and a three-tier register panel (early-bird / standard / workshop) + footer. Split into modular files: code.html + style.css (the --ds-* design-token system from design-tokens.md, light-default + calm opt-in dark mode, reduced-motion guard) + script.js (theme toggle, mobile nav, schedule tabs, live countdown, reveal), with preview.html as a self-contained single-file preview. No React, Vue, Next.js, Tailwind, Bootstrap, or backend.

Vanilla
HTML

Preview the site Install the template

Pages: Site
Stack: Vanilla HTML/CSS/JS + HTML
Theme: System
Responsive: Yes
Files: 7
License: MIT

Preview

The whole site, live.

Scroll inside the frame, switch viewports, or open the raw preview in a new tab — it is the same file the CLI installs.

7 files

Interactive preview

New tab

devsnips.dev/templates/vanilla/event-conference/

iPhone 390 × 844

Fluid 320 → 1920

Vanilla/Templates/event-conference Responsive · System · MIT

What's inside

Everything the folder ships.

Straight from the registry's metadata — every line maps to a file you can open in the source tabs below.

14 features

sticky header with brand mark, date, anchor nav, theme toggle, and responsive mobile drawer (aria-expanded)
editorial hero with clamp() headline and facts grid (dates / location / talks / capacity)
live countdown card counting down to event start (days/hours/mins/secs), paused when tab hidden
about section with highlights table and four-up stat row
speakers grid (avatar initials, name, role, talk title)
two-day schedule with ARIA tablist (arrow-key + Home/End navigation) and time-rail slot list
venue section with details table (venue / address / transit / doors / access)
capped sponsorship tier list (Partner / Supporter)
three-tier register panel (early-bird / standard / workshop) with feature lists
light-default theme with calm opt-in dark mode (no-flash pre-paint script + persisted toggle)
IntersectionObserver scroll-reveal (.reveal -> .is-visible, reduced-motion safe)
DevSnips --ds-* shared design-token layer (design-tokens.md) with template tokens on top
hairline 1px borders, small controlled radii, restrained shadows, single controlled accent
modular file split (code.html + style.css + script.js)

Technical

Stack, scripts, structure.

Everything you need to know before you install.

7 files

Stack

Framework Vanilla HTML/CSS/JS

Language HTML

Theme System

Browsers Chrome, Firefox, Safari, Edge (modern evergreen browsers)

Files 7

root 4

AGENTS.md doc
metadata.json config
preview.html preview
README.md doc

pages/ 3

code.html code
script.js code
style.css code

Install

One command, whole folder.

Pulls the template into your project through the DevSnips CLI. The registry path below is stable across the CLI, MCP server and Skills.

terminal · npm

npx devsnips add Vanilla/Templates/event-conference

registry path Vanilla/Templates/event-conference 7 files

AI-ready

Hand the whole job to your agent — Cursor, Cline, Claude Code or Windsurf. One prompt installs the template, fixes the theme toggle, optimises it and reshapes it for what you are building.

Scaffold the DevSnips template "Event Conference" (Vanilla/Templates/event-conference) into this project, then audit, fix and tailor it.

1. Install — if the DevSnips MCP server is connected, fetch the resource with get_resource(id="Vanilla/Templates/event-conference"). Otherwise run npx devsnips add Vanilla/Templates/event-conference and install the dependencies the template declares.

2. Audit — check the template end to end before changing anything: theme toggling (dark/light), responsive behaviour, accessibility, unused files and assets.

3. Fix — repair what the audit found, starting with the theme toggle: it must persist across reloads, never flash the wrong theme on first paint, and every component must read the same tokens in both modes.

4. Optimise and adapt — trim what the site does not need, then customise the template for the product being built here: replace the placeholder branding, copy, imagery, navigation and routes so it reads as this project rather than as a demo.

devsnips://templates/event-conference

The same path the CLI, MCP server and Skills resolve — one registry, one resource URI.

Source

Read it before you ship it.

The README, manifest and entry document — verbatim, straight from the registry.

2 files

README.md

# Event Conference

A dense, structured single-track conference website template. Part of the DevSnips Vanilla Templates collection and built on the shared [`design-tokens.md`](../design-tokens.md) `--ds-*` token system.

## Design language

Minimal · light · editorial · neutral · typography-driven · restrained.

- Light-default, calm opt-in dark mode (no-flash, persisted).
- Hairline 1px borders over shadows; small controlled radii.
- Inter (text) + JetBrains Mono (labels / metadata), system fallbacks.
- Single controlled blue accent; neutral-first palette.
- Information-dense: schedule, stats, and details tables over decoration.

## Structure

```
event-conference/
├── pages/
│   ├── code.html      # HTML structure (links style.css + script.js)
│   ├── style.css      # design system (--ds-* tokens)
│   └── script.js      # theme toggle, mobile nav, schedule tabs, countdown, reveal
├── preview.html       # self-contained single-file preview (inlines CSS+JS)
├── metadata.json
└── README.md
```

`preview.html` opens directly with no backend. The modular files in `pages/` are for customization.

## Sections

1. **Header** — brand mark + date, anchor nav, theme toggle, mobile drawer.
2. **Hero + countdown** — editorial `clamp()` headline, facts grid, live countdown card.
3. **About** — narrative + highlights table + four-up stat row.
4. **Speakers** — grid of speakers (avatar initials, name, role, talk).
5. **Schedule** — two-day ARIA tablist + time-rail slot list.
6. **Venue** — narrative + details table.
7. **Sponsors** — capped Partner / Supporter tiers.
8. **Register** — three-tier ticket panel (early-bird / standard / workshop).
9. **Footer** — copyright + footer links.

## Interactions

Scoped, dependency-free vanilla JS:

- Theme toggle (light ↔ dark, persisted, no-flash pre-paint).
- Mobile nav drawer (`aria-expanded`, Esc closes, auto-close on link click).
- Schedule tablist (ARIA `role=tab`, roving tabindex, Arrow Left/Right/Home/End).
- Live countdown to event start (paused when tab hidden).
- Scroll-reveal (`.reveal` → `.is-visible`, reduced-motion safe).

## Accessibility

Skip link, semantic landmarks, single `h1`, ARIA tablist with full keyboard navigation, `role=timer` countdown, `:focus-visible` rings, native controls throughout, `prefers-reduced-motion` guards.

## Responsive

Three breakpoints (640 / 768 / 1024). Zero horizontal overflow at 320–1920px. Header CTA hides on very small screens (available in the drawer); countdown grid collapses to 2 columns at 320px; speakers/register grids reflow; hero splits to two columns on desktop.

## Dependencies

Google Fonts (Inter + JetBrains Mono). No framework, no build step.

# AGENTS.md — Event Conference

Guidance for an AI agent adapting this template. Read this before editing.

## What this template is

A dense, structured single-track conference website. Single page: header, hero + countdown, about, speakers, schedule (two-day tablist), venue, sponsors, register, footer.

## Design system

Built on the shared [`design-tokens.md`](../design-tokens.md) `--ds-*` token system. **Light-default**; calm opt-in dark mode (no-flash, persisted). Inter + JetBrains Mono. Hairline borders, small radii, single controlled blue accent, information-dense tables over decoration.

## File layout

```
event-conference/
├── pages/
│   ├── code.html      # HTML structure (links style.css + script.js)
│   ├── style.css      # design system (--ds-* tokens)
│   └── script.js      # theme toggle, mobile nav, schedule tabs, countdown, reveal
├── preview.html       # self-contained preview (inlines CSS+JS)
├── metadata.json
└── README.md
```

## How to adapt it

1. **Swap the event**: edit `pages/code.html`&mdash;brand, dates, location, facts grid, about copy, speakers, schedule slots, venue details, sponsor tiers, register tiers.
2. **Set the countdown target**: edit the `target` Date in `pages/script.js` (`new Date('YYYY-MM-DDT09:00:00Z')`). The countdown auto-pauses when the tab is hidden.
3. **Add a schedule day**: add a new `.tab-link` (with `role=tab`, `aria-controls`, `data-tab`) and a matching `.tab-panel` (with `role=tabpanel`); the tablist keyboard logic in `script.js` handles any number of tabs.
4. **Rebrand**: edit the `--ds-*` tokens in `pages/style.css` `:root`&mdash;keep one controlled accent.
5. **Rebuild the preview**: run `python3 ../_build_preview.py .` from the template folder.

## Do not

- Do not add glassmorphism, neon, gradients, or animated decorative backgrounds.
- Do not introduce a framework. Vanilla HTML + CSS + JS only.
- Do not break the ARIA tablist contract (`role=tab`/`tabpanel`, `aria-selected`, roving tabindex, arrow-key nav).

## Quality bar

Skip link, semantic landmarks, single `h1`, ARIA tablist with full keyboard nav (Arrow Left/Right/Home/End), `role=timer` countdown, `:focus-visible` rings, reduced-motion guard. Run `python3 scripts/qa/resources/qa_vanilla.py` after changes. Validate with `python3 scripts/qa/resources/_qa_template.py Vanilla/Templates/event-conference/preview.html`.

62 lines UTF-8 · LF