Semantic-UI Installation & Updating

Last Updated : 31 Jan, 2023

Semantic UI is a popular front-end framework for developing responsive, semantic, and user-friendly web interfaces. It provides a wide range of pre-designed UI components, such as forms, buttons, menus, and modals, that can be easily integrated into your web application. In this article, we will cover the installation and updating of Semantic UI.

Semantic-UI Installation: The Semantic-UI can be installed & used by installing the following:

Install NodeJS: Before installing Semantic UI, you need to have NodeJS installed on your system. NodeJS is a JavaScript runtime that is required to run the Semantic UI build process. You can download and install NodeJS from the official website.
Install Gulp: Gulp is a JavaScript task runner that is required to build and compile the Semantic UI source files. To install gulp, open the command prompt and type the following command:

npm install -g gulp

Install Semantic UI: Once NodeJS and Gulp are installed, you can install Semantic UI by running the following command:

npm install semantic-ui

After the installation is complete, navigate to the semantic folder and run the following command to build the Semantic UI files:

gulp build

Include in Your HTML: To include the Semantic UI CSS and JavaScript files in your HTML, you can use the following code:

<link rel="stylesheet" 
      type="text/css" 
      href="semantic/dist/semantic.min.css">
<script src="semantic/dist/semantic.min.js"></script>

Updating Semantic UI: To update Semantic UI to the latest version, you can manually download the updated source files from the website, and replace the contents of the semantic folder.

Updating via NPM: You can also update Semantic UI via NPM by running the following command:

npm install semantic-ui@latest

Example 1: This example describes the basic usage of the Semantic-UI by implementing a simple Menu. Here, we are using the ui secondary pointing menu class to create a simple menu with three items (Home, About, Contact) and search input. We are also using the right menu class to position the search input to the right of the menu and added some icons and descriptions for each menu option.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        Semantic-UI Installation & Updating 
    </title> 
     <link rel="stylesheet" 
           type="text/css" 
           href="semantic/dist/semantic.min.css"> 
    <script src="semantic/dist/semantic.min.js"></script> 
</head> 
  
<body> 
    <div class="ui container center aligned"> 
        <h1 class="ui green header"> 
             GeeksforGeeks  
        </h1> 
        <h3> 
             Semantic-UI Installation & Updating  
        </h3> 
    </div>  
    <div class="ui secondary pointing menu"> 
        <a class="item" href="#"> 
            <i class="home icon"></i> 
            Home 
        </a> 
        <a class="item" href="#"> 
            <i class="info circle icon"></i> 
            About 
        </a> 
        <a class="item" href="#"> 
            <i class="envelope open icon"></i> 
            Contact 
        </a> 
        <div class="right menu"> 
            <div class="item"> 
                <div class="ui icon input"> 
                    <input type="text" 
                           placeholder="Search..."> 
                    <i class="search icon"></i> 
                </div> 
            </div> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

Example 2: In this example, we are using the ui form class to create a simple form that includes three fields, i.e., name, email, and password. We are also using the field class to create separate fields for each input, and the ui button class to create a submit button.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
          Semantic-UI Installation & Updating 
      </title> 
    <link rel="stylesheet" 
          type="text/css" 
          href="semantic/dist/semantic.min.css"> 
    <script src="semantic/dist/semantic.min.js"></script> 
</head> 
  
<body> 
    <div class="ui container center aligned"> 
        <h1 class="ui green header"> 
             GeeksforGeeks  
        </h1> 
        <h3> 
             Semantic-UI Installation & Updating  
        </h3> 
    </div>  
    <form class="ui form"> 
        <div class="field"> 
            <label>Name</label> 
            <input type="text" 
                   name="name" 
                   placeholder="Name"> 
        </div> 
        <div class="field"> 
            <label>Email</label> 
            <input type="email" 
                   name="email" 
                   placeholder="Email"> 
        </div> 
        <div class="field"> 
            <label>Password</label> 
            <input type="password" 
                   name="password" 
                   placeholder="Password"> 
        </div> 
        <button class="ui button" 
                type="submit"> 
            Submit 
        </button> 
    </form> 
</body> 
  
</html>