First UI Framework -- quickly accurate, but might never be precise
07 Oct 2021Starting with HTML and CSS only
I’ve only recently started learning HTML and CSS, and I’ve found them to be very simple and straightforward in their syntax. Specifically, while they feel very different from what I’m used to, it’s easy to pick up the patterns of their syntax. Also, looking at a snippet of HTML or CSS at a glance, it’s easy to get a general idea of what the outputted visual is going to look like. Basically, these aspects of HTML and CSS are what I find endearing about them.
Now, we add UI Frameworks as a tool in writing HTML and CSS, and I’m thrown for a loop
Very recently, I’ve started incorporating Semantic UI (a UI Framework) in my HTML and CSS code. I don’t know… I can’t say that I love Semantic UI because I’ve experienced a lot of time-consuming confusion and frustration from trying to handle it. My unfamiliarty with Semantic UI almost surely played a part, I feel.
As an example… I did a lot of learning about what webpage organizational structure options were available (ex. grid, menu, container), at the same time as trying out some of those options and testing how far I could stretch or modify them with CSS. I would constantly hit roadblocks, wherein I could not figure out how to adjust a structure option to my liking (the lovely layout I had envisioned). I would then go through numerous lengthy online searches of forums and the official Semantic UI website, just to find out what could be done, if (a) it was not possible/there were no suggested solutions to be found, (b) there was a suggested but inelegant and possibly incorrect workaround, or (c) there was a solution within the capabilities of Semantic UI. If my vision was not possible or I tried but couldn’t get the suggested workaround to work, then I sometimes picked another structure option and repeated this trial process with it.
There’s a fair amount of front-loaded or initial learning to be done with a UI Framework, it seems. For Semantic UI, I could never get the hang of adjusting the spacing of elements (ex. in a grid), and I found the structure options to be too restrictive at times. Hover/Mouse-over behavior and custom coloring of some elements could be surprisingly quite complicated, too. Sometimes, taking advantage of the specific-name priority of CSS acted as a great workaround, although I found it to be quite inconvenient nonetheless.
The original website’s header.
My attempt at a recreation using Semantic UI and HTML/CSS.
It’s not all bad, though!
Even with my gripes, I’m glad to have had Semantic UI since it gave me more options in webpage design, some of which I couldn’t imagine trying to accomplish with only HTML and CSS. Specifically, creating drop-down menus, being able to use the icon library on the website, and putting elements into a container for some quick and tidy margins, were very helpful and easy to do.
It’s a matter of learning the trade
I feel like my negative experiences with Semantic UI (the only UI Framework I have experience with) were mainly in the realm of growing pains. When it comes to a UI Framework, there’s a lot to unpack and a lot to learn. It also means there are a lot of fun features available to you once you do get the hang of them.
I will not hesitate to say that I’m not very adept at HTML and CSS (yet), and I am not very knowledgeable about Semantic UI at this point, either, so trying to do projects with the two of them ended up being quite overwhelming at times as I realized more and more, how much I didn’t know. Still, I do remember having fun playing with the different features, and I can’t imagine the crazy fun I might have once I have a greater depth of knowledge and can just go for it, with all of these tools at my disposal.
Original website: (https://www.citykitties.org).