In my undergraduate software engineering class, I was introduced to Semantic UI. You can read about my early experiences with Semantic UI in my UI for Dummies article. Three years later, and I have found myself using Semantic UI for front-end web development ever since.
CSS frameworks are nothing new, they offer an easy way to create a modern looking website with little effort once you get to know the framework. There are quite a few CSS frameworks available, so why have I settled on Semantic UI?
It all comes down to Semantic UI’s use of natural language classes. As I mentioned in my UI for Dummies article, if you want a big red button, the class is quite intuitive, ui big red button. This means less looking up class names and more time creating content; of course, it doesn’t hurt to have a rough idea of Semantic UI’s component names.
One of the largest competitors to Semantic UI is Bootstrap, which I was using prior to Semantic UI. Bootstrap offers more components than Semantic UI, some with far better features, and much more customizability that most CSS frameworks. For example, Bootstrap has a navbar component that is like Semantic UI’s menu component. Bootstrap’s version offers far better mobile compatibility out of the box; using class collapse navbar-collapse will automatically transform the menu into a mobile friendly “hamburger” style menu depending on the screen size. Such a feature is absent in Semantic UI, requiring the developer to create their own.
So why not just use Bootstrap? First are the unintuitive class names; I certainly would not be able to come up with collapse navbar-collapse without looking up the component’s documentation. Second is a lack of features for some components; the existence of other CSS frameworks is proof that Bootstrap is not perfect, if it were, why would the others exist? Take for example the same components as above; out of the box, Bootstrap offers only one variation of their navbar, whereas Semantic UI has four horizontal menu variations (not counting those that are different components in Bootstrap, such as tabs).
If you are just starting out as a front-end web developer, I think that Semantic UI is a great choice. If you need a high degree of customization, Bootstrap is probably a better option.