Less than 1KB minified and gzipped, with no dependencies.
Bespoke.js provides the foundation, then gets out of your way so you can focus on uniquely crafting your own personal deck style.
Using keyboard and touch events, Bespoke.js adds classes to your slides, while you provide the CSS transitions.
With its robust plugin system, new functionality can be added to Bespoke.js easily.
Want a boilerplate presentation? Use the official Bespoke.js Yeoman Generator.
Download the production version or the development version.
Bespoke.js requires a modern browser with ES5 support.
Bespoke.js can be installed from Bower using the following command:
$ bower install bespoke.jsView the demo at the official Bespoke.js project page.
- DIY Presentations With Bespoke.js by Mark Dalgleish
- Bespoke.js: The Road to 1KB by Mark Dalgleish
- Javascript's Slightly Stricter Mode by Glen Maddern
- The Trials of Transition Height: Auto by Charlie Gleason
- Rapid Web App Dev With Yeoman by Michael Taranto
- Projects vs Products by John Barton
- Learn You The Node.js For Much Win by Rod Vagg
- Introduction to hapi by Mark Wolfe
Made a presentation with Bespoke.js? Let me know.
The simplest way to get started is by using generator-bespoke, a generator for Yeoman that scaffolds a boilerplate presentation.
Assuming you have Node.js installed:
$ npm install -g yo generator-bespoke
$ mkdir my-presentation && cd $_
$ yo bespokeThe generated project includes a Grunt build system, a preview server with LiveReload, static asset compilation (Jade, Stylus and CoffeeScript), and a GitHub Pages deployment task.
In your newly scaffolded project, you can use the following Grunt tasks:
$ grunt serverto run a preview server with LiveReload.$ grunt deployto deploy to GitHub Pages.$ gruntto compile static assets to 'public'.
For more detailed instructions, check out the generator-bespoke repo.
To create a Bespoke.js presentation by hand, follow these 3 simple steps:
- Create a page with required slide markup and resources
- Activate your deck via the JavaScript API
- Create a custom style sheet using the Bespoke.js classes
Need more functionality? Use an existing plugin, or create a new one.
The tags you use are completely optional. Once a parent element is selected, the child elements become slides.
<link rel="stylesheet" href="path/to/my/theme.css">
<article>
<section>Slide 1</section>
<section>Slide 2</section>
<section>Slide 3</section>
</article>
<script src="bespoke.min.js"></script>
<script src="path/to/my/script.js"></script>Decks are created by selecting the parent element with the from(selector) method, with optional 'horizontal' or 'vertical' event handlers.
Uses space bar, horizontal arrows and swipes for navigation.
bespoke.horizontal.from('article');Uses space bar, vertical arrows and swipes for navigation.
bespoke.vertical.from('article');For the absolute purist only. Minimal decks provide a simple control API with zero default event handlers. Key presses and swipes have no effect, it's up to you to implement your own interactions from scratch.
bespoke.from('article');To create your own custom deck styles, Bespoke.js provides the necessary classes to your elements.
| bespoke-parent | The deck's containing element |
| bespoke-slide | Every slide element |
| bespoke-active | The active slide |
| bespoke-inactive | All inactive slides |
| bespoke-before | All slides before the active slide |
| bespoke-before-n | All slides before the active slide, with n value incrementing |
| bespoke-after | All slides after the active slide |
| bespoke-after-n | All slides after the active slide, with n value incrementing |
If you've created an awesome theme you'd like me to share, let me know.
The following plugins are available for Bespoke.js.
All official plugins can be installed from Bower, e.g. $ bower install bespoke-bullets
- bespoke-bullets for animated bullet lists.
- bespoke-hash for hash routing.
- bespoke-state for slide-specific deck styles.
- bespoke-loop for looped presentations.
- bespoke-vcr for recording and playback.
- bespoke-spotlight by @mobz, for quick-searching slide content.
- bespoke-blackout by @originell, for temporarily blacking out the screen.
If you'd like your plugin added to this list, let me know.
If you already have a reference to a DOM node, you can pass it directly to the from method.
bespoke.horizontal.from(element);Programmatically control your presentation, or implement a custom interface when using a minimal deck.
// Next slide
bespoke.next();
// Previous slide
bespoke.prev();
// Go to a specific slide
bespoke.slide(0);Individual deck instances can be created and controlled separately.
// First deck instance
var one = bespoke.horizontal.from('#deck-one');
one.next();
one.prev();
one.slide(0);
// Second deck instance
var two = bespoke.horizontal.from('#deck-two');
two.next();
two.prev();
two.slide(0);The global bespoke API interacts with all deck instances. For example, calling bespoke.next() is actually calling next() on all decks.
The following properties are available on each instance.
Note: The optional eventData parameter is an object that will be merged with the event object in subsequent event handlers.
| next([eventData]) | Next slide. |
| prev([eventData]) | Previous slide. |
| slide(index[, eventData]) | Activate a specific slide by index. |
| on(event, callback) | Attach event handlers |
| fire(event[, eventData]) | Fire custom events. This method is primarily designed for plugin authors. |
| parent | The deck's parent element |
| slides | An array of slide elements |
Events are bound via the deck instance. Each event is passed an event object containing a reference to the relevant slide and its index.
deck.on(eventName, function(event) {
event.slide; // Relevant slide
event.index; // Index of relevant slide
// Prevent default functionality (for user interaction events only)
return false;
});In most cases, you will only need to use these standard events.
| activate | A slide has been activated. event.slide is the activated slide. |
| deactivate | A slide has been deactivated. event.slide is the deactivated slide. |
These events are fired when the user has interacted with the presentation, but before their interaction has had any effect.
This allows you to intercept the default behaviour by returning false from the event handler.
| next | The next slide has been requested, even if last slide is active. event.slide is the current slide. |
| prev | The previous slide has been requested, even if first slide is active. event.slide is the current slide. |
| slide | A specific slide has been requested. event.slide is the requested slide. |
When binding events, the on method returns a function that can be used to remove the event handler.
var off = deck.on('activate', function() {
// ...
});
// Unbind event
off();If you need to expand upon the core Bespoke.js feature set, additional functionality can be packaged up as plugins.
If you'd like to learn by example, check out the list of existing plugins.
Plugins are simply functions that are called when presentations are created.
They are passed a deck instance which allows you to interact with the deck's state, bind events and modify its elements.
// Creating the plugin
bespoke.plugins.myPlugin = function(deck) {
deck.on('activate', function(e) {
console.log('Activated slide ' + (e.index + 1) + ' of ' + deck.slides.length);
});
};The plugin can now be provided to the second parameter of the from(selector[, plugins]) method.
// Using the plugin
bespoke.horizontal.from('article', { myPlugin: true });If your plugin needs some configurability, options can be passed through as the second parameter.
// Creating the plugin with options
bespoke.plugins.myPlugin = function(deck, options) {
var showTotal = options && options.showTotal;
deck.on('activate', function(e) {
console.log('Activated slide ' + (e.index + 1) +
(showTotal ? ' of ' + deck.slides.length : ''));
});
};
// Using the plugin with options
bespoke.from('article', {
myPlugin: {
showTotal: true
}
});Additional event data can be supplied to next, prev and slide, which is merged with the final event object in subsequent event handlers.
This functionality is particularly useful if you need to differentiate between events caused by your plugin, and those caused by your end users or other plugins.
bespoke.plugins.myPlugin = function(deck) {
// Differentiating our plugin's events
deck.on('activate', function(event) {
if (event.foo === 'bar') {
// Triggered by my plugin...
} else {
// Triggered by end user, or another plugin...
}
});
// Providing custom event data
deck.next({
foo: 'bar'
});
};Contact me on GitHub or Twitter: @markdalgleish
Copyright 2013, Mark Dalgleish
This content is released under the MIT license
http://markdalgleish.mit-license.org