slyd
a minimalist's slide deck
2 Way
bi-directional CSS parallax
Natural
content naturally enters and exits the stage
Deep Links
(share a link directly to a slide)
touch & keyboard support
Themeable
via CSS custom properties
Minimal Markup
<slyd>
<h2>Minimal Markup</h2>
<pre class="language-html line-numbers show-language"><code>
...
</code></pre>
</slyd>
^ code for this slide
comes with
components
What's the object-oriented way to become wealthy?
Inheritance.
Syntax Highlighting
document.querySelectorAll('.🤓')
.forEach(({style}) =>
Object.assign(style, {
backgroundColor: 'hsl(200 100% 90%)',
color: 'hsl(200 82% 15%)',
}))
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Regular & Leaded
Milk, qui, french press half and half turkish kopi-luwak cortado half and half café au lait extraction chicory. Id est, aftertaste cultivar french press chicory siphon.
Climb a tree, wait for a fireman jump to fireman then scratch his face leave fur on owners clothes stare at imaginary bug i'm bored inside, let me out i'm lonely.
Justified
Climb a tree, wait for a fireman jump to fireman then scratch his face leave fur on owners clothes stare at imaginary bug i'm bored inside, let me out i'm lonely.
- Plain
- HTML
- Lists
- That can handle really long lengths of text and still look alright because otherwise why would I want it?
- Normal
- Fine
- Bullets
Links
Buttons
Decorators
serif
uppercase
capitalize
brand colors
on
anything
Embed Media
Using all your favorite tags
<picture cover>
<img loading="lazy" src="...">
</picture>
Background Images
What's the object-oriented way to become wealthy?
Inheritance.