# Vinyl SlideshowsBased on RevealJS framework

The Vinyl Team
github.com/AlexisBRENON/Vinyl

## 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 SlidesAnd 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.

## Views

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 & animationsThe 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:

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

### Animations

Based on Animate.css framework.

Input Attention seeker Output

## Let's style itEven if the default theme is sooooo great

### SCSS/CSS

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.

## Plugins

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 ?