Semantic-UI Installation & Updating

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.

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.

Output:

Reference: https://semantic-ui.com/introduction/getting-started.html