Experience Using Semantic UI

04 Oct 2018

Introduction

As I gain more experience building webpages, I quickly realized that creating elements and positioning them correctly in CSS is very tedious and annoying. It’ll take me an embarassing amount of time to position an element on a page correctly, and using all of the CSS properties can be really annoying to fiddle with at times. Luckily, UI frameworks exist to ease the load and make building webpages a lot easier. Semantic UI is one such framework, and after a little bit of learning, I was able to buil webpages a lot faster, and a lot easier

Why Bother With Semantic UI?

Semantic UI is a framework that implements prebuilt HTML classes in an easy to read format. Semantic UI feels like it was made to provide the user with a way to write concise, and easy to read code. For example, if you wanted to create a div that had two columns, all you need to write is:

<div class="ui two column grid"></div>

Even though this is in HTML, it’s pretty close to English and understandable! There are a lot of features with Semantic UI. From colllapsible menus, to image support, to labels, Semantic UI provides ample tools to build any sort of visual webpage. There is a bit of a learning curve, but the results are definitely worth it!

Is It Worth It?

There is a learning process with Semantic UI. THe problem with having a lot of features is that the user has to learn what these features do and how they can implement them to do what they want. However, learning Semantic UI isn’t that bad, as the naming scheme is similar to English and is quite intuitive. After spending about an hour trying to get comfortable with Semantic UI, I was able to recreate the OnePlus website using Semantic UI in just under an hour! My experience with Semantic UI is a lot more enjoyable than CSS, and I definitely recommend trying it out!

Conclusion

Styling HTML pages was a real bother. It was a lengthy and tedious process trying to get all of the elements placed correctly. This is where UI frameworks really come in handy. Frameworks such as Semantic UI really help simplify the process of designing webpages. UI frameworks assist the programmer to create hassle-free webpages. While you do have to learn the UI framework and get comfortable with it, the payoff is definitely worth it!