Inspire.js

Lean, hackable, extensible slide deck framework

By Lea Verou and contributors

Introduction

Main idea

An HTML file contains the whole presentation
Themes as CSS files
Plugins for extra functionality, autoloaded when used
Nice JavaScript API for really custom things

History

Originally created in 2010 for my first talk, at Front Trends 2010
By popular demand, it was released shortly after, named CSSS
Huge refactor and renaming to Inspire.js in Sep 2018

Syntax

Slides are defined by adding the slide class to any elements.
<header class="slide"> is a header slide (relevant for the Overview)

Keyboard Navigation

→ or ↓ to advance to the next slide or incrementally displayed item
← or ↑ to go to the previous slide or incrementally displayed item
Ctrl→ or Ctrl↓ to jump to the next slide
Ctrl← or Ctrl↑ to jump to the previous slide
Home to go to the first slide, End to go to the last
CtrlG to jump to an arbitrary slide (by slide number or identifier)
Note that if a slide contains an <iframe>, when the content in the iframe is focused, Inspire.js shortcuts will not work. There is no way around that, you need to click on something from the actual slide to get focus out of the iframe before you use any Inspire.js keyboard shortcuts. Some plugins (e.g. live demo) add on-screen "Next" buttons for this reason.

Features

Repeated slides

Use attribute data-insert="#id" on an empty slide to re-insert it later in the slideshow
Notice how this slide will also be re-inserted after the next one!

IDs and titles

IDs are dynamically assigned by JavaScript, but you can also use your own
Slide titles (used in the browser tab when the slide is active, and in the Overview) via the title or data-title attributes or headings in the slide.
If only an id or only a title is provided, the other is extracted from it.

Incremental display

Incremental display of slide contents (just add class="delayed")
Use selector .delayed.future to change the style of undisplayed items
Use selector .delayed.displayed to change the style of displayed items
Use selector .delayed.current to change the style of current items
Use class="delayed-children" to apply the delayed class to all of an element’s children
Nested delayed items are possible!

Plugins

Overview

Loaded automatically, use <code class="no-overview"> to prevent this.
Press Ctrl+H (or Shift+H) to trigger, Esc to close.
Cool, huh? You can press CtrlShiftH to see all slides

Syntax highlighting with PrismJS

Autoloads core & languages used
Load plugins by listing their ids in a data-prism-plugins attribute, on any element (first one will be used).
Automatically figures out dependencies & aliases
CSS is up to you!

var start = new Date().getTime();
setInterval(function() {
	React.render(
		<ExampleApplication elapsed={new Date().getTime() - start} />,
		document.getElementById('container')
	);
}, 50);

Annotated videos

data-video for URL
class="annotation" for annotations
data-time and data-pause on annotations

Click to dismiss & resume Auto-resume after 2sec

Timer

Define the talk duration with the attribute data-duration on the body.
Timer in the form of a progress bar on the top
Style the timer and the end state with the selectors #timer and #timer.end respectively.

Resolution

Design for a specific resolution, and have slides scale up and down based on the viewport.
Define with the attribute data-resolution on the <body> for all slides, a grouping element, or individual slides (like this one!).
Try resizing the viewport, note how the slide size adapts!

Presenter View & Notes plugins

<details class="notes"> for collapsible slide notes.
Any slide notes load the presenter view plugin as well.
Split current window into presenter and audience view with CtrlP (or ShiftP)
The presenter view includes:
- Timer
- Upcoming slide
- Notes that are expanded by default (collapsed notes are visible in audience view too).
Both-way synchronization of slide status between the two windows.

Sample notes here. This works quite nicely with the Markdown plugin, just use data-markdown-elements="details.notes" and all notes will support Markdown!

Slide-specific CSS

You can use the data-slide attribute on <style> elements in slides, to only style the current slide or inside sections that include multiple slides to style all of them and nothing else.

For example, run $('#slidestyle style').sheet.cssRules[0].selectorText in the console to see how the original selector gets changed.