bespoke-state

Slide-specific deck styles for Bespoke.js

Style your entire deck differently based on the active slide.

Classes specified in data-bespoke-state attributes will be added to the deck's parent element when the slide is activated.

Download

Download the production version or the development version, or use a package manager.

Usage

This plugin is shipped in a UMD format, meaning that it is available as a CommonJS/AMD module or browser global.

For example, when using CommonJS modules:

var bespoke = require('bespoke'),
  state = require('bespoke-state');

bespoke.from('article', [
  state()
]);

When using browser globals:

bespoke.from('article', [
  bespoke.plugins.state()
]);

Finally, add data-bespoke-state attributes to your slides.

<article>
  <section>
    Regular deck style
  </section>
  <section data-bespoke-state="special">
    Special deck style
  </section>
  <section data-bespoke-state="super special">
    Super special deck style
  </section>
  <section>
    Regular deck style
  </section>
</article>

Package managers

npm

$ npm install bespoke-state

Bower

$ bower install bespoke-state

Credits

This plugin was built with generator-bespokeplugin.

License

MIT License