0
# Utility Classes
1

2
UIkit's utility classes provide a comprehensive system for spacing, typography, colors, positioning, visibility, and responsive design modifications.
3

4
## Capabilities
5

6
### Margin Utilities
7

8
Margin spacing utilities for consistent element spacing.
9

10
```css { .api }
11
/* Margin Classes */
12
.uk-margin { /* Standard margin bottom */ margin-bottom: 20px; }
13
.uk-margin-top { /* Top margin */ margin-top: 20px; }
14
.uk-margin-bottom { /* Bottom margin */ margin-bottom: 20px; }
15
.uk-margin-left { /* Left margin */ margin-left: 20px; }
16
.uk-margin-right { /* Right margin */ margin-right: 20px; }
17

18
/* Margin Size Variants */
19
.uk-margin-small { /* Small margin bottom */ margin-bottom: 10px; }
20
.uk-margin-small-top { /* Small top margin */ margin-top: 10px; }
21
.uk-margin-small-bottom { /* Small bottom margin */ margin-bottom: 10px; }
22
.uk-margin-small-left { /* Small left margin */ margin-left: 10px; }
23
.uk-margin-small-right { /* Small right margin */ margin-right: 10px; }
24

25
.uk-margin-medium { /* Medium margin bottom */ margin-bottom: 40px; }
26
.uk-margin-medium-top { /* Medium top margin */ margin-top: 40px; }
27
.uk-margin-medium-bottom { /* Medium bottom margin */ margin-bottom: 40px; }
28
.uk-margin-medium-left { /* Medium left margin */ margin-left: 40px; }
29
.uk-margin-medium-right { /* Medium right margin */ margin-right: 40px; }
30

31
.uk-margin-large { /* Large margin bottom */ margin-bottom: 40px; }
32
.uk-margin-large-top { /* Large top margin */ margin-top: 40px; }
33
.uk-margin-large-bottom { /* Large bottom margin */ margin-bottom: 40px; }
34
.uk-margin-large-left { /* Large left margin */ margin-left: 40px; }
35
.uk-margin-large-right { /* Large right margin */ margin-right: 40px; }
36

37
.uk-margin-xlarge { /* Extra large margin bottom */ margin-bottom: 60px; }
38
.uk-margin-xlarge-top { /* Extra large top margin */ margin-top: 60px; }
39
.uk-margin-xlarge-bottom { /* Extra large bottom margin */ margin-bottom: 60px; }
40
.uk-margin-xlarge-left { /* Extra large left margin */ margin-left: 60px; }
41
.uk-margin-xlarge-right { /* Extra large right margin */ margin-right: 60px; }
42

43
/* Margin Remove */
44
.uk-margin-remove { /* Remove all margins */ margin: 0; }
45
.uk-margin-remove-top { /* Remove top margin */ margin-top: 0; }
46
.uk-margin-remove-bottom { /* Remove bottom margin */ margin-bottom: 0; }
47
.uk-margin-remove-left { /* Remove left margin */ margin-left: 0; }
48
.uk-margin-remove-right { /* Remove right margin */ margin-right: 0; }
49
.uk-margin-remove-vertical { /* Remove vertical margins */ margin-top: 0; margin-bottom: 0; }
50

51
/* Auto Margins */
52
.uk-margin-auto { /* Auto horizontal margins */ margin-left: auto; margin-right: auto; }
53
.uk-margin-auto-top { /* Auto top margin */ margin-top: auto; }
54
.uk-margin-auto-bottom { /* Auto bottom margin */ margin-bottom: auto; }
55
.uk-margin-auto-left { /* Auto left margin */ margin-left: auto; }
56
.uk-margin-auto-right { /* Auto right margin */ margin-right: auto; }
57
.uk-margin-auto-vertical { /* Auto vertical margins */ margin-top: auto; margin-bottom: auto; }
58
```
59

60
**Usage Examples:**
61

62
```html
63
<!-- Standard Margins -->
64
<div class="uk-margin">Standard bottom margin</div>
65
<div class="uk-margin-large">Large bottom margin</div>
66

67
<!-- Directional Margins -->
68
<div class="uk-margin-top uk-margin-bottom">Top and bottom margins</div>
69
<div class="uk-margin-left">Left margin</div>
70

71
<!-- Remove Margins -->
72
<h1 class="uk-margin-remove-bottom">Heading without bottom margin</h1>
73
<p class="uk-margin-remove-top">Paragraph without top margin</p>
74

75
<!-- Auto Margins (Centering) -->
76
<div class="uk-margin-auto uk-width-1-2">Centered element</div>
77
```
78

79
### Padding Utilities
80

81
Padding spacing utilities for consistent internal spacing.
82

83
```css { .api }
84
/* Padding Classes */
85
.uk-padding { /* Standard padding all sides */ padding: 30px; }
86
.uk-padding-small { /* Small padding all sides */ padding: 15px; }
87
.uk-padding-large { /* Large padding all sides */ padding: 40px; }
88

89
/* Directional Padding */
90
.uk-padding-remove { /* Remove all padding */ padding: 0; }
91
.uk-padding-remove-top { /* Remove top padding */ padding-top: 0; }
92
.uk-padding-remove-bottom { /* Remove bottom padding */ padding-bottom: 0; }
93
.uk-padding-remove-left { /* Remove left padding */ padding-left: 0; }
94
.uk-padding-remove-right { /* Remove right padding */ padding-right: 0; }
95
.uk-padding-remove-vertical { /* Remove vertical padding */ padding-top: 0; padding-bottom: 0; }
96
.uk-padding-remove-horizontal { /* Remove horizontal padding */ padding-left: 0; padding-right: 0; }
97
```
98

99
**Usage Examples:**
100

101
```html
102
<!-- Standard Padding -->
103
<div class="uk-padding uk-background-muted">Standard padding</div>
104

105
<!-- Padding Variants -->
106
<div class="uk-padding-small uk-background-muted uk-margin">Small padding</div>
107
<div class="uk-padding-large uk-background-muted">Large padding</div>
108

109
<!-- Remove Padding -->
110
<div class="uk-card uk-card-default uk-card-body uk-padding-remove-top">
111
    Card without top padding
112
</div>
113
```
114

115
### Text Utilities
116

117
Typography utilities for text styling and alignment.
118

119
```css { .api }
120
/* Text Alignment */
121
.uk-text-left { /* Left align text */ text-align: left; }
122
.uk-text-right { /* Right align text */ text-align: right; }
123
.uk-text-center { /* Center align text */ text-align: center; }
124
.uk-text-justify { /* Justify text */ text-align: justify; }
125

126
/* Text Transformation */
127
.uk-text-lowercase { /* Lowercase text */ text-transform: lowercase; }
128
.uk-text-uppercase { /* Uppercase text */ text-transform: uppercase; }
129
.uk-text-capitalize { /* Capitalize text */ text-transform: capitalize; }
130

131
/* Text Decoration */
132
.uk-text-decoration-none { /* Remove text decoration */ text-decoration: none; }
133

134
/* Text Weight */
135
.uk-text-light { /* Light font weight */ font-weight: 300; }
136
.uk-text-normal { /* Normal font weight */ font-weight: 400; }
137
.uk-text-bold { /* Bold font weight */ font-weight: 700; }
138
.uk-text-lighter { /* Lighter font weight */ font-weight: lighter; }
139
.uk-text-bolder { /* Bolder font weight */ font-weight: bolder; }
140

141
/* Text Style */
142
.uk-text-italic { /* Italic text */ font-style: italic; }
143

144
/* Text Size */
145
.uk-text-small { /* Small text */ font-size: 12px; line-height: 1.5; }
146
.uk-text-large { /* Large text */ font-size: 18px; line-height: 1.5; }
147
.uk-text-default { /* Default text size */ font-size: 14px; line-height: 1.5; }
148

149
/* Text Leading */
150
.uk-text-lead { /* Lead text styling */ font-size: 18px; line-height: 1.5; color: #666; }
151

152
/* Text Meta */
153
.uk-text-meta { /* Meta text styling */ font-size: 12px; line-height: 1.4; color: #999; }
154

155
/* Text Colors */
156
.uk-text-muted { /* Muted text color */ color: #999; }
157
.uk-text-emphasis { /* Emphasized text color */ color: #333; }
158
.uk-text-primary { /* Primary text color */ color: #1e87f0; }
159
.uk-text-secondary { /* Secondary text color */ color: #222; }
160
.uk-text-success { /* Success text color */ color: #32d296; }
161
.uk-text-warning { /* Warning text color */ color: #faa05a; }
162
.uk-text-danger { /* Danger text color */ color: #f0506e; }
163

164
/* Text Wrapping */
165
.uk-text-break { /* Break long words */ word-wrap: break-word; }
166
.uk-text-nowrap { /* Prevent text wrapping */ white-space: nowrap; }
167
.uk-text-truncate { /* Truncate text with ellipsis */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
168
```
169

170
**Usage Examples:**
171

172
```html
173
<!-- Text Alignment -->
174
<p class="uk-text-left">Left aligned text</p>
175
<p class="uk-text-center">Center aligned text</p>
176
<p class="uk-text-right">Right aligned text</p>
177

178
<!-- Text Styling -->
179
<p class="uk-text-lead">This is lead text that stands out from regular content.</p>
180
<p class="uk-text-meta">This is meta text for additional information.</p>
181

182
<!-- Text Colors -->
183
<p class="uk-text-primary">Primary colored text</p>
184
<p class="uk-text-success">Success colored text</p>
185
<p class="uk-text-danger">Danger colored text</p>
186

187
<!-- Text Transformation -->
188
<p class="uk-text-uppercase">uppercase text</p>
189
<p class="uk-text-capitalize">capitalize text</p>
190

191
<!-- Text Truncation -->
192
<div class="uk-width-1-3">
193
    <p class="uk-text-truncate">This is a very long text that will be truncated with an ellipsis</p>
194
</div>
195
```
196

197
### Visibility Utilities
198

199
Utilities for controlling element visibility and display.
200

201
```css { .api }
202
/* Display Classes */
203
.uk-display-block { /* Display block */ display: block; }
204
.uk-display-inline { /* Display inline */ display: inline; }
205
.uk-display-inline-block { /* Display inline-block */ display: inline-block; }
206

207
/* Visibility Classes */
208
.uk-visible { /* Make element visible */ visibility: visible; }
209
.uk-invisible { /* Make element invisible */ visibility: hidden; }
210

211
/* Responsive Visibility */
212
.uk-visible@s { /* Visible on small+ screens */ }
213
.uk-visible@m { /* Visible on medium+ screens */ }
214
.uk-visible@l { /* Visible on large+ screens */ }
215
.uk-visible@xl { /* Visible on xlarge+ screens */ }
216

217
.uk-hidden { /* Hide element */ display: none; }
218
.uk-hidden@s { /* Hidden on small+ screens */ }  
219
.uk-hidden@m { /* Hidden on medium+ screens */ }
220
.uk-hidden@l { /* Hidden on large+ screens */ }
221
.uk-hidden@xl { /* Hidden on xlarge+ screens */ }
222

223
/* Touch/Hover Visibility */
224
.uk-visible-toggle:not(:hover):not(.uk-hover) .uk-hidden-hover { /* Hide on hover */ }
225
.uk-visible-toggle:hover .uk-visible-hover { /* Show on hover */ }
226
```
227

228
**Usage Examples:**
229

230
```html
231
<!-- Basic Visibility -->
232
<div class="uk-visible">This element is visible</div>
233
<div class="uk-invisible">This element is invisible but takes up space</div>
234
<div class="uk-hidden">This element is hidden</div>
235

236
<!-- Responsive Visibility -->
237
<div class="uk-visible@m">Visible on medium screens and up</div>
238
<div class="uk-hidden@s">Hidden on small screens and up</div>
239

240
<!-- Hover Visibility -->
241
<div class="uk-visible-toggle">
242
    <div>Hover over me</div>
243
    <div class="uk-hidden-hover">This appears on hover</div>
244
</div>
245
```
246

247
### Width Utilities
248

249
Width utilities for element sizing.
250

251
```css { .api }
252
/* Fixed Widths */
253
.uk-width-1-1 { /* Full width */ width: 100%; }
254
.uk-width-1-2 { /* Half width */ width: 50%; }
255
.uk-width-1-3 { /* One third width */ width: 33.333%; }
256
.uk-width-2-3 { /* Two thirds width */ width: 66.666%; }
257
.uk-width-1-4 { /* One quarter width */ width: 25%; }
258
.uk-width-3-4 { /* Three quarters width */ width: 75%; }
259
.uk-width-1-5 { /* One fifth width */ width: 20%; }
260
.uk-width-2-5 { /* Two fifths width */ width: 40%; }
261
.uk-width-3-5 { /* Three fifths width */ width: 60%; }
262
.uk-width-4-5 { /* Four fifths width */ width: 80%; }
263
.uk-width-1-6 { /* One sixth width */ width: 16.666%; }
264
.uk-width-5-6 { /* Five sixths width */ width: 83.333%; }
265

266
/* Auto Width */
267
.uk-width-auto { /* Auto width */ width: auto; }
268
.uk-width-expand { /* Expand to fill space */ flex: 1; min-width: 1px; }
269

270
/* Responsive Widths */
271
.uk-width-1-2@s { /* Half width on small+ screens */ }
272
.uk-width-1-3@m { /* One third width on medium+ screens */ }
273
.uk-width-1-4@l { /* One quarter width on large+ screens */ }
274

275
/* Child Widths (for use with grid) */
276
.uk-child-width-1-2 > * { /* All children half width */ width: 50%; }
277
.uk-child-width-1-3 > * { /* All children one third width */ width: 33.333%; }
278
.uk-child-width-1-4 > * { /* All children one quarter width */ width: 25%; }
279

280
/* Responsive Child Widths */
281
.uk-child-width-1-2@s > * { /* Children half width on small+ screens */ }
282
.uk-child-width-1-3@m > * { /* Children one third width on medium+ screens */ }
283
```
284

285
**Usage Examples:**
286

287
```html
288
<!-- Fixed Widths -->
289
<div class="uk-width-1-2 uk-background-muted uk-padding-small">Half width</div>
290
<div class="uk-width-1-3 uk-background-muted uk-padding-small uk-margin">One third width</div>
291

292
<!-- Responsive Widths -->
293
<div class="uk-width-1-1 uk-width-1-2@s uk-width-1-3@m uk-background-muted uk-padding-small">
294
    Responsive width: full on mobile, half on small+, third on medium+
295
</div>
296

297
<!-- Child Widths with Grid -->
298
<div class="uk-grid uk-child-width-1-3@m" uk-grid>
299
    <div><div class="uk-background-muted uk-padding-small">Item 1</div></div>
300
    <div><div class="uk-background-muted uk-padding-small">Item 2</div></div>
301
    <div><div class="uk-background-muted uk-padding-small">Item 3</div></div>
302
</div>
303
```
304

305
### Background Utilities
306

307
Background styling utilities for colors and images.
308

309
```css { .api }
310
/* Background Colors */
311
.uk-background-default { /* Default background */ background-color: #fff; }
312
.uk-background-muted { /* Muted background */ background-color: #f8f8f8; }
313
.uk-background-primary { /* Primary background */ background-color: #1e87f0; }
314
.uk-background-secondary { /* Secondary background */ background-color: #222; }
315

316
/* Background Images */
317
.uk-background-cover { /* Cover background image */ background-size: cover; background-position: center center; background-repeat: no-repeat; }
318
.uk-background-contain { /* Contain background image */ background-size: contain; background-position: center center; background-repeat: no-repeat; }
319
.uk-background-top-left { /* Top-left background position */ background-position: top left; }
320
.uk-background-top-center { /* Top-center background position */ background-position: top center; }
321
.uk-background-top-right { /* Top-right background position */ background-position: top right; }
322
.uk-background-center-left { /* Center-left background position */ background-position: center left; }
323
.uk-background-center-center { /* Center background position */ background-position: center center; }
324
.uk-background-center-right { /* Center-right background position */ background-position: center right; }
325
.uk-background-bottom-left { /* Bottom-left background position */ background-position: bottom left; }
326
.uk-background-bottom-center { /* Bottom-center background position */ background-position: bottom center; }
327
.uk-background-bottom-right { /* Bottom-right background position */ background-position: bottom right; }
328

329
/* Background Repeat */
330
.uk-background-norepeat { /* No background repeat */ background-repeat: no-repeat; }
331

332
/* Background Attachment */
333
.uk-background-fixed { /* Fixed background attachment */ background-attachment: fixed; }
334

335
/* Background Blend Modes */
336
.uk-background-blend-multiply { /* Multiply blend mode */ background-blend-mode: multiply; }
337
.uk-background-blend-screen { /* Screen blend mode */ background-blend-mode: screen; }
338
.uk-background-blend-overlay { /* Overlay blend mode */ background-blend-mode: overlay; }
339
.uk-background-blend-darken { /* Darken blend mode */ background-blend-mode: darken; }
340
.uk-background-blend-lighten { /* Lighten blend mode */ background-blend-mode: lighten; }
341
.uk-background-blend-color-dodge { /* Color dodge blend mode */ background-blend-mode: color-dodge; }
342
.uk-background-blend-color-burn { /* Color burn blend mode */ background-blend-mode: color-burn; }
343
.uk-background-blend-hard-light { /* Hard light blend mode */ background-blend-mode: hard-light; }
344
.uk-background-blend-soft-light { /* Soft light blend mode */ background-blend-mode: soft-light; }
345
.uk-background-blend-difference { /* Difference blend mode */ background-blend-mode: difference; }
346
.uk-background-blend-exclusion { /* Exclusion blend mode */ background-blend-mode: exclusion; }
347
.uk-background-blend-hue { /* Hue blend mode */ background-blend-mode: hue; }
348
.uk-background-blend-saturation { /* Saturation blend mode */ background-blend-mode: saturation; }
349
.uk-background-blend-color { /* Color blend mode */ background-blend-mode: color; }
350
.uk-background-blend-luminosity { /* Luminosity blend mode */ background-blend-mode: luminosity; }
351
```
352

353
**Usage Examples:**
354

355
```html
356
<!-- Background Colors -->
357
<div class="uk-background-primary uk-light uk-padding">Primary background</div>
358
<div class="uk-background-muted uk-padding uk-margin">Muted background</div>
359

360
<!-- Background Images -->
361
<div class="uk-background-cover uk-height-medium uk-flex uk-flex-center uk-flex-middle" 
362
     style="background-image: url('images/photo.jpg');">
363
    <h1 class="uk-light">Cover Background</h1>
364
</div>
365

366
<!-- Background with Blend Mode -->
367
<div class="uk-background-cover uk-background-blend-multiply uk-height-medium" 
368
     style="background-image: url('images/photo.jpg'); background-color: #1e87f0;">
369
    <div class="uk-padding">
370
        <h2 class="uk-light">Blend Mode Example</h2>
371
    </div>
372
</div>
373
```
374

375
### Border Utilities
376

377
Border styling utilities.
378

379
```css { .api }
380
/* Border Radius */
381
.uk-border-rounded { /* Rounded corners */ border-radius: 5px; }
382
.uk-border-circle { /* Circular border */ border-radius: 50%; }
383
.uk-border-pill { /* Pill-shaped border */ border-radius: 500px; }
384

385
/* Border Remove */
386
.uk-border-remove { /* Remove border */ border: none; }
387
```
388

389
**Usage Examples:**
390

391
```html
392
<!-- Border Radius -->
393
<img class="uk-border-rounded" src="image.jpg" width="200" height="200" alt="">
394
<img class="uk-border-circle" src="avatar.jpg" width="100" height="100" alt="">
395

396
<!-- Pill Button -->
397
<button class="uk-button uk-button-primary uk-border-pill">Pill Button</button>
398
```
399

400
### Transform Utilities
401

402
CSS transform utilities.
403

404
```css { .api }
405
/* Transform Origin */
406
.uk-transform-origin-top-left { /* Top-left transform origin */ transform-origin: top left; }
407
.uk-transform-origin-top-center { /* Top-center transform origin */ transform-origin: top center; }
408
.uk-transform-origin-top-right { /* Top-right transform origin */ transform-origin: top right; }
409
.uk-transform-origin-center-left { /* Center-left transform origin */ transform-origin: center left; }
410
.uk-transform-origin-center-right { /* Center-right transform origin */ transform-origin: center right; }
411
.uk-transform-origin-bottom-left { /* Bottom-left transform origin */ transform-origin: bottom left; }
412
.uk-transform-origin-bottom-center { /* Bottom-center transform origin */ transform-origin: bottom center; }
413
.uk-transform-origin-bottom-right { /* Bottom-right transform origin */ transform-origin: bottom right; }
414
.uk-transform-origin-center { /* Center transform origin */ transform-origin: center; }
415
```
416

417
**Usage Examples:**
418

419
```html
420
<!-- Transform Origin -->
421
<div class="uk-transform-origin-top-left uk-animation-scale-up">
422
    Animation from top-left origin
423
</div>
424
```