tessl/npm-semantic-ui-css

CSS-only distribution of Semantic UI providing comprehensive styling and JavaScript behaviors for web applications

—

Pending

Overview

Eval results

Files

UI Elements

Name: tessl/npm-semantic-ui-css
Author: tessl

Basic building blocks including buttons, inputs, headers, icons, and other fundamental interface elements that form the foundation of user interfaces.

Capabilities

Button

Interactive buttons with comprehensive styling variations and states.

.ui.button                    /* Basic button */

/* Button types */
.ui.primary.button            /* Primary brand button */
.ui.secondary.button          /* Secondary button */
.ui.basic.button              /* Basic outline button */
.ui.inverted.button           /* Inverted color button */

/* Button states */
.ui.active.button             /* Active/pressed state */
.ui.disabled.button           /* Disabled non-interactive state */
.ui.loading.button            /* Loading state with spinner */

/* Button variations */
.ui.fluid.button              /* Full-width button */
.ui.circular.button           /* Circular button */
.ui.labeled.button            /* Button with attached label */
.ui.icon.button               /* Button with icon only */
.ui.animated.button           /* Button with hover animation */

/* Button groups */
.ui.buttons                   /* Button group container */
.ui.labeled.icon.buttons      /* Labeled icon button group */
.ui.vertical.buttons          /* Vertical button group */

Usage Examples:

<!-- Basic buttons -->
<div class="ui button">Default Button</div>
<div class="ui primary button">Primary Button</div>
<div class="ui secondary button">Secondary Button</div>

<!-- Button states -->
<div class="ui active button">Active Button</div>
<div class="ui disabled button">Disabled Button</div>
<div class="ui loading button">Loading...</div>

<!-- Icon buttons -->
<div class="ui icon button">
  <i class="settings icon"></i>
</div>
<div class="ui labeled icon button">
  <i class="settings icon"></i>
  Settings
</div>

<!-- Button groups -->
<div class="ui buttons">
  <div class="ui button">One</div>
  <div class="ui button">Two</div>
  <div class="ui button">Three</div>
</div>

Input

Form input elements with enhanced styling and validation states.

.ui.input                     /* Input container */
.ui.input > input             /* Actual input element */

/* Input types */
.ui.fluid.input               /* Full-width input */
.ui.mini.input                /* Mini size input */
.ui.small.input               /* Small size input */
.ui.large.input               /* Large size input */
.ui.huge.input                /* Huge size input */

/* Input states */
.ui.disabled.input            /* Disabled input */
.ui.error.input               /* Error state input */
.ui.success.input             /* Success state input */
.ui.loading.input             /* Loading state input */
.ui.focus.input               /* Focused state input */

/* Input variations */
.ui.transparent.input         /* Transparent background input */
.ui.inverted.input            /* Inverted color input */
.ui.labeled.input             /* Input with attached label */
.ui.action.input              /* Input with attached action button */
.ui.icon.input                /* Input with icon */
.ui.left.icon.input           /* Input with left-side icon */
.ui.right.icon.input          /* Input with right-side icon */

Usage Examples:

<!-- Basic inputs -->
<div class="ui input">
  <input type="text" placeholder="Enter text...">
</div>

<!-- Fluid input -->
<div class="ui fluid input">
  <input type="text" placeholder="Full width input">
</div>

<!-- Input with icon -->
<div class="ui left icon input">
  <input type="text" placeholder="Search...">
  <i class="search icon"></i>
</div>

<!-- Input with action -->
<div class="ui action input">
  <input type="text" placeholder="Enter domain...">
  <div class="ui button">Search</div>
</div>

<!-- Input states -->
<div class="ui error input">
  <input type="text" placeholder="Error input">
</div>
<div class="ui success input">
  <input type="text" placeholder="Success input">
</div>

Header

Content headers and titles with semantic hierarchy and styling options.

.ui.header                    /* Basic header */

/* Header sizes */
.ui.huge.header               /* Largest header size */
.ui.large.header              /* Large header size */
.ui.medium.header             /* Medium header size (default) */
.ui.small.header              /* Small header size */
.ui.tiny.header               /* Smallest header size */

/* Header types */
.ui.dividing.header           /* Header with bottom border */
.ui.block.header              /* Header with background block */
.ui.attached.header           /* Header attached to content */
.ui.top.attached.header       /* Header attached to top */
.ui.bottom.attached.header    /* Header attached to bottom */

/* Header content */
.ui.icon.header               /* Header with icon */
.ui.sub.header                /* Sub-header text */

/* Header states */
.ui.disabled.header           /* Disabled header appearance */
.ui.inverted.header           /* Inverted color header */

Usage Examples:

<!-- Basic headers -->
<h1 class="ui header">Main Page Title</h1>
<h2 class="ui header">Section Header</h2>
<h3 class="ui header">Subsection Header</h3>

<!-- Sized headers -->
<h1 class="ui huge header">Huge Header</h1>
<h2 class="ui large header">Large Header</h2>
<h3 class="ui small header">Small Header</h3>

<!-- Icon header -->
<h2 class="ui icon header">
  <i class="settings icon"></i>
  Account Settings
  <div class="sub header">Manage your account preferences</div>
</h2>

<!-- Dividing header -->
<h2 class="ui dividing header">Section Title</h2>

<!-- Attached headers -->
<div class="ui top attached header">
  Attached Header
</div>
<div class="ui attached segment">
  Content attached to header above.
</div>

Icon

Icon system providing hundreds of scalable vector icons.

.ui.icon                      /* Basic icon */
.icon                         /* Short form icon class */

/* Icon sizes */
.ui.mini.icon                 /* Mini size icon */
.ui.tiny.icon                 /* Tiny size icon */
.ui.small.icon                /* Small size icon */
.ui.large.icon                /* Large size icon */
.ui.big.icon                  /* Big size icon */
.ui.huge.icon                 /* Huge size icon */
.ui.massive.icon              /* Massive size icon */

/* Icon states */
.ui.disabled.icon             /* Disabled icon appearance */
.ui.loading.icon              /* Loading/spinner icon */
.ui.fitted.icon               /* Icon without spacing */
.ui.link.icon                 /* Clickable icon */

/* Icon groups */
.ui.corner.icon               /* Corner positioned icon */
.ui.icons                     /* Icon group container */

/* Common icon classes (examples) */
.home.icon                    /* Home icon */
.user.icon                    /* User icon */
.settings.icon                /* Settings icon */
.search.icon                  /* Search icon */
.edit.icon                    /* Edit icon */
.delete.icon                  /* Delete icon */
.save.icon                    /* Save icon */
.close.icon                   /* Close icon */
.menu.icon                    /* Menu icon */
.dropdown.icon                /* Dropdown arrow icon */

Usage Examples:

<!-- Basic icons -->
<i class="home icon"></i>
<i class="user icon"></i>
<i class="settings icon"></i>

<!-- Sized icons -->
<i class="small home icon"></i>
<i class="large user icon"></i>
<i class="huge settings icon"></i>

<!-- Icon groups -->
<div class="ui icons">
  <i class="big home icon"></i>
  <i class="corner add icon"></i>
</div>

<!-- Icons in buttons and text -->
<div class="ui button">
  <i class="save icon"></i>
  Save Changes
</div>

<p>Click the <i class="settings icon"></i> icon to configure.</p>

Label

Content labels for categorization, status indication, and metadata display.

.ui.label                     /* Basic label */

/* Label types */
.ui.image.label               /* Label with image */
.ui.pointing.label            /* Label with pointing arrow */
.ui.corner.label              /* Corner positioned label */
.ui.tag.label                 /* Tag-style label */
.ui.basic.label               /* Basic outline label */

/* Label states */
.ui.active.label              /* Active label state */
.ui.disabled.label            /* Disabled label state */

/* Label variations */
.ui.circular.label            /* Circular label */
.ui.empty.circular.label      /* Empty circular label (dot) */
.ui.floating.label            /* Floating positioned label */
.ui.horizontal.label          /* Horizontal label */

/* Label content */
.ui.detail                    /* Label detail text */
.ui.delete.icon               /* Delete icon in label */

/* Label groups */
.ui.labels                    /* Label group container */

Usage Examples:

<!-- Basic labels -->
<div class="ui label">Default</div>
<div class="ui red label">Error</div>
<div class="ui green label">Success</div>

<!-- Labels with details -->
<div class="ui label">
  Emails
  <div class="detail">23</div>
</div>

<!-- Deletable labels -->
<div class="ui label">
  Tag Name
  <i class="delete icon"></i>
</div>

<!-- Pointing labels -->
<div class="ui form">
  <div class="field">
    <input type="text" placeholder="Enter value">
    <div class="ui pointing red basic label">
      Please enter a value
    </div>
  </div>
</div>

<!-- Image labels -->
<div class="ui image label">
  <img src="avatar.jpg">
  John Doe
  <div class="detail">Admin</div>
</div>

List

Lists and menus for displaying collections of related items.

.ui.list                      /* Basic list */

/* List types */
.ui.bulleted.list             /* Bulleted list */
.ui.ordered.list              /* Numbered list */
.ui.link.list                 /* Clickable link list */
.ui.horizontal.list           /* Horizontal list layout */

/* List variations */
.ui.inverted.list             /* Inverted color list */
.ui.selection.list            /* Selectable list items */
.ui.animated.list             /* Animated list interactions */
.ui.relaxed.list              /* Extra spacing between items */
.ui.divided.list              /* Divided list with separators */
.ui.celled.list               /* Celled list with borders */

/* List items */
.ui.list > .item              /* List item */
.ui.list .header              /* List item header */
.ui.list .description         /* List item description */
.ui.list .content             /* List item content */

/* List item states */
.ui.list > .disabled.item     /* Disabled list item */
.ui.list > .active.item       /* Active list item */

Usage Examples:

<!-- Basic list -->
<div class="ui list">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

<!-- List with content structure -->
<div class="ui list">
  <div class="item">
    <div class="header">Header Text</div>
    <div class="description">Description text goes here.</div>
  </div>
  <div class="item">
    <div class="header">Another Header</div>
    <div class="description">More description text.</div>
  </div>
</div>

<!-- Horizontal list -->
<div class="ui horizontal list">
  <div class="item">About</div>
  <div class="item">Contact</div>
  <div class="item">Help</div>
</div>

<!-- Bulleted list -->
<div class="ui bulleted list">
  <div class="item">Bullet point one</div>
  <div class="item">Bullet point two</div>
  <div class="item">Bullet point three</div>
</div>

Loader

Loading indicators for showing progress and activity states.

.ui.loader                    /* Basic loader/spinner */

/* Loader sizes */
.ui.mini.loader               /* Mini loader */
.ui.tiny.loader               /* Tiny loader */
.ui.small.loader              /* Small loader */
.ui.medium.loader             /* Medium loader (default) */
.ui.large.loader              /* Large loader */
.ui.big.loader                /* Big loader */
.ui.huge.loader               /* Huge loader */
.ui.massive.loader            /* Massive loader */

/* Loader types */
.ui.text.loader               /* Loader with text */
.ui.inverted.loader           /* Inverted color loader */
.ui.inline.loader             /* Inline loader */
.ui.centered.inline.loader    /* Centered inline loader */

/* Loader states */
.ui.active.loader             /* Active/visible loader */
.ui.disabled.loader           /* Disabled/hidden loader */

Usage Examples:

<!-- Basic loader in segment -->
<div class="ui segment">
  <div class="ui active loader"></div>
  <p>Loading content...</p>
</div>

<!-- Text loader -->
<div class="ui segment">
  <div class="ui active text loader">Loading data</div>
  <p>Content placeholder</p>
</div>

<!-- Inline loaders -->
<p>Processing <div class="ui active inline loader"></div> please wait...</p>

<!-- Different sized loaders -->
<div class="ui segment">
  <div class="ui active small loader"></div>
  <p>Small loading indicator</p>
</div>

Common Element Patterns

Size Variations

All elements support the standard size scale:

.ui.mini.element              /* Smallest size */
.ui.tiny.element              /* Very small */
.ui.small.element             /* Small */
.ui.medium.element            /* Default size */
.ui.large.element             /* Large */
.ui.big.element               /* Very large */
.ui.huge.element              /* Huge */
.ui.massive.element           /* Largest size */

Color Variations

All elements support the color palette:

.ui.red.element               /* Red colored element */
.ui.blue.element              /* Blue colored element */
.ui.green.element             /* Green colored element */
.ui.primary.element           /* Primary brand color */
.ui.secondary.element         /* Secondary color */

State Classes

Common states across elements:

.ui.active.element            /* Active/selected state */
.ui.disabled.element          /* Disabled/non-interactive */
.ui.loading.element           /* Loading state */

Install with Tessl CLI