Yesterday I wrote that I had created a conversion utility (in PHP) to take a Bulma CSS Framework grid and convert it directly into my CSS Framework. I did do that, and solved the issue of different breakpoints. I wanted to further refine the conversion utility and do a full conversion, not just the grid.
Surprise, surprise. More surprises at the CSS version served by CDN that Bulma promotes. I need to remind: Bulma CSS Framework is the largest framework in file size. Version 0.9.4 is larger than Bootstrap. Funny thing is that Bootstrap is more complete. Where you need to load extensions separately from the Bulma CSS CDN, Bootstrap includes just about everything. Tell me, seriously, how can Bootstrap have more features and more components – and a smaller footprint?
I think that's because Bulma CSS throws in the kitchen sink. I mean some of the classes are just over the top. I've pointed out a few strange and contradictory classes ... well, it turns out there are quite a few of those.
I wrote my CSS Framework to be concise and terse. And simple. And that's where a full conversion utility will not work. Bulma CSS, by my reckoning, is promoted as it if were a Lamborghini. Well, I'm looking under the hood and what I see is a lawn mower engine trying to push a Lada SUV. I gave up on trying to convert anything but the grid system.
In my CSS Framework, I use the flexbox within my classes as a shortcut where possible. For example:
- flex: 0 0 auto;
is equivalent to three separate lines:
- flex-grow: 0;
- flex-shrink: 0;
- flex-basis: auto;
So, when I want to change just one element, I specify that and leave everything else alone. For my columns, I change the width only, so for four column that would look like:
- flex-basis: calc((100% / 12) * 4);
Bulma CSS, on the other hand, uses two lines of code, one that requires repetition all the time:
- flex: none;
- width: 33.33333%;
... essentially meaning, set all three to none, then change width (not flex-basis) to 33.3333% (I think my calc() is a bit more descriptive with less uncertainty). I want to make it clear: I am not complaining at all about Bulma's approach to column width. It works. I just have a different approach.
I personally think that Bulma's grid code is bloated with unnecessary elements. At least rarely used, and should be moved to an app basis, not a core. It's like the "breadcrumb" code. Included in Bulma, I think it belongs as an extension. Breadcrumb code is only pertinent to CMS and data driven applications ... not in all of them, but some drill-down cases. And, another example where Bulma's code is over-kill. The Bulma CSS code has four separators (arrow, dot, bullet, and right-pointing caret). Really, you need more than a forward slash (and that's not even included), more than one? You could just as easily have an unlimited number of separator choices by putting it in an aria-separator tag and call that from CSS.
I haven't even written breadcrumb module for my CSS Framework ... but you get where I'm going with that.
So, there won't be a conversion utility from me. Having a working grid converter is nice to have, but a grid is not the major part of building a website. It's just one of the building blocks.
Again, I'm spending a lot of time looking under the hood of Bulma CSS and Bootstrap. My advice, use Tailwind CSS. The Tailwind team make it clear that SASS (or any CSS pre-processor) is not really needed. They support the concept of modules, and using post process to include needed modules. They actually recommend PostCSS as a loader strategy. A good strategy: have a core that is a must-have and then use @import statements to include the CSS modules needed for the project.
And, a correction. In a previous article I stated that Bootstrap had three breakpoints covering four viewports. I was incorrect in that, that was in a previous version (I guess). The current version has six viewports. Those are XS (<576px), SM (>=576px), MD (>=768px), LG (>=992px), XL (>=1200px) and XXL (>=1440px).
And, to clarify, my CSS Framework has four viewports: PHONE (<768px), TABLET (>=768px), DESK (>=992px), WIDE (>=1200px). Should I have five or six (or more) viewports? Well, keep in mind that my strategy for containers is different than either Bootstrap or Bulma. So, no I don't think so at the moment, but I am giving that concept some thought.