Semantic helps U and I Succeed
24 Feb 2022Importance of frameworks
Are you tired of spending countless hours manually editing your HTML and CSS files, modifying the padding and margin of each div class just to end up with a less than stellar result? If so, using a UI framework such as Semantic UI would be advisable. But first, what even is a UI framework? UI framework stands for User Interface framework and as the name suggests deals with the front-end of a webpage that interacts with users. A UI framework offers the user a collection of classes and interfaces in CSS to help guide developers in structuring their webpages. With the help of UI frameworks you are able to save time by using the structures it gives you with classes and simplifies your development process. Semantic UI does an exceptional job at this with classes such as containers, grids, menus, icons, and different modules all with different variations to make the presentation and functionality of your page more customizable and have a sleek look.
My Experience with Semantic UI
While I have only said good things about UI frameworks thus far, I must say you can feel quite lost on how to correctly utilize the tools at first. My experience with Semantic UI started off a little rocky when I attempted to clone a webpage online with my own HTML and CSS while implementing what I learned about using the Semantic UI framework. It felt like I had a toolbox full of useful tools, but I would grab the wrong tool or just use it in the completely wrong way. Prior to attempting to clone I got to get a little taste of the power Semantic UI possessed through guided practice, but ultimately still confused on which classes from the framework to use and where. The sheer amount of classes and capabilities Semantic UI came with was exciting but was also a bit overwhelming.
With a simple web page to replicate I was able to complete the task to the best of my abilities with Semantic UI by referring back to other similar code I had and also looking through the Semantic UI documentation with all the different classes and variations proved very useful. Speaking of variations, I found it very cool how you can essentially find the general style of the element you want to add and style it with a few descriptive words in the element’s class. For example you could have your class=”ui menu” but you may want it to have no borders and be formatted for text content so you add a few words to your class so it says class=”ui borderless text menu” and voila you get what you’re looking for. That’s the real magic of using the Semantic UI framework or any framework, it simplifies the design process for developing beautiful web pages.
this was my recreation of the Hawaii Surf Academy Home Page
I felt like this was the most fun section for me so far to learn because all my experience with web designing has been using raw HTML and CSS which was the best I knew how to do and required a lot more coding relative to me coding with the Semantic UI framework. With that being said Semantic was a game changer and a step up from coding in raw HTML and laying words out on the screen which requires a lot more tedious attention to detail and TIME! Not only are you saving time and developing more efficiently but a visually appealing UI can bolster a page’s credibility and user interest, and the frameworks help you do that. I feel like learning how to use UI frameworks is a good skill to improve on for the future and it is fun to see your work come to life!