or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

core-styling.md form-validation.md index.md interactive-modules.md layout-system.md ui-collections.md ui-elements.md ui-views.md

tile.json

tessl/npm-semantic-ui-css

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

Workspace: tessl
Visibility: Public
Created: 3 months ago
Last updated: 3 months ago
Describes: pkg:npm/semantic-ui-css@2.5.x

To install, run

npx @tessl/cli install tessl/npm-semantic-ui-css@2.5.0

Semantic UI CSS

Semantic UI CSS is a comprehensive CSS-only distribution of Semantic UI that provides complete styling and JavaScript behaviors for web applications. It includes pre-compiled CSS files for 50+ UI components and corresponding JavaScript behaviors, offering a complete front-end framework without requiring custom theming or LESS compilation.

Package Information

Package Name: semantic-ui-css
Package Type: npm
Language: CSS/JavaScript
Installation: npm install semantic-ui-css

Core Imports

CSS Import

Via CDN:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui-css@2.5.0/semantic.min.css">

Local installation:

<link rel="stylesheet" href="node_modules/semantic-ui-css/semantic.min.css">

Individual components:

<link rel="stylesheet" href="node_modules/semantic-ui-css/components/button.css">
<link rel="stylesheet" href="node_modules/semantic-ui-css/components/dropdown.css">

JavaScript Import

Via CDN:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui-css@2.5.0/semantic.min.js"></script>

Local installation:

<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/semantic-ui-css/semantic.min.js"></script>

Individual components:

<script src="node_modules/semantic-ui-css/components/dropdown.js"></script>
<script src="node_modules/semantic-ui-css/components/modal.js"></script>

Module Imports

ES6 Modules (for bundlers):

import 'semantic-ui-css/semantic.min.css';
import 'semantic-ui-css/semantic.min.js';

CommonJS:

require('semantic-ui-css/semantic.min.css');
require('semantic-ui-css/semantic.min.js');

Basic Usage

CSS-Only Usage

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="semantic.min.css">
</head>
<body>
  <!-- Basic components -->
  <div class="ui primary button">Primary Button</div>
  <div class="ui segment">
    <h3 class="ui header">Welcome</h3>
    <p>This is a basic segment with Semantic UI styling.</p>
  </div>
  
  <!-- Grid layout -->
  <div class="ui grid">
    <div class="four wide column">Sidebar</div>
    <div class="twelve wide column">Main content area</div>
  </div>
</body>
</html>

Enhanced with JavaScript

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="semantic.min.css">
</head>
<body>
  <!-- Interactive dropdown -->
  <div class="ui dropdown">
    <div class="text">Select Option</div>
    <i class="dropdown icon"></i>
    <div class="menu">
      <div class="item">Option 1</div>
      <div class="item">Option 2</div>
      <div class="item">Option 3</div>
    </div>
  </div>

  <!-- Modal trigger -->
  <div class="ui primary button" onclick="$('.ui.modal').modal('show')">
    Show Modal
  </div>
  
  <div class="ui modal">
    <div class="header">Modal Title</div>
    <div class="content">Modal content goes here</div>
  </div>

  <script src="jquery.js"></script>
  <script src="semantic.min.js"></script>
  <script>
    // Initialize components
    $('.ui.dropdown').dropdown();
  </script>
</body>
</html>

Architecture

Semantic UI CSS is organized into distinct categories:

CSS Framework: Complete styling system with consistent .ui class naming convention
Grid System: Responsive flexbox-based layout system with 16-column grid
Component Library: 50+ pre-styled UI components with variations (colors, sizes, states)
JavaScript Behaviors: jQuery plugins providing interactive functionality for components
Icon System: Complete icon font with hundreds of icons
Theme Assets: Fonts and images required for full functionality

Capabilities

Core Styling Framework

Foundation CSS classes and utilities for building user interfaces with consistent semantic naming.

.ui.component                 /* Base component class */
.ui.component.variation       /* Component with variation */
.ui.component.modifier        /* Component with modifier */

Core Styling

Layout System

Responsive grid system and layout components for structuring page content.

.ui.grid                      /* Grid container */
.ui.column                    /* Grid column */
.ui.row                       /* Grid row */
.ui.container                 /* Responsive container */

Layout System

UI Elements

Basic building blocks including buttons, inputs, headers, icons, and other fundamental interface elements.

.ui.button                    /* Interactive button */
.ui.input                     /* Form input */
.ui.header                    /* Content header */
.ui.icon                      /* Icon element */
.ui.label                     /* Content label */

UI Elements

UI Collections

Grouped components like forms, menus, messages, and tables that work together as cohesive units.

.ui.form                      /* Form container */
.ui.menu                      /* Navigation menu */
.ui.message                   /* User message */
.ui.table                     /* Data table */

UI Collections

UI Views

Content presentation components including cards, comments, feeds, and statistics.

.ui.card                      /* Content card */
.ui.cards                     /* Card group */
.ui.comments                  /* Comment thread */
.ui.feed                      /* Activity feed */

UI Views

Interactive Modules

JavaScript-enhanced components providing dynamic behavior and user interaction.

$('.ui.dropdown').dropdown(); // Enhanced select dropdown
$('.ui.modal').modal();       // Dialog modal  
$('.ui.popup').popup();       // Contextual popup
$('.ui.accordion').accordion(); // Collapsible content

Interactive Modules

Form Validation

Comprehensive form validation system with built-in rules and custom validation support.

$('.ui.form').form({
  fields: {
    email: {
      identifier: 'email',
      rules: [
        { type: 'empty', prompt: 'Please enter your email' },
        { type: 'email', prompt: 'Please enter a valid email' }
      ]
    }
  }
});

Form Validation

Common CSS Patterns

Color Variations

Available for most components:

.ui.red.component             /* Red variation */
.ui.blue.component            /* Blue variation */
.ui.green.component           /* Green variation */
.ui.primary.component         /* Primary color */
.ui.secondary.component       /* Secondary color */

Size Variations

Standard sizes across components:

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

State Classes

.ui.active.component          /* Active state */
.ui.disabled.component        /* Disabled state */
.ui.loading.component         /* Loading state */
.ui.error.component           /* Error state */

Common JavaScript Patterns

Plugin Initialization

$('.ui.component').componentName();
$('.ui.component').componentName(settings);

Method Invocation

$('.ui.component').componentName('methodName');
$('.ui.component').componentName('methodName', parameter);

Standard Methods

Available on all interactive components:

$('.ui.component').componentName('destroy');    // Remove component
$('.ui.component').componentName('refresh');    // Refresh state
$('.ui.component').componentName('setting', key, value); // Get/set setting

Dependencies

Required Dependencies

jQuery: Required for all JavaScript functionality (version "x.*" specified in package.json)

Included Assets

The package includes complete asset files in the themes/default/assets/ directory:

Font Assets (`themes/default/assets/fonts/`)

icons.eot, icons.ttf, icons.woff, icons.woff2, icons.svg: Main Semantic UI icon font
brand-icons.eot, brand-icons.ttf, brand-icons.woff, brand-icons.woff2, brand-icons.svg: Brand and social media icons
outline-icons.eot, outline-icons.ttf, outline-icons.woff, outline-icons.woff2, outline-icons.svg: Outline style icons

Image Assets (`themes/default/assets/images/`)

flags.png: Country flag sprites for flag icons

Typography

Lato Font: Loaded from Google Fonts for consistent typography across components
Font fallbacks: System fonts as fallbacks for optimal loading performance

Asset Usage

Assets are automatically included when using the complete semantic.min.css file. For individual component usage, you may need to include assets manually:

<!-- Ensure icon fonts are available -->
<link rel="stylesheet" href="node_modules/semantic-ui-css/semantic.min.css">

<!-- Or reference individual assets -->
<style>
@font-face {
  font-family: 'Icons';
  src: url('node_modules/semantic-ui-css/themes/default/assets/fonts/icons.woff2') format('woff2'),
       url('node_modules/semantic-ui-css/themes/default/assets/fonts/icons.woff') format('woff');
}
</style>

Browser Support

Semantic UI CSS supports all modern browsers with:

CSS3 features including flexbox, transitions, and transforms
ES5 JavaScript compatibility
Responsive design with mobile-first approach
Progressive enhancement for JavaScript functionality

Version

Tile

Files

tessl/npm-semantic-ui-css

To install, run

index.md.css-3qkkll{font-size:var(--chakra-font-sizes-sm);font-weight:var(--chakra-font-weights-normal);color:var(--chakra-colors-gray-300);}docs/

Semantic UI CSS

Package Information

Core Imports

CSS Import

JavaScript Import

Module Imports

Basic Usage

CSS-Only Usage

Enhanced with JavaScript

Architecture

Capabilities

Core Styling Framework

Layout System

UI Elements

UI Collections

UI Views

Interactive Modules

Form Validation

Common CSS Patterns

Color Variations

Size Variations

State Classes

Common JavaScript Patterns

Plugin Initialization

Method Invocation

Standard Methods

Dependencies

Required Dependencies

Included Assets

Font Assets (themes/default/assets/fonts/)

Image Assets (themes/default/assets/images/)

Typography

Asset Usage

Browser Support

index.mddocs/

Font Assets (`themes/default/assets/fonts/`)

Image Assets (`themes/default/assets/images/`)