Instant Presentation — open source presentation template in HTML/CSS/JS

On in Articles, Development, Tutorials, Releases by Krzysztof Rusnarczyk

Hi guys, I've just released a presentation/slideshow template created in open web technologies named Instant Presentation. It's on MIT License, so you can use it however you want. You can clone/fork it from GitHub here or see the live example.

The presentation should be self-explanatory, but below I present a quick tutorial how to use it.

Basic use

To use the template you need pretty much any web browser. It works in most recent versions of Firefox, Chrome, Safari, Opera and IE (only on server, localStorage doesn't work on filesystem with IE). Just open the index.html file and that's all.

You should display the presentation on devices bigger than 768px viewport width.

The presentation has three basic elements:

  • slides container,
  • progress bar,
  • slide number (optional).

To navigate use arrow keys (left and right) or swipe horizontally. For touch gestures I used great Hammer.js library.

Presentation saves previous state in localStorage, so don't worry if your device crashes or turns off during the presentation. Just open the slideshow and you're in the place you stopped last time.

To edit the presentation you need some very basic HTML/CSS/JS skills, which I bet you have since you are reading this article.

Slide types

Presentation has few basic slide types you can use. These are:

  • title slide — first slide of your presentation (class title),
  • section slide — for beginning of a new section (this section will create a divider line in progress bar) (class section-start),
  • standard slide — with title, subtitle and content (class section),
  • special slide — a slide for important information, joke, question or just to break the flow a bit (class section-promo).

Editable content tags

The tags that are already styled in the presentation are:

  • <p>,
  • <ul>,
  • <ol>,
  • <q>,
  • <blockquote> (with <cite>),
  • <strong>,
  • <em>,
  • <h5>,
  • <h6>,
  • <small>,
  • <code>,
  • <pre>,
  • <a>,
  • <hr>.

You can also use special classes to align text (text-left, text-right, text-center) and float elements (float-left, float-right).

Simple grid system

I prepared simple grid system with 4 columns for you. You can use:

  • col-1,
  • col-2,
  • col-3,
  • col-4.

You can also apply offset:

  • col-offset-1,
  • col-offset-2,
  • col-offset-3.

For more about grid system see the live example.

Images

In presentation template you can of course use image content as well. I allow you to insert just the image with certain with or without certain width applied.

<img src="assets/img/example.jpg" alt="" width="300">
<img src="assets/img/example.jpg" alt="">

If you want insert images in columns:

<div class="row">
  <div class="col-2 col-offset-1">
    <img src="assets/img/example.png" alt="">
  </div>
</div>

Or insert them in content with float:

<p>
  <img src="assets/img/example.png" alt="" width="300" class="float-left">
  Lorem ipsum.
</p>

Video content

The template is also ready for video. You can insert it same way as images. Just use video tag and add specific sources. Remember to insert right formats to support all range of browsers. Example code:

<video controls>
  <source src="assets/video/example.webm" type="video/webm">
  <source src="assets/video/example.mp4" type="video/mp4">
</video>

Config

There is a config variable in index.html file named Config. You can change parameters inside it in order to add/remove/modify specific data in presentation:

  • SLIDE_NUMboolean, display slide numbers,
  • SLIDE_NUM_TIMEnumber, time to display slide number (ms),
  • LS_CSstring, name for localStorage key with current position,
  • BOUNCE_RATEnumber, percentage of bounce on swipe gesture.

Summing up

This simple presentation template created in open web technologies is available on MIT License. You can freely edit it the way you want and I strongly encourage you to publish your changes online in order to make it even better in the future.

Important links: