bespokejs / bespoke

Bespoke.js DIY Presentation Micro-Framework Bespoke.js is a super minimal (1KB min'd and gzipped), modular presentation library for modern browsers, designed to foster a rich plugin ecosystem. The core library sets up the presentation, provides a simple control API and manages events. Any other functionality is implemented as a plugin. Joining the Bespoke.js ecosystem is simple with the suite of official Yeoman generators: • Bespoke.js Generator • Bespoke.js Plugin Generator • Bespoke.js Theme Generator Creating a Presentation Due to the highly modular nature of Bespoke.js, the quickest way to get started is with Bespoke.js Generator, a Yeoman generator that scaffolds a boilerplate presentation with a Gulp build system. Assuming you have Node.js installed, in a blank directory: In your newly scaffolded project, you can use the following Gulp tasks: • to run a preview server with LiveReload. • to deploy to GitHub Pages. • to 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 , Bower with , or manually download either the [production version][min] or the [development version][max]. The Bespoke.js core is extremely lightweight, so you'll probably want to include some plugins. [min]: https://raw.github.com/bespokejs/bespoke/master/dist/bespoke.min.js [max]: https://raw.github.com/bespokejs/bespoke/master/dist/bespoke.js Basic Usage Loading Bespoke Bespoke.js is shipped in a UMD format, meaning that and its plugins are available as CommonJS/AMD modules or browser globals. Markup It's completely up to you which tags you use, but the following is a good starting point: JavaScript To create a new presentation, Bespoke.js provides the method, which takes a selector or element reference and an array of plugins, and returns a deck instance. By default, all non-script child elements of the resolved parent element become slides. You can customize this behavior by passing a custom selector. Plugins Official Plugins All official plugins can be installed from npm or Bower, e.g. or • bespoke-keys for keyboard and remote control interaction. • bespoke-touch for touch interaction. • bespoke-classes for deck status classes. • bespoke-bullets for animated bullet lists. • bespoke-scale for responsive slide scaling. • bespoke-hash for hash routing. • bespoke-backdrop for animated backdrop elements. • bespoke-state for slide-specific deck styles. • bespoke-progress for progress bars. • bespoke-forms for form element support. • bespoke-loop for looped presentations. • bespoke-vcr for recording and playback. All Plugins You can view the full list of Bespoke.js plugins on npm by browsing the bespoke-plugin keyword. Using Plugins All official plugins are provided in a UMD format, meaning they are available as CommonJS/AMD modules or browser globals. For example, if you're using CommonJS modules via browserify or webpack, it would look something like this: If you're using browser globals, all official plugins are added to the object, for example: The first slide is activated automatically after all plugins are called unless one of those plugins has already activated a slide. Themes Official Themes • Cube — (view demo) • Voltaire — (view demo) • Nebula — (view demo) As with plugins, all official themes can be installed from npm or Bower, e.g. or All Themes You can view the full list of Bespoke.js themes on npm by browsing the bespoke-theme keyword. Using Themes Themes are included just like any other plugin: If you're using browser globals, all official themes are added to the object, for example: Advanced Usage From HTMLElement If you already have a reference to a DOM node, you can pass it directly to the method. Slide Selector You can specify which elements become slides by passing an options Hash containing the key and, optionally, the key ) to the method. The value of either key can be a CSS selector or a DOM node. For example: This advanced usage allows you to include auxiliary 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 Deck instances are provided to plugins and returned when instantiating a presentation. The following properties are available on each instance. *Note: The optional parameter is an object that will be merged with the object in subsequent event handlers.* next( [eventData] ) Next slide. prev( [eventData] ) Previous slide. 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 destroy Fire the destroy event. This method can be used to remove the deck from the DOM. Events Binding Events Events are bound via the deck instance. Each event is passed an event object containing a reference to the relevant slide and its index. Standard Events 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. destroy Presentation is about to be destroyed, it's time for clean-up. Deck Interaction Events 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 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 speci…