Installing Semantic UI

Semantic UI can be installed in your project through CDN integration or by using npm for a more customized and controlled setup. In this guide, we'll explore both methods with examples to help you integrate Semantic UI into your web projects.

1. CDN Integration:

Using a Content Delivery Network (CDN) is a quick way to integrate Semantic UI into your project. Include the following CDN links in the <head> section of your HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Your Web Page</title>
  <!-- Semantic UI CSS CDN -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
  <!-- jQuery CDN (required by Semantic UI) -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <!-- Semantic UI JavaScript CDN -->
  <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
</head>
<body>
 
  <!-- Your content goes here -->
 
</body>
</html>

Now you can use Semantic UI classes and components in your HTML.

2. Installation with npm:

Using npm allows you to have more control over the Semantic UI setup and is suitable for projects using package management. Follow these steps to install Semantic UI:

Step 1: Install Semantic UI

Open your terminal and run:

npm install semantic-ui-css

Step 2: Import Semantic UI CSS and JavaScript in your project

In your CSS file (e.g., styles.css), import Semantic UI CSS:

/* styles.css */
@import '~semantic-ui-css/semantic.min.css';
 
/* Your additional styles go here */

In your JavaScript file (e.g., app.js), import Semantic UI JavaScript:

// app.js
import 'semantic-ui-css/semantic.min.js';
 
// Your additional JavaScript code goes here

Step 3: Ensure your CSS and JavaScript files are included in your HTML

Include the compiled CSS and JavaScript files in your HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Your Web Page</title>
  <!-- Your custom styles -->
  <link rel="stylesheet" href="path/to/your/styles.css">
</head>
<body>
 
  <!-- Your content goes here -->
 
  <!-- Semantic UI JavaScript -->
  <script src="path/to/your/app.js"></script>
</body>
</html>

Now you can use Semantic UI in your project with the added benefits of npm for version control and package management.

By following either the CDN integration or npm installation method, you can easily integrate Semantic UI into your project, allowing you to leverage its components and styles for building modern and responsive web interfaces.

Introduction Elements