A Fine Fitting Frame

27 Feb 2020

Introduction to Semantic UI

When I was told that we were going to start using Semantic UI in our HTML and CSS, my mind initially drew a couple of blanks. Before this, I’ve never heard of a UI framework before but our professor made it sound like it was a convenient tool that would make our website look more presentable. Up until now, when we were practicing using HTML and CSS to design web pages, I agreed that the style was very rough and hard to look at. This immediately changed once we started to implement a UI framwork, such as Semantic UI in this case.

Gather and Process

The process of learning Semantic UI was not that hard but it was definitely challenging. I can see why people would consider learning a UI framework similar to learning a second language; there are a lot of keywords to remember, with some keywords not applicable in certain classes. How I found Semantic UI to be was similar to using implemented code that is referenced to your code. I saw that keywords were basically methods or shortcuts to doing exactly what you want in a few characters rather than a few lines. For example, assigning a class with keywords altered its appearance dramatically with a mere mention. For me, I found this super convenient and easy to understand on the surface. However, once I tried to start getting familiar with the framework, it proved to be rather tricky. While I have the keywords to place, most of the time, I have to combine many features together to form what I want. This leads to me having to try many times to pick out keywords and then order them in the right way to get the elements to show up correctly or otherwise having to repeat over and over again. Even now, I find that creating a web page to specific instructions very difficult due to the difficulty of trying to use all the syntax to configure the page. While it is challenging to master, the convenience of simple syntax and clean representation make it easy to read if you had to share your code with others and setting up the framework is a easy task.

Presentation

In my personal opinion, having Semantic UI or any framework is a blessing. It makes the previous issue of presentation using raw HTML and CSS disappear entirely. Since the elements follow specific assets that are already created, we avoid having to create anything and rely on pasting in the asset and configuring with their settings. For example, dropdown menus can easily be implemented using a couple lines of HTML and Javascript using a couple of different classes versus having much more lines of HTML, CSS, and Javascript to create the dropdown boxes manually and implementing the animation and function for it to work. Even for this essay, I notice that many elements of my github.io page use Semantic UI, through the essay page or home page. Once again, the ease and convenience of a UI framework make it beneficial and efficient to learn and use.

Conclusion

Semantic UI and other UI frameworks are made for convenience and a clean way to present your web page in a simple manner. However, learning to use one is by no means an easy feat. The process still takes considerable time and energy to form a web page in the way that you want using what is given to you. It also takes a while to master through practice as I’ve noticed. Despite these shortcomings, I see that UI frameworks provide programmers with a way to save a lot of time and energy to simply use created assets rather than manually create elements themselves that would take even more time and energy.