Simple beauty
23 Feb 2021
Question for you
What came to your mind at the first sight of this web page?
Introduction
I believe most people will be just like me thinking “I must open a scam website. Let me close it and search again.”. Even after search again, you find it is the website you are looking for. It will still be a pain to find what you need. That is why UI frameworks are some important. It helps the web owner to present the contents in a more organized and simple way so that it can attract the user to stay and utilize the website. The simpleness but meaningful website is the beauty of UI framework.
However, it takes a lot of time and effort to organize and arrange everything in a website using just the HTML and CSS. That is where something like Semantic UI come to play. It is not simple to learn that as it is almost as complicated to learn as a new programming language. But once you get familiar with it, you will find everything is way simpler than it was before.
Adding image
For example, let’s say you want to add an image into the website with certain size to some location. In the raw HTML you need to add style to the image to set the size, then try different padding to move it to the location you want. While with Semantic UI, you just need set image class to “ui (size) image” it will automatically set the size of the image and then you just need wrap around the image with div class is “ui container” and put to the desired line. And there is more feature that semantics ui image has which will eventually save us a lot of time rearrange the image on the website.
Icons
Another example will be the icons. You can always see those facebook, Instagram icons on the website either to like them on those platforms or to contact them. It will be nice if you can have those icons on your own website, but then how? In the raw HTML, you will need find it online as an image then do as above adding image to resize and adjust the position. Even after you have done what you can, it might still not look good as it supposes be. But in Semantic UI, you magically just need write <i class= “ui (name, like facebook) icon”></i> and then perfect sized and fitted icon will be shown on your website. It is so easy to add an icon using semantic UI compare to the raw HTML. So why not?
Dropdown
You might see this a lot across the Internet, almost every website has at least one dropdown menu that hid a lot more additional information to keep the site clean and simple. But how to do that? Using raw HTML, you will need to write javascript functions to get the effect you want which obviously is more time consuming and also for someone who is not so good at javascript it will take a lot of time doing research. But using semantic UI, you don’t even need to know how that works all you have to do just put the class= “ui dropdown” and then at the bottom add the script $(‘.ui.dropdown’).dropdown();. The dropdown will start working as you wanted.
Conclusion
There are more things that semantic UI can do to make our web coding life easier and simpler. Check here . That kind simple is the beauty of the live for both programmers and users. So it’s definitely worth the time and frustration you invested in learning the UI frameworks.