The slide style guide

A generic engine and seven opinionated layouts

millerbyte.com

The idea

A style guide you can violate is not one.

How consistency is enforced

Layouts take content, never styling
No className on any slide
Limits are a failing test
One escape hatch, used deliberately

The closed vocabulary

Title, Points, Statement
Scripture, Code, Image
Canvas, for everything else

A deck is just JSX

<Deck aspect="16:9">
  <TitleSlide title="Sunday" />
  <PointsSlide
    heading="Three things"
    points={['One', 'Two']} />
</Deck>

Why it can be checked

Slides are data, so a test can read them.

The rule that keeps decks readable

// At most four points, of at most seven words.
expect(points.length).toBeLessThanOrEqual(4);
for (const point of points) {
  expect(words(point).length).toBeLessThanOrEqual(7);
}

Sizing without JavaScript

The slide is a CSS container
Every size is in cqi
Fullscreen rescales for free

This is a CanvasSlide

It inherits the deck's background, padding and colour — and takes no position at all on hierarchy. Everything here was decided by hand, which is exactly why reaching for it should feel like a decision.

Algorithms Play Games: a Pokémon Game Boy battle beside a log of emulator button presses

ImageSlide is full-bleed. The caption floats over the bottom edge.

The deal

The test will annoy you before it thanks you.