Semantic UI Introduction

Semantic UI is a front-end development framework designed to make websites and apps look beautiful and responsive while keeping the HTML code human-readable and semantic (hence the name).

Developed by Jack Lukic and contributors.
Initially released in 2013, written in LESS (and later also available in SASS).
Combines CSS + JavaScript components for building responsive, feature-rich UIs.
Website: https://semantic-ui.com

🎯 Philosophy and Goal

Most CSS frameworks (like Bootstrap or Tailwind) rely on short, utility-like class names.
Semantic UI instead uses natural language–style class names, so your HTML reads like a sentence.

Example:

<button class="ui primary button">Save Changes</button>

👉 It literally reads like: “a UI primary button.”

So, its goal is to:

Create human-friendly HTML that describes what an element is, not how it looks.
Provide a consistent vocabulary for UI components — similar to design language.

🧠 Core Concepts

Here’s how Semantic UI is structured and what makes it distinct:

1. Semantic class naming

Every class name is meaningful and readable.
For example:

<div class="ui three column grid">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
  <div class="column">Column 3</div>
</div>

Reads as “a UI three-column grid.”

2. Comprehensive component system

Semantic UI includes dozens of pre-styled components, including:

Buttons
Menus
Modals
Forms
Tables
Cards
Grids
Icons
Dropdowns, etc.

Each is highly configurable using modifiers (class variations).

3. Themes and customization

Built on LESS, allowing easy variable overrides.
Comes with theming support — you can change colors, typography, and component looks globally.
You can even create custom themes for your brand.

4. Integration with JavaScript

Many interactive components (dropdowns, modals, accordions, popups, etc.) are powered by jQuery.
You can use them declaratively with HTML attributes or imperatively with JS calls: $('.ui.dropdown').dropdown();

5. Responsiveness

Uses a flexible 12-column grid system.
Includes classes for responsive design (stackable, doubling, etc.). <div class="ui stackable grid"> ... </div>

⚙️ Getting Started

You can use Semantic UI in two main ways:

Option 1: CDN (Quick Start)

Just include the CSS and JS files in your HTML:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.5.0/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.5.0/dist/semantic.min.js"></script>

Then start using its classes right away.

Option 2: Install via npm

For modern build tools or custom theming:

npm install semantic-ui --save

Then you can build and customize with the semantic.json config file and Gulp build pipeline.

🧩 Basic Structure and Syntax

Semantic UI follows a readable syntax pattern:

[behavior] [modifier] [component]

Examples:

HTML	Description
`<button class="ui button">`	A standard button
`<button class="ui primary button">`	A button styled with the “primary” theme color
`<div class="ui cards">`	A container for card components
`<div class="ui three column grid">`	A grid layout with 3 columns
`<div class="ui raised segment">`	A content block with elevation

🎨 Example: Simple Semantic UI Page

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Semantic UI Example</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.5.0/dist/semantic.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.5.0/dist/semantic.min.js"></script>
</head>
<body>
  <div class="ui container" style="margin-top: 30px;">
    <h2 class="ui header">Welcome to Semantic UI</h2>
    <p>Build responsive, readable, and modern interfaces easily.</p>

    <div class="ui divider"></div>

    <button class="ui primary button">Primary Button</button>
    <button class="ui secondary button">Secondary</button>
    <button class="ui red button">Danger</button>

    <div class="ui segment">
      <h3 class="ui header">Example Card</h3>
      <div class="ui card">
        <div class="image">
          <img src="https://semantic-ui.com/images/avatar2/large/matthew.png" alt="">
        </div>
        <div class="content">
          <div class="header">Matthew</div>
          <div class="meta">Software Developer</div>
          <div class="description">Matthew is working on a new startup.</div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

🧱 Key Features Summary

Category	Description
Semantic class names	Readable, natural language–style HTML
Extensive components	50+ components with variants and states
Responsive grid	12-column system with stackable layouts
Themes	Easy to customize via LESS variables
JS behaviors	jQuery-based interactions (dropdowns, modals, etc.)
Icons	Built-in icon set with Font Awesome compatibility

⚖️ Advantages

✅ Easy-to-read and maintain HTML
✅ Clean, modern default design
✅ Huge number of built-in components
✅ Theming and variable-based customization
✅ Consistent visual language and spacing

⚠️ Limitations

⚠️ Relies on jQuery — older JS approach compared to React/Vue/Tailwind ecosystems.
⚠️ Heavy — full CSS + JS can be large for small projects.
⚠️ Development stagnation — Semantic UI’s main repo has slowed in updates (though the community has Fomantic-UI, a maintained fork).
⚠️ Learning curve — naming system is verbose at first.

🧭 Semantic UI vs Fomantic UI

Because Semantic UI’s official development slowed, the community maintains a fork:

Fomantic UI → community-driven continuation of Semantic UI.
- 100% compatible syntax.
- Actively maintained and updated (new features, bug fixes).
- Website: https://fomantic-ui.com

You can safely use Fomantic-UI if you want Semantic’s design + ongoing maintenance.

🚀 When to Use Semantic UI

Use it when:

You want beautiful UI quickly with human-readable HTML.
You prefer semantic naming over utility classes.
You’re building dashboards, admin panels, or web apps that rely on structured components.
You want a themed look (corporate, modern, or classic) out of the box.

Avoid it when:

You need a lightweight or modern JS-free CSS-only framework.
You’re working in React/Vue (use MUI, Chakra, or Tailwind instead).