DIY Presentation Micro-Framework
Joining the Bespoke.js ecosystem is simple with the suite of official Yeoman generators:
Assuming you have Node.js installed, in a blank directory:
$ npm install -g generator-bespoke$ yo bespoke
In your newly scaffolded project, you can use the following Gulp tasks:
$ gulp serveto run a preview server with LiveReload.
$ gulp deployto deploy to GitHub Pages.
$ gulpto compile static assets to 'public'.
For more detailed instructions, check out the Bespoke.js Generator repo.
If you'd prefer to craft a new presentation from scratch, you can install Bespoke.js from npm with
npm install bespoke, Bower with
bower install bespoke.js, or manually download either the production version or the development version. The Bespoke.js core is extremely lightweight, so you'll probably want to include some plugins.
Bespoke.js is shipped in a UMD format, meaning that
bespoke and its plugins are available as CommonJS/AMD modules or browser globals.
It's completely up to you which tags you use, but the following is a good starting point:
Slide 1Slide 2Slide 3
var deck = bespokefrom'#presentation' plugins;// Next slidedecknext;// Previous slidedeckprev;// Go to a specific slidedeckslide0;// Get the active slide indexdeckslide; // 0
By default, all non-script child elements of the resolved parent element become slides.
All official plugins can be installed from npm or Bower, e.g.
$ npm install bespoke-keys or
$ bower install bespoke-touch
All official plugins are provided in a UMD format, meaning they are available as CommonJS/AMD modules or browser globals.
var bespoke = require'bespoke'classes = require'bespoke-classes'keys = require'bespoke-keys'touch = require'bespoke-touch';var deck = bespokefrom'#presentation'classeskeystouch;
If you're using browser globals, all official plugins are added to the
bespoke.plugins object, for example:
var deck = bespokefrom'#presentation'bespokepluginsclassesbespokepluginskeysbespokepluginstouch;
As with plugins, all official themes can be installed from npm or Bower, e.g.
$ npm install bespoke-theme-cube or
$ bower install bespoke-theme-voltaire
Themes are included just like any other plugin:
var bespoke = require'bespoke'cube = require'bespoke-theme-cube'keys = require'bespoke-keys'touch = require'bespoke-touch';var deck = bespokefrom'#presentation'cubekeystouch;
If you're using browser globals, all official themes are added to the
bespoke.themes object, for example:
var deck = bespokefrom'#presentation'bespokethemescubebespokepluginskeysbespokepluginstouch;
If you already have a reference to a DOM node, you can pass it directly to the
You can specify which elements become slides by passing an options Hash containing the key
parent and, optionally, the key
slides) to the
The value of either key can be a CSS selector or a DOM node.
bespokefrom parent: selectorOrElement slides: selectorOrElementList ;
bespokefrom parent: '#presentation' slides: '#presentation > section' ;
This advanced usage allows you to include auxilary HTML inside the parent element, skip slides that don't match the selector or explicitly filter out slides before passing on the collection.
Deck instances are provided to plugins and returned when instantiating a presentation. The following properties are available on each instance.
|slide([index[, eventData]])||Get or set the active slide index.|
|on(event, callback)||Attach event handlers|
|off(event, callback)||Unbind 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.
deckoneventNameeventslide; // Relevant slideeventindex; // Index of relevant slide// Prevent default functionality (for deck 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 deck has been interacted with, but before the 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 = deckon'activate'// ...;// Unbind eventoff;
You can also use the
off method. However, you must use the same function reference that was used when registering the event.
// Bind eventdeckon'activate' onActivate;// Unbind eventdeckoff'activate' onActivate;
Want a boilerplate plugin? Use the official Bespoke.js Plugin Generator.
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.
To be consistent with the suite of official Bespoke.js plugins, it is highly recommended that you implement your plugin as a function that takes configuration and returns a plugin function.
// Creating the pluginvarreturndeckon'activate'console.log'Activated slide ' + eindex + 1 + ' of ' + deckslideslength;;;
The plugin can now be provided in the plugins array when using the
from(selector[, plugins]) method.
// Using the pluginbespokefrom'#presentation'myPlugin;
If your plugin needs some configurability, your plugin factory function can take options and return a configured plugin function.
// Creating the plugin with optionsvarreturnvar showTotal = options && optionsshowTotal;deckon'activate'console.log'Activated slide ' + eindex + 1 +showTotal ? ' of ' + deckslideslength : '';;;// Using the plugin with optionsbespokefrom'#presentation'myPlugin showTotal: true;
Additional event data can be supplied to
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.
varreturn// Differentiating our plugin's eventsdeckon'activate'if eventfoo === 'bar'// Triggered by my plugin...else// Triggered by end user, or another plugin...;// Providing custom event datadecknextfoo: 'bar';;
Themes are essentially just plugins that also happen to insert styles into the page.
You can quickly scaffold a boilerplate theme project with the official Bespoke.js Theme Generator.
Made a presentation with Bespoke.js? Let me know.
Contact me on GitHub or Twitter: @markdalgleish