In the words of Morpheus from the Matrix, “What if I told you that there was a way to take this website and make it look like this?”
It is true, you know. All of this is possible with the use of a front-end framework.
A framework is a package of standardized software which supports the “framing,” or creation of websites. A front-end framework means that the framework is directed toward framing the website’s appearance. There are many front-end frameworks available to assist in making your website’s appearance look more modern, but we will focus our attention to a specific framework called Semantic UI.
While not as popular as other frameworks like Bootstrap or Foundation, Semantic UI serves its purpose as a front-end framework. However, what makes Semantic UI stick out from the rest of the frameworks is the fact that it is uses normal language in its structure. For example, if I wanted to create a grid of icons on the webpage, all I would need to do is create a divider, give it a class called “ui grid container,” and fill in the grid with content. Reading “ui grid container” in my code* is signficantly much easier to understand than code that does the same thing but in another framework. As a result, the websites I have created and recreated myself using Semantic UI are both modern in style and easy to understand when inspected. Also, Semantic UI suits my purposes well because it is suppored in my current choice of an Integrated Development Environment (IDE), IntelliJ Idea.
(*) HTML and CSS are not programming langauges. However, it is fitting to describe anything I put in a file in any IDE as code.
Simply put, front-end frameworks allow for messy websites to refresh itself and come out a nice, clean, modern looking website. Just look at the two images at the top of this page. The differences are night and day, respectively (and preferring the day over night, of course).