tessl/npm-semantic-ui-css
CSS-only distribution of Semantic UI providing comprehensive styling and JavaScript behaviors for web applications
—
Pending
core-styling.mddocs/
Core Styling Framework
The core styling framework provides the foundation CSS classes and utilities for building user interfaces with Semantic UI's consistent naming convention and theming system.
Capabilities
Base Component Structure
All Semantic UI components follow a consistent class naming pattern with the .ui prefix.
.ui.component /* Base component class */
.ui.component.variation /* Component with variation (e.g., .ui.button.primary) */
.ui.component.modifier /* Component with modifier (e.g., .ui.button.large) */Site-wide Styles
Global styles and CSS reset for consistent cross-browser rendering.
/* CSS Reset and normalization */
.ui.reset /* CSS reset styles */
/* Site-wide typography and base styles */
.ui.site /* Base site container styles */The site.css component provides:
- CSS normalization and reset
- Base typography using Lato font family
- Global color palette and variables
- Responsive breakpoint definitions
- Default spacing and sizing scales
Usage Example:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="semantic.min.css">
</head>
<body class="ui site">
<!-- All Semantic UI components will inherit consistent base styles -->
<div class="ui container">
<h1 class="ui header">Welcome</h1>
<p>This content uses Semantic UI's base typography and spacing.</p>
</div>
</body>
</html>Color System
Semantic UI provides a comprehensive color palette available across all components.
/* Primary semantic colors */
.ui.primary.component /* Primary brand color (blue) */
.ui.secondary.component /* Secondary color (grey) */
/* Semantic state colors */
.ui.positive.component /* Success/positive state (green) */
.ui.negative.component /* Error/negative state (red) */
/* Standard color variations */
.ui.red.component /* Red variation */
.ui.orange.component /* Orange variation */
.ui.yellow.component /* Yellow variation */
.ui.olive.component /* Olive variation */
.ui.green.component /* Green variation */
.ui.teal.component /* Teal variation */
.ui.blue.component /* Blue variation */
.ui.violet.component /* Violet variation */
.ui.purple.component /* Purple variation */
.ui.pink.component /* Pink variation */
.ui.brown.component /* Brown variation */
.ui.grey.component /* Grey variation */
.ui.black.component /* Black variation */Usage Examples:
<!-- Colored buttons -->
<div class="ui red button">Red Button</div>
<div class="ui primary button">Primary Button</div>
<div class="ui positive button">Success Button</div>
<div class="ui negative button">Error Button</div>
<!-- Colored segments -->
<div class="ui blue segment">Blue segment content</div>
<div class="ui green message">Success message</div>Size System
Consistent sizing scale available across all components.
.ui.mini.component /* Smallest size */
.ui.tiny.component /* Very small size */
.ui.small.component /* Small size */
.ui.medium.component /* Default/medium size (usually omitted) */
.ui.large.component /* Large size */
.ui.big.component /* Very large size */
.ui.huge.component /* Huge size */
.ui.massive.component /* Largest size */Usage Examples:
<!-- Different sized buttons -->
<div class="ui mini button">Mini</div>
<div class="ui tiny button">Tiny</div>
<div class="ui small button">Small</div>
<div class="ui button">Default</div>
<div class="ui large button">Large</div>
<div class="ui big button">Big</div>
<div class="ui huge button">Huge</div>
<div class="ui massive button">Massive</div>
<!-- Different sized headers -->
<h1 class="ui small header">Small Header</h1>
<h1 class="ui header">Default Header</h1>
<h1 class="ui large header">Large Header</h1>State Classes
Common state classes that modify component appearance and behavior.
.ui.active.component /* Active/selected state */
.ui.disabled.component /* Disabled/non-interactive state */
.ui.loading.component /* Loading state with spinner */
.ui.error.component /* Error state styling */
.ui.warning.component /* Warning state styling */
.ui.info.component /* Info state styling */
.ui.success.component /* Success state styling */Usage Examples:
<!-- Button states -->
<div class="ui button">Normal Button</div>
<div class="ui active button">Active Button</div>
<div class="ui disabled button">Disabled Button</div>
<div class="ui loading button">Loading Button</div>
<!-- Form field states -->
<div class="ui input">
<input type="text" placeholder="Normal input">
</div>
<div class="ui error input">
<input type="text" placeholder="Error input">
</div>
<div class="ui success input">
<input type="text" placeholder="Success input">
</div>Floated Content
Classes for floating content left or right within containers.
.ui.left.floated.component /* Float component to the left */
.ui.right.floated.component /* Float component to the right */Usage Examples:
<div class="ui segment">
<div class="ui right floated button">Floated Right</div>
<div class="ui left floated button">Floated Left</div>
<div style="clear: both;"></div>
<p>Content that flows around floated elements.</p>
</div>Text Alignment
Classes for controlling text alignment within components.
.ui.left.aligned.component /* Left-align text content */
.ui.center.aligned.component /* Center-align text content */
.ui.right.aligned.component /* Right-align text content */
.ui.justified.component /* Justify text content */Usage Examples:
<div class="ui segment">
<div class="ui left aligned header">Left Aligned Header</div>
<div class="ui center aligned header">Center Aligned Header</div>
<div class="ui right aligned header">Right Aligned Header</div>
</div>Responsive Visibility
Classes for showing/hiding content at different screen sizes.
/* Mobile visibility (767px and below) */
.ui.mobile.only.component /* Show only on mobile */
.ui.mobile.hidden.component /* Hide on mobile */
/* Tablet visibility (768px - 991px) */
.ui.tablet.only.component /* Show only on tablet */
.ui.tablet.hidden.component /* Hide on tablet */
/* Computer visibility (992px - 1199px) */
.ui.computer.only.component /* Show only on computer */
.ui.computer.hidden.component /* Hide on computer */
/* Large screen visibility (1200px - 1919px) */
.ui.large.screen.only.component /* Show only on large screens */
.ui.large.screen.hidden.component /* Hide on large screens */
/* Widescreen visibility (1920px and above) */
.ui.widescreen.only.component /* Show only on widescreen */
.ui.widescreen.hidden.component /* Hide on widescreen */Usage Examples:
<!-- Responsive navigation -->
<div class="ui menu">
<div class="ui computer only item">Desktop Navigation</div>
<div class="ui mobile only item">Mobile Navigation</div>
</div>
<!-- Responsive content -->
<div class="ui tablet hidden computer hidden message">
This message only shows on mobile devices.
</div>Attached Content
Classes for attaching components to each other seamlessly.
.ui.top.attached.component /* Attach to top of next component */
.ui.bottom.attached.component /* Attach to bottom of previous component */
.ui.attached.component /* Attach to both top and bottom */Usage Examples:
<!-- Attached segments -->
<div class="ui top attached header">Header Section</div>
<div class="ui attached segment">Main content area</div>
<div class="ui bottom attached segment">Footer section</div>CSS Custom Properties
Semantic UI CSS uses CSS custom properties (variables) for consistent theming:
:root {
--primary-color: #1b1c1d;
--secondary-color: #767676;
--positive-color: #21ba45;
--negative-color: #db2828;
/* Additional theme variables */
}These variables are used throughout the framework to maintain consistency and enable theme customization.
Install with Tessl CLI
npx tessl i tessl/npm-semantic-ui-css