I originally wrote this essay in October, two months earlier than today. When I decided to reread it this morning, I immediately started laughing. Why?
Oh, how times have changed. A wee two months ago, I foolishly thought that Semantic UI was difficult. Foolish, I say, because that was before I met CSS.
Semantic UI is a framework intended for easy web design. It utilizes simple class names like “ui button” to generate elements in the simple but clean style Semantic UI is known for. Additions of other classes like “green” or “right floated” change the style of the element, all without having to create a stylesheet of your own. If you’re familiar with using CSS to design a webpage, you’ll know that this is a significantly easier process.
I wasn’t experienced in web design, so I didn’t know what to compare Semantic UI to. When I was working on a project this year, I ended up spending an exorbitant amount of time formatting using CSS. Don’t get me wrong, CSS is a fun language to mess around with. But it takes a substantial amount of research to complete even the smallest things. While the names of CSS properties are usually straightforward, they weren’t consistent with one another and that made them difficult to remember or predict. For example, the background color is controlled by the “background-color” property. The font size is controlled by the “font-size” property. So you would guess that the font color would be controlled by the “font-color” property. Unfortunately, that is not the case. (It’s actually the “color” property.) Thus, one always had to refer to documentation or forums to find the correct properties to use.
In comparison, the Semantic UI classes are consistent, even between different tags. A “massive” tag would result in a mammoth sized element, whether it be an image or a label. The documentation was also kept in a single site, whereas for CSS, the properties and their uses were spread all over.
That silly thing? Well here it is, for your entertainment.
The fact that Semantic UI was intended to be user friendly terrifies me.
The simple class names, the versatile reuse of variations, the easy organization of terms – all struck fear into my heart for what reason? Because learning this framework was hard!
It’s not so much “learning” a framework as it is getting used to one. Through the instruction of my software engineering professor, we were introduced to Semantic UI through a series of videos explaining every little element, collection, view, and module it included. I will be the first to admit that in those approximately 2 hours and 30 minutes, I had effectively learned how to: 1) position my laptop so as to watch videos while lying on the floor and 2) fall asleep in this position. There was no way I would be able to memorize all the content the video chose to bombard me with. Semantic UI provides a great variety of options that can easily overwhelm someone.
Though they all generally had the same format for implementation, there are little nuances to each class that must be used. Even though I can recognize that I want to create an instance of a “ui menu”, I have to remember that menus take “items” within them. I don’t have to put words as a “text” class, or within a paragraph tag as I would for a different collection.
In this way, though I had a general idea of how to implement something, I still had to refer to the Semantic UI documentation to ascertain I was coding it correctly. This takes a brutal attack on time and efficiency, which is frustrating to handle. While I’m sure in time I will be able to use this framework with more familiarity, it is still difficult in the time being to have to constantly refer to documentation.
Worse still is the naming of the classes. They’re simple, like “ui container”, with variations like “inverted”, “fitted”, and “red”. When read, it is quite obvious what is being created. Yet, when looking for the right class to use without knowing any class names first, it’s rather difficult. If I wanted a menu to appear fixed at the top of a page, is that “fixed”? Is it “fitted”, “fluid”, “top”, or “attached”? With so many options, it’s almost as if this simplification of terms has again given the programmer an overwhelming amount of choices.
Being the only UI framework I’ve used, I can’t compare Semantic UI to other frameworks to assess it’s worth. I do believe, however, that getting accustomed to this framework will take time an practice. Time and practice I am willing to commit because the result so far, while slow, have been much more rich and interesting than the html/css pages I’ve been creating. Hopefully, with this framework, I can create web pages I am proud of.
Luckily, I was able to achieve my wishes in that last paragraph. While not as sparkling as I thought it would be, Semantic UI allowed for quick creation of a chic web page. It was put to good use in my ICS 314 software engineering project, Collaborative Study. While I do find it handy, it would be nice to explore other frameworks beyond it.