Bullet Lists for Bespoke.js
Style and animate bullet lists and their transitions with some simple CSS rules.
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.
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|
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>
$ npm install bespoke-bullets
$ bower install bespoke-bullets
This plugin was built with generator-bespokeplugin.