0
# UIkit
1
2
UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces. It provides a complete set of UI components, utilities, and styling tools for building modern web applications with both CSS-only components and interactive JavaScript functionality.
3
4
## Package Information
5
6
- **Package Name**: uikit
7
- **Package Type**: npm
8
- **Language**: JavaScript/TypeScript/CSS
9
- **Installation**: `npm install uikit` or `yarn add uikit` or `pnpm add uikit`
10
11
## Core Imports
12
13
ESM (recommended):
14
15
```javascript
16
import UIkit from 'uikit';
17
import Icons from 'uikit/dist/js/uikit-icons';
18
19
// Register icons
20
UIkit.use(Icons);
21
```
22
23
CommonJS:
24
25
```javascript
26
const UIkit = require('uikit');
27
const Icons = require('uikit/dist/js/uikit-icons');
28
29
// Register icons
30
UIkit.use(Icons);
31
```
32
33
CSS Import:
34
35
```css
36
@import 'uikit/dist/css/uikit.css';
37
```
38
39
CDN:
40
41
```html
42
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.23.12/dist/css/uikit.min.css" />
43
<script src="https://cdn.jsdelivr.net/npm/uikit@3.23.12/dist/js/uikit.min.js"></script>
44
<script src="https://cdn.jsdelivr.net/npm/uikit@3.23.12/dist/js/uikit-icons.min.js"></script>
45
```
46
47
## Basic Usage
48
49
```html
50
<!DOCTYPE html>
51
<html>
52
<head>
53
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.23.12/dist/css/uikit.min.css" />
54
</head>
55
<body>
56
<!-- Navigation -->
57
<nav class="uk-navbar-container" uk-navbar>
58
<div class="uk-navbar-left">
59
<a class="uk-navbar-item uk-logo" href="#">Logo</a>
60
</div>
61
<div class="uk-navbar-right">
62
<ul class="uk-navbar-nav">
63
<li><a href="#">Home</a></li>
64
<li><a href="#">About</a></li>
65
<li><a href="#">Contact</a></li>
66
</ul>
67
</div>
68
</nav>
69
70
<!-- Hero Section -->
71
<section class="uk-section uk-section-primary">
72
<div class="uk-container">
73
<h1 class="uk-heading-large">Welcome to UIkit</h1>
74
<p class="uk-text-lead">Build fast and powerful web interfaces.</p>
75
<button class="uk-button uk-button-secondary" uk-toggle="target: #modal">Open Modal</button>
76
</div>
77
</section>
78
79
<!-- Modal -->
80
<div id="modal" uk-modal>
81
<div class="uk-modal-dialog uk-modal-body">
82
<h2 class="uk-modal-title">Hello World</h2>
83
<p>This is a modal dialog.</p>
84
<button class="uk-button uk-button-default uk-modal-close" type="button">Close</button>
85
</div>
86
</div>
87
88
<script src="https://cdn.jsdelivr.net/npm/uikit@3.23.12/dist/js/uikit.min.js"></script>
89
<script src="https://cdn.jsdelivr.net/npm/uikit@3.23.12/dist/js/uikit-icons.min.js"></script>
90
</body>
91
</html>
92
```
93
94
## Architecture
95
96
UIkit is built around several key architectural patterns:
97
98
- **CSS-First Design**: Components work without JavaScript for basic functionality
99
- **Progressive Enhancement**: JavaScript adds interactivity to CSS components
100
- **Component System**: Modular architecture with independent, reusable components
101
- **Data Attributes**: HTML data attributes (`uk-*`) configure component behavior
102
- **Global API**: Single UIkit object provides component management and utilities
103
- **Plugin System**: Extensible architecture supporting custom components and mixins
104
- **Utility Classes**: Comprehensive utility class system for rapid development
105
106
## Capabilities
107
108
### Core JavaScript API
109
110
Main UIkit object providing component management, lifecycle control, and utility functions for dynamic component interaction.
111
112
```javascript { .api }
113
declare const UIkit: {
114
// Static properties
115
version: string;
116
options: Record<string, any>;
117
util: Record<string, Function>;
118
container: HTMLElement;
119
120
// Component management
121
component(name: string, definition?: ComponentDefinition): ComponentConstructor | void;
122
getComponent(element: HTMLElement, name?: string): ComponentInstance | Record<string, ComponentInstance>;
123
getComponents(element: HTMLElement): Record<string, ComponentInstance>;
124
125
// Global operations
126
update(element?: HTMLElement, event?: Event): void;
127
use(plugin: Plugin): typeof UIkit;
128
mixin(mixin: Mixin, component?: string | ComponentConstructor): void;
129
extend(options: ComponentOptions): ComponentConstructor;
130
};
131
132
interface ComponentInstance {
133
$el: HTMLElement;
134
$options: Record<string, any>;
135
$container: HTMLElement;
136
$mount(element: HTMLElement): void;
137
$destroy(removeEl?: boolean): void;
138
$create(component: string, element: HTMLElement, options?: Record<string, any>): ComponentInstance;
139
$emit(event: Event): void;
140
$update(element?: HTMLElement, event?: Event): void;
141
$reset(): void;
142
$getComponent(name: string): ComponentInstance;
143
}
144
```
145
146
[JavaScript API](./javascript-api.md)
147
148
### Layout Components
149
150
Core layout systems including responsive grids, navigation bars, and positioning utilities for structuring web interfaces.
151
152
```css { .api }
153
/* Grid System */
154
.uk-grid { /* Responsive grid container */ }
155
.uk-grid-column-small { /* Small screen columns */ }
156
.uk-grid-column-medium { /* Medium screen columns */ }
157
.uk-grid-column-large { /* Large screen columns */ }
158
159
/* Container */
160
.uk-container { /* Content container with max-width */ }
161
.uk-container-small { /* Small container variant */ }
162
.uk-container-large { /* Large container variant */ }
163
164
/* Section */
165
.uk-section { /* Content section with padding */ }
166
.uk-section-primary { /* Primary themed section */ }
167
.uk-section-secondary { /* Secondary themed section */ }
168
```
169
170
[Layout Components](./layout-components.md)
171
172
### Navigation Components
173
174
Navigation systems including navbars, menus, breadcrumbs, and pagination for site navigation and wayfinding.
175
176
```css { .api }
177
/* Navbar */
178
.uk-navbar-container { /* Navbar container */ }
179
.uk-navbar-left { /* Left navbar section */ }
180
.uk-navbar-right { /* Right navbar section */ }
181
.uk-navbar-nav { /* Navbar navigation list */ }
182
.uk-navbar-item { /* Navbar item */ }
183
184
/* Nav */
185
.uk-nav { /* Navigation list */ }
186
.uk-nav-default { /* Default nav styling */ }
187
.uk-nav-primary { /* Primary nav styling */ }
188
189
/* Breadcrumb */
190
.uk-breadcrumb { /* Breadcrumb navigation */ }
191
```
192
193
[Navigation Components](./navigation-components.md)
194
195
### Interactive Components
196
197
JavaScript-powered components including modals, dropdowns, accordions, and tooltips for user interaction.
198
199
```javascript { .api }
200
// Modal component
201
UIkit.modal(element: HTMLElement, options?: {
202
keyboard?: boolean;
203
stack?: boolean;
204
container?: boolean | string;
205
}): ModalComponent;
206
207
// Dropdown component
208
UIkit.dropdown(element: HTMLElement, options?: {
209
toggle?: string;
210
pos?: string;
211
mode?: string;
212
offset?: number;
213
}): DropdownComponent;
214
215
// Tooltip component
216
UIkit.tooltip(element: HTMLElement, options?: {
217
title?: string;
218
pos?: string;
219
offset?: number;
220
animation?: string;
221
}): TooltipComponent;
222
```
223
224
[Interactive Components](./interactive-components.md)
225
226
### Form Components
227
228
Form styling and input components including buttons, form controls, and validation styling for user input interfaces.
229
230
```css { .api }
231
/* Form Controls */
232
.uk-input { /* Text input styling */ }
233
.uk-select { /* Select dropdown styling */ }
234
.uk-textarea { /* Textarea styling */ }
235
.uk-radio { /* Radio button styling */ }
236
.uk-checkbox { /* Checkbox styling */ }
237
238
/* Buttons */
239
.uk-button { /* Base button styling */ }
240
.uk-button-default { /* Default button variant */ }
241
.uk-button-primary { /* Primary button variant */ }
242
.uk-button-secondary { /* Secondary button variant */ }
243
.uk-button-danger { /* Danger button variant */ }
244
```
245
246
[Form Components](./form-components.md)
247
248
### Content Components
249
250
Content display components including cards, tables, lists, and media elements for presenting information.
251
252
```css { .api }
253
/* Card */
254
.uk-card { /* Card container */ }
255
.uk-card-default { /* Default card styling */ }
256
.uk-card-primary { /* Primary card styling */ }
257
.uk-card-header { /* Card header */ }
258
.uk-card-body { /* Card body */ }
259
.uk-card-footer { /* Card footer */ }
260
261
/* Table */
262
.uk-table { /* Table styling */ }
263
.uk-table-striped { /* Striped table variant */ }
264
.uk-table-hover { /* Hover effect variant */ }
265
266
/* List */
267
.uk-list { /* List styling */ }
268
.uk-list-divider { /* Divided list variant */ }
269
.uk-list-striped { /* Striped list variant */ }
270
```
271
272
[Content Components](./content-components.md)
273
274
### Utility Classes
275
276
Comprehensive utility class system for spacing, typography, colors, positioning, and responsive design.
277
278
```css { .api }
279
/* Margin */
280
.uk-margin { /* Standard margin */ }
281
.uk-margin-small { /* Small margin */ }
282
.uk-margin-large { /* Large margin */ }
283
.uk-margin-remove { /* Remove margin */ }
284
285
/* Padding */
286
.uk-padding { /* Standard padding */ }
287
.uk-padding-small { /* Small padding */ }
288
.uk-padding-large { /* Large padding */ }
289
.uk-padding-remove { /* Remove padding */ }
290
291
/* Text */
292
.uk-text-center { /* Center text */ }
293
.uk-text-left { /* Left align text */ }
294
.uk-text-right { /* Right align text */ }
295
.uk-text-lead { /* Lead text styling */ }
296
```
297
298
[Utility Classes](./utility-classes.md)
299
300
### Animation & Effects
301
302
Animation utilities and transition effects for creating dynamic and engaging user interfaces.
303
304
```css { .api }
305
/* Animations */
306
.uk-animation-fade { /* Fade animation */ }
307
.uk-animation-slide-top { /* Slide from top */ }
308
.uk-animation-slide-bottom { /* Slide from bottom */ }
309
.uk-animation-slide-left { /* Slide from left */ }
310
.uk-animation-slide-right { /* Slide from right */ }
311
312
/* Transitions */
313
.uk-transition-toggle { /* Transition container */ }
314
.uk-transition-fade { /* Fade transition */ }
315
.uk-transition-scale-up { /* Scale up transition */ }
316
.uk-transition-slide-top { /* Slide transition */ }
317
```
318
319
[Animation & Effects](./animation-effects.md)
320
321
## Types
322
323
```typescript { .api }
324
interface ComponentDefinition {
325
mixins?: Mixin[];
326
data?: Record<string, any>;
327
props?: Record<string, PropDefinition>;
328
computed?: Record<string, ComputedProperty>;
329
methods?: Record<string, Function>;
330
events?: EventDefinition[];
331
connected?(): void;
332
disconnected?(): void;
333
beforeConnect?(): void;
334
beforeDisconnect?(): void;
335
destroy?(): void;
336
}
337
338
interface ComponentOptions {
339
el?: HTMLElement;
340
data?: Record<string, any>;
341
[key: string]: any;
342
}
343
344
interface Plugin {
345
installed?: boolean;
346
(UIkit: typeof UIkit): void;
347
}
348
349
interface Mixin {
350
[key: string]: any;
351
}
352
353
type ComponentConstructor = new (options?: ComponentOptions) => ComponentInstance;
354
355
interface PropDefinition {
356
type?: string | string[];
357
default?: any;
358
validator?(value: any): boolean;
359
}
360
361
interface ComputedProperty {
362
get?(): any;
363
set?(value: any): void;
364
}
365
366
interface EventDefinition {
367
name: string;
368
handler: string | Function;
369
el?: string | Function;
370
delegate?: string;
371
filter?: Function;
372
self?: boolean;
373
}
374
```