Human Friendly Theming
23 Feb 2022First Ever UI Framework
Before taking this class on Software Engineering, I have never incorporated a UI framework like Semantic UI. I always struggled to get the design I wanted with HTML and CSS, but even then I was very limited in what I could do. It was interesting to learn that everything I did with HTML and CSS could be done easier with a few calls in Semantic UI.
Whenever I used HTML and CSS to design a website, it took long hours and days to get my website looking the way I wanted it to. Sometimes it gets annoying to get the alignment or positioning correct, or changing the features of certain parts. Whenever I want to change something on my website with only CSS, it takes me way too many lines to change one simple element. However, I learned that I have to understand what the different calls in Semantic UI do because even though it does reduce the amount of lines, I still use more calls and functions than I need to change different elements.
Experiencing Semantic
I have previous experiences of building websites using only HTML and CSS, starting from my highschool years. Although presentable, the resulting page looked like all the work I put in was the bare minimum and looked like something from the old days. I had many issues with making the media queries that control what the elements look like on different screen sizes. Struggling with HTML and CSS allowed me to understand what I’m doing behind the scenes of the UI frameworks. It allowed me to figure out what I need to change and how I should manipulate the different containers and elements.
You can tell the difference between these two pictures. The webpage that was designed and developed using Semantic UI looks cleaner. With Semantic UI, we can create a navbar using only a few calls of classes assigned to the div tags, reducing the amount of code and lines needed. When we create the page without a framework (like Semantic UI), we are limited to what it can look like and what we can do.
Semantic Makes Life Easier
We do not have to make our lives harder by trying to build up everything using HTML and CSS. Semantic UI already has these built-in features that we can use as frameworks for our website. There are various libraries with UI designs that we can incorporate into our sites. If we do not know what we need or how to use a certain feature, there are various documentations and resources that show us the endless possibilities. The only thing we need to remember is that everything takes time and practice. We have to learn this new framework and have it under our belt so we can make amazing and clean web pages. By investing a little time now, we can open a new horizon for our future.
Initially, I had trouble doing simple things like getting a button to change color, getting content to align, or adjusting the size of the navbar, etc. However, even with my minimal knowledge of Semantic UI, I was able to clone various websites (way easier than if I only had HTML and CSS) with minimal lines of code. I can now align or manipulate different content and elements by manipulating the div, containers, segments, etc. I had trouble understanding how to manipulate the containers and div elements to get my code working, but once I figured out how to work the classes and put elements together within containers, everything started to unfold. My life was made easier and it was fun binding different elements together to make a more modern and responsive website.
We are still taking baby steps to our end goal of being able to fully develop a webpage, such as making it more interactive and user-friendly. However, I had a lot of fun learning about Semantic UI and cannot wait to implement what I learn in React and Meteor as well. I believe as we practice more and create more websites, we will get more familiar with UI frameworks and become more efficient in coding.