Well, that was a short lived idea. As said in the original post, rolling your own CSS framework is not for the feint-hearted. It's a huge undertaking, plus I have too many components and elements I created for my modified version of Bulma.
I'm back to using a modified version of Bulma. It's absolutely 100% certain, though, that I will not upgrade to Bulma v1.0.0. That's an abhorrent mess.
Rule number one of any CSS framework is that appearance should be as near-identical as possible on all browsers and all operating systems. Whether using Apple, *nix, or Windows servers, or Firefox, Chrome, Edge, or other browser – your website should appear the same on all (or nearly the same). The screen shot at the right is the Bulma.io website displayed in Firefox browser. It is the Bulma CSS website after the release of v1.0.0. It's what I would expect it to look like ... following on the heels of v0.9.4. That means fonts, font weights, sizes, etc.
And that is the very first thing broken with Bulma CSS v1.0.0.
If you look at the screen shot of the same website displayed in Chrome, you'll notice that the fonts are different. They appear slightly different in font-family, size, and definitely different in weight appearance.
Keep in mind, this is the Bulma.io website. No fiddling around, it's the same css on both browsers, and both screen shots taken within seconds of each other.
And, it's consistent will my tests on other websites I created with Bulma. For my tests, all I did was switch the Bulma css core to v1.0.0.
You can click on any of the screen shots to see the larger version for closer inspection.
The problem is that the font families are hard coded in the Bulma CSS framework (v1.0.0). I was able to modify the font-family in seven different css classes and it fixed the issue ... if it were that simple – but that is only one of many many issues with v1.0.0.
Rather than roll-my-own, I've decided to further enhance my parser to modify version 0.9.4. Essentially, I load the individual Bulma modules ... excluding the minireset ... and then add my fixes. In place of the minireset, I use the standard "sanitize" css with the two major extensions (forms and typography extensions). I call the result "sanitize-all.css". I've also modified the Bulma Utilities module. There's a lot of code in the utilities module that is totally useless.
One aspect of Bulma that I've always chuckled at is that Bulma does not include Javascript. The blurb makes it sound like Javascript is not needed. Rubbish, pure rubbish. You can't use the functionality and features of Bulma without Javascript.
For the past few months, I've been on-and-off working on accessibility features for my websites. When Bulma announced v1.0.0 with support for dark/light modes, I was intrigued. More than intrigued, I was looking forward to this "accessibility" feature.
In practice, the accessibility features of v1.0.0 are overkill – really, not any better than what was already included in 0.9.4.
I just finished my accessibility features for v0.9.4 ... added a total of about 2Kb of overhead. 1Kb in CSS, 1Kb in plain vanilla Javascript. And that includes a dark/light mode switcher and a font sizer (smaller, restore, larger) that changes the entire website page font sizes all at once. And, it's instantaneous.
Here's four images of my project. At the very top is a new "info-bar" that is sticky, meaning it is always displayed at the very top. At the far right of that are three capital "A"'s at three sizes, and an icon that switches from a "sun" to a "moon". The three A's are small, restore, and larger. Click on one of the three and the entire page font sizes change. Click on the sun icon and the light version of the website appears, click on the moon icon and the dark version of the website appears ... WITH NO RELOAD. It's instantaneous,
Update: My dark/light switch works by checking "prefers-color-scheme" and if set to dark, will automatically switch the mode to dark. (Light is the default). You can also set the mode default via the <html> tag, as in: <html lang="en" class="theme-light"> or <html lang="en" class="theme-dark">. The third way, of course, is with the switch button in real-time after the page loads.