Bootstrap: A Light Review
From February 8, 2018
In my last post, I outlined what Gittr is looking for in a framework and how I’m going to find it. This post is focused on Bootstrap – 1st of 3 of its kind.
Read This ArticleIn my previous post, I outlined how I found working with Bootstrap as part of a greater series on my company’s search for a new front-end framework. I’m now to working with Bulma and I really do like it.
I really like how easy it is to get started, but there are some intricacies that I don’t like. One example is the fact that almost all elements & components have strict requirements for class names. When I create a framework, syntax is really dry. A card’s HTML, for example, would look like this:
<div class='card'>
<header>Card Header</header>
<div class='content'>
...
</div>
<footer>
<a href='https://example.com' target='_blank'>Link</a>
</footer>
</div>With Bulma, the header and footer both need classes of “.card-header” and “.card-footer”, respectively. Which, to me, goes against the ethos of DRY code.
Aside from doubling up on class names, the HTML is pretty lean, especially when compared to Bootstrap. I’m way into the grid system and the automatically sized columns. Here’s how it stacks up against Bootstrap and Materialize:
| Item | Materialize Rank | Bootstrap Rank | Bulma Rank |
|---|---|---|---|
| Ease of Use | 3/5 | 4/5 | 4/5 |
| Filesize | 305kb (2/5) | 188kb (4/5) | 218kb (3/5) |
| Components | 4/5 | 3.5/5 | 4.5/5 |
| Extendability | 5/5 | 3/5 | 4/5 |
| Durability | 2/5 | 4/5 | 4/5 |
| Overall: | 3.2/5 | 3.7/5 | 3.9/5 |
The better rating and overall look aside, there is one major issue I’m having: icons. Including the correct JS and CSS files, using the right tags, and checking for issues, I’m still not able to get some icons to load – mostly the social icons. Not sure what’s up with that, but my Googling has been fruitless thus far. EDIT: I figured it out. A different version of FontAwesome is used, meaning that some of the icon names changed. Hrm :/.
Another edit: I wanted to make a note about interactivity. Bulma is pretty light and unobstrusive. One thing I don’t like is the lack of default JavaScript features, like state-toggling and such. Building out my own system for modal triggers seems…dirty. Not that bad, but, just, dirty.
Overall, Bulma gets 3.9 out of 5 stars, or bananas, or thumbs ups, or whatever rating system pleases you. Better than I expected it to. We’ll see how it chalks up to Semantic UI in my next post. The result for Bulma can be found at this link.
No Comments...yet