When you look at webpages of the late 90’s early 2000’s, most of them look the same: uninteresting, unattractive, and cluttered. Today however, we have so many options to make beautiful websites easily like SquareSpace or Wix for a DIY solution that looks professional. If you’re interested in getting closer to the metal you can use frameworks like Semantic UI, which allow you greater control over your design if you’re willing to put in the extra effort. Sounds great and all, but using a framework is like learning a new language, you know what you want to do but there are so many ways to get there it’s hard to choose!
Semantic UI offers users prefabricated units that can be altered and modified to your heart’s content. You can add menus, lists, dropdowns, pictures, and more, all with one line of code! There is so much that you can do with Semantic, but sometimes it’s hard to figure out a way to make your design a reality. There’s a lot of modifiers you can put on your UI components, like changing their size, color, positioning, etc., but certain modifiers work only work on certain components.
For example, if you want to center text in a menu, the simplicity of Semantic makes me initially think the solution is to add the centered tag to the div. However, you need to put the tag on the container that wraps the text, which may be confusing but like any other programming is something you’ll learn to deal with. The syntax is super easy to learn just like regular English. But like the sentence “Pandas eats, shoots and leaves.”, it all depends on the context in which you use the syntax.
Aside from the expected learning curve of Semantic, one of my main gripes with it is that I don’t know when my tags are wrong or it simply can’t do what I want it to do and I need to use CSS instead. If I want to put whitespace around an element in a ui grid element, one can use the relaxed tag to add extra whitespace between elements. But if you want an element to take up a certain amount of whitespace, you need to use CSS padding. The end result looks very similar, but if you’re trying to copy websites (like we have), it can get very frustrating.
Semantic is a wonderful tool, without question. It’s a lot easier than making a UI from a library such as SFML, which I had once used to create a UI for a C++ game. It was fairly simple: a couple of boxes with text in them organized in a certain way. Should be easy to code but no. This simple UI took about 100 lines of code to get those created and displayed on screen! In Semantic this would likely take 15-20 lines maximum; a huge improvement. Like many things coding it will be infuriating and confusing at first, but over time it will get simpler and easier to create beautiful webpages.