By Lea Verou

What is it?

A simple framework for building presentations with modern web standards

  • An HTML file contains the whole presentation
  • Themes as CSS files
  • JavaScript handles what CSS can't (keyboard shortcuts etc)

History

  • I had to create a presentation for my talk at Front Trends 2010
  • The only web-based presentation system I knew of was the HTML5 presentation by Marcin Wichary which didn't fit my needs
  • …so I rolled up my own
  • FT2010 attendees asked me to release it
  • and here it is! 😉

What about S5?

  • I found out about S5 afterwards, via Tantek Çelik
  • Seems to follow a similar approach to CSSS…
  • …but does a few things differently
  • So I guess even if I knew, I would still make my own
  • but take a look at it too, it's really good!

Features

  • IDs are dynamically assigned by JavaScript…
  • …but 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)

Drawbacks

  • Only supports Firefox 3.6+, the latest Chrome/Safari or Opera 10.60+. Why?
    • More lightweight
    • Easier to understand code
    • It's a presentation, so the environment is controlled anyway
  • No mouse click to advance to the next slide. I consider it annoying.

Thank you!

Get it or contribute at http://github.com/LeaVerou/CSSS

Credits:

  • Colored wood background by Luke Roberts
  • The name CSSS is actually inspired by S5, as you could probably guess 😉
  • A big thanks to the community at Github for various contributions to this project