stage-fright
v3.2.3
Published
Yet Another HTML5 Presentation Framework
Downloads
47
Readme
stage-fright
Yet another web-based presentation library
Markup
Markup is fairly straight-forward with an eye towards semantics. First, you set up the stage, which is going to be where all slides are in.
<main class="_stage">
…
</main>Then, each grouping of slides (even if there is a single slide) is inside a stage group
<article class="_stage--group">
…
</article>Finally, each slide is a section inside the stage group. Slides are made up of the actual slide, and an inner content area
<section class="_stage--slide">
<div class="_stage--content">
…
</div>
</section>Inside of slides, you can have a fragment which is a piece of content to be progressively revealed. When a fragment has been activated, it will get a data-active attribute on it. By default, fragments fade in, but CSS can be used to change it to whatever is desired
<h3>This is a big bit of the slide</h3>
<ul>
<li class="fragment">This is a revealed talking point</li>
<li class="fragment">And this is another one</li>
<li class="fragment">And this is a third</li>
</ul>Full Sample Markup
A basic example of this all in place looks something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sample Stage Fright Presentation</title>
<!-- Bring in the CSS from wherever it's been rendered -->
<link rel="stylesheet" href="/css/stage-fright.css">
</head>
<body>
<!-- Only the main section is needed for our slide deck -->
<main class="_stage">
<!-- First slide group, an introduction slide maybe -->
<article class="_stage--group">
<section class="_stage--slide">
<div class="_stage--content">
<h1>Hello World!</h1>
</div>
</section>
</article>
<!-- A second slide group -->
<article class="_stage--group">
<!-- The first slide in this group -->
<section class="_stage--slide">
<div class="_stage--content">
<h2>This is a Second Section</h2>
</div>
</section>
<!-- The second slide in this group -->
<section class="_stage--slide">
<div class="_stage--content">
<p>It has good content</p>
<!-- Fragments to be revealed as we go -->
<ul>
<li class="fragment">And some content</li>
<li class="fragment">That gets revealed</li>
<li class="fragment">As I talk</li>
</ul>
</div>
</section>
</article>
</main>
<!-- Bring in the Stage Fright JS, defered for better performance -->
<script src="/js/stage-fright.min.js" defer></script>
</body>
</html>Attribution:
- Icons from International Business Machines Corporation under a Creative Commons Attribution 4.0 International License.Based on a work at https://github.com/IBM-Design/icons