Stage Fright

Stage Fright is a JavaScript powered presentation framework

Stage Fright takes inspiration from Flowtime.js and reveal.js

It's tiny, about 14KB minified and around 4KB gzipped

It supports fragments and comes with a nifty minimap that shows presentation progress

If there are fragments remaining on a slide, the slide in the minimap will be greyed out until all fragments are shown

This is the last fragment on the slide

It even supports Speaker Notes (press s to start them up)

These are Speaker Notes!

You can write lots of speaker notes, and speaker notes will arrange themselves in to two columns so you can get more in.

Speaker notes show you the current state of the current slide. Upcoming reveals the next fragment, if one exists, otherwise shows the next slide.

You have a running timer of how long the notes have been open (which you can reset by clicking it) and the current time in a 24 hour clock.

Progress is shown by showing you what number slide you are in what section you are in, with total slides and sections. If there are fragments, the first is fragment 0, then it shows your progress towards all fragments

You can navigate your slides from the speaker notes! Press up arrow or page down to navigate to the previous slide, or down arrow, page down, or spacebar to navigate to the next slide.

Try it now! Go to the next slide to see progress change, fragment progress update, and speaker notes change

The markup is designed to be semantic

A vertical grouping of slides is a ._stage--group. While marked up with an article, they are referred to as your presentation's Sections

<article class="_stage--group">
  <!-- Slides Will Go Here -->
</article>

Each slide is a section inside the article, with a ._stage--content class. Inside is the content wrapper, ._stage--content. Notes can be added by including an aside with the ._stage--notes class as a sibling of the content

<section class="_stage--slide">
  <div class="_stage--content">
    <!-- Slides Content Goes Here -->
  </div>
  <aside class="_stage--notes">
    <!-- Slide Notes Go Here -->
  </aside>
</section>

Installing and using is fairly straight-forward using modern tooling

$ npm install stage-fright

Stage Fright is written using ES Module syntax, and therefore can be imported using your favorite bundler as follows:

import 'stage-fright';

Styling is distributed as an Eyeglass module for Sass. Presuming that is all set up, you can import Stage Fright's styling in to your project as follows:

@import 'stage-fright';

There are five Sass variables you can set before importing Stage Fright that will automatically style your deck:

$background - Background color
$color - Text color
$accent - Accent colors to use for minimap and checkerboard. This is a Sass map that has three properties: light, neutral, dark
$transition - Default transition to apply to slide deck
$font-sizes - Header font sizes as a Sass list

You can configure how Stage Fright works by changing its import slightly

import stageFright from 'stage-fright';

Then, initialize Stage Fright with an object of your configuration

stageFright({ options });

All configurations can be set to true to enable, false to disable, 'alt' to enable but require the alt key pressed, 'ctrl' to enable but require the control key pressed, or meta to enable but require the meta key (Windows/command) pressed. All default to true

Available configuration options are:

navigation.arrows - Use arrow keys for navigation
navigation.remote - Use Page Up/Page Down keys for previous/next navigation (used by handheld presentation remotes)
navigation.spacebar - Use Spacebar/Shift + Spacebar for previous/next navigation
notes - Use s key to open speaker notes

Code, Issues, License, etc…

Stage Fright

Code, Issues, License, etc…

https://github.com/snugug/stage-fright