How does it work?
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.
IE10+ since the script uses a lot of
classList, which is unavailable on IE9. The script contains polyfills for