bespoke-bullets
Bespoke.js
Bullet Lists forStyle and animate bullet lists and their transitions with some simple CSS rules.
Download
Download the production version or the development version.
Bower
Bespoke-bullets can be installed from Bower using the following command:
$ bower install bespoke-bullets
Basic Usage
First, include both bespoke.js
and bespoke-bullets.js
in your page.
Then, simply include the plugin and specify a selector when using the from(selector[, plugins])
method.
For example, let's assume we have the following slide markup:
<article>
<section>
<ul>
<li>Bullet 1</li>
<li>Bullet 2</li>
<li>Bullet 3</li>
</ul>
</section>
</article>
These bullets would be initialised like so:
bespoke.horizontal.from('article', {
bullets: 'li'
});
You can now style your bullets and their animations by using the provided classes.
CSS
The following classes are available on your bullet elements.
bespoke-bullet | Every bullet element |
bespoke-bullet-active | All active bullets |
bespoke-bullet-inactive | All inactive bullets |
Data Atrributes
The default behaviour, when the option value is true
, is to look for elements with data-bespoke-bullet
attributes:
For example:
bespoke.horizontal.from('article', {
bullets: true
});
<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>
Questions?
Contact me on GitHub or Twitter: @markdalgleish
License
Copyright 2013, Mark Dalgleish
This content is released under the MIT license
http://markdalgleish.mit-license.org