Mode:
Duration:
1
Coding works best on desktop or with an external keyboard.
Semantic UI Counter Example - Semantic-ui Typing CST Test
Semantic UI Counter Example — Semantic-ui Code
Demonstrates a simple counter layout using Semantic UI classes and minimal JavaScript for interactivity.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.2/semantic.min.css">
<title>Semantic UI Counter</title>
</head>
<body class="ui container center aligned">
<h2 class="ui header">Counter: <span id="count">0</span></h2>
<div class="ui buttons">
<button id="increment" class="ui primary button">+</button>
<button id="decrement" class="ui red button">-</button>
<button id="reset" class="ui grey button">Reset</button>
</div>
<br><br>
<button id="theme-btn" class="ui yellow button">Switch Theme</button>
<script>
let count = 0;
let isDark = false;
const countEl = document.getElementById('count');
const body = document.body;
document.getElementById('increment').onclick = () => { count++; countEl.textContent = count; };
document.getElementById('decrement').onclick = () => { count--; countEl.textContent = count; };
document.getElementById('reset').onclick = () => { count = 0; countEl.textContent = count; };
document.getElementById('theme-btn').onclick = () => {
isDark = !isDark;
body.classList.toggle('inverted', isDark);
};
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.2/semantic.min.js"></script>
</body>
</html>Semantic-ui Language Guide
Semantic UI is a front-end framework that uses human-friendly HTML to create responsive, themable, and component-rich web applications. It emphasizes semantic class names and intuitive structure for rapid development.
Primary Use Cases
- ▸Corporate websites and web apps
- ▸Admin dashboards and data-heavy apps
- ▸Prototyping user interfaces quickly
- ▸Design systems with consistent component patterns
- ▸Mobile-responsive web applications
Notable Features
- ▸Human-friendly semantic class names
- ▸Responsive and flexible grid system
- ▸Prebuilt UI components (buttons, modals, forms)
- ▸Integrated JavaScript behaviors
- ▸Themeable with custom variables and CSS
Origin & Creator
Created by Jack Lukic in 2013, Semantic UI aims to bridge the gap between designers and developers by providing a framework with natural language class naming.
Industrial Note
Semantic UI is ideal for teams who want readable, semantically meaningful HTML with extensive prebuilt components, especially for dashboards, admin panels, and rapid UI development.
Quick Explain
- ▸Semantic UI uses descriptive class names for components and layouts, making HTML readable and maintainable.
- ▸It provides a responsive grid system, prebuilt UI elements, and integrated JavaScript behaviors.
- ▸Designed for developers and designers who want consistency and fast prototyping.
Core Features
- ▸Grid system with responsive breakpoints
- ▸UI components: buttons, menus, cards, modals, tables
- ▸Form elements with validation support
- ▸JavaScript plugins for interactive components
- ▸Theming and customizable CSS variables
Learning Path
- ▸Learn semantic class naming
- ▸Understand grid system
- ▸Explore components and forms
- ▸Integrate JS behaviors
- ▸Customize themes and variables
Practical Examples
- ▸Corporate websites
- ▸Dashboard interfaces
- ▸Prototyping MVPs
- ▸Data-heavy admin apps
- ▸Mobile-responsive web apps
Comparisons
- ▸More semantic than Bootstrap
- ▸Less utility-driven than Tailwind
- ▸Prebuilt JS behaviors unlike minimal frameworks
- ▸Readable HTML structure
- ▸Comprehensive component library
Strengths
- ▸Readable and semantic HTML
- ▸Comprehensive UI component library
- ▸Easy integration of JavaScript behaviors
- ▸Responsive design and mobile-first support
- ▸Customizable themes and variables
Limitations
- ▸Relatively large CSS/JS bundle if not optimized
- ▸Smaller community than Bootstrap or Tailwind
- ▸Learning curve due to verbose class names
- ▸Updates less frequent than major frameworks
- ▸Less utility-first, less control over atomic styling
When NOT to Use
- ▸Projects preferring utility-first CSS
- ▸Small static pages needing minimal CSS
- ▸Teams requiring very small bundle sizes
- ▸Rapid prototyping with modern micro-libraries
- ▸Projects requiring frequent framework updates
Cheat Sheet
- ▸`.ui.grid` - grid container
- ▸`.column` - grid item
- ▸`.ui.button` - button
- ▸`.ui.menu` - navigation menu
- ▸`.ui.modal` - modal plugin
FAQ
- ▸Is Semantic UI still maintained?
- ▸Partially - Fomantic UI fork is more actively maintained.
- ▸Can I use Semantic UI with frameworks?
- ▸Yes - React, Vue, Angular wrappers available.
- ▸Does it support responsive design?
- ▸Yes, via grid system and breakpoints.
- ▸Is it beginner-friendly?
- ▸Moderate - semantic class names are intuitive but verbose.
- ▸Can I create custom themes?
- ▸Yes, using theme variables or the theme builder.
30-Day Skill Plan
- ▸Week 1: Grid and layout basics
- ▸Week 2: Buttons, menus, forms
- ▸Week 3: JS plugins for interactivity
- ▸Week 4: Theming and variable overrides
- ▸Week 5: Build dashboards or admin panels
Final Summary
- ▸Semantic UI is a semantic, human-readable front-end framework.
- ▸Offers responsive grids, prebuilt components, and JS behaviors.
- ▸Customizable themes and variable-driven design.
- ▸Ideal for dashboards, admin apps, and enterprise projects.
- ▸Balances readability with comprehensive UI features.
Project Structure
- ▸index.html - main markup
- ▸src/ - custom styles or component overrides
- ▸js/ - optional Semantic JS behaviors
- ▸assets/ - images, fonts, media
- ▸node_modules/ - npm packages if used
Monetization
- ▸Create Semantic UI-based templates
- ▸Develop admin dashboards for clients
- ▸Offer Fomantic UI custom themes
- ▸Consulting for semantic and accessible UI
- ▸Build reusable component libraries
Productivity Tips
- ▸Use semantic class names for clarity
- ▸Leverage JS behaviors only as needed
- ▸Create reusable grid layouts
- ▸Customize themes with variables
- ▸Optimize bundle size for production
Basic Concepts
- ▸Grid: `.ui.grid`, `.column`, `.row`
- ▸Buttons: `.ui.button`, `.primary`, `.secondary`
- ▸Forms: `.ui.form` with inputs and validation
- ▸Menus: `.ui.menu`, `.item`, `.dropdown`
- ▸Modals and interactive components via JS plugins