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!

Navigation

• → or ↓ to advance to the next slide or incrementally displayed item
• ← or ↑ to go to the previous slide or incrementally displayed item
• Ctrl* + → or Ctrl* + ↓ to jump to the next slide
• Ctrl* + ← or Ctrl* + ↑ to jump to the previous slide
• Home to go to the first slide, End to go to the last
• Ctrl* + G to jump to an arbitrary slide (by slide number or identifier)
• Ctrl* + H to see thumbnails of the slides and jump to one of them (really slow in every browser except Safari)

* Ctrl or Shift actually. Only Shift works in Opera.

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