tessl/npm-semantic-ui-css
CSS-only distribution of Semantic UI providing comprehensive styling and JavaScript behaviors for web applications
—
Pending
ui-collections.mddocs/
UI Collections
Grouped components like forms, menus, messages, and tables that work together as cohesive units to create complex interface sections.
Capabilities
Form
Comprehensive form layouts with integrated validation styling and field organization.
.ui.form /* Form container */
/* Form types */
.ui.inverted.form /* Inverted color form */
.ui.loading.form /* Loading state form with dimmer */
.ui.success.form /* Success state form */
.ui.error.form /* Error state form with error list */
.ui.warning.form /* Warning state form */
/* Form fields */
.ui.form .field /* Individual field container */
.ui.form .fields /* Multiple field group */
.ui.form .inline.field /* Inline field layout */
.ui.form .grouped.fields /* Grouped fields with border */
.ui.form .equal.width.fields /* Equal width field group */
/* Field states */
.ui.form .required.field /* Required field marker */
.ui.form .disabled.field /* Disabled field */
.ui.form .error.field /* Error state field */
.ui.form .success.field /* Success state field */
/* Form elements */
.ui.form input /* Form input styling */
.ui.form textarea /* Form textarea styling */
.ui.form select /* Form select styling */
.ui.form .ui.checkbox /* Form checkbox styling */
.ui.form .ui.dropdown /* Form dropdown styling */
/* Form validation */
.ui.form .error.message /* Error message container */
.ui.form .success.message /* Success message container */
.ui.form .warning.message /* Warning message container */Usage Examples:
<!-- Basic form -->
<form class="ui form">
<div class="field">
<label>Name</label>
<input type="text" name="name" placeholder="Enter your name">
</div>
<div class="field">
<label>Email</label>
<input type="email" name="email" placeholder="Enter your email">
</div>
<div class="ui submit button">Submit</div>
</form>
<!-- Form with grouped fields -->
<form class="ui form">
<div class="two fields">
<div class="field">
<label>First Name</label>
<input type="text" placeholder="First Name">
</div>
<div class="field">
<label>Last Name</label>
<input type="text" placeholder="Last Name">
</div>
</div>
<div class="field">
<label>Address</label>
<input type="text" placeholder="Street Address">
</div>
</form>
<!-- Form with validation states -->
<form class="ui form error">
<div class="required field error">
<label>Username</label>
<input type="text" placeholder="Username">
</div>
<div class="ui error message">
<div class="header">Form Error</div>
<p>Please enter a valid username.</p>
</div>
<div class="ui submit button">Submit</div>
</form>Menu
Navigation menus with flexible layouts and interactive states.
.ui.menu /* Basic menu */
/* Menu types */
.ui.vertical.menu /* Vertical menu layout */
.ui.horizontal.menu /* Horizontal menu layout (default) */
.ui.tabular.menu /* Tabbed menu appearance */
.ui.text.menu /* Text-only menu */
.ui.icon.menu /* Icon-only menu */
.ui.labeled.icon.menu /* Menu with labeled icons */
/* Menu variations */
.ui.inverted.menu /* Dark/inverted menu */
.ui.borderless.menu /* Menu without borders */
.ui.compact.menu /* Compact spacing menu */
.ui.fluid.menu /* Full-width menu */
.ui.fixed.menu /* Fixed position menu */
.ui.top.fixed.menu /* Fixed to top */
.ui.bottom.fixed.menu /* Fixed to bottom */
/* Menu items */
.ui.menu .item /* Menu item */
.ui.menu .dropdown.item /* Dropdown menu item */
.ui.menu .right.menu /* Right-aligned menu section */
.ui.menu .header.item /* Menu header item */
/* Menu item states */
.ui.menu .active.item /* Active/selected menu item */
.ui.menu .disabled.item /* Disabled menu item */
/* Dropdown menu */
.ui.menu .dropdown /* Dropdown container */
.ui.menu .dropdown .menu /* Dropdown submenu */Usage Examples:
<!-- Basic horizontal menu -->
<div class="ui menu">
<div class="active item">Home</div>
<div class="item">About</div>
<div class="item">Services</div>
<div class="item">Contact</div>
</div>
<!-- Vertical menu -->
<div class="ui vertical menu">
<div class="item">
<i class="home icon"></i>
Home
</div>
<div class="item">
<i class="user icon"></i>
Profile
</div>
<div class="item">
<i class="settings icon"></i>
Settings
</div>
</div>
<!-- Menu with dropdown -->
<div class="ui menu">
<div class="item">Home</div>
<div class="ui dropdown item">
Products
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">Software</div>
<div class="item">Hardware</div>
<div class="item">Services</div>
</div>
</div>
<div class="right menu">
<div class="item">Login</div>
</div>
</div>
<!-- Tabular menu -->
<div class="ui tabular menu">
<div class="active item">Tab 1</div>
<div class="item">Tab 2</div>
<div class="item">Tab 3</div>
</div>Message
User messages and alerts for communicating status, feedback, and information.
.ui.message /* Basic message */
/* Message types */
.ui.info.message /* Informational message */
.ui.success.message /* Success message */
.ui.warning.message /* Warning message */
.ui.error.message /* Error message */
.ui.negative.message /* Negative message (same as error) */
.ui.positive.message /* Positive message (same as success) */
/* Message variations */
.ui.icon.message /* Message with icon */
.ui.compact.message /* Compact message */
.ui.attached.message /* Attached to other elements */
.ui.top.attached.message /* Attached to top */
.ui.bottom.attached.message /* Attached to bottom */
.ui.floating.message /* Floating message */
.ui.hidden.message /* Hidden message */
.ui.visible.message /* Visible message */
/* Message content */
.ui.message .header /* Message header */
.ui.message .content /* Message content */
.ui.message .list /* Message list */
.ui.message .close.icon /* Dismissible message close icon */Usage Examples:
<!-- Basic messages -->
<div class="ui message">
<div class="header">Default Message</div>
<p>This is a basic message with default styling.</p>
</div>
<div class="ui info message">
<div class="header">Information</div>
<p>This is an informational message.</p>
</div>
<div class="ui success message">
<div class="header">Success!</div>
<p>Your action was completed successfully.</p>
</div>
<div class="ui warning message">
<div class="header">Warning</div>
<p>Please check your input before proceeding.</p>
</div>
<!-- Dismissible message -->
<div class="ui message">
<i class="close icon"></i>
<div class="header">Dismissible Message</div>
<p>Click the X to dismiss this message.</p>
</div>
<!-- Icon message -->
<div class="ui icon message">
<i class="inbox icon"></i>
<div class="content">
<div class="header">No Messages</div>
<p>You have no new messages in your inbox.</p>
</div>
</div>
<!-- Message with list -->
<div class="ui error message">
<div class="header">Form Errors</div>
<ul class="list">
<li>Please enter a valid email address</li>
<li>Password must be at least 8 characters</li>
<li>Username is required</li>
</ul>
</div>Table
Data tables for displaying structured information with sorting and styling options.
.ui.table /* Basic table */
/* Table types */
.ui.celled.table /* Table with cell borders */
.ui.padded.table /* Table with extra padding */
.ui.compact.table /* Compact table spacing */
.ui.basic.table /* Minimal table styling */
.ui.very.basic.table /* Very minimal table styling */
/* Table variations */
.ui.striped.table /* Alternating row colors */
.ui.selectable.table /* Selectable rows */
.ui.inverted.table /* Dark/inverted table */
.ui.collapsing.table /* Table collapses to content width */
.ui.fixed.table /* Fixed table layout */
.ui.sortable.table /* Sortable table headers */
.ui.stackable.table /* Mobile-responsive stacking */
.ui.unstackable.table /* Prevent mobile stacking */
/* Table elements */
.ui.table thead /* Table header section */
.ui.table tbody /* Table body section */
.ui.table tfoot /* Table footer section */
.ui.table tr /* Table row */
.ui.table th /* Table header cell */
.ui.table td /* Table data cell */
/* Cell states */
.ui.table tr.active /* Active/selected row */
.ui.table tr.disabled /* Disabled row */
.ui.table td.active /* Active cell */
.ui.table td.disabled /* Disabled cell */
.ui.table td.positive /* Positive state cell */
.ui.table td.negative /* Negative state cell */
.ui.table td.warning /* Warning state cell */
.ui.table td.error /* Error state cell */
/* Cell alignment */
.ui.table td.left.aligned /* Left-aligned cell */
.ui.table td.center.aligned /* Center-aligned cell */
.ui.table td.right.aligned /* Right-aligned cell */
/* Column width */
.ui.table td.single.line /* Single line cell content */
.ui.table td.collapsing /* Collapse cell to content width */Usage Examples:
<!-- Basic table -->
<table class="ui table">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>john@example.com</td>
<td>Active</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>jane@example.com</td>
<td>Inactive</td>
</tr>
</tbody>
</table>
<!-- Striped selectable table -->
<table class="ui striped selectable table">
<thead>
<tr>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td>Laptop</td>
<td>$999.00</td>
<td>5</td>
</tr>
<tr class="active">
<td>Mouse</td>
<td>$29.99</td>
<td>25</td>
</tr>
</tbody>
</table>
<!-- Table with cell states -->
<table class="ui table">
<thead>
<tr>
<th>Task</th>
<th>Status</th>
<th>Priority</th>
</tr>
</thead>
<tbody>
<tr class="positive">
<td>Task 1</td>
<td>Complete</td>
<td>High</td>
</tr>
<tr class="negative">
<td>Task 2</td>
<td>Failed</td>
<td>Medium</td>
</tr>
<tr class="warning">
<td>Task 3</td>
<td>Pending</td>
<td>Low</td>
</tr>
</tbody>
</table>Breadcrumb
Navigation breadcrumbs for showing user location and navigation hierarchy.
.ui.breadcrumb /* Breadcrumb container */
/* Breadcrumb elements */
.ui.breadcrumb .section /* Breadcrumb section/item */
.ui.breadcrumb .divider /* Breadcrumb divider */
.ui.breadcrumb .active.section /* Active breadcrumb section */
/* Breadcrumb variations */
.ui.mini.breadcrumb /* Mini size breadcrumb */
.ui.tiny.breadcrumb /* Tiny size breadcrumb */
.ui.small.breadcrumb /* Small size breadcrumb */
.ui.large.breadcrumb /* Large size breadcrumb */
.ui.big.breadcrumb /* Big size breadcrumb */
.ui.huge.breadcrumb /* Huge size breadcrumb */
.ui.massive.breadcrumb /* Massive size breadcrumb */Usage Examples:
<!-- Basic breadcrumb -->
<div class="ui breadcrumb">
<a class="section">Home</a>
<div class="divider"> / </div>
<a class="section">Store</a>
<div class="divider"> / </div>
<div class="active section">T-Shirt</div>
</div>
<!-- Breadcrumb with icons -->
<div class="ui breadcrumb">
<a class="section">
<i class="home icon"></i>
Home
</a>
<i class="right chevron icon divider"></i>
<a class="section">Registration</a>
<i class="right chevron icon divider"></i>
<div class="active section">Personal Information</div>
</div>
<!-- Large breadcrumb -->
<div class="ui large breadcrumb">
<a class="section">Home</a>
<div class="divider"> / </div>
<a class="section">Library</a>
<div class="divider"> / </div>
<div class="active section">Documents</div>
</div>Collection Patterns
Responsive Behavior
Collections adapt to different screen sizes:
.ui.stackable.table /* Table stacks on mobile */
.ui.tablet.stackable.table /* Stack on tablet and below */
.ui.computer.stackable.table /* Stack on computer and below */Color Variations
Collections support the standard color palette:
.ui.red.message /* Red colored message */
.ui.blue.table /* Blue colored table */
.ui.green.menu /* Green colored menu */Size Variations
Collections support the standard size scale:
.ui.mini.form /* Mini sized form */
.ui.small.menu /* Small sized menu */
.ui.large.table /* Large sized table */Install with Tessl CLI
npx tessl i tessl/npm-semantic-ui-css