Efficient & Minimalistic designing using Semantic UI.
Developers often wonder why to use Semantic UI when there are other popular frameworks like Bootstrap, Materialize which can already accomplish their task. There are mainly a few reasons to use Semantic UI instead, depending upon your requirements.
The first major reason is that we can include a single component instead of including the whole file which has all the components.
For instance, if a developer wants to style a list, he can include just the list component’s CDN in his project which is shown below,
<!DOCTYPE html>
<html lang=”en” dir=”ltr”>
<head>
<meta charset=”utf-8">
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/components/list.min.css">
<title></title>
</head>
<body>
<div class=”ui relaxed divided list”>
<div class=”item”>
<i class=”large github middle aligned icon”></i>
<div class=”content”>
<a class=”header”>Sematic UI</a>
<div class=”description”>Minimalistic interface </div>
</div>
</div>
<div class=”item”>
<i class=”large github middle aligned icon”></i>
<div class=”content”>
<a class=”header”>Bootstrap</a>
<div class=”description”>Recent version 4</div>
</div>
</div>
<div class=”item”>
<i class=”large github middle aligned icon”></i>
<div class=”content”>
<a class=”header”>Materialize</a>
<div class=”description”>Updated 34 mins ago</div>
</div>
</div>
</div>
</body>
</html>
Note: xyz.css instead of xyz.min.css also works fine. xyz.min.css is smaller and more optimized than xyz.css as the whole file is stripped and assembled bit-by-bit.
The output will be similar to,
Here we can note that instead of including the whole style.css file of Semantic UI, we can just include the component CSS to the project. This approach makes the app more robust and efficient as it just loads a small file instead of a huge one.
Further, you can find CDN links for all the components at:
https://cdnjs.com/libraries/semantic-ui
Another major advantage is Semantic-UI’s CSS manages to be even more user-friendly than other frameworks, with CSS that’s easier for developers to read by resembling a more familiar language that is its name. Here are a handful of examples:
<div class="ui stackable inverted divided equal height stackable grid">
Here’s a sample with Semantic UI grid. We want to create a 3-column-block, so we use the following CSS class:
<div class="three wide column">
As you can see, classes in Semantic UI use human words. Very friendly! Coding is more like writing regular text.
Another great advantage of Semantic UI is minimalistic designing that is, it has clean and minimal CSS applied so that the app does not look bulky on its stylings. Here is an example of a web app on Semantic UI,
Here, the CSS is very minimal and gives a clean and spacious look to the site.
As we can see there are many advantages of Semantic UI over other frameworks depending upon the situations. Hence I want all the developers to give Semantic UI a try. Cheers :)
By,
Raj Panchal
