0
# Core Styling Framework
1
2
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.
3
4
## Capabilities
5
6
### Base Component Structure
7
8
All Semantic UI components follow a consistent class naming pattern with the `.ui` prefix.
9
10
```css { .api }
11
.ui.component /* Base component class */
12
.ui.component.variation /* Component with variation (e.g., .ui.button.primary) */
13
.ui.component.modifier /* Component with modifier (e.g., .ui.button.large) */
14
```
15
16
### Site-wide Styles
17
18
Global styles and CSS reset for consistent cross-browser rendering.
19
20
```css { .api }
21
/* CSS Reset and normalization */
22
.ui.reset /* CSS reset styles */
23
24
/* Site-wide typography and base styles */
25
.ui.site /* Base site container styles */
26
```
27
28
The `site.css` component provides:
29
- CSS normalization and reset
30
- Base typography using Lato font family
31
- Global color palette and variables
32
- Responsive breakpoint definitions
33
- Default spacing and sizing scales
34
35
**Usage Example:**
36
37
```html
38
<!DOCTYPE html>
39
<html>
40
<head>
41
<link rel="stylesheet" href="semantic.min.css">
42
</head>
43
<body class="ui site">
44
<!-- All Semantic UI components will inherit consistent base styles -->
45
<div class="ui container">
46
<h1 class="ui header">Welcome</h1>
47
<p>This content uses Semantic UI's base typography and spacing.</p>
48
</div>
49
</body>
50
</html>
51
```
52
53
### Color System
54
55
Semantic UI provides a comprehensive color palette available across all components.
56
57
```css { .api }
58
/* Primary semantic colors */
59
.ui.primary.component /* Primary brand color (blue) */
60
.ui.secondary.component /* Secondary color (grey) */
61
62
/* Semantic state colors */
63
.ui.positive.component /* Success/positive state (green) */
64
.ui.negative.component /* Error/negative state (red) */
65
66
/* Standard color variations */
67
.ui.red.component /* Red variation */
68
.ui.orange.component /* Orange variation */
69
.ui.yellow.component /* Yellow variation */
70
.ui.olive.component /* Olive variation */
71
.ui.green.component /* Green variation */
72
.ui.teal.component /* Teal variation */
73
.ui.blue.component /* Blue variation */
74
.ui.violet.component /* Violet variation */
75
.ui.purple.component /* Purple variation */
76
.ui.pink.component /* Pink variation */
77
.ui.brown.component /* Brown variation */
78
.ui.grey.component /* Grey variation */
79
.ui.black.component /* Black variation */
80
```
81
82
**Usage Examples:**
83
84
```html
85
<!-- Colored buttons -->
86
<div class="ui red button">Red Button</div>
87
<div class="ui primary button">Primary Button</div>
88
<div class="ui positive button">Success Button</div>
89
<div class="ui negative button">Error Button</div>
90
91
<!-- Colored segments -->
92
<div class="ui blue segment">Blue segment content</div>
93
<div class="ui green message">Success message</div>
94
```
95
96
### Size System
97
98
Consistent sizing scale available across all components.
99
100
```css { .api }
101
.ui.mini.component /* Smallest size */
102
.ui.tiny.component /* Very small size */
103
.ui.small.component /* Small size */
104
.ui.medium.component /* Default/medium size (usually omitted) */
105
.ui.large.component /* Large size */
106
.ui.big.component /* Very large size */
107
.ui.huge.component /* Huge size */
108
.ui.massive.component /* Largest size */
109
```
110
111
**Usage Examples:**
112
113
```html
114
<!-- Different sized buttons -->
115
<div class="ui mini button">Mini</div>
116
<div class="ui tiny button">Tiny</div>
117
<div class="ui small button">Small</div>
118
<div class="ui button">Default</div>
119
<div class="ui large button">Large</div>
120
<div class="ui big button">Big</div>
121
<div class="ui huge button">Huge</div>
122
<div class="ui massive button">Massive</div>
123
124
<!-- Different sized headers -->
125
<h1 class="ui small header">Small Header</h1>
126
<h1 class="ui header">Default Header</h1>
127
<h1 class="ui large header">Large Header</h1>
128
```
129
130
### State Classes
131
132
Common state classes that modify component appearance and behavior.
133
134
```css { .api }
135
.ui.active.component /* Active/selected state */
136
.ui.disabled.component /* Disabled/non-interactive state */
137
.ui.loading.component /* Loading state with spinner */
138
.ui.error.component /* Error state styling */
139
.ui.warning.component /* Warning state styling */
140
.ui.info.component /* Info state styling */
141
.ui.success.component /* Success state styling */
142
```
143
144
**Usage Examples:**
145
146
```html
147
<!-- Button states -->
148
<div class="ui button">Normal Button</div>
149
<div class="ui active button">Active Button</div>
150
<div class="ui disabled button">Disabled Button</div>
151
<div class="ui loading button">Loading Button</div>
152
153
<!-- Form field states -->
154
<div class="ui input">
155
<input type="text" placeholder="Normal input">
156
</div>
157
<div class="ui error input">
158
<input type="text" placeholder="Error input">
159
</div>
160
<div class="ui success input">
161
<input type="text" placeholder="Success input">
162
</div>
163
```
164
165
### Floated Content
166
167
Classes for floating content left or right within containers.
168
169
```css { .api }
170
.ui.left.floated.component /* Float component to the left */
171
.ui.right.floated.component /* Float component to the right */
172
```
173
174
**Usage Examples:**
175
176
```html
177
<div class="ui segment">
178
<div class="ui right floated button">Floated Right</div>
179
<div class="ui left floated button">Floated Left</div>
180
<div style="clear: both;"></div>
181
<p>Content that flows around floated elements.</p>
182
</div>
183
```
184
185
### Text Alignment
186
187
Classes for controlling text alignment within components.
188
189
```css { .api }
190
.ui.left.aligned.component /* Left-align text content */
191
.ui.center.aligned.component /* Center-align text content */
192
.ui.right.aligned.component /* Right-align text content */
193
.ui.justified.component /* Justify text content */
194
```
195
196
**Usage Examples:**
197
198
```html
199
<div class="ui segment">
200
<div class="ui left aligned header">Left Aligned Header</div>
201
<div class="ui center aligned header">Center Aligned Header</div>
202
<div class="ui right aligned header">Right Aligned Header</div>
203
</div>
204
```
205
206
### Responsive Visibility
207
208
Classes for showing/hiding content at different screen sizes.
209
210
```css { .api }
211
/* Mobile visibility (767px and below) */
212
.ui.mobile.only.component /* Show only on mobile */
213
.ui.mobile.hidden.component /* Hide on mobile */
214
215
/* Tablet visibility (768px - 991px) */
216
.ui.tablet.only.component /* Show only on tablet */
217
.ui.tablet.hidden.component /* Hide on tablet */
218
219
/* Computer visibility (992px - 1199px) */
220
.ui.computer.only.component /* Show only on computer */
221
.ui.computer.hidden.component /* Hide on computer */
222
223
/* Large screen visibility (1200px - 1919px) */
224
.ui.large.screen.only.component /* Show only on large screens */
225
.ui.large.screen.hidden.component /* Hide on large screens */
226
227
/* Widescreen visibility (1920px and above) */
228
.ui.widescreen.only.component /* Show only on widescreen */
229
.ui.widescreen.hidden.component /* Hide on widescreen */
230
```
231
232
**Usage Examples:**
233
234
```html
235
<!-- Responsive navigation -->
236
<div class="ui menu">
237
<div class="ui computer only item">Desktop Navigation</div>
238
<div class="ui mobile only item">Mobile Navigation</div>
239
</div>
240
241
<!-- Responsive content -->
242
<div class="ui tablet hidden computer hidden message">
243
This message only shows on mobile devices.
244
</div>
245
```
246
247
### Attached Content
248
249
Classes for attaching components to each other seamlessly.
250
251
```css { .api }
252
.ui.top.attached.component /* Attach to top of next component */
253
.ui.bottom.attached.component /* Attach to bottom of previous component */
254
.ui.attached.component /* Attach to both top and bottom */
255
```
256
257
**Usage Examples:**
258
259
```html
260
<!-- Attached segments -->
261
<div class="ui top attached header">Header Section</div>
262
<div class="ui attached segment">Main content area</div>
263
<div class="ui bottom attached segment">Footer section</div>
264
```
265
266
## CSS Custom Properties
267
268
Semantic UI CSS uses CSS custom properties (variables) for consistent theming:
269
270
```css { .api }
271
:root {
272
--primary-color: #1b1c1d;
273
--secondary-color: #767676;
274
--positive-color: #21ba45;
275
--negative-color: #db2828;
276
/* Additional theme variables */
277
}
278
```
279
280
These variables are used throughout the framework to maintain consistency and enable theme customization.