DIY Presentations With
Bespoke.js
DIY Presentation
Micro-Framework
Lightweight but powerful
- Harnesses CSS transitions
- Control API
- Events
- bespoke-vcr
- bespoke-hash
- bespoke-bullets
- bespoke-loop
- bespoke-spotlight
(by @mobz)
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;
}
Bespoke.js Classes
- bespoke-active
- bespoke-inactive
- bespoke-before
- bespoke-before-n
- bespoke-after
- bespoke-after-n
.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);
}
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)
) + '%';
});
};
Bespoke.js Events
- activate
- deactivate
- next
- prev
- slide
Robust Plugin System
- Return false to cancel events
- Write intercepting plugins
Writing a library?
- Tiny, extendable core
- Plugins, even for common functionality
- Modern browser features + polyfills
Making a presentation?
Do it yourself.
@markdalgleish
bit.ly/diyslides