DIY Presentations With

Bespoke.js

DIY Presentation
Micro-Framework

<1KB, no dependencies

Lightweight but powerful

Plugins!

...déjà vu?

Let's start from scratch.

Let's pick a font...

body {
   font-family: helvetica;
}

Let's add some style...

.bespoke-parent {
    background: #ccc;
    color: #06f;
}
.bespoke-slide {
    background: white;
}

Let's make it 3D!

Bespoke.js Classes

.bespoke-slide {
    transition: all .8s ease;
    transform-origin: 50% 50% -400px;
}
.bespoke-inactive {
    opacity: 0;
}
.bespoke-before {
    transform: rotateY(-90deg);
}
.bespoke-after {
    transform: rotateY(90deg);
}

1.

2.

3.

Simple.

More?

How about...

Cards?

Or...

How about...

Concave?

Or...

How about...

Coverflow?

Simple.

Let's make a progress bar...

bespoke.plugins.progress = function(deck) {
  
  var progress = document.querySelector('#progress');
  
  deck.on('activate', function(event) {
    progress.style.width = (
        (event.index * 100) /
        (deck.slides.length - 1)
      ) + '%';
  });
 
};

Whoosh.

Bespoke.js Events

Robust Plugin System

Lessons

Writing a library?

Making a presentation?

Do it yourself.

@markdalgleish

bit.ly/diyslides