Dr. Jekyll and Mr. Hyde AKA Sematic UI

06 Oct 2017

Semantic UI

Semantic UI is a framework that was created to help web developers design web pages easier and faster. Instead of having to rewrite the same code over and over again Semanti UI provides users with a way to use previously developed styles and classes. There is definitely pros and cons however, and many people believe that the time committed to learn Semantic UI is not worth the convenience. This essay aims to discuss the Dr. Jekyll and Mr. Hyde attributes of Sematic UI

Mr. Hyde

One thing that I dislike about Semantic UI is what most people think about it, it is a lot of work to learn and at first it can be very frustrating. One thing that I have personally experienced is the difficulties of learning the exact syntax and words to use to style my webpage correctly. The online documentation is helpful but it is a lot of text to read through to find one specific word to use. For example, when trying to center some text in a container the correct word to use is “centered” but I struggled for almost half an hour because I was using “center” instead. This is just one example of one word being off which will lead to hours of struggling. Do take this with a grain of salt however, because I am relatively new at Semantic UI and with some practice I should get better. Like I will never use “center” again to center my text or pictures. Learning from you mistakes is something I am good at and I definitely make a lot of mistakes.

Dr. Jekyll

Just like Dr. Jekyll who has an evil counterpart Semantic UI has that Mr. Hyde. But with the bad there is some good. In my opinion Semantic UI definitely makes web design a lot better. It eliminates tons of code with “padding-left”, “margin-right”, or “alignment”. There are struggles in the beginning but it is equivalent to learning how to use a new API or library. With practice I think Semantic UI can be one of the greatest tools that any web developer can have in their belt. One thing I like about Semantic UI is the ability to automatically space things by calling “fitted”. Like I mentioned earlier this takes out a lot of extra padding coding. Another advantage of Semantic UI is allowing users to add on to existing classes by modifying them in the CSS file. Sematic UI is very flexible and the time and effort is worth it.

Dr. Jekyll vs Mr. Hyde

Overall I think in this specific case Dr. Jekyll wins out over Mr. Hyde. After my struggles with the center class I finally decided to just add padding to “center” my text. This is obviously not a good solution because it is not dynamically centered. If a reader of the web page decides to resize the browser the web page will look terrible. I was okay with padding the text though because I just wanted the grade but in a work environment it would be disastrous. Just imagine if you resized your GitHub page and then the clone button just disappears because the browser does not know how to interpret the HTML code. Overall I am interested in learning about new frameworks that are available to developers. Hopefully those are a bit easier to learn though.