Semantic UI
g. 'ui blue button') to describe UI components, aiming to make markup self-documenting.
Definition
Semantic UI is a CSS framework that uses human-readable class names resembling natural language (e.g. 'ui blue button') to describe UI components, aiming to make markup self-documenting.
Overview
Semantic UI's defining idea is that class names should read like plain English, so a developer writing `<div class="ui blue button">` can understand what the element is and looks like without consulting documentation. This "semantic" naming convention covers a broad library of components — buttons, forms, modals, cards, and more — styled with a cohesive default theme. The framework's interactive components have historically relied on jQuery for behavior, which set it apart from later frameworks that avoided jQuery dependencies, and its theming system uses Less or its own theming variables to let teams restyle components while keeping the same semantic markup. Semantic UI was popular for a period as an alternative to Bootstrap and Foundation CSS, particularly among developers who preferred its naming philosophy over utility-first approaches like Tailwind CSS, though its jQuery dependency and slower recent update cadence have led some newer projects toward frameworks with less legacy baggage, including community forks that continue active maintenance.
Key Features
- Human-readable, natural-language-style class naming convention
- Broad component library covering buttons, forms, modals, and layout elements
- Theming system based on Less variables for restyling components
- Historically built with jQuery-powered interactive behavior
- Community forks that continue maintenance under different project names