create-flowmo 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +56 -0
- package/index.js +170 -0
- package/package.json +43 -0
- package/skills/outsystems-logic/SKILL.md +316 -0
- package/skills/outsystems-logic/references/builtin-functions.md +144 -0
- package/skills/outsystems-logic/references/libraries.md +169 -0
- package/skills/outsystems-logic/references/system-actions.md +221 -0
- package/skills/outsystems-sql/SKILL.md +272 -0
- package/skills/outsystems-ui/SKILL.md +237 -0
- package/skills/outsystems-ui/assets/layout-template.html +43 -0
- package/skills/outsystems-ui/references/colors.md +236 -0
- package/skills/outsystems-ui/references/patterns-adaptive.md +178 -0
- package/skills/outsystems-ui/references/patterns-content.md +242 -0
- package/skills/outsystems-ui/references/patterns-interaction.md +288 -0
- package/skills/outsystems-ui/references/patterns-navigation.md +180 -0
- package/skills/outsystems-ui/references/patterns-numbers.md +94 -0
- package/skills/outsystems-ui/references/patterns-utilities.md +124 -0
- package/skills/outsystems-ui/references/screen-templates.md +390 -0
- package/skills/outsystems-ui/references/widgets.md +270 -0
- package/template/data/User.md +11 -0
- package/template/logic/GetUser.flowchart.md +7 -0
- package/template/screens/home.visual.html +36 -0
- package/template/theme/outsystems-ui.css +20139 -0
- package/template/theme/theme.css +19 -0
|
@@ -0,0 +1,390 @@
|
|
|
1
|
+
# OutSystems UI — Screen Templates
|
|
2
|
+
|
|
3
|
+
Common enterprise screen layouts. Use these as starting points for `.visual.html` prototypes. All templates assume the Layout Wrapper (`<div class="layout active-screen">`) is in place.
|
|
4
|
+
|
|
5
|
+
## Dashboard Screen
|
|
6
|
+
|
|
7
|
+
KPI cards on top, chart area in the middle, recent activity list at the bottom.
|
|
8
|
+
|
|
9
|
+
```html
|
|
10
|
+
<div class="layout active-screen">
|
|
11
|
+
<header class="header">
|
|
12
|
+
<h1 class="font-size-h2 margin-bottom-none">Dashboard</h1>
|
|
13
|
+
</header>
|
|
14
|
+
|
|
15
|
+
<main class="main-content padding-base">
|
|
16
|
+
<!-- KPI Row -->
|
|
17
|
+
<div class="columns4 margin-bottom-l">
|
|
18
|
+
<div class="column">
|
|
19
|
+
<div class="card padding-base">
|
|
20
|
+
<div class="counter">
|
|
21
|
+
<div class="counter-value font-size-display text-primary">{{kpi-1-value}}</div>
|
|
22
|
+
<div class="counter-label font-size-s text-neutral-7">{{kpi-1-label}}</div>
|
|
23
|
+
</div>
|
|
24
|
+
</div>
|
|
25
|
+
</div>
|
|
26
|
+
<div class="column">
|
|
27
|
+
<div class="card padding-base">
|
|
28
|
+
<div class="counter">
|
|
29
|
+
<div class="counter-value font-size-display text-success">{{kpi-2-value}}</div>
|
|
30
|
+
<div class="counter-label font-size-s text-neutral-7">{{kpi-2-label}}</div>
|
|
31
|
+
</div>
|
|
32
|
+
</div>
|
|
33
|
+
</div>
|
|
34
|
+
<div class="column">
|
|
35
|
+
<div class="card padding-base">
|
|
36
|
+
<div class="counter">
|
|
37
|
+
<div class="counter-value font-size-display text-warning">{{kpi-3-value}}</div>
|
|
38
|
+
<div class="counter-label font-size-s text-neutral-7">{{kpi-3-label}}</div>
|
|
39
|
+
</div>
|
|
40
|
+
</div>
|
|
41
|
+
</div>
|
|
42
|
+
<div class="column">
|
|
43
|
+
<div class="card padding-base">
|
|
44
|
+
<div class="counter">
|
|
45
|
+
<div class="counter-value font-size-display text-error">{{kpi-4-value}}</div>
|
|
46
|
+
<div class="counter-label font-size-s text-neutral-7">{{kpi-4-label}}</div>
|
|
47
|
+
</div>
|
|
48
|
+
</div>
|
|
49
|
+
</div>
|
|
50
|
+
</div>
|
|
51
|
+
|
|
52
|
+
<!-- Chart Area -->
|
|
53
|
+
<div class="columns2 margin-bottom-l">
|
|
54
|
+
<div class="column">
|
|
55
|
+
<div class="card">
|
|
56
|
+
<div class="card-header padding-base">
|
|
57
|
+
<h5 class="margin-bottom-none">{{chart-1-title}}</h5>
|
|
58
|
+
</div>
|
|
59
|
+
<div class="card-content padding-base">{{chart-1-placeholder}}</div>
|
|
60
|
+
</div>
|
|
61
|
+
</div>
|
|
62
|
+
<div class="column">
|
|
63
|
+
<div class="card">
|
|
64
|
+
<div class="card-header padding-base">
|
|
65
|
+
<h5 class="margin-bottom-none">{{chart-2-title}}</h5>
|
|
66
|
+
</div>
|
|
67
|
+
<div class="card-content padding-base">{{chart-2-placeholder}}</div>
|
|
68
|
+
</div>
|
|
69
|
+
</div>
|
|
70
|
+
</div>
|
|
71
|
+
|
|
72
|
+
<!-- Recent Activity -->
|
|
73
|
+
<div class="card">
|
|
74
|
+
<div class="card-header padding-base">
|
|
75
|
+
<h5 class="margin-bottom-none">Recent Activity</h5>
|
|
76
|
+
</div>
|
|
77
|
+
<div class="card-content">
|
|
78
|
+
<div class="list list--dividers">
|
|
79
|
+
<div class="list-item padding-base">{{activity-item-1}}</div>
|
|
80
|
+
<div class="list-item padding-base">{{activity-item-2}}</div>
|
|
81
|
+
<div class="list-item padding-base">{{activity-item-3}}</div>
|
|
82
|
+
</div>
|
|
83
|
+
</div>
|
|
84
|
+
</div>
|
|
85
|
+
</main>
|
|
86
|
+
</div>
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
## List Screen
|
|
90
|
+
|
|
91
|
+
Searchable table with pagination. The standard CRUD list view.
|
|
92
|
+
|
|
93
|
+
```html
|
|
94
|
+
<div class="layout active-screen">
|
|
95
|
+
<header class="header">
|
|
96
|
+
<div class="columns2">
|
|
97
|
+
<div class="column">
|
|
98
|
+
<h1 class="font-size-h2 margin-bottom-none">{{entity-name-plural}}</h1>
|
|
99
|
+
</div>
|
|
100
|
+
<div class="column" style="text-align: right;">
|
|
101
|
+
<button class="btn btn-primary">Create New</button>
|
|
102
|
+
</div>
|
|
103
|
+
</div>
|
|
104
|
+
</header>
|
|
105
|
+
|
|
106
|
+
<main class="main-content padding-base">
|
|
107
|
+
<!-- Search & Filters -->
|
|
108
|
+
<div class="margin-bottom-base">
|
|
109
|
+
<div class="osui-search">
|
|
110
|
+
<div class="osui-search__input">
|
|
111
|
+
<input type="text" class="form-control" placeholder="Search {{entity-name-plural}}..." />
|
|
112
|
+
<span class="osui-search__icon"></span>
|
|
113
|
+
</div>
|
|
114
|
+
</div>
|
|
115
|
+
</div>
|
|
116
|
+
|
|
117
|
+
<!-- Data Table -->
|
|
118
|
+
<div class="card">
|
|
119
|
+
<table class="table table--hover">
|
|
120
|
+
<thead>
|
|
121
|
+
<tr>
|
|
122
|
+
<th>{{column-1}}</th>
|
|
123
|
+
<th>{{column-2}}</th>
|
|
124
|
+
<th>{{column-3}}</th>
|
|
125
|
+
<th>{{column-4}}</th>
|
|
126
|
+
<th>Actions</th>
|
|
127
|
+
</tr>
|
|
128
|
+
</thead>
|
|
129
|
+
<tbody>
|
|
130
|
+
<tr>
|
|
131
|
+
<td>{{value-1}}</td>
|
|
132
|
+
<td>{{value-2}}</td>
|
|
133
|
+
<td>{{value-3}}</td>
|
|
134
|
+
<td>{{value-4}}</td>
|
|
135
|
+
<td>
|
|
136
|
+
<a class="link" href="#">Edit</a>
|
|
137
|
+
<a class="link" href="#">Delete</a>
|
|
138
|
+
</td>
|
|
139
|
+
</tr>
|
|
140
|
+
</tbody>
|
|
141
|
+
</table>
|
|
142
|
+
</div>
|
|
143
|
+
|
|
144
|
+
<!-- Pagination -->
|
|
145
|
+
<div class="margin-top-base">
|
|
146
|
+
<div class="pagination">
|
|
147
|
+
<a class="pagination-item pagination-prev" href="#">«</a>
|
|
148
|
+
<a class="pagination-item active" href="#">1</a>
|
|
149
|
+
<a class="pagination-item" href="#">2</a>
|
|
150
|
+
<a class="pagination-item" href="#">3</a>
|
|
151
|
+
<a class="pagination-item pagination-next" href="#">»</a>
|
|
152
|
+
</div>
|
|
153
|
+
</div>
|
|
154
|
+
</main>
|
|
155
|
+
</div>
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
## Detail Screen
|
|
159
|
+
|
|
160
|
+
Read-only view of a single record with sections.
|
|
161
|
+
|
|
162
|
+
```html
|
|
163
|
+
<div class="layout active-screen">
|
|
164
|
+
<header class="header">
|
|
165
|
+
<div class="breadcrumbs margin-bottom-s">
|
|
166
|
+
<a class="breadcrumb-item" href="#">{{entity-name-plural}}</a>
|
|
167
|
+
<span class="breadcrumb-separator">/</span>
|
|
168
|
+
<span class="breadcrumb-item active">{{record-name}}</span>
|
|
169
|
+
</div>
|
|
170
|
+
<div class="columns2">
|
|
171
|
+
<div class="column">
|
|
172
|
+
<h1 class="font-size-h2 margin-bottom-none">{{record-name}}</h1>
|
|
173
|
+
</div>
|
|
174
|
+
<div class="column" style="text-align: right;">
|
|
175
|
+
<button class="btn">Edit</button>
|
|
176
|
+
<button class="btn btn-error">Delete</button>
|
|
177
|
+
</div>
|
|
178
|
+
</div>
|
|
179
|
+
</header>
|
|
180
|
+
|
|
181
|
+
<main class="main-content padding-base">
|
|
182
|
+
<div class="section-group">
|
|
183
|
+
<div class="section">
|
|
184
|
+
<div class="section-header">
|
|
185
|
+
<h5 class="section-title">General Information</h5>
|
|
186
|
+
</div>
|
|
187
|
+
<div class="section-content">
|
|
188
|
+
<div class="columns2">
|
|
189
|
+
<div class="column">
|
|
190
|
+
<div class="margin-bottom-base">
|
|
191
|
+
<div class="font-size-s text-neutral-6">{{field-1-label}}</div>
|
|
192
|
+
<div>{{field-1-value}}</div>
|
|
193
|
+
</div>
|
|
194
|
+
<div class="margin-bottom-base">
|
|
195
|
+
<div class="font-size-s text-neutral-6">{{field-2-label}}</div>
|
|
196
|
+
<div>{{field-2-value}}</div>
|
|
197
|
+
</div>
|
|
198
|
+
</div>
|
|
199
|
+
<div class="column">
|
|
200
|
+
<div class="margin-bottom-base">
|
|
201
|
+
<div class="font-size-s text-neutral-6">{{field-3-label}}</div>
|
|
202
|
+
<div>{{field-3-value}}</div>
|
|
203
|
+
</div>
|
|
204
|
+
<div class="margin-bottom-base">
|
|
205
|
+
<div class="font-size-s text-neutral-6">{{field-4-label}}</div>
|
|
206
|
+
<div>{{field-4-value}}</div>
|
|
207
|
+
</div>
|
|
208
|
+
</div>
|
|
209
|
+
</div>
|
|
210
|
+
</div>
|
|
211
|
+
</div>
|
|
212
|
+
|
|
213
|
+
<div class="section">
|
|
214
|
+
<div class="section-header">
|
|
215
|
+
<h5 class="section-title">Related Items</h5>
|
|
216
|
+
</div>
|
|
217
|
+
<div class="section-content">
|
|
218
|
+
<table class="table table--striped">
|
|
219
|
+
<thead>
|
|
220
|
+
<tr>
|
|
221
|
+
<th>{{related-col-1}}</th>
|
|
222
|
+
<th>{{related-col-2}}</th>
|
|
223
|
+
</tr>
|
|
224
|
+
</thead>
|
|
225
|
+
<tbody>
|
|
226
|
+
<tr>
|
|
227
|
+
<td>{{related-val-1}}</td>
|
|
228
|
+
<td>{{related-val-2}}</td>
|
|
229
|
+
</tr>
|
|
230
|
+
</tbody>
|
|
231
|
+
</table>
|
|
232
|
+
</div>
|
|
233
|
+
</div>
|
|
234
|
+
</div>
|
|
235
|
+
</main>
|
|
236
|
+
</div>
|
|
237
|
+
```
|
|
238
|
+
|
|
239
|
+
## Form Screen
|
|
240
|
+
|
|
241
|
+
Create/edit form for a single record.
|
|
242
|
+
|
|
243
|
+
```html
|
|
244
|
+
<div class="layout active-screen">
|
|
245
|
+
<header class="header">
|
|
246
|
+
<div class="breadcrumbs margin-bottom-s">
|
|
247
|
+
<a class="breadcrumb-item" href="#">{{entity-name-plural}}</a>
|
|
248
|
+
<span class="breadcrumb-separator">/</span>
|
|
249
|
+
<span class="breadcrumb-item active">{{create-or-edit}}</span>
|
|
250
|
+
</div>
|
|
251
|
+
<h1 class="font-size-h2 margin-bottom-none">{{create-or-edit}} {{entity-name}}</h1>
|
|
252
|
+
</header>
|
|
253
|
+
|
|
254
|
+
<main class="main-content padding-base">
|
|
255
|
+
<div class="card padding-l">
|
|
256
|
+
<form class="form">
|
|
257
|
+
<div class="columns2">
|
|
258
|
+
<div class="column">
|
|
259
|
+
<div class="form-group">
|
|
260
|
+
<label class="form-label">{{field-1-label}}</label>
|
|
261
|
+
<input type="text" class="form-control" placeholder="{{field-1-placeholder}}" />
|
|
262
|
+
</div>
|
|
263
|
+
<div class="form-group">
|
|
264
|
+
<label class="form-label">{{field-2-label}}</label>
|
|
265
|
+
<input type="text" class="form-control" placeholder="{{field-2-placeholder}}" />
|
|
266
|
+
</div>
|
|
267
|
+
</div>
|
|
268
|
+
<div class="column">
|
|
269
|
+
<div class="form-group">
|
|
270
|
+
<label class="form-label">{{field-3-label}}</label>
|
|
271
|
+
<div class="dropdown">
|
|
272
|
+
<select class="dropdown-select">
|
|
273
|
+
<option value="">Select...</option>
|
|
274
|
+
<option value="1">{{option-1}}</option>
|
|
275
|
+
<option value="2">{{option-2}}</option>
|
|
276
|
+
</select>
|
|
277
|
+
</div>
|
|
278
|
+
</div>
|
|
279
|
+
<div class="form-group">
|
|
280
|
+
<label class="form-label">{{field-4-label}}</label>
|
|
281
|
+
<input type="date" class="form-control" />
|
|
282
|
+
</div>
|
|
283
|
+
</div>
|
|
284
|
+
</div>
|
|
285
|
+
<div class="form-group">
|
|
286
|
+
<label class="form-label">{{description-label}}</label>
|
|
287
|
+
<textarea class="form-control" rows="4" placeholder="{{description-placeholder}}"></textarea>
|
|
288
|
+
</div>
|
|
289
|
+
<hr class="separator" />
|
|
290
|
+
<div class="form-actions">
|
|
291
|
+
<button class="btn">Cancel</button>
|
|
292
|
+
<button class="btn btn-primary">Save</button>
|
|
293
|
+
</div>
|
|
294
|
+
</form>
|
|
295
|
+
</div>
|
|
296
|
+
</main>
|
|
297
|
+
</div>
|
|
298
|
+
```
|
|
299
|
+
|
|
300
|
+
## Login Screen
|
|
301
|
+
|
|
302
|
+
Centered login form with brand header.
|
|
303
|
+
|
|
304
|
+
```html
|
|
305
|
+
<div class="layout active-screen background-login">
|
|
306
|
+
<main class="main-content align-center" style="min-height: 100vh;">
|
|
307
|
+
<div class="card padding-xl shadow-l" style="max-width: 400px; width: 100%;">
|
|
308
|
+
<div class="margin-bottom-l" style="text-align: center;">
|
|
309
|
+
<h2 class="font-size-h2 margin-bottom-xs">{{app-name}}</h2>
|
|
310
|
+
<p class="font-size-s text-neutral-6">Sign in to continue</p>
|
|
311
|
+
</div>
|
|
312
|
+
<form class="form">
|
|
313
|
+
<div class="form-group">
|
|
314
|
+
<label class="form-label">Email</label>
|
|
315
|
+
<input type="email" class="form-control" placeholder="you@company.com" />
|
|
316
|
+
</div>
|
|
317
|
+
<div class="form-group">
|
|
318
|
+
<label class="form-label">Password</label>
|
|
319
|
+
<input type="password" class="form-control" placeholder="Enter password" />
|
|
320
|
+
</div>
|
|
321
|
+
<div class="form-group">
|
|
322
|
+
<div class="checkbox">
|
|
323
|
+
<input type="checkbox" id="remember" />
|
|
324
|
+
<label for="remember">Remember me</label>
|
|
325
|
+
</div>
|
|
326
|
+
</div>
|
|
327
|
+
<button class="btn btn-primary btn-large" style="width: 100%;">Sign In</button>
|
|
328
|
+
</form>
|
|
329
|
+
<div class="margin-top-base" style="text-align: center;">
|
|
330
|
+
<a class="link font-size-s" href="#">Forgot password?</a>
|
|
331
|
+
</div>
|
|
332
|
+
</div>
|
|
333
|
+
</main>
|
|
334
|
+
</div>
|
|
335
|
+
```
|
|
336
|
+
|
|
337
|
+
## Master-Detail Screen
|
|
338
|
+
|
|
339
|
+
Split view with a list on the left and detail on the right.
|
|
340
|
+
|
|
341
|
+
```html
|
|
342
|
+
<div class="layout active-screen">
|
|
343
|
+
<header class="header">
|
|
344
|
+
<h1 class="font-size-h2 margin-bottom-none">{{entity-name-plural}}</h1>
|
|
345
|
+
</header>
|
|
346
|
+
|
|
347
|
+
<main class="main-content">
|
|
348
|
+
<div class="master-detail" style="--master-detail-height: calc(100vh - 80px); --left-percentage: 40;">
|
|
349
|
+
<div class="master-detail-list">
|
|
350
|
+
<div class="padding-base">
|
|
351
|
+
<div class="osui-search">
|
|
352
|
+
<div class="osui-search__input">
|
|
353
|
+
<input type="text" class="form-control" placeholder="Search..." />
|
|
354
|
+
</div>
|
|
355
|
+
</div>
|
|
356
|
+
</div>
|
|
357
|
+
<div class="list list--dividers">
|
|
358
|
+
<div class="list-item padding-base">
|
|
359
|
+
<div class="list-item-content">
|
|
360
|
+
<div class="list-item-content-center">
|
|
361
|
+
<div class="list-item-content-title">{{item-1-name}}</div>
|
|
362
|
+
<div class="list-item-content-description font-size-s text-neutral-6">{{item-1-subtitle}}</div>
|
|
363
|
+
</div>
|
|
364
|
+
</div>
|
|
365
|
+
</div>
|
|
366
|
+
<div class="list-item padding-base">
|
|
367
|
+
<div class="list-item-content">
|
|
368
|
+
<div class="list-item-content-center">
|
|
369
|
+
<div class="list-item-content-title">{{item-2-name}}</div>
|
|
370
|
+
<div class="list-item-content-description font-size-s text-neutral-6">{{item-2-subtitle}}</div>
|
|
371
|
+
</div>
|
|
372
|
+
</div>
|
|
373
|
+
</div>
|
|
374
|
+
</div>
|
|
375
|
+
</div>
|
|
376
|
+
<div class="master-detail-detail padding-l">
|
|
377
|
+
<h3 class="margin-bottom-base">{{selected-item-name}}</h3>
|
|
378
|
+
<div class="section-group">
|
|
379
|
+
<div class="section">
|
|
380
|
+
<div class="section-header">
|
|
381
|
+
<h5 class="section-title">Details</h5>
|
|
382
|
+
</div>
|
|
383
|
+
<div class="section-content">{{detail-content}}</div>
|
|
384
|
+
</div>
|
|
385
|
+
</div>
|
|
386
|
+
</div>
|
|
387
|
+
</div>
|
|
388
|
+
</main>
|
|
389
|
+
</div>
|
|
390
|
+
```
|
|
@@ -0,0 +1,270 @@
|
|
|
1
|
+
# OutSystems UI — Core Widgets (16)
|
|
2
|
+
|
|
3
|
+
The fundamental input and display widgets used in every OutSystems screen.
|
|
4
|
+
|
|
5
|
+
## Button
|
|
6
|
+
|
|
7
|
+
Primary interaction element. See the Buttons section in SKILL.md for the full type/size/shape matrix.
|
|
8
|
+
|
|
9
|
+
```html
|
|
10
|
+
<button class="btn btn-primary">{{label}}</button>
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
**Types**: `.btn` (secondary), `.btn-primary`, `.btn-cancel`, `.btn-success`, `.btn-error`
|
|
14
|
+
**Sizes**: `.btn-small`, default, `.btn-large`
|
|
15
|
+
|
|
16
|
+
## Button Group
|
|
17
|
+
|
|
18
|
+
Groups related buttons together with connected borders.
|
|
19
|
+
|
|
20
|
+
```html
|
|
21
|
+
<div class="btn-group">
|
|
22
|
+
<button class="btn active">{{option-1}}</button>
|
|
23
|
+
<button class="btn">{{option-2}}</button>
|
|
24
|
+
<button class="btn">{{option-3}}</button>
|
|
25
|
+
</div>
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
**Mandatory classes**: `.btn-group`
|
|
29
|
+
**Active state**: `.active` on the selected button.
|
|
30
|
+
|
|
31
|
+
## Checkbox
|
|
32
|
+
|
|
33
|
+
Boolean toggle input.
|
|
34
|
+
|
|
35
|
+
```html
|
|
36
|
+
<div class="checkbox">
|
|
37
|
+
<input type="checkbox" id="cb-1" />
|
|
38
|
+
<label for="cb-1">{{label}}</label>
|
|
39
|
+
</div>
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
**Mandatory classes**: `.checkbox`
|
|
43
|
+
**Disabled**: Add `disabled` attribute to input.
|
|
44
|
+
|
|
45
|
+
## Dropdown
|
|
46
|
+
|
|
47
|
+
Selection input with expandable option list.
|
|
48
|
+
|
|
49
|
+
```html
|
|
50
|
+
<div class="dropdown">
|
|
51
|
+
<select class="dropdown-select">
|
|
52
|
+
<option value="">{{placeholder}}</option>
|
|
53
|
+
<option value="1">{{option-1}}</option>
|
|
54
|
+
<option value="2">{{option-2}}</option>
|
|
55
|
+
</select>
|
|
56
|
+
</div>
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
**Mandatory classes**: `.dropdown`
|
|
60
|
+
|
|
61
|
+
## Feedback Message
|
|
62
|
+
|
|
63
|
+
Inline validation or status message, typically shown below form inputs.
|
|
64
|
+
|
|
65
|
+
```html
|
|
66
|
+
<div class="feedback-message feedback-message--{type}">
|
|
67
|
+
{{message}}
|
|
68
|
+
</div>
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
**Types**: `info`, `success`, `warning`, `error`
|
|
72
|
+
**Mandatory classes**: `.feedback-message`, `.feedback-message--{type}`
|
|
73
|
+
|
|
74
|
+
## Form
|
|
75
|
+
|
|
76
|
+
Container for form inputs with consistent spacing and validation patterns.
|
|
77
|
+
|
|
78
|
+
```html
|
|
79
|
+
<form class="form">
|
|
80
|
+
<div class="form-group">
|
|
81
|
+
<label class="form-label">{{label}}</label>
|
|
82
|
+
<input type="text" class="form-control" placeholder="{{placeholder}}" />
|
|
83
|
+
<span class="form-error">{{error-message}}</span>
|
|
84
|
+
</div>
|
|
85
|
+
<div class="form-group">
|
|
86
|
+
<label class="form-label">{{label-2}}</label>
|
|
87
|
+
<textarea class="form-control"></textarea>
|
|
88
|
+
</div>
|
|
89
|
+
<div class="form-actions">
|
|
90
|
+
<button class="btn">Cancel</button>
|
|
91
|
+
<button class="btn btn-primary">Submit</button>
|
|
92
|
+
</div>
|
|
93
|
+
</form>
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
**Mandatory classes**: `.form`, `.form-group`, `.form-label`, `.form-control`
|
|
97
|
+
**Validation**: `.form-error` for error messages, add `.error` to `.form-group` to highlight the field.
|
|
98
|
+
**Actions**: `.form-actions` for the button row (typically right-aligned).
|
|
99
|
+
|
|
100
|
+
## Input
|
|
101
|
+
|
|
102
|
+
Text input field. Always wrap in a `.form-group`.
|
|
103
|
+
|
|
104
|
+
```html
|
|
105
|
+
<div class="form-group">
|
|
106
|
+
<label class="form-label">{{label}}</label>
|
|
107
|
+
<input type="text" class="form-control" placeholder="{{placeholder}}" />
|
|
108
|
+
</div>
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
**Mandatory classes**: `.form-control`
|
|
112
|
+
**Input types**: `text`, `email`, `password`, `number`, `tel`, `url`, `search`, `date`
|
|
113
|
+
**Disabled**: Add `disabled` attribute.
|
|
114
|
+
**Read-only**: Add `readonly` attribute.
|
|
115
|
+
|
|
116
|
+
## Link
|
|
117
|
+
|
|
118
|
+
Styled hyperlink.
|
|
119
|
+
|
|
120
|
+
```html
|
|
121
|
+
<a class="link" href="{{url}}">{{label}}</a>
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
**Mandatory classes**: `.link`
|
|
125
|
+
**Variants**: `.link--underline` for always-underlined style.
|
|
126
|
+
|
|
127
|
+
## List
|
|
128
|
+
|
|
129
|
+
Vertical list container for items.
|
|
130
|
+
|
|
131
|
+
```html
|
|
132
|
+
<div class="list">
|
|
133
|
+
<div class="list-item">{{item-1}}</div>
|
|
134
|
+
<div class="list-item">{{item-2}}</div>
|
|
135
|
+
<div class="list-item">{{item-3}}</div>
|
|
136
|
+
</div>
|
|
137
|
+
```
|
|
138
|
+
|
|
139
|
+
**Mandatory classes**: `.list`, `.list-item`
|
|
140
|
+
**Dividers**: Add `.list--dividers` to the list container for border separators between items.
|
|
141
|
+
|
|
142
|
+
## Popover
|
|
143
|
+
|
|
144
|
+
Small overlay content that appears near a trigger element.
|
|
145
|
+
|
|
146
|
+
```html
|
|
147
|
+
<div class="osui-popover">
|
|
148
|
+
<div class="osui-popover__trigger">{{trigger}}</div>
|
|
149
|
+
<div class="osui-popover__content">
|
|
150
|
+
<div class="osui-popover__header">{{title}}</div>
|
|
151
|
+
<div class="osui-popover__body">{{content}}</div>
|
|
152
|
+
</div>
|
|
153
|
+
</div>
|
|
154
|
+
```
|
|
155
|
+
|
|
156
|
+
**Mandatory classes**: `.osui-popover`
|
|
157
|
+
**Position**: `.osui-popover--top`, `.osui-popover--bottom`, `.osui-popover--left`, `.osui-popover--right`
|
|
158
|
+
|
|
159
|
+
## Popup
|
|
160
|
+
|
|
161
|
+
Modal dialog overlay.
|
|
162
|
+
|
|
163
|
+
```html
|
|
164
|
+
<div class="osui-popup">
|
|
165
|
+
<div class="osui-popup__overlay"></div>
|
|
166
|
+
<div class="osui-popup__container">
|
|
167
|
+
<div class="osui-popup__header">
|
|
168
|
+
<h4>{{title}}</h4>
|
|
169
|
+
<span class="osui-popup__close"></span>
|
|
170
|
+
</div>
|
|
171
|
+
<div class="osui-popup__content">{{content}}</div>
|
|
172
|
+
<div class="osui-popup__footer">
|
|
173
|
+
<button class="btn">Cancel</button>
|
|
174
|
+
<button class="btn btn-primary">Confirm</button>
|
|
175
|
+
</div>
|
|
176
|
+
</div>
|
|
177
|
+
</div>
|
|
178
|
+
```
|
|
179
|
+
|
|
180
|
+
**Mandatory classes**: `.osui-popup`, `.osui-popup__container`
|
|
181
|
+
|
|
182
|
+
## Radio Group
|
|
183
|
+
|
|
184
|
+
Single-selection from a group of options.
|
|
185
|
+
|
|
186
|
+
```html
|
|
187
|
+
<div class="radio-group">
|
|
188
|
+
<div class="radio">
|
|
189
|
+
<input type="radio" name="group-1" id="r-1" />
|
|
190
|
+
<label for="r-1">{{option-1}}</label>
|
|
191
|
+
</div>
|
|
192
|
+
<div class="radio">
|
|
193
|
+
<input type="radio" name="group-1" id="r-2" />
|
|
194
|
+
<label for="r-2">{{option-2}}</label>
|
|
195
|
+
</div>
|
|
196
|
+
</div>
|
|
197
|
+
```
|
|
198
|
+
|
|
199
|
+
**Mandatory classes**: `.radio-group`, `.radio`
|
|
200
|
+
**Note**: All radio inputs in a group must share the same `name` attribute.
|
|
201
|
+
|
|
202
|
+
## Switch
|
|
203
|
+
|
|
204
|
+
Toggle switch (on/off).
|
|
205
|
+
|
|
206
|
+
```html
|
|
207
|
+
<div class="switch">
|
|
208
|
+
<input type="checkbox" id="sw-1" />
|
|
209
|
+
<label for="sw-1">{{label}}</label>
|
|
210
|
+
</div>
|
|
211
|
+
```
|
|
212
|
+
|
|
213
|
+
**Mandatory classes**: `.switch`
|
|
214
|
+
**Note**: Structurally similar to checkbox but styled as a sliding toggle.
|
|
215
|
+
|
|
216
|
+
## Table
|
|
217
|
+
|
|
218
|
+
Data table for displaying records.
|
|
219
|
+
|
|
220
|
+
```html
|
|
221
|
+
<table class="table">
|
|
222
|
+
<thead>
|
|
223
|
+
<tr>
|
|
224
|
+
<th>{{header-1}}</th>
|
|
225
|
+
<th>{{header-2}}</th>
|
|
226
|
+
<th>{{header-3}}</th>
|
|
227
|
+
</tr>
|
|
228
|
+
</thead>
|
|
229
|
+
<tbody>
|
|
230
|
+
<tr>
|
|
231
|
+
<td>{{cell-1}}</td>
|
|
232
|
+
<td>{{cell-2}}</td>
|
|
233
|
+
<td>{{cell-3}}</td>
|
|
234
|
+
</tr>
|
|
235
|
+
</tbody>
|
|
236
|
+
</table>
|
|
237
|
+
```
|
|
238
|
+
|
|
239
|
+
**Mandatory classes**: `.table`
|
|
240
|
+
**Variants**: `.table--striped` (alternating row colors), `.table--hover` (row highlight on hover), `.table--compact` (reduced padding)
|
|
241
|
+
|
|
242
|
+
## TextArea
|
|
243
|
+
|
|
244
|
+
Multi-line text input.
|
|
245
|
+
|
|
246
|
+
```html
|
|
247
|
+
<div class="form-group">
|
|
248
|
+
<label class="form-label">{{label}}</label>
|
|
249
|
+
<textarea class="form-control" rows="4" placeholder="{{placeholder}}"></textarea>
|
|
250
|
+
</div>
|
|
251
|
+
```
|
|
252
|
+
|
|
253
|
+
**Mandatory classes**: `.form-control`
|
|
254
|
+
**Note**: Uses the same `.form-control` class as Input.
|
|
255
|
+
|
|
256
|
+
## Upload
|
|
257
|
+
|
|
258
|
+
File upload input.
|
|
259
|
+
|
|
260
|
+
```html
|
|
261
|
+
<div class="upload">
|
|
262
|
+
<div class="upload-area">
|
|
263
|
+
<span class="upload-icon">{{icon}}</span>
|
|
264
|
+
<span class="upload-text">Drag and drop or click to upload</span>
|
|
265
|
+
<input type="file" class="upload-input" />
|
|
266
|
+
</div>
|
|
267
|
+
</div>
|
|
268
|
+
```
|
|
269
|
+
|
|
270
|
+
**Mandatory classes**: `.upload`, `.upload-area`, `.upload-input`
|