Home

Awesome

Build Status Coverage Status

bespoke-backdrop

Backdrop elements for Bespoke.js

Automatically generate background elements that can be styled and animated indepedently of your slide content.

Classes specified in data-bespoke-backdrop attributes will be added to the list of classes that are provided by default.

Download

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

Usage

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

bespoke.from('#presentation', [
  backdrop()
]);

Then add data-bespoke-backdrop attributes to your slides.

<article>

  <section>
    No backdrop
  </section>

  <section data-bespoke-backdrop="special">
    Special backdrop
  </section>

  <section data-bespoke-backdrop="super special">
    Super special backdrop
  </section>

</article>

Not using CommonJS? View the full Bespoke.js plugin documentation.

Classes

The following classes are provided on the backdrop elements:

<table> <tr> <td><b>bespoke-backdrop</b></td> <td>Every backdrop element</td> </tr> <tr> <td><b>bespoke-backdrop-active</b></td> <td>The active backdrop</td> </tr> <tr> <td><b>bespoke-backdrop-inactive</b></td> <td>All inactive backdrops</td> </tr> <tr> <td><b>bespoke-backdrop-before</b></td> <td>All backdrops before the active backdrop</td> </tr> <tr> <td><b>bespoke-backdrop-after</b></td> <td>All backdrops after the active backdrop</td> </tr> </table>

Package managers

npm

$ npm install bespoke-backdrop

Bower

$ bower install bespoke-backdrop

Credits

This plugin was built with generator-bespokeplugin.

License

MIT License