Semantic UI: A Light Review

February 11, 2018
Frameworks Frontend

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 result of rebuilding my website with Semantic UI
The result of rebuilding my website with Semantic UI

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

ItemMaterialize RankBootstrap RankBulma RankSemantic Rank
Ease of Use3/54/54/54/5
Filesize305kb (2/5)188kb (4/5)218kb (3/5)875kb (1/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

No Comments...yet

Leave a Reply

Your email address will not be published. Required fields are marked *

Previous Post

Bulma: A Light Review

From February 9, 2018

In previous posts I outlined how I found working with Bootstrap as part of a greater series on the search for a new framework. I’m now working with Bulma

Read This Article
Next Post

Tool Reference

From June 16, 2018

A Reddit Post encouraged me to start maintaining a list of useful resources for web designers/developers.

Read This Article