Sunday, February 17, 2019
I have been using Bootstrap (v. 3) for several years now, and have been very 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.
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 and find a new CSS framework.
I want just one CSS framework that I can use for everything - both to avoid spreading myself too thin as well as achieving a consistent look.
My (very subjective) requirements
My future CSS framework must...
- Work for "web apps" using Vue.js.
- Have a comprehensive list of components.
- 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.
- Must be actively maintained.
Don't want to make a new start with something that is already abandoned.
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...
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:
- Most frameworks requires writing framework specific ugly HTML code - with way too many nested DIVs and classes.
I am currently stuck with Bootstrap v. 3 for exactly this reason - it will require a lot of work to rewrite the HTML for something else.
It seems to me that a more sustainable approach would be to style tag names directly instead of all those class names. For example CSS styling "a" instead of ".link". The "Picnic CSS" framework does exactly this and calls it "invasive CSS" vs. "opt-in CSS". Unfortunately Picnic CSS appears to be abandoned.
- Most (if not all) frameworks use CSS preprocessors (LESS/SASS). I never really paid much attention to this before, but after customizing the color schemes of a couple of the frameworks with SASS, I now see the light. SASS is really cool and makes writing CSS a lot easier and a lot more manageable! There are Visual Studio extensions that compile SASS files (.scss) to native CSS on save, making it easy to integrate into my work flow.
- Most (if not all) frameworks use some kind of "CSS reset" to make different browsers render HTML the same way - and many use normalize.css.
- Many of the fancy controls offered by the frameworks, such as custom radio/check boxes, are really just CSS tricks that are easy to copy - and even easier to recreate under Vue.js.
- I will probably never use more than 10% of the CSS included with most frameworks - in other words - using a framework causes a lot of wasted bandwidth and browser CPU time. Some frameworks do allow picking specific modules (via SASS), but even so, there would still be a lot of unused CSS code.
So in conclusion, rather than using one of the frameworks, I will probably end up writing my own custom CSS using:
- "invasive CSS"
- Normalize.css as a base
- "Borrowed" styles and CSS tricks that I like from different frameworks