HTML Slide Template

To use this template, you are recommended to create a folder at the same level as this one, e.g.

/2013/Talks/My-Slides/

And to copy this file to that folder (as below) and edit it to your heart's content.

/2013/Talks/My-Slides/Overview.html

Simple bullet lists

These are very easy to do with html's unordered lists:

<div class="slide">
<h1>Simple bullet lists</h1>

<ul>
<li>first bullet point</li>
<li>second bullet point</li>
<li>and so on</li>
</ul>
</div>

Looks like:

• first bullet point
• second bullet point
• and so on

Add class="incremental" to the ul start tag to progressively reveal the bullet points.

HTML Slide Template

See Slidy markup examples for information on how to make use of incremental slide content, expanding/collapsing lists and much more.

My suggestion is to use view source on that page and take a look at how the different slides are marked up.

If anyone wants to know how to use syntax coloring on code examples, I recommend Google prettify.

Browser bugs

This template relies on SVG and CSS. Please let me know if your browser has problems rendering this template!

Firefox seems to be the most reliable, and works well on desktop and tablets.

Some browsers don't scale the SVG correctly

Others don't implement the touch events needed for swiping to the next or previous slide, e.g. the stock browser on Android. :(

On Android if the text wraps halfway across, disable auto-fit pages via settings > advanced > auto-fit pages. Sadly, the default setting causes pages to wrap prematurely.