Introduction to Semantic UI
Semantic UI is a modern front-end development framework that helps to create beautiful, responsive layout using human-friendly HTML. Any level of front end developer or designer can use easily. It is clean, lightweight, useful components, and others. Semantic UI has rich features and uses five categories to define reusable UI components.
- Element — to create basic building block such as buttons, container, header, image, etc.
- Collection — is interdependent group elements types such as breadcrumb, form, grid, menu, etc.
- View — to present some useful piece of parts for web content such as advertisement, card design, comment, feed, static, etc.
- Module — to present interactive actions that are build with JavaScript such as checkbox, dropdown, search, rating, tab, transition, etc.
- Behavior — is a component to inject functionality into others components such as API, form validation and visibility.
Semantic UI is well structured, unique and more semantic than others front end framework like as Twitter Bootstrap and Foundation. It is well documented and you can search many examples of different components on its official website. Semantic UI also integrates with others projects and you can check on Github.
Ok, it’s so far the time I described how Semantic UI’s features are unique and better than others. I will show you how to use Semantic UI framework. Before starting, make sure that the require files are downloaded. Download latest version of Semantic UI and now the latest version is 2.1. Extract the downloaded zip file and link it into HTML document.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> Semantic UI Example </title>
<link rel="stylesheet" href="semantic.min.css">
<script src="jquery.min.js"></script>
<script src="semantic.min.js"></script>
</head>
<body>
<!--- Your Content Here -->
</body>
</html>Don’t forget to link jQuery file. Semantic JS file can’t work without jQuery. Now, we have to build a responsive layout with Semantic UI. Before we have to design layout, we should know Semantic UI layout system.
Grid Layout
Semantic UI Grid layout is composed with 16 columns. Grid makes the web content appearance to flow naturally and responsive. To use a Grid Layout, just write “ui grid” class in your coding. In this article, I will show you sample usage of Grid layout. See more fully description at Semantic UI website and learn yourself.
[codepen_embed height=”266" theme_id=”dark” slug_hash=”VaEYwB” default_tab=”html,result” user=”sithuphyo”]See the Pen <a href=’https://codepen.io/sithuphyo/pen/VaEYwB/'>VaEYwB</a> by Si Thu Phyo (<a href=’http://codepen.io/sithuphyo'>@sithuphyo</a>) on <a href=’http://codepen.io'>CodePen</a>.[/codepen_embed]
There are many methods to create a grid layout and you can assign any grid layout according to your website type. In this example, I assigned two columns: a four column and a twelve column. You can see these two columns with colors in above example.
You can assign any modules or components in column such as card design, button, menu, etc. Firstly, you must learn fundamental of Semantic Grid structure — columns, rows, grouping, nesting, adjusting, and more. Read the fully documentation provided by Semantic UI. Now, I will make a simple login page using Semantic UI. See the following example.
[codepen_embed height=”266" theme_id=”dark” slug_hash=”yOxrjo” default_tab=”html,result” user=”sithuphyo”]See the Pen <a href=’https://codepen.io/sithuphyo/pen/yOxrjo/'>yOxrjo</a> by Si Thu Phyo (<a href=’http://codepen.io/sithuphyo'>@sithuphyo</a>) on <a href=’http://codepen.io'>CodePen</a>.[/codepen_embed]
In this example, I create a simple layout and put login form at the center of the page. I used Semantic UI ‘s form, icon, divider and grid layout system. These sample login page is easy to build and understandable. See more instruction and documentation at Semantic UI.
Conclusion
Due to its fresh, modern, ease of use, and lightweight, it becomes popular front end framework. You can use Semantic UI as Twitter Bootstrap alternative. Just spend a few moment to learn Semantic UI framework to build your modern website. The main difference of Twitter Bootstrap and Semantic UI are grid system and class name. Twitter Bootstrap has 12 columns and Semantic UI has 16 columns. Semantic UI’s class names are more HTML friendly than Twitter Bootstrap.
