0
# Semantic UI CSS
1
2
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.
3
4
## Package Information
5
6
- **Package Name**: semantic-ui-css
7
- **Package Type**: npm
8
- **Language**: CSS/JavaScript
9
- **Installation**: `npm install semantic-ui-css`
10
11
## Core Imports
12
13
### CSS Import
14
15
Via CDN:
16
```html
17
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui-css@2.5.0/semantic.min.css">
18
```
19
20
Local installation:
21
```html
22
<link rel="stylesheet" href="node_modules/semantic-ui-css/semantic.min.css">
23
```
24
25
Individual components:
26
```html
27
<link rel="stylesheet" href="node_modules/semantic-ui-css/components/button.css">
28
<link rel="stylesheet" href="node_modules/semantic-ui-css/components/dropdown.css">
29
```
30
31
### JavaScript Import
32
33
Via CDN:
34
```html
35
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
36
<script src="https://cdn.jsdelivr.net/npm/semantic-ui-css@2.5.0/semantic.min.js"></script>
37
```
38
39
Local installation:
40
```html
41
<script src="node_modules/jquery/dist/jquery.min.js"></script>
42
<script src="node_modules/semantic-ui-css/semantic.min.js"></script>
43
```
44
45
Individual components:
46
```html
47
<script src="node_modules/semantic-ui-css/components/dropdown.js"></script>
48
<script src="node_modules/semantic-ui-css/components/modal.js"></script>
49
```
50
51
### Module Imports
52
53
ES6 Modules (for bundlers):
54
```javascript
55
import 'semantic-ui-css/semantic.min.css';
56
import 'semantic-ui-css/semantic.min.js';
57
```
58
59
CommonJS:
60
```javascript
61
require('semantic-ui-css/semantic.min.css');
62
require('semantic-ui-css/semantic.min.js');
63
```
64
65
## Basic Usage
66
67
### CSS-Only Usage
68
69
```html
70
<!DOCTYPE html>
71
<html>
72
<head>
73
<link rel="stylesheet" href="semantic.min.css">
74
</head>
75
<body>
76
<!-- Basic components -->
77
<div class="ui primary button">Primary Button</div>
78
<div class="ui segment">
79
<h3 class="ui header">Welcome</h3>
80
<p>This is a basic segment with Semantic UI styling.</p>
81
</div>
82
83
<!-- Grid layout -->
84
<div class="ui grid">
85
<div class="four wide column">Sidebar</div>
86
<div class="twelve wide column">Main content area</div>
87
</div>
88
</body>
89
</html>
90
```
91
92
### Enhanced with JavaScript
93
94
```html
95
<!DOCTYPE html>
96
<html>
97
<head>
98
<link rel="stylesheet" href="semantic.min.css">
99
</head>
100
<body>
101
<!-- Interactive dropdown -->
102
<div class="ui dropdown">
103
<div class="text">Select Option</div>
104
<i class="dropdown icon"></i>
105
<div class="menu">
106
<div class="item">Option 1</div>
107
<div class="item">Option 2</div>
108
<div class="item">Option 3</div>
109
</div>
110
</div>
111
112
<!-- Modal trigger -->
113
<div class="ui primary button" onclick="$('.ui.modal').modal('show')">
114
Show Modal
115
</div>
116
117
<div class="ui modal">
118
<div class="header">Modal Title</div>
119
<div class="content">Modal content goes here</div>
120
</div>
121
122
<script src="jquery.js"></script>
123
<script src="semantic.min.js"></script>
124
<script>
125
// Initialize components
126
$('.ui.dropdown').dropdown();
127
</script>
128
</body>
129
</html>
130
```
131
132
## Architecture
133
134
Semantic UI CSS is organized into distinct categories:
135
136
- **CSS Framework**: Complete styling system with consistent `.ui` class naming convention
137
- **Grid System**: Responsive flexbox-based layout system with 16-column grid
138
- **Component Library**: 50+ pre-styled UI components with variations (colors, sizes, states)
139
- **JavaScript Behaviors**: jQuery plugins providing interactive functionality for components
140
- **Icon System**: Complete icon font with hundreds of icons
141
- **Theme Assets**: Fonts and images required for full functionality
142
143
## Capabilities
144
145
### Core Styling Framework
146
147
Foundation CSS classes and utilities for building user interfaces with consistent semantic naming.
148
149
```css { .api }
150
.ui.component /* Base component class */
151
.ui.component.variation /* Component with variation */
152
.ui.component.modifier /* Component with modifier */
153
```
154
155
[Core Styling](./core-styling.md)
156
157
### Layout System
158
159
Responsive grid system and layout components for structuring page content.
160
161
```css { .api }
162
.ui.grid /* Grid container */
163
.ui.column /* Grid column */
164
.ui.row /* Grid row */
165
.ui.container /* Responsive container */
166
```
167
168
[Layout System](./layout-system.md)
169
170
### UI Elements
171
172
Basic building blocks including buttons, inputs, headers, icons, and other fundamental interface elements.
173
174
```css { .api }
175
.ui.button /* Interactive button */
176
.ui.input /* Form input */
177
.ui.header /* Content header */
178
.ui.icon /* Icon element */
179
.ui.label /* Content label */
180
```
181
182
[UI Elements](./ui-elements.md)
183
184
### UI Collections
185
186
Grouped components like forms, menus, messages, and tables that work together as cohesive units.
187
188
```css { .api }
189
.ui.form /* Form container */
190
.ui.menu /* Navigation menu */
191
.ui.message /* User message */
192
.ui.table /* Data table */
193
```
194
195
[UI Collections](./ui-collections.md)
196
197
### UI Views
198
199
Content presentation components including cards, comments, feeds, and statistics.
200
201
```css { .api }
202
.ui.card /* Content card */
203
.ui.cards /* Card group */
204
.ui.comments /* Comment thread */
205
.ui.feed /* Activity feed */
206
```
207
208
[UI Views](./ui-views.md)
209
210
### Interactive Modules
211
212
JavaScript-enhanced components providing dynamic behavior and user interaction.
213
214
```javascript { .api }
215
$('.ui.dropdown').dropdown(); // Enhanced select dropdown
216
$('.ui.modal').modal(); // Dialog modal
217
$('.ui.popup').popup(); // Contextual popup
218
$('.ui.accordion').accordion(); // Collapsible content
219
```
220
221
[Interactive Modules](./interactive-modules.md)
222
223
### Form Validation
224
225
Comprehensive form validation system with built-in rules and custom validation support.
226
227
```javascript { .api }
228
$('.ui.form').form({
229
fields: {
230
email: {
231
identifier: 'email',
232
rules: [
233
{ type: 'empty', prompt: 'Please enter your email' },
234
{ type: 'email', prompt: 'Please enter a valid email' }
235
]
236
}
237
}
238
});
239
```
240
241
[Form Validation](./form-validation.md)
242
243
## Common CSS Patterns
244
245
### Color Variations
246
Available for most components:
247
```css { .api }
248
.ui.red.component /* Red variation */
249
.ui.blue.component /* Blue variation */
250
.ui.green.component /* Green variation */
251
.ui.primary.component /* Primary color */
252
.ui.secondary.component /* Secondary color */
253
```
254
255
### Size Variations
256
Standard sizes across components:
257
```css { .api }
258
.ui.mini.component /* Smallest size */
259
.ui.tiny.component /* Very small */
260
.ui.small.component /* Small */
261
.ui.medium.component /* Default size */
262
.ui.large.component /* Large */
263
.ui.big.component /* Very large */
264
.ui.huge.component /* Huge */
265
.ui.massive.component /* Largest size */
266
```
267
268
### State Classes
269
```css { .api }
270
.ui.active.component /* Active state */
271
.ui.disabled.component /* Disabled state */
272
.ui.loading.component /* Loading state */
273
.ui.error.component /* Error state */
274
```
275
276
## Common JavaScript Patterns
277
278
### Plugin Initialization
279
```javascript { .api }
280
$('.ui.component').componentName();
281
$('.ui.component').componentName(settings);
282
```
283
284
### Method Invocation
285
```javascript { .api }
286
$('.ui.component').componentName('methodName');
287
$('.ui.component').componentName('methodName', parameter);
288
```
289
290
### Standard Methods
291
Available on all interactive components:
292
```javascript { .api }
293
$('.ui.component').componentName('destroy'); // Remove component
294
$('.ui.component').componentName('refresh'); // Refresh state
295
$('.ui.component').componentName('setting', key, value); // Get/set setting
296
```
297
298
## Dependencies
299
300
### Required Dependencies
301
- **jQuery**: Required for all JavaScript functionality (version "x.*" specified in package.json)
302
303
### Included Assets
304
305
The package includes complete asset files in the `themes/default/assets/` directory:
306
307
#### Font Assets (`themes/default/assets/fonts/`)
308
- **icons.eot, icons.ttf, icons.woff, icons.woff2, icons.svg**: Main Semantic UI icon font
309
- **brand-icons.eot, brand-icons.ttf, brand-icons.woff, brand-icons.woff2, brand-icons.svg**: Brand and social media icons
310
- **outline-icons.eot, outline-icons.ttf, outline-icons.woff, outline-icons.woff2, outline-icons.svg**: Outline style icons
311
312
#### Image Assets (`themes/default/assets/images/`)
313
- **flags.png**: Country flag sprites for flag icons
314
315
#### Typography
316
- **Lato Font**: Loaded from Google Fonts for consistent typography across components
317
- **Font fallbacks**: System fonts as fallbacks for optimal loading performance
318
319
### Asset Usage
320
321
Assets are automatically included when using the complete `semantic.min.css` file. For individual component usage, you may need to include assets manually:
322
323
```html
324
<!-- Ensure icon fonts are available -->
325
<link rel="stylesheet" href="node_modules/semantic-ui-css/semantic.min.css">
326
327
<!-- Or reference individual assets -->
328
<style>
329
@font-face {
330
font-family: 'Icons';
331
src: url('node_modules/semantic-ui-css/themes/default/assets/fonts/icons.woff2') format('woff2'),
332
url('node_modules/semantic-ui-css/themes/default/assets/fonts/icons.woff') format('woff');
333
}
334
</style>
335
```
336
337
## Browser Support
338
339
Semantic UI CSS supports all modern browsers with:
340
- CSS3 features including flexbox, transitions, and transforms
341
- ES5 JavaScript compatibility
342
- Responsive design with mobile-first approach
343
- Progressive enhancement for JavaScript functionality