slide.css

A minimal stylesheet for creating HTML presentations.

Scroll↓

Quick Start

It's simple:

<html>
  <head>
    <title>My Slide</title>
    <link rel="stylesheet" href="slide.css" />
  </head>
  <body>
    <main>
      <section>
        <h1>My First Slide</h1>
        <p>You're gonna love it.</p>
      </section>
    </main>
  </body>
</html>

Basic Usage

A section acts as a slide when placed within main.

<main>
  <section>
    <h1>Bananas</h1>
  </section>
</main>

You can add a description below a heading via an hgroup:

<section>
  <hgroup>
    <h1>Bananas</h1>
    <p>Facts about our yellow fruit</p>
  </hgroup>
  ...
</section>

Persistent Content

A header or footer as a direct child of body will be fixed and shown on all slides.

<body>
  <header>
    <span>My Logo</span>
  </header>
  <main>
    ...
  </main>
  <footer>
    <a href="/somewhere">Some Where</a>
  </footer>
</body>

Customisation

Slide uses CSS variables in a base layer for the basic theme.

This means you can easily them:

<head>
  <link rel="stylesheet" href="slide.css" />
  <style>
    :root {
      --c-fg: #604d53;
      --c-bg: #f3eeee;
      --c-primary: #db7f8e;
      --c-neutral: #ffdbda;
      --c-notice: #edadb4;
      --c-lines: #9da3a4;
      --c-shadows: #d5c5c8;
      --slide-width: 80ch;
    }
  </style>
</head>

Formatting

Don't click me.

Wow such a rebel..

<details>
  <summary>Don't click me.</summary>
  <p>Wow such a rebel..</p>
</details>

Don't quote me on that..

<blockquote>Don't quote me on that..</blockquote>

LGTM

<abbr title="Looks good to me">LGTM</abbr>

Thanks for your attention

Hope this helps!