Evaluating CSS frameworks

#css#bootstrap#vuejs#bulma

I have been using Bootstrap (v. 3) for several years now, and have been quite happy with it. However, Bootstrap relies on JQuery, and JQuery does not work well with reactive frameworks (Vue.js, React, Angluar, etc.), which is becoming a problem for me, as I am working to integrate Vue.js into our web-sites and products.

Also, it is redundant and feels wrong to include 2 JavaScript frameworks (Vue.js / JQuery) in my web-pages / products.

Bootstrap just announced that v. 5 will not have the JQuery dependency, but no information on if it will work better with reactive frameworks like Vue.js. It took a long time (years) from when Bootstrap v. 4 was announced until it was actually released, so who knows when v. 5 will be ready. Also I doubt that upgrading the web-sites to Bootstrap v. 5 will be much easier than replacing Bootstrap with something else entirely.

So it is time to ditch Bootstrap v. 3 and find a new CSS framework.

I want just one CSS framework that I can use for everything between static / server rendered plain HTML web-sites and Vue.js rendered SPAs - both to avoid spreading myself too thin as well as achieving a consistent look.

My (very subjective) requirements

My future CSS framework must...

  1. Work for plain web-pages with a minimum of JavaScript.
  2. Work for "web apps" / SPAs using Vue.js.
  3. Have a comprehensive list of components.
  4. Not be "Material Design".
    Google's "Material Design" is nice for Android apps, but I am not fond of it for web-sites and desktop. For one thing - the text input boxes without borders and with the same background color as the page are not intuitive in these contexts.
  5. Must be actively maintained.
    Don't want to make a new start with something that is already abandoned.

Frameworks considered

Based on various "top X" lists around the web, I considered each of the following popular frameworks in relation to my requirements above:

Which leaves 2 final candidates: Bulma/Buefy and Spectre.

And the winner is...

The Bulma/Buefy combo has the best of both worlds. For plain web-pages one can just use Bulma and small pieces of vanilla JavaScript. And when more functionality is needed, throw in Vue.js / Buefy. Spectre looks good too, but is not as popular (GitHub stars) as Bulma and doesn't have anything similar to Buefy (collection of Vue.js components).

However, while evaluating the different frameworks, I learned a few things:

So rather than using one of the frameworks, I will probably end up writing my own custom CSS using:

Other advantages to this approach:

Jesper Høy's
Dev Blog

  • Home (blog posts)
  • About me and this website
  • My developer tech stack
  • My favorite software
  • My favorite online services
  • Cool stuff
  • My side projects
  • Referral codes
  • Our wonderful ice horses