Tuesday, August 13, 2019

As I am working to integrate Vue.js into our web-sites and products, I wanted to get rid of JQuery on our Boostrap based web-sites, in order to keep things lean and simple.

I did look at Bootstrap.Native, but it seems that this is not made for web-pages that are rendered dynamically via JavaScript - such as pages built with Vue.js, React, etc. Specifically the Bootstrap dropdown component triggered via data-attributes, only works if the dropdown element is on the page from the beginning. This is actually contrary to the way the original JQuery / Bootstrap JavaScript code works.

I also wanted something even more very light weight - just basic functionality for Modals, Dropdowns, Tabs, Alerts, and Collapses (tool bar). And obviously I wanted to make sure that it would work well with Vue.js. So I decided to create my own.

So here is "Bootstrap.js.Light": https://github.com/jesperhoy/bootstrap.js.light

Minified and gzipped, it comes in at only 1.2 KB vs. 42.8 KB for bootstrap.js + jquery.js.

Demo page for Bootstrap v. 4 at https://jesperhoy.github.io/bootstrap.js.light/demo-bs4.html
And for Bootstrap v. 3 at https://jesperhoy.github.io/bootstrap.js.light/demo-bs3.html

For details on using it etc. see https://github.com/jesperhoy/bootstrap.js.light/blob/master/README.md

I just updated 7 different web-sites (including this blog) like this in a couple of hours. All the Bootstrap dropdowns, collapses, and modals just work without changing anything else at all. Note that this was possible because the sites used the "data-toggle" tag to open dropdowns, etc. If you use javascript for this, you will also need to update that code a bit.

Our web-sites just got a lot lighter both in bytes and lines of JavaScript, and I now feel a lot better about adding/updating functionality with Vue.js where this makes sense.

Share: Twitter /  Facebook /  LinkedIn    
Copyright © 2006-2021 Jesper G. Høy