Presenting with Dais

A web-native slide framework · HTML & CSS first

What is Dais?

One stylesheet, no build step, no required JavaScript
Slides are real <section> elements with real headings
Navigate by swipe, scroll, keyboard, dots, or arrows
Remove the CSS and the deck still reads as a document

The whole authoring contract

<main class="dais dais-dots dais-arrows" aria-label="Talk title" tabindex="0">

  <section class="slide title" id="intro">
    <h1>Talk title</h1>
  </section>

  <section class="slide" id="one-idea">
    <h2>Every slide gets a heading</h2>
    <p>…and any HTML you like.</p>
    <aside class="notes">Only you see this.</aside>
  </section>

</main>

Navigation is just scrolling

Zero JS (built in)

Swipe / trackpad / scrollbar
Tab to the deck, then arrow keys
Dots & edge arrows (pure CSS)
Deep links: #slide-id

With dais.js

Arrow keys from anywhere
O overview · S notes
URL follows the current slide
Counter in the control bar

Incremental reveals

Add class="reveal" to a list — items appear when the slide snaps in:

First this…
…then this…
…then this.
Powered by scroll-state(snapped) container queries
Browsers without support simply show everything at once

Slide templates

title · divider · quote · media-full

The best presentation software is a browser you already have.

— Every web developer, eventually

Abstract placeholder artwork: overlapping translucent circles on a blue-to-red gradient.

media-full: edge-to-edge imagery with a caption bar

Light utilities, not a design system

Layout

.cols .stack .center .spacer

Type

.fit .muted .small .accent

Surface

.card — and beyond that, write your own CSS

Anything not covered here is intentionally your own stylesheet's job.

Big statements
welcome.

Theming is ~20 custom properties

:root {
  --dais-bg: #171021;        /* slide background   */
  --dais-text: #efe9f7;      /* body text          */
  --dais-accent: #ff8c2e;    /* headings, markers  */
  --dais-font-display: "Eater", fantasy;
  /* …see docs/theming.md for the full token list */
}

Link a theme file after dais.css — try the bundled fantasy and spooky demos.

Accessible by construction

Landmarks and a heading per slide — screen readers navigate by outline
Decorative flourishes use content: "…" / "" alt-text syntax
prefers-reduced-motion disables all animation
Focus is always visible; controls are labelled

Print to PDF, built in

Open the browser print dialog (Ctrl/⌘ + P)
Choose Save as PDF — one slide per 16:9 page
Add class="dais-print-notes" to <body> to include speaker notes

Go make some slides

Docs: docs/authoring.md · Reference: docs/reference.md