Vinyl Slideshows
Based on RevealJS framework

The Vinyl Team

RevealJS based presentations

This is a RevealJS based presentation.

We will present you some features, but feel free to look for the initial project to see all possibilities

Vinyl specifities

Being part of Vinyl, presentation are a little bit pre-configured to work out of the box. Let's see the default behaviour:

  • Slides are 16:9 and can contain up to 20 lines of (normal sized) text
  • Slide content is centered (horizontally and vertically)
  • Slide numbering is displayed in bottom-right corner
  • If used with Jekyll, all plugins are active

Come on, let's explore features...

Vertical Slides
And inverted slides

Vertical slides

You are here in a nested/vertical slide.

Look at the slide numbering in the bottom-right corner.

Inverted slide

The first slide of this slides column has the inverted class. Look how it has been stylished to denote a new part of the presentation.

The inverted class can be applied to any slide, not only nested slides.


Wow! How incredible are views. This is the default one.

Let's press ESC to enter the slide overwiew. So convenient during questions time.

Hold down ALT and click to zoom in and out. Not so useful, but impressing, isn't it?

Finally press S to see the speaker view. Very useful, and very very impressive for a browser based presentation!

Want to know more ? Continue.

Fragments & animations
The missing feature of ImpressJS

What is fragment?

Fragments are pieces of slide which appear one at a time.

Fragment styles

There's different types of fragments, like:

in fade-in fade-out out

grow / shrink / strike

highlight-primary highlight-success highlight-warning highlight-danger

current-visible highlight-current-primary highlight-current-success highlight-current-warning highlight-current-danger


Based on Animate.css framework.

Input Attention seeker Output

Let's style it
Even if the default theme is sooooo great


You can of course trash all the hard and beautiful work made by your lovely developer and create a full new CSS theme. Look at the _sass/reveal/theme/blue.scss file to get some inspiration.

Of course if you do a very beautiful theme, feel free to share it, with Vinyl community, or even better, with RevealJS community.

Slide background

An image worth a thousand words.

Instead of inserting a small image just near your text, you can set it as slide background!

Set the data-background attribute to point to an image. Thats it!

It even works with, GIFs, videos, etc...

Slide background

But colors are strong too!

Sometimes it's hard to find a picture. Colors have many meanings use them!

Did you notice that it's a gradient instead of a plain color?

You can also change the background transition style. Here it's a zoom.


As said, all plugins are activated in Vinyl.

You have to use a server (like Jekyll, or NodeJS) to use them

Pretty code

#!/usr/bin/env python3

print("What to say? It's so useful.")
print("You can even edit this code block, if necessary!")

Maths and scientific notations

You can easily paste your LaTeX equation and MathJax do the job.

When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$

An obvious feature for a scientific presentation tool!

Vinyl features

Last but not least, you can use Vinyl features such as the columns framework.

That what allow us to do this three parts slide. Two half on the top. And one full-width part on the bottom.

Impressive, isn't it ?