A lightweight Bigfoot.js alternative in Javascript to create beautiful footnotes.
Barefoot grabs the common markup used for footnotes on the web, mostly generated by Markdown processors, and transform it into beautiful and meaningful footnotes.
<p>
<sup id="fnref1:1">
<a href="#fn:1" rel="footnote">1</a>
</sup>
</p>
...
<div class="footnotes">
<ol>
...
<li id="fn:1">
<p>I'm a footnote <a href="#fnref1:1" rev="footnote" class="footnote-backref">↩</a></p>
</li>
...
</ol>
</div>It's very easy to start Barefoot, just do the following:
<script src="dist/js/barefoot.min.js"></script>
<script>
lf = new BareFoot();
lf.init();
</script>There's little to no customization in Barefoot, you can change a few selectors, scopes, templates. Barefoot also lacks several options available in Bigfoot.js, such as activating footnotes on hover, allowing multiple footnotes, etc. If you need those options or more customization, please check Littlefoot.
I know barely nothing about Javascript nor have the resources to test this on a larger scale. I decided to build Barefoot after noticing several bloggers loading jQuery exclusively for Bigfoot. See, this is how cool Bigfoot.js is, we load an entire library just to have quirky footnotes.
IE10+ since the script uses a lot of classList, which is unavailable on IE9. The script contains polyfills for Element.matches and Element.contains.