Semantic UI Counter Example - Semantic-ui Typing CST Test
Loading…
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.