In my previous posts, I outlined how I found working with Bootstrap and Bulma as part of a greater series on my company’s search for a new front-end framework. I’m now to working with Semantic UI and, though I like it, I’m not sold.
The first problem I had with Semantic UI was that it wasn’t as good as I thought it was going to be. For seemingly months now, I’ve heard nothing but praise for their amazing system. It was nothing short of a let down. I don’t like the naming conventions much (though they are much easier to use than Bootstrap’s), I don’t like how ambiguous some of it is (like adding spacing, or changing font-sizes), and I generally think the styling isn’t that great.
BUT, Semantic UI does have a lot to offer, and I found that while working with it, the most difficult thing to get used to was the ecosystem as a whole, and not any specific parts. What I mean is I just need to get used to working with it. It’s not a “standard” framework. It’s much more than that. I think it’s a whole front-end design system, and it needs to be used as such.
I did not like the Semantic UI result of my Site Rebuild. But I think that’s ok – this site was designed with a different goal in mind. I’m not going to keep this up, I think Bootstrap and Bulma did a much better job with this project. I think the problem is that those two frameworks won’t be as scalable as Semantic.
The Final Tally
| Item | Materialize Rank | Bootstrap Rank | Bulma Rank | Semantic Rank |
|---|---|---|---|---|
| Ease of Use | 3/5 | 4/5 | 4/5 | 4/5 |
| Filesize | 305kb (2/5) | 188kb (4/5) | 218kb (3/5) | 875kb (1/5) |
| Components | 4/5 | 3.5/5 | 4.5/5 | 5/5 |
| Extendability | 5/5 | 3/5 | 4/5 | 5/5 |
| Durability | 2/5 | 4/5 | 4/5 | 5/5 |
| Overall: | 3.2/5 | 3.7/5 | 3.9/5 | 4/5 |
So, Semantic UI comes in at the top with 4/5. A few things that haven’t already been taken into account that I’d like to mention: Icons are really easy to use (Semantic comes with FontAwesome prepackaged), the Grid System is better than any other I’ve used (even if it takes some practice), it’s really easy to extend the CSS (I created a whole “helpers” SASS file and compiled alongside Semantic), and it works the same across all platforms. It’s TRULY responsive. The result for Semantic can be found here