After three reviews of Bulma CSS v1.0.0 ... I think I'll roll my own.
I've come up with a few different ways of taming the bloat:
- Start with the "no-dark-theme" version, add the missing "Helpers", modify the eight hard font calls, and remove minireset (replace, actually, with sanitize).
This solution still ends up at well over 520Kb. More than 3X the size of bootstrap. More than double the size of 0.94. - Use the "no-dark-theme" version from CDN, create a CSS file to load after that ... unacceptable solution because it still carries out the minireset.
- Go back to version 0.9.4.
I'm not sure that any of these solutions is a good one. Even maintaining the status-quo (using minified custom version of 0.9.4) means that I still end up with 211 Kb with each page load. There are other CSS frameworks that are less than 5% of that size and use Flexgrid as the grid system. I have to really rethink what I need for a CSS framework.
I need to make it clear: out of the field of CSS frameworks available, Bulma remains my top choice. I know it is ranked at about 5th overall in terms of general popularity. The most popular is Tailwind (right now), but at a huge penalty: 2.3Mb size. That's one killer add to a stream.
Bulma can be used with SASS for large scale developments, or as variable based CSS for smaller projects. Mine are all small-scale projects.
I've read a lot of negative comments about Bulma. They tend to fall along the same lines as my issues ... the first being that useless piece of code "minireset" that breaks all the usual HTML formatting. Getting rid of that minireset was the motivation in creating my own parser. Essentially, I read in the entirety of bulma.css, look for the start of minireset, look for the end of minireset and replace the inner code with a null space. Bingo, minireset gone.
You have to consider, though, the purpose of minireset. All of the reset/normalize/sanitize utilities try to reach the goal of browser independence for html code. In theory, they want the same website to look the same regardless of browser used. Any "reset" reduces everything to zero, and should be followed by a rebulding process returning the formatting elements to a "standard" that displays the same on all browsers. "Normalize" works slightly differently, in that it only changes the css codes that are inconsistent in browsers and sets those elements to one standard look. "Normalize.css" is the grand-daddy of all of these and the most widely used. Some, however, find that normalize is out of date and not in step with current standards ... and another similar approach is "sanitize", promoted as a more modern way of achieving standardization.
In a css framework, reset or minireset is not the way to go. That creates an environment where the developer's opinions override the industry. It's clear that ANY deviation from the industry is opinionated. But gheez, reducing all tags to the same basic font, font-size, alignment, and spacing as the basic paragraph tag goes to the insane level.
Over the coming months, I'll be looking at creating my own CSS. I'm not going to call it a framework ... essentially I'm not trying to replicate Boostrap, Bulma or Tailwind. I just want a responsive grid based on Flexgrid and some basic components for rapid deployment. I expect I can create that in less than 20Kb.
I'll let you all know the progress.