Friday, August 16, 2019

Earlier this year, I wrote a post about evaluating CSS frameworks in the context of implementing Vue.js on my existing Bootstrap 3 based web-sites and for future projects. My conclusion at the time was that I would write my own new CSS framework - for a number of good reasons...

Then, recently I came across another framework "uiv" - which caused me to consider this once gain.

"uiv" is basically a Vue.js replacement for JQuery and bootstrap.js for Bootstrap v. 3.

As mentioned in the earlier post, I like Bootstrap. This is not because Bootstrap is prettier than the other options, but because it has a "generic" well known look and feel - and it is solid, consistent, tried and tested. And perhaps more important - I already know it (at least v. 3).

Replacing JQuery and bootstrap.js with "uiv" on my existing Bootstrap 3 based web-sites, would be a simple and fast solution for getting Vue.js onto these. And it would allow me to postpone a major CSS update (really a web-site rewrite) - perhaps indefinitely.

I wouldn't want to start new projects of with Bootstrap 3 (outdated), but if I could use the same approach with Bootstrap 4 (for example using the "Bootstrap-Vue" framework), then I would still be in familiar waters, I would be using something current, and I would get the new v. 4 features.

I briefly considered this setup - "uiv" for old web-sites and "Bootstrap-Vue" for new projects, but realized that these frameworks are mostly wrappers around the Bootstrap CSS. I would much rather write the HTML myself using the Boostrap classes etc. directly - and save the framework overhead.

Another problem with "uiv" and "Bootstrap-Vue", is that they require Vue.js as well as their own JavaScript code on ALL web-pages - if only to show a simple dropdown. So for pages that don't need Vue.js for anything else - I would still just be replacing JQuery+bootstrap.js with Vue.js+uiv.js/bootstrap-vue.js.

And finally, this approach will require me to learn two new frameworks (uiv / Bootstrap-Vue) + Bootstrap 4.

All this led me to creating "Bootstrap.js.Light" - a lightweight (1.3 KB), Vue.js compatible (but not dependent) replacement for JQuery and bootstrap.js for Bootstrap (v. 3 and 4) projects. Read more about this in this post.

This does just enough to power the basic Bootstrap stuff - and nothing else, and it doesn't get in the way of Vue.js.

So it turns out that I won't need to ditch Bootstrap alter all :-)

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