Mastering User Interfaces with Semantic UI

07 Oct 2021

Semantic UI

Semantic UI is a tool for front-end development. Semantic UI provides common pre-made items on a website, such as a navigation bar, column layouts, icons, and footers. In order to use Semantic UI, you will need to link it in your index.html with some script tags:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>

Most layouts that you want using Semantic UI can be found by googling “[website addition] Semantic UI” where [website addition] is the website addition you are looking for, like navigation bars, icons, etc. Results should show the different kinds of options for the layout you are looking for.

Why Use Semantic UI?

There are many different tools that can make the user side of code more nicer and modern looking, but Semantic UI is probably one of the easiest tools I’ve used for getting into website layouts. It is simple and resembles normal HTML with its tags and classes. It is not so complex if you have used HTML and CSS before. I have tried AngularJS even though the websites look a lot more modern and smoother, it is difficult to use since AngularJS is more complex, and steers away from classic HTML. You can add components and many different options for AngularJS, but it is not a front-end beginner friendly tool. However, AngularJS is what modern companies use to layout their websites and link it to backend code.

Benefits of a UI Framework

UI Frameworks provide premade tools and layouts. This means that you do not have to create them from scratch, but since it is premade, it is a bit more difficult to change certain options and layouts with the classes you want to use. Luckily, most UI Frameworks provide a number of different options to make it personalized to you and what you want the world to see. A UI Framework provides user-friendly websites. When adding a navigation bar, you can color it, move the buttons from left, right, or even centered and still the layout will look nice and the buttons won’t overlap which could cause confusion for the user. UI Frameworks is what everyone uses to build websites, so it is important to learn and use them, unless you want a website that looks like the beginning of computer times (there is nothing wrong with this either!).