Lea Verou, the respected and well known W3C influencer, web standards guru, and front end web developer decided that conventional, online, and CSS slideshow frameworks were not good enough, so she set out to create her own version of a sleek and stylish slideshow system on her own. Lea calls it CSSS, or CSS Slideshow System.

Download

The Github download includes an MIT License Copyright © 2010 which enables anyone to use the code and “software” as is, and as long as the licensing agreement is left intact with any code distributions. The download is available in zip file format at a lightweight 163KB, and includes:

  • boilerplate.html, which is the template file
  • file index.html
  • four css files and three js files located in the root directory
  • five js files located within a plugins directory.

Contributors are also welcome to fork versions and post them on the Github repo.

Browser support

Currently the CSS Slideshow System works in the latest versions of Firefox, Opera, Safari, and Chrome, which I have tested myself and found similar results within each browser. Just for giggles, I tested the system in IE8, and with no surprises at all, it does not render in any similar slideshow fashion. Also, the system does not render well in mobile devices at this time.

Under the hood

I wanted to take a closer look at how the CSS Slideshow System is built, and so I pulled up the index.html and the boilerplate.html files within my text editor as well as within Chrome’s Inspect Element tool to see what I could find beneath the web page documents.

The index.html pulls in a lot more resources including three image files, six js script files, and three css files to build the slideshow within the browser. The js script files include several from the plugins directory including code-highlight.js which Lea defines as a super simple syntax highlighting plugin for CSSS code snippet; css-controls.js, which is a script to make form controls control CSS styles; and in turn, requires css-edit.js, which is a dependency of CSS editing plugins like CSS Snippets or CSS Controls. Other js files include css-snippets.js, which is a script to add prefixes to standard CSS3 in <textarea> or style attributes, and prefixfree.min.js, along with slideshow.js, which is the heart of the CSSS JavaScript code. The CSS files include slideshow.css, which is the basic CSS so that the slideshow script functions as a slideshow; talk.css, which is used to set the talk time duration for slide; and theme.css, which is the basic CSSS slideshow theme styles and variables.

Figure B

The boilerplate.html has quite a bit fewer resources pulling into its web document page, including just two image files, two js files and three css files. It is certainly a scaled down version of the demo index page, however, it makes for a great starting point for anyone that wants to plug in a new, snazzy online presentation. The template has four starter example slides, which are easily modified by editing any content within an element where the class is equal to “slide.” The sample html code snippet below displays the boilerplate “slides”:

<header id="intro" class="slide">
       <h1>Sample CSSS presentation</h1>
       <p class="attribution">By Lea Verou</p>
</header>
<section>
       <header class="slide">
             <h1>Section title</h1>
       </header>
       <section class="slide">
             <h2>Slide title</h2>
             <p>Slide content</p>
       </section>
</section>
<footer class="slide">
       <h2>Thank you!</h2>
       <p>Closing remarks</p>
</footer>

Features

  • A single HTML file contains the entire presentation; each slide is defined as any element with the class=”slide”.
  • Themes are all styled using CSS.
  • JavaScript takes care of all the keyboard shortcuts, and anything that CSS cannot control.
  • Navigation is through the keyboard using arrow keys to advance or go to previous slides or incremental displays, or Ctrl + arrow keys to jump to the next or previous slides. The “Home” key takes you to the beginning of the presentation and the “End” key takes you to the last slide.
  • A thumbnail toggle view of the slides is accomplished in the browser with the “Shift+H” key combo ( see Figure C)
  • Timer is set as a progress bar at the top of the screen, and the talk duration is set with the data-duration attribute on the body which can style the timer and the end state with the selectors #timer and #timer.end respectively
  • Presenter notes are only visible to the presenter screen when enabled and by selection the combo key “Shift+P” as displayed in Figure D:
  • IDs are dynamically assigned by JavaScript, but according to Lea you can also assign your own, bringing the best of both worlds.
  • Incremental display of slide contents (just add class=”delayed”)
  • Slide scaling based on window size (size everything you want to be scalable in ems)
  • Document.title changing according to slide title (fetched either from the title attribute or the slide’s heading)
  • Plugins which add more functionality include the CSS Snippets, which allow for dynamically edited CSS, automatically prefixes CSS3 properties and values when needed, and <textarea> automatically adjusts rows and font-size on line breaks.
  • CSS Controls is another plugin that uses sliders and other controls to adjust CSS values for data-subject, data-style, and also automatically prefixes CSS3 properties and values when needed.
  • Code Highlight plugin adds syntax highlighting for every <code> element and <lang> element and only highlights the active side for performance enhancement as shown in Figure E:

Wrapping up

Currently, the drawbacks are few; probably the one that communities will fret most about is that the CSS Slideshow System is not operational in mobile devices. According to Lea, the presentation environment is a controlled system, and it consists of a lightweight and easier to understand code, which is why it only works in modern browsers and with no mouse support. With these limitations in mind, creating a lightweight presentation using the CSS Slideshow System could be just the right application you are looking for when delivering your next presentation, either in person or online.