CSSS: CSS-based SlideShow System

By Lea Verou

Introduction

What is it?

A simple framework for building presentations with modern web standards

History

Features

Thumbnail view

Press Ctrl+H (or Shift+H if you're in Opera) now.

Cool, huh? You can press Ctrl+Shift+H to see all slides (warning: can be slow!)

Timer

Presenter view

This slide has presenter notes. They are only visible in presenter view (Ctrl+P or Shift+P).

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<style scoped />

You can use the HTML5 scoped 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, inspect this slide and then run $$('style[scoped]')[0].sheet.cssRules[0].selectorText in the console to see how the original selector gets changed.

More features

Drawbacks

Plugins

Plugin: CSS Snippets

new CSSSnippet(document.getElementById('snippet'));

CSS Snippets demo

Edit the following CSS code:

CSS Snippets: raw CSS

Plugin: CSS Controls

CSS Controls demo

Plugin: Code highlight

Code highlight example

// Comment
document.addEventListener('DOMAttrModified',function(e) {
  var node = e.target, attr = e.attrName;
  if(/^input$/i.test(node.nodeName) 
    && (attr === 'placeholder' || attr === 'value')
    || foo > 5)
      Placeholder.update(node);
}, false);