create-flowmo 1.0.0 → 1.1.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/package.json +1 -1
- package/skills/outsystems-ui/SKILL.md +139 -20
- package/skills/outsystems-ui/assets/layout-base.html +108 -0
- package/skills/outsystems-ui/assets/layout-blank.html +30 -0
- package/skills/outsystems-ui/assets/layout-side.html +117 -0
- package/skills/outsystems-ui/assets/layout-template.html +53 -30
- package/skills/outsystems-ui/assets/layout-top.html +100 -0
- package/skills/outsystems-ui/references/screen-templates.md +259 -33
- package/skills/outsystems-ui/references/ui-patterns.md +1253 -0
- package/template/screens/home.visual.html +55 -20
- package/skills/outsystems-ui/references/patterns-adaptive.md +0 -178
- package/skills/outsystems-ui/references/patterns-content.md +0 -242
- package/skills/outsystems-ui/references/patterns-interaction.md +0 -288
- package/skills/outsystems-ui/references/patterns-navigation.md +0 -180
- package/skills/outsystems-ui/references/patterns-numbers.md +0 -94
- package/skills/outsystems-ui/references/patterns-utilities.md +0 -124
- package/skills/outsystems-ui/references/widgets.md +0 -270
|
@@ -1,18 +1,26 @@
|
|
|
1
1
|
# OutSystems UI — Screen Templates
|
|
2
2
|
|
|
3
|
-
Common enterprise screen layouts. Use these as starting points for `.visual.html` prototypes.
|
|
3
|
+
Common enterprise screen layouts. Use these as starting points for `.visual.html` prototypes.
|
|
4
|
+
|
|
5
|
+
**IMPORTANT**: Every template below shows only the **content** that goes inside the layout's `.content-middle` area. You MUST wrap these in a proper OutSystems layout (LayoutTopMenu, LayoutSideMenu, or LayoutBase). See the layout template files in `assets/` for the full page shell.
|
|
6
|
+
|
|
7
|
+
The general page structure is:
|
|
8
|
+
```
|
|
9
|
+
.active-screen > .layout.layout-{top|side|native} > .main >
|
|
10
|
+
header.header > ...
|
|
11
|
+
.content > .main-content.ThemeGrid_Container >
|
|
12
|
+
.content-top > .content-top-title + .content-top-actions
|
|
13
|
+
.content-middle > (TEMPLATE CONTENT GOES HERE)
|
|
14
|
+
footer.content-bottom > ...
|
|
15
|
+
```
|
|
4
16
|
|
|
5
17
|
## Dashboard Screen
|
|
6
18
|
|
|
7
19
|
KPI cards on top, chart area in the middle, recent activity list at the bottom.
|
|
8
20
|
|
|
9
21
|
```html
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
<h1 class="font-size-h2 margin-bottom-none">Dashboard</h1>
|
|
13
|
-
</header>
|
|
14
|
-
|
|
15
|
-
<main class="main-content padding-base">
|
|
22
|
+
<!-- Goes inside .content-middle -->
|
|
23
|
+
<div class="main-content padding-base">
|
|
16
24
|
<!-- KPI Row -->
|
|
17
25
|
<div class="columns4 margin-bottom-l">
|
|
18
26
|
<div class="column">
|
|
@@ -299,38 +307,42 @@ Create/edit form for a single record.
|
|
|
299
307
|
|
|
300
308
|
## Login Screen
|
|
301
309
|
|
|
302
|
-
Centered login form
|
|
310
|
+
Centered login form using LayoutBlank (no header, no footer).
|
|
303
311
|
|
|
304
312
|
```html
|
|
305
|
-
<div class="
|
|
306
|
-
<
|
|
307
|
-
<div class="
|
|
308
|
-
<div class="
|
|
309
|
-
<
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
<
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
<
|
|
324
|
-
|
|
313
|
+
<div class="active-screen">
|
|
314
|
+
<div data-block="Layouts.LayoutBlank" class="layout blank">
|
|
315
|
+
<div class="content" role="main">
|
|
316
|
+
<div class="main-content display-flex align-items-center justify-content-center" style="min-height: 100vh;">
|
|
317
|
+
<div class="card padding-xl shadow-l" style="max-width: 400px; width: 100%;">
|
|
318
|
+
<div class="margin-bottom-l text-align-center">
|
|
319
|
+
<h2 class="font-size-h2 margin-bottom-xs">{{app-name}}</h2>
|
|
320
|
+
<p class="font-size-s text-neutral-6">Sign in to continue</p>
|
|
321
|
+
</div>
|
|
322
|
+
<form class="form">
|
|
323
|
+
<div class="form-group">
|
|
324
|
+
<label class="form-label">Email</label>
|
|
325
|
+
<input type="email" class="form-control" placeholder="you@company.com" />
|
|
326
|
+
</div>
|
|
327
|
+
<div class="form-group">
|
|
328
|
+
<label class="form-label">Password</label>
|
|
329
|
+
<input type="password" class="form-control" placeholder="Enter password" />
|
|
330
|
+
</div>
|
|
331
|
+
<div class="form-group">
|
|
332
|
+
<div class="checkbox">
|
|
333
|
+
<input type="checkbox" id="remember" />
|
|
334
|
+
<label for="remember">Remember me</label>
|
|
335
|
+
</div>
|
|
336
|
+
</div>
|
|
337
|
+
<button class="btn btn-primary btn-large OSFillParent">Sign In</button>
|
|
338
|
+
</form>
|
|
339
|
+
<div class="margin-top-base text-align-center">
|
|
340
|
+
<a class="link font-size-s" href="#">Forgot password?</a>
|
|
325
341
|
</div>
|
|
326
342
|
</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
343
|
</div>
|
|
332
344
|
</div>
|
|
333
|
-
</
|
|
345
|
+
</div>
|
|
334
346
|
</div>
|
|
335
347
|
```
|
|
336
348
|
|
|
@@ -388,3 +400,217 @@ Split view with a list on the left and detail on the right.
|
|
|
388
400
|
</main>
|
|
389
401
|
</div>
|
|
390
402
|
```
|
|
403
|
+
|
|
404
|
+
## Banking Home Screen (Full Example with LayoutTopMenu)
|
|
405
|
+
|
|
406
|
+
A complete banking dashboard using LayoutTopMenu layout. Shows account cards in a gallery, a transactions table with filters, and pagination. This is extracted from a real OutSystems application.
|
|
407
|
+
|
|
408
|
+
```html
|
|
409
|
+
<!DOCTYPE html>
|
|
410
|
+
<html lang="en">
|
|
411
|
+
<head>
|
|
412
|
+
<meta charset="UTF-8" />
|
|
413
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
414
|
+
<title>Home</title>
|
|
415
|
+
<link rel="stylesheet" href="../theme/outsystems-ui.css" />
|
|
416
|
+
<link rel="stylesheet" href="../theme/theme.css" />
|
|
417
|
+
</head>
|
|
418
|
+
<body class="desktop">
|
|
419
|
+
<div class="active-screen">
|
|
420
|
+
<div data-block="Layouts.LayoutTopMenu" class="layout layout-top fixed-header">
|
|
421
|
+
<div class="main">
|
|
422
|
+
|
|
423
|
+
<!-- HEADER with top navigation -->
|
|
424
|
+
<header role="banner" class="header">
|
|
425
|
+
<div class="header-top ThemeGrid_Container">
|
|
426
|
+
<div class="header-content display-flex">
|
|
427
|
+
<div class="menu-icon" role="button" aria-label="Toggle the Menu" aria-haspopup="true">
|
|
428
|
+
<div class="menu-icon-line" aria-hidden="true"></div>
|
|
429
|
+
<div class="menu-icon-line" aria-hidden="true"></div>
|
|
430
|
+
<div class="menu-icon-line" aria-hidden="true"></div>
|
|
431
|
+
</div>
|
|
432
|
+
<div class="header-navigation">
|
|
433
|
+
<nav class="app-menu-content display-flex" role="navigation">
|
|
434
|
+
<div class="header-logo">
|
|
435
|
+
<div class="application-name display-flex align-items-center full-height">
|
|
436
|
+
<span class="heading6 text-neutral-8">MyBank</span>
|
|
437
|
+
</div>
|
|
438
|
+
</div>
|
|
439
|
+
<div class="app-menu-links" role="menubar">
|
|
440
|
+
<a class="active" role="menuitem" href="#">Home</a>
|
|
441
|
+
<a class="ThemeGrid_MarginGutter" role="menuitem" href="#">Contact us</a>
|
|
442
|
+
<a class="ThemeGrid_MarginGutter" role="menuitem" href="#">Branch finder</a>
|
|
443
|
+
</div>
|
|
444
|
+
<div class="app-login-info">
|
|
445
|
+
<div class="user-info">
|
|
446
|
+
<div class="padding-y-base display-flex align-items-center">
|
|
447
|
+
<span>Andrea McKenzie</span>
|
|
448
|
+
</div>
|
|
449
|
+
</div>
|
|
450
|
+
</div>
|
|
451
|
+
</nav>
|
|
452
|
+
<div class="app-menu-overlay" role="button" aria-label="Close Menu"></div>
|
|
453
|
+
</div>
|
|
454
|
+
</div>
|
|
455
|
+
</div>
|
|
456
|
+
</header>
|
|
457
|
+
|
|
458
|
+
<!-- CONTENT -->
|
|
459
|
+
<div class="content">
|
|
460
|
+
<div class="main-content ThemeGrid_Container" role="main">
|
|
461
|
+
|
|
462
|
+
<!-- Title + Action Button -->
|
|
463
|
+
<div class="content-top display-flex align-items-center">
|
|
464
|
+
<div class="content-top-title heading1">Hello, Andrea McKenzie</div>
|
|
465
|
+
<div class="content-top-actions">
|
|
466
|
+
<button class="btn btn-primary">Send money</button>
|
|
467
|
+
</div>
|
|
468
|
+
</div>
|
|
469
|
+
|
|
470
|
+
<!-- Account Cards Gallery -->
|
|
471
|
+
<div class="content-middle">
|
|
472
|
+
<div class="margin-bottom-l">
|
|
473
|
+
<div class="osui-gallery" style="--grid-desktop: 3; --grid-tablet: 3; --grid-phone: 1; --grid-gap: var(--space-base);">
|
|
474
|
+
<!-- Account Card 1 -->
|
|
475
|
+
<div class="card card-content padding-none">
|
|
476
|
+
<div class="display-flex padding-y-base align-items-center padding-x-m border-size-s text-primary">
|
|
477
|
+
<div class="display-flex flex1 align-items-center">
|
|
478
|
+
<div class="margin-left-base">
|
|
479
|
+
<div class="font-size-base font-semi-bold text-neutral-9">Current Account</div>
|
|
480
|
+
<div class="text-neutral-7 font-size-xs">7890</div>
|
|
481
|
+
</div>
|
|
482
|
+
</div>
|
|
483
|
+
<div class="padding-x-base font-size-base text-neutral-9">$7,845.67</div>
|
|
484
|
+
<i class="icon text-neutral-7 padding-s fa fa-info-circle"></i>
|
|
485
|
+
</div>
|
|
486
|
+
</div>
|
|
487
|
+
<!-- Account Card 2 -->
|
|
488
|
+
<div class="card card-content padding-none">
|
|
489
|
+
<div class="display-flex padding-y-base align-items-center padding-x-m">
|
|
490
|
+
<div class="display-flex flex1 align-items-center">
|
|
491
|
+
<div class="margin-left-base">
|
|
492
|
+
<div class="font-size-base font-semi-bold text-neutral-9">Savings Account</div>
|
|
493
|
+
<div class="text-neutral-7 font-size-xs">7891</div>
|
|
494
|
+
</div>
|
|
495
|
+
</div>
|
|
496
|
+
<div class="padding-x-base font-size-base text-neutral-9">$10,281.77</div>
|
|
497
|
+
<i class="icon text-neutral-7 padding-s fa fa-info-circle"></i>
|
|
498
|
+
</div>
|
|
499
|
+
</div>
|
|
500
|
+
<!-- Account Card 3 -->
|
|
501
|
+
<div class="card card-content padding-none">
|
|
502
|
+
<div class="display-flex padding-y-base align-items-center padding-x-m">
|
|
503
|
+
<div class="display-flex flex1 align-items-center">
|
|
504
|
+
<div class="margin-left-base">
|
|
505
|
+
<div class="font-size-base font-semi-bold text-neutral-9">Credit Account</div>
|
|
506
|
+
<div class="text-neutral-7 font-size-xs">7892</div>
|
|
507
|
+
</div>
|
|
508
|
+
</div>
|
|
509
|
+
<div class="padding-x-base font-size-base text-neutral-9">$500.00</div>
|
|
510
|
+
<i class="icon text-neutral-7 padding-s fa fa-info-circle"></i>
|
|
511
|
+
</div>
|
|
512
|
+
</div>
|
|
513
|
+
</div>
|
|
514
|
+
</div>
|
|
515
|
+
|
|
516
|
+
<!-- Transactions Section -->
|
|
517
|
+
<div class="heading4 margin-bottom-m">Transactions</div>
|
|
518
|
+
|
|
519
|
+
<!-- Filters Row -->
|
|
520
|
+
<div class="display-flex margin-bottom-base align-items-end">
|
|
521
|
+
<div class="flex1 margin-right-base">
|
|
522
|
+
<div class="search">
|
|
523
|
+
<div class="search-input">
|
|
524
|
+
<input class="form-control" type="search" placeholder="Search by description" />
|
|
525
|
+
</div>
|
|
526
|
+
</div>
|
|
527
|
+
</div>
|
|
528
|
+
<div class="display-flex flex2 align-items-end">
|
|
529
|
+
<div class="flex1 margin-right-base">
|
|
530
|
+
<div class="input-with-icon">
|
|
531
|
+
<div class="input-with-icon-content-icon center">
|
|
532
|
+
<i class="icon fa fa-calendar"></i>
|
|
533
|
+
</div>
|
|
534
|
+
<div class="input-with-icon-input">
|
|
535
|
+
<input class="form-control" type="text" placeholder="Posting date from" readonly />
|
|
536
|
+
</div>
|
|
537
|
+
</div>
|
|
538
|
+
</div>
|
|
539
|
+
<div class="flex1 margin-right-base">
|
|
540
|
+
<div class="input-with-icon">
|
|
541
|
+
<div class="input-with-icon-content-icon center">
|
|
542
|
+
<i class="icon fa fa-calendar"></i>
|
|
543
|
+
</div>
|
|
544
|
+
<div class="input-with-icon-input">
|
|
545
|
+
<input class="form-control" type="text" placeholder="Posting date to" readonly />
|
|
546
|
+
</div>
|
|
547
|
+
</div>
|
|
548
|
+
</div>
|
|
549
|
+
<div class="flex1 margin-right-base">
|
|
550
|
+
<div class="display-flex padding-bottom-xs">
|
|
551
|
+
<span class="padding-right-s">Amount</span>
|
|
552
|
+
<span class="font-semi-bold">$-5,100 - $5,100</span>
|
|
553
|
+
</div>
|
|
554
|
+
</div>
|
|
555
|
+
<button class="btn" disabled>Reset</button>
|
|
556
|
+
</div>
|
|
557
|
+
</div>
|
|
558
|
+
|
|
559
|
+
<!-- Transactions Table -->
|
|
560
|
+
<table class="table" role="grid">
|
|
561
|
+
<thead>
|
|
562
|
+
<tr class="table-header">
|
|
563
|
+
<th class="sortable">Posting date</th>
|
|
564
|
+
<th>Transaction date</th>
|
|
565
|
+
<th>Description</th>
|
|
566
|
+
<th>Amount</th>
|
|
567
|
+
<th>Balance</th>
|
|
568
|
+
</tr>
|
|
569
|
+
</thead>
|
|
570
|
+
<tbody>
|
|
571
|
+
<tr class="table-row">
|
|
572
|
+
<td>04 / 05 / 2026</td>
|
|
573
|
+
<td>04 / 05 / 2026</td>
|
|
574
|
+
<td><div class="line-clamp">Savings for a new car</div></td>
|
|
575
|
+
<td class="text-align-right"><span class="text-neutral-9 white-space-nowrap">- $5,000.00</span></td>
|
|
576
|
+
<td class="text-align-right">$7,845.67</td>
|
|
577
|
+
</tr>
|
|
578
|
+
<tr class="table-row">
|
|
579
|
+
<td>04 / 04 / 2026</td>
|
|
580
|
+
<td>04 / 04 / 2026</td>
|
|
581
|
+
<td><div class="line-clamp">My cut of Joanna's bridal shower gift</div></td>
|
|
582
|
+
<td class="text-align-right"><span class="text-green white-space-nowrap">+ $100.00</span></td>
|
|
583
|
+
<td class="text-align-right">$12,845.67</td>
|
|
584
|
+
</tr>
|
|
585
|
+
<tr class="table-row">
|
|
586
|
+
<td>03 / 27 / 2026</td>
|
|
587
|
+
<td>03 / 27 / 2026</td>
|
|
588
|
+
<td><div class="line-clamp">Paycheck</div></td>
|
|
589
|
+
<td class="text-align-right"><span class="text-green white-space-nowrap">+ $2,000.00</span></td>
|
|
590
|
+
<td class="text-align-right">$13,745.67</td>
|
|
591
|
+
</tr>
|
|
592
|
+
</tbody>
|
|
593
|
+
</table>
|
|
594
|
+
|
|
595
|
+
<!-- Pagination -->
|
|
596
|
+
<div class="pagination">
|
|
597
|
+
<div class="pagination-counter">
|
|
598
|
+
<span>1</span> to <span>7</span> of <span>7</span> items
|
|
599
|
+
</div>
|
|
600
|
+
</div>
|
|
601
|
+
</div>
|
|
602
|
+
|
|
603
|
+
</div>
|
|
604
|
+
|
|
605
|
+
<!-- FOOTER -->
|
|
606
|
+
<footer role="contentinfo" class="content-bottom">
|
|
607
|
+
<div class="footer ThemeGrid_Container"></div>
|
|
608
|
+
</footer>
|
|
609
|
+
</div>
|
|
610
|
+
|
|
611
|
+
</div>
|
|
612
|
+
</div>
|
|
613
|
+
</div>
|
|
614
|
+
</body>
|
|
615
|
+
</html>
|
|
616
|
+
```
|