What is Semantic UI

DotNetKida - Sunday, July 12, 2020
Semantic UI - DotNetKida


Semantic UI

User Interface is the language of the web
Semantic UI is a CSS framework, similar to Bootstrap, designed to make easy and beautiful UI. It has ready-made semantic components that are very helpful to create responsive and beautiful layouts using natural language principles, it was created by a full-stack developer Jack Lukic.  

Semantic UI is a free open-source project already used in multiple large-scale production environments.
It has a small but devoted community, so in a short period, it managed to outgrow.
It has 3000+ Theming Variables, 50+ UI Components, and 5000+ Commits on GitHub.

Semantic UI makes use of Intuitive JavaScript, and Concise HTML, and simplified its debugging process to make UI development cheery and easy, it can also integrate with Angular, React, Meteor, Ember, and many other frameworks to help front-end development.

Very soon we will be posting for Semantic UI integration with React, so don't forget to follow our newsletter by that you can receive the latest updates.


How to Install Semantic UI

There are several ways of installing Semantic UI, the simplest way is :

Via Content Delivery Network (CDN)
It is the easiest for beginners. Create an HTML file as below and add these lines :

Stylesheet:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css">

JavaScript:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.js"></script>



<!DOCTYPE html>
<html>
<head>
    <title>DotNetKida-Semantic UI</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css">
</head>
<body>
       <p>Select your option</p>
        <div>
            <select class="ui dropdown">
                <option value="">Gender</option>
                <option value="1">Male</option>
                <option value="0">Female</option>
            </select>
        </div>
  <script 
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.js"></script>
</body>
</html> 

Another way of installation can be found on the website, there is well-detailed documentation :



Pros and Cons - dotnetkida

Pros

  • Easy Work: Developer's point of view, it is the main point and benefit to use Semantic UI because of very intuitive. If you want a drop-down, Just type “dropdown”.

  • Quick Work: As we know already it is based on natural language (Human-friendly language) that makes it very easy to use and less time to design a page. Naming Semantic UI classes with meaningful names make the learning curve shorter and even make development easier and quicker.

  • Availability of themes: There are plenty of themes available for Semantic UI, developers can easily find many themes for the projects.

Cons

  • Smaller community: The main point is smaller community, may lead us to a shortage of answers or support if we are stuck at any point then it may be a serious problem like already there are only 2,524 (approx) questions about Semantic UI, with about 30% (approx) of the questions are unsolved on StackOverflow. 


References :



Tags:

Post a Comment

0 Comments