Yesterday I published an article as a follow up to my review of Bulma CSS v1.0.0.
Here's the first article titled Bulma v1.0.0 is out: bloatware!! ... and the first follow up article titled Update on Bulma css v1.0.0.
In the first article, I made it clear that I've had issues with Bulma CSS from the very start of using it. Despite that, it's grid system and most nomenclature is excellent. The only issue I have with nomenclature is the naming of "columns" ... it should have been "row". I've fixed that in a custom version for my own use.
The broader issues have been a more serious challenge. In CSS frameworks, it is nearly impossible to avoid opinions. That is where the developer's opinions about the look or spacing of certain items becomes his own personal preferences. The developer may be outstanding at SASS and CSS, but often their sense of typography and design aren't that great.
That's the case with Bulma CSS. And it gets worse with Bulma CSS v1.0.0.
When version 1.0.0 was launched, a re-design of the website also appeared. I could not figure out why the site looked so "bold" all of a sudden ... meaning that the fonts used appeared to be bold and not normal. Bulma CSS has always favored a lighter look ... even the foreground colors were light. All of a sudden, version 1.0.0 seemed to break out of this and go the exact opposite way.
I dug into this a bit deeper. I develop for websites and web applications: that means I have several browsers at my disposal all the time - the list changes occasionally, but right now I have Chrome as my main browser, Firefox as secondary browser, Microsoft Edge as a "reluctant use" browser, and a few other archaic ones.
The Bulma site looks different with Chrome (and Edge) than it does for Firefox. Gheez, isn't Bulma supposed to look the same across all "systems" and browsers?
I fired up website inspection services in Chrome to try to figure this all out. where did the "bold" or font-weight get introduced (or changed)? On inspection, the font-weight is correctly set to "normal" and in numeric value as "400" ... both are correct for normal display. Meaning NOT bold.
So, open the CSS file up ... and there it is. More dang f**ng opinions. All of them wrong. Dead wrong ... the definitions in the master file alter the look of a website between different browsers by naming default fonts that are specific to either an operating system or browser.
Three of those are all in the new Variables section and five are new class definitions.
I added all eight of the bad code into my parser and modified each so that my own customized version is proper and correct.
The eight lines of code and their changes are:
–bulma-family-primary: Inter, SF Pro, Segoe UI, Roboto, Oxygen, Ubuntu, Helvetica Neue, Helvetica, Arial, sans-serif;
–bulma-family-secondary: Inter, SF Pro, Segoe UI, Roboto, Oxygen, Ubuntu, Helvetica Neue, Helvetica, Arial, sans-serif;
–bulma-family-code: Inconsolata, Hack, SF Mono, Roboto Mono, Source Code Pro, Ubuntu Mono, monospace;
.is-family-primary {
font-family: "Inter", "SF Pro", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", "Helvetica", "Arial", sans-serif !important;
}
.is-family-secondary {
font-family: "Inter", "SF Pro", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", "Helvetica", "Arial", sans-serif !important;
.is-family-sans-serif {
font-family: "Inter", "SF Pro", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", "Helvetica", "Arial", sans-serif !important;
}
.is-family-monospace {
font-family: "Inconsolata", "Hack", "SF Mono", "Roboto Mono", "Source Code Pro", "Ubuntu Mono", monospace !important;
}.is-family-code {
font-family: "Inconsolata", "Hack", "SF Mono", "Roboto Mono", "Source Code Pro", "Ubuntu Mono", monospace !important;
}
And, the corrected version:
–bulma-family-primary: sans-serif;
–bulma-family-secondary: sans-serif;
–bulma-family-code: monospace;
.is-family-primary {
font-family: sans-serif;
}
.is-family-secondary {
font-family: sans-serif;
}
.is-family-sans-serif {
font-family: sans-serif;
}
.is-family-monospace {
font-family: monospace;
}
.is-family-code {
font-family: monospace;
}
In your own modifications, you may want to consider deleting the class definitions (".is-familyxxxx") and use your own style based on the design you are working with.