Semantic UI - Quick Tips

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, 5000+ Commits in GitHub.

Semantic UI make use of Intuitive JavaScript, Concise HTML, and simplified it's 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 latest updates.


How to Install Semantic UI

There are several ways of installing Semantic UI, the simplest ways 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> 

Other way of installation can be found on the website, there are well detailed documentation :



Pros and Cons - dotnetkida

Pros

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

  • Quick Work: As we know already it's 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 makes learning curve shorter even makes development more easy and quicker.

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

Cons

  • Smaller community: The main point is smaller community, it may lead us to shortage of answers or support if we 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 :



Post a Comment

0 Comments