11ty Sliiides in 11ty Sliiides

@ Jamstack Toronto

Hello small fragment of the world…

I’m not here to show you these slides…

I’m here to show you the presentation software behind the slides.

Introducing… OddBird Sliiides

my eleventy web presentation tool

This is a little tool that I built using HTML, CSS, and just a pinch of javascript – with help from my favorite static site generator.

Headshot of Miriam Suzanne

@TerribleMia Miriam Suzanne

Age 7 (already very bad)

I give a whole lot of talks, way more than a person should. I would certainly give fewer talks, if I was a less terrible person. But here we are…

  • Very fast to make slides
  • Automatic code highlighting
  • Embedded live demos (local or codepen)
  • Slide templates, and re-usable slides
  • A result that I can share, with a11y built in

And it’s super important to me that I can get everything I want from my presentation tool.

- img: 11ty/no-slides.jpg
alt: The previous slide, covered in purple scribbles, with NO scrawled in red
script: |
I'm not here to show you these slides...

- todo: Add something interesting?
script: |
I'm here to show you the tool behind the slides.

- pre: Introducing…
title: OddBird **Sliiides**
sub: my eleventy web presentation tool
caption: |
[Sliiides on GitHub](

This tool has been working great for me, and 11ty gives it a lot of flexibility.

I write most of my talks in yaml, but any 11ty data format will work. Here’s the first few slides. You didn’t see the script bit, but I did.

I have the speaker view open in another tab. And a little bit of local-storage magic to keep both tabs in sync.

Whenever I need something more complex, or a slide that I want to re-use, I build it as a nunjucks include, and then add it to my yaml: from (include file) use (macro name).

Like this slide where I take Harry Roberts inverted triangle, and I put it back upright.

Who goes around flipping triangles on their back like that? Come on, Harry!

But more often I’m showing off how totally [sorry, let me fix that] RAD CSS is.

and how to use the new features, like Cascade Layers – already behind a flag in all the major browsers.

[If we have time left, I can show some of the code]