gerhobbelt / bespoke-bullets

Bullet Lists for Bespoke.js

bespoke-bullets

Bullet Lists for Bespoke.js

Style and animate bullet lists and their transitions with some simple CSS rules.

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'),
  bullets = require('bespoke-bullets');

bespoke.from('article', [
  bullets('li, .bullet')
]);

When using browser globals:

bespoke.from('article', [
  bespoke.plugins.bullets('li, .bullet')
]);

As you may have noticed, you can provide a custom bullet selector. This allows you to easily configure which elements are treated as bullets.

CSS

The following classes are available on your bullet elements, which allow you to style and animate them.

bespoke-bullet	Every bullet element
bespoke-bullet-active	All active bullets
bespoke-bullet-inactive	All inactive bullets
bespoke-bullet-current	The current bullet

Data Atrributes

When no selector is provided, the default behaviour is to look for elements with data-bespoke-bullet attributes, for example:

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

<article>
  <section>
    <h1 data-bespoke-bullet>Slide Title</h1>
    <ul>
      <li data-bespoke-bullet>Bullet 1</li>
      <li data-bespoke-bullet>Bullet 2</li>
      <li data-bespoke-bullet>Bullet 3</li>
    </ul>
  </section>
</article>

Package managers

npm

$ npm install bespoke-bullets

Bower

$ bower install bespoke-bullets

Credits

This plugin was built with generator-bespokeplugin.

License

MIT License