Awesome
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.
<table> <tr> <td><b>bespoke-bullet</b></td> <td>Every bullet element</td> </tr> <tr> <td><b>bespoke-bullet-active</b></td> <td>All active bullets</td> </tr> <tr> <td><b>bespoke-bullet-inactive</b></td> <td>All inactive bullets</td> </tr> <tr> <td><b>bespoke-bullet-current</b></td> <td>The current bullet</td> </tr> </table>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.