Minimalistic slides

Steve Job’s slides are bloated

Creating minimalistic slides (form as well as function) in pure CSS.

Because I can’t do something without doing something else first (Carl Sagan¹ said something about that).

I first have to write presentation software before I can create slides.

The key tricks here are:

using flex box to put slides side-by-side
using scroll snap to snap a slide
the keyboard navigation (using cursor keys ← and →) works because of the tabindex and autofocus attributes

AFAIK the slide speed cannot be set and even worse: it differs from browser to browser (slow in Chrome, fast in Firefox).

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Minimalistic slides</title>
    <link href="minimalistic-slides.css" rel="stylesheet">
  </head>
  <body tabindex="0" autofocus>

    <section>
      <p>Use <kbd>→</kbd> for the next slide</p>
    </section>

    <section>
      <p>Use <kbd>←</kbd> for the previous slide</p>
    </section>

    <!-- add more slides here -->

  </body>
</html>

* {
  box-sizing: border-box
}

html, body {
  height: 100%;
  overflow: hidden
}

body {
  background: #ce5127;
  color: white;
  display: flex;
  font: 9vmin monospace;
  outline: none;
  overflow: auto hidden;    /* firefox */
  scroll-snap-type: x mandatory
}

body > section {
  align-items: center;
  display: flex;
  flex: 0 0 100%;
  justify-content: center;
  scroll-snap-align: center
}

~25 lines HTML, ~25 lines CSS, 0 lines JavaScript

“If you wish to make apple pie from scratch, you must first create the universe” ↩︎

Thu, 11 Apr 2024 16:41:15 +0000

Minimalistic slides

Related