create-flowmo 1.1.0 → 1.2.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 +127 -13
- package/skills/outsystems-ui/assets/layout-base.html +1 -0
- package/skills/outsystems-ui/assets/layout-blank.html +1 -0
- package/skills/outsystems-ui/assets/layout-side.html +1 -0
- package/skills/outsystems-ui/assets/layout-template.html +1 -0
- package/skills/outsystems-ui/assets/layout-top.html +1 -0
- package/template/screens/home.visual.html +1 -0
- package/template/theme/grid.css +82 -0
- package/template/theme/theme.css +6 -2
package/package.json
CHANGED
|
@@ -23,8 +23,10 @@ Build pixel-perfect OutSystems-compatible `.visual.html` prototypes using only t
|
|
|
23
23
|
2. **12-column grid** — use `.columns2` through `.columns6` for responsive layouts. These auto-stack on mobile — do not add custom media queries.
|
|
24
24
|
3. **No external JavaScript** — all interaction patterns are CSS/class-driven.
|
|
25
25
|
4. **Layout is CRITICAL** — every screen MUST use one of the three OutSystems layouts. Pick the right one and use the exact HTML structure from the layout template files. The `.active-screen` wrapper is REQUIRED or utility classes will not resolve. See the **Layouts** section below.
|
|
26
|
-
5. **
|
|
27
|
-
6. **
|
|
26
|
+
5. **Scroll model** — OSUI sets `html { overflow: hidden }`. The `.active-screen` div is the actual scroll container. The `grid.css` file provides `.active-screen { overflow-y: auto; height: 100vh; }` — make sure `grid.css` is linked.
|
|
27
|
+
6. **Strip platform IDs** — never include `os-internal-id` or similar platform-generated attributes.
|
|
28
|
+
7. **Widget slots** — use `{{content}}` placeholders in templates where nested widgets would go.
|
|
29
|
+
8. **Three CSS files** — every screen links three stylesheets in order: `outsystems-ui.css` (framework), `grid.css` (platform grid & scroll), `theme.css` (project styles). See the **Theme Customization** section below.
|
|
28
30
|
|
|
29
31
|
## Layouts
|
|
30
32
|
|
|
@@ -195,6 +197,30 @@ Add `.btn-loading` to the button and include a spinner element inside. This is C
|
|
|
195
197
|
</button>
|
|
196
198
|
```
|
|
197
199
|
|
|
200
|
+
### Button Specificity Warning
|
|
201
|
+
|
|
202
|
+
The `.btn` class sets its own `color` and `background-color` with high specificity. **DO NOT** try to override button colors with OSUI color utilities like `.background-neutral-0` or `.text-primary` — they will be overridden by `.btn` rules and the text will become invisible.
|
|
203
|
+
|
|
204
|
+
**Wrong** (text invisible — white on white):
|
|
205
|
+
```html
|
|
206
|
+
<button class="btn btn-primary background-neutral-0 text-primary">Open Account</button>
|
|
207
|
+
```
|
|
208
|
+
|
|
209
|
+
**Right** — use a named class in `theme.css`:
|
|
210
|
+
```html
|
|
211
|
+
<button class="btn hero-btn-primary">Open Account</button>
|
|
212
|
+
```
|
|
213
|
+
```css
|
|
214
|
+
/* theme.css */
|
|
215
|
+
.hero-btn-primary {
|
|
216
|
+
background: var(--bank-gold) !important;
|
|
217
|
+
color: var(--bank-navy) !important;
|
|
218
|
+
border: 2px solid var(--bank-gold) !important;
|
|
219
|
+
}
|
|
220
|
+
```
|
|
221
|
+
|
|
222
|
+
If you need a button style that doesn't match `.btn-primary`, `.btn-cancel`, `.btn-success`, or `.btn-error`, create a custom class in `theme.css` rather than stacking conflicting utility classes.
|
|
223
|
+
|
|
198
224
|
## Borders
|
|
199
225
|
|
|
200
226
|
### Border Radius
|
|
@@ -334,23 +360,111 @@ Some patterns expose CSS custom properties for fine-tuning. Set these on the pat
|
|
|
334
360
|
| Rating | `--rating-size: 16px` |
|
|
335
361
|
| Scrollable Area | `--scrollable-area-width`, `--scrollable-area-height` |
|
|
336
362
|
|
|
337
|
-
##
|
|
363
|
+
## Theme Customization
|
|
364
|
+
|
|
365
|
+
Every project ships three CSS files, loaded in this order:
|
|
338
366
|
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
367
|
+
1. **`outsystems-ui.css`** — the OSUI framework (patterns, utilities, layout). Never edit this.
|
|
368
|
+
2. **`grid.css`** — platform grid definitions (`.ThemeGrid_Container` max-width, `.ThemeGrid_Width*` columns, `.ThemeGrid_MarginGutter` spacing, `.active-screen` scroll model). Normally injected by OutSystems at runtime — we provide it statically. Never edit this.
|
|
369
|
+
3. **`theme.css`** — project-specific brand tokens and custom styles. This is the only file you should edit.
|
|
370
|
+
|
|
371
|
+
All three `<link>` tags must be present in `<head>`:
|
|
372
|
+
```html
|
|
373
|
+
<link rel="stylesheet" href="../theme/outsystems-ui.css" />
|
|
374
|
+
<link rel="stylesheet" href="../theme/grid.css" />
|
|
375
|
+
<link rel="stylesheet" href="../theme/theme.css" />
|
|
376
|
+
```
|
|
377
|
+
|
|
378
|
+
### What theme.css MUST contain
|
|
379
|
+
|
|
380
|
+
1. **Brand tokens** — override `:root` CSS variables:
|
|
381
|
+
```css
|
|
382
|
+
:root {
|
|
383
|
+
--color-primary: #1a56db;
|
|
384
|
+
--color-secondary: #0a1628;
|
|
385
|
+
--font-family-base: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
|
|
386
|
+
}
|
|
387
|
+
```
|
|
388
|
+
|
|
389
|
+
2. **Custom component classes** — for styles that can't be achieved with OSUI utilities alone (e.g. hero buttons, gradient backgrounds, themed footers). Use **BEM naming** (`block__element--modifier`):
|
|
390
|
+
```css
|
|
391
|
+
.hero__btn--primary { ... }
|
|
392
|
+
.hero__btn--outline { ... }
|
|
393
|
+
.footer__link--active { ... }
|
|
394
|
+
.stats__number { ... }
|
|
395
|
+
.card__icon--large { ... }
|
|
396
|
+
```
|
|
397
|
+
BEM keeps custom classes predictable and avoids collisions with OSUI's own class names.
|
|
398
|
+
|
|
399
|
+
### What theme.css should NOT do
|
|
400
|
+
|
|
401
|
+
- Don't redefine OSUI layout structure (`.layout`, `.main`, `.content`, `.header-content`)
|
|
402
|
+
- Don't redefine grid classes (`.ThemeGrid_*`) — those belong in `grid.css`
|
|
403
|
+
- Don't add `@media` queries — OSUI handles responsiveness
|
|
404
|
+
- Don't override `.btn` base styles — create new named classes instead
|
|
405
|
+
|
|
406
|
+
### Common OSUI specificity traps
|
|
407
|
+
|
|
408
|
+
These OSUI classes set background/color with high specificity that utility classes can't override:
|
|
409
|
+
|
|
410
|
+
| Class | Sets | Don't override with |
|
|
411
|
+
|-------|------|--------------------|
|
|
412
|
+
| `.btn` | `color`, `background-color` | `.text-*`, `.background-*` |
|
|
413
|
+
| `.list-item` | `background-color: white` | Needs `background: transparent !important` in dark contexts |
|
|
414
|
+
| `.card` | `background-color: white` | Needs explicit override for dark backgrounds |
|
|
415
|
+
| `.badge` | `background-color`, `color` | Use `!important` or a custom class |
|
|
416
|
+
|
|
417
|
+
### Icons
|
|
418
|
+
|
|
419
|
+
OSUI does not bundle an icon font. If your screen uses Font Awesome icons (`<i class="fa fa-*">`), you MUST add the CDN link in `<head>`:
|
|
420
|
+
|
|
421
|
+
```html
|
|
422
|
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
|
|
423
|
+
```
|
|
345
424
|
|
|
346
|
-
|
|
425
|
+
Alternatively, use inline SVGs with the `.icon` class if you want to avoid external dependencies.
|
|
426
|
+
|
|
427
|
+
### Dark section styling
|
|
428
|
+
|
|
429
|
+
When placing content on a dark background (`.background-primary`, `.background-secondary`, or custom dark sections), remember:
|
|
430
|
+
- Use `.text-neutral-0` for white text (headings, paragraphs)
|
|
431
|
+
- Footer `.list-item` elements have `background: white` by default — override with `background: transparent !important`
|
|
432
|
+
- Links default to the primary color — use custom classes for white/light link colors
|
|
433
|
+
- Border colors may be invisible — use `border-color: rgba(255,255,255,0.1)` overrides
|
|
434
|
+
|
|
435
|
+
## Workflow
|
|
436
|
+
|
|
437
|
+
Follow this checklist when creating or editing a screen. Do not skip steps.
|
|
438
|
+
|
|
439
|
+
- [ ] Step 1: **Generate the screen** — create the `.visual.html` file and any `theme.css` updates
|
|
440
|
+
- [ ] Step 2: **Self-check** — verify the generated file against these rules:
|
|
441
|
+
1. Root `<div>` has class `active-screen` wrapping a `.layout` div
|
|
442
|
+
2. No inline `style=""` attributes anywhere
|
|
443
|
+
3. All classes are OSUI utilities OR custom classes defined in `theme.css`
|
|
444
|
+
4. All three CSS stylesheets linked in `<head>`: `outsystems-ui.css`, `grid.css`, `theme.css` (in that order)
|
|
445
|
+
5. If Font Awesome icons are used, the FA CDN `<link>` is in `<head>`
|
|
446
|
+
6. No `@media` queries or custom breakpoints
|
|
447
|
+
7. Scroll model and grid are handled by `grid.css` (not duplicated in `theme.css`)
|
|
448
|
+
8. If any check fails, fix and re-check before continuing
|
|
449
|
+
- [ ] Step 3: **Install dependencies** — if `node_modules/` does not exist, run `npm install`
|
|
450
|
+
- [ ] Step 4: **Start the dev server** — run `npm run dev` to serve the project at `http://localhost:5173/`
|
|
451
|
+
- [ ] Step 5: **Visual verification** — open the screen URL in the browser and check:
|
|
452
|
+
- Layout renders correctly (no collapsed sections, no overlapping elements)
|
|
453
|
+
- No invisible text (white-on-white buttons, same-color text/background)
|
|
454
|
+
- Page scrolls within `.active-screen`
|
|
455
|
+
- Icons render (not 0×0 invisible boxes)
|
|
456
|
+
- Menu links and form fields have proper spacing (`.ThemeGrid_MarginGutter`)
|
|
457
|
+
- If anything looks wrong, fix the issue and reload to verify the fix
|
|
347
458
|
|
|
348
459
|
## Gotchas
|
|
349
460
|
|
|
350
|
-
- `.active-screen`
|
|
461
|
+
- `.active-screen` is **REQUIRED** as the outermost wrapper. Without it, utility classes and CSS variables will NOT resolve. It also serves as the **scroll container** \u2014 OSUI sets `html { overflow: hidden }` so `.active-screen` must have `overflow-y: auto; height: 100vh` (provided by `grid.css`).\n- **`.ThemeGrid_MarginGutter` needs `grid.css`** \u2014 this class is used for menu link spacing and form field gutters, but its `margin-left` value is NOT in `outsystems-ui.css`. It comes from `grid.css`. Without it, menu links will bunch together with no spacing.
|
|
462
|
+
- **Button + color utilities don't mix** — `.btn` overrides `color` and `background-color` at high specificity. Stacking `.btn .background-neutral-0 .text-primary` will produce invisible text (white on white). Create custom button classes in `theme.css` instead.
|
|
463
|
+
- **`.list-item` has white background** — In dark-background sections (footer, sidebar), list items will show as white rectangles. Override with `background: transparent !important` in `theme.css`.
|
|
464
|
+
- **Font Awesome is not bundled** — If using `<i class="fa fa-exchange">` style icons, add the FA 4.7 CDN link to `<head>` or the icons will be invisible (0×0 size).
|
|
351
465
|
- OutSystems pattern previews render inside iframes — CSS resolves against the OSUI framework, not browser defaults. Your `.visual.html` must link the OSUI stylesheet.
|
|
352
|
-
- **Never mix** inline `style=""` attributes with utility classes.
|
|
466
|
+
- **Never mix** inline `style=""` attributes with utility classes. Always prefer utility classes.
|
|
353
467
|
- `.columns*` patterns auto-stack on mobile breakpoints. Do NOT add custom `@media` queries to override this behavior.
|
|
354
468
|
- Button loading state is purely CSS (`.btn-loading` + spinner element), not a JavaScript toggle.
|
|
355
469
|
- Use `{{content}}` placeholders in component templates to indicate where nested child widgets go.
|
|
356
|
-
- Always
|
|
470
|
+
- Always generate BOTH the `.visual.html` AND corresponding `theme.css` styles together. A screen without proper theme styles will look broken.
|
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
6
|
<title>{{screen-name}}</title>
|
|
7
7
|
<link rel="stylesheet" href="../theme/outsystems-ui.css" />
|
|
8
|
+
<link rel="stylesheet" href="../theme/grid.css" />
|
|
8
9
|
<link rel="stylesheet" href="../theme/theme.css" />
|
|
9
10
|
</head>
|
|
10
11
|
<body class="desktop">
|
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
6
|
<title>{{screen-name}}</title>
|
|
7
7
|
<link rel="stylesheet" href="../theme/outsystems-ui.css" />
|
|
8
|
+
<link rel="stylesheet" href="../theme/grid.css" />
|
|
8
9
|
<link rel="stylesheet" href="../theme/theme.css" />
|
|
9
10
|
</head>
|
|
10
11
|
<body class="desktop">
|
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
6
|
<title>{{screen-name}}</title>
|
|
7
7
|
<link rel="stylesheet" href="../theme/outsystems-ui.css" />
|
|
8
|
+
<link rel="stylesheet" href="../theme/grid.css" />
|
|
8
9
|
<link rel="stylesheet" href="../theme/theme.css" />
|
|
9
10
|
</head>
|
|
10
11
|
<body class="desktop">
|
|
@@ -11,6 +11,7 @@
|
|
|
11
11
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
12
12
|
<title>{{screen-name}}</title>
|
|
13
13
|
<link rel="stylesheet" href="../theme/outsystems-ui.css" />
|
|
14
|
+
<link rel="stylesheet" href="../theme/grid.css" />
|
|
14
15
|
<link rel="stylesheet" href="../theme/theme.css" />
|
|
15
16
|
</head>
|
|
16
17
|
<body class="desktop">
|
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
6
|
<title>{{screen-name}}</title>
|
|
7
7
|
<link rel="stylesheet" href="../theme/outsystems-ui.css" />
|
|
8
|
+
<link rel="stylesheet" href="../theme/grid.css" />
|
|
8
9
|
<link rel="stylesheet" href="../theme/theme.css" />
|
|
9
10
|
</head>
|
|
10
11
|
<body class="desktop">
|
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
6
|
<title>Home</title>
|
|
7
7
|
<link rel="stylesheet" href="../theme/outsystems-ui.css">
|
|
8
|
+
<link rel="stylesheet" href="../theme/grid.css">
|
|
8
9
|
<link rel="stylesheet" href="../theme/theme.css">
|
|
9
10
|
</head>
|
|
10
11
|
<body class="desktop">
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
/* ── OutSystems Platform Grid & Base ───────────────────
|
|
2
|
+
These styles are normally injected by the OutSystems
|
|
3
|
+
platform at runtime based on app settings. Since we
|
|
4
|
+
render static .visual.html files outside the platform,
|
|
5
|
+
we must provide them explicitly.
|
|
6
|
+
|
|
7
|
+
Source: _Basic.css + <AppName>.extra.css
|
|
8
|
+
──────────────────────────────────────────────────────── */
|
|
9
|
+
|
|
10
|
+
/* ── Scroll host ─────────────────────────────────────── */
|
|
11
|
+
.active-screen {
|
|
12
|
+
overflow-y: auto;
|
|
13
|
+
height: 100vh;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
/* ── Base resets ─────────────────────────────────────── */
|
|
17
|
+
body {
|
|
18
|
+
margin: 0;
|
|
19
|
+
padding: 0;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.OSFillParent {
|
|
23
|
+
display: block;
|
|
24
|
+
width: 100%;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.OSInline {
|
|
28
|
+
display: inline-block;
|
|
29
|
+
vertical-align: top;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
div[class*="ThemeGrid_Width"] {
|
|
33
|
+
vertical-align: top;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
[class*="ThemeGrid_Width"] {
|
|
37
|
+
display: inline-block;
|
|
38
|
+
box-sizing: border-box;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.ThemeGrid_Container {
|
|
42
|
+
box-sizing: border-box;
|
|
43
|
+
max-width: 1280px;
|
|
44
|
+
padding-left: 5%;
|
|
45
|
+
padding-right: 5%;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
/* ── 12-Column Grid ──────────────────────────────────── */
|
|
49
|
+
.ThemeGrid_Width1 { width: 6.5359477124183%; }
|
|
50
|
+
.ThemeGrid_Width2 { width: 15.0326797385621%; }
|
|
51
|
+
.ThemeGrid_Width3 { width: 23.5294117647059%; }
|
|
52
|
+
.ThemeGrid_Width4 { width: 32.0261437908497%; }
|
|
53
|
+
.ThemeGrid_Width5 { width: 40.5228758169935%; }
|
|
54
|
+
.ThemeGrid_Width6 { width: 49.0196078431373%; }
|
|
55
|
+
.ThemeGrid_Width7 { width: 57.516339869281%; }
|
|
56
|
+
.ThemeGrid_Width8 { width: 66.0130718954248%; }
|
|
57
|
+
.ThemeGrid_Width9 { width: 74.5098039215686%; }
|
|
58
|
+
.ThemeGrid_Width10 { width: 83.0065359477124%; }
|
|
59
|
+
.ThemeGrid_Width11 { width: 91.5032679738562%; }
|
|
60
|
+
.ThemeGrid_Width12 { width: 100%; }
|
|
61
|
+
|
|
62
|
+
/* ── Gutter & Margins ────────────────────────────────── */
|
|
63
|
+
.ThemeGrid_MarginGutter {
|
|
64
|
+
margin-left: 1.96078431372549%;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.ThemeGrid_Margin1 { margin-left: 10.4575163398693%; }
|
|
68
|
+
.ThemeGrid_Margin2 { margin-left: 18.9542483660131%; }
|
|
69
|
+
.ThemeGrid_Margin3 { margin-left: 27.4509803921569%; }
|
|
70
|
+
.ThemeGrid_Margin4 { margin-left: 35.9477124183007%; }
|
|
71
|
+
.ThemeGrid_Margin5 { margin-left: 44.4444444444444%; }
|
|
72
|
+
.ThemeGrid_Margin6 { margin-left: 52.9411764705882%; }
|
|
73
|
+
.ThemeGrid_Margin7 { margin-left: 61.437908496732%; }
|
|
74
|
+
.ThemeGrid_Margin8 { margin-left: 69.9346405228758%; }
|
|
75
|
+
.ThemeGrid_Margin9 { margin-left: 78.4313725490196%; }
|
|
76
|
+
.ThemeGrid_Margin10 { margin-left: 86.9281045751634%; }
|
|
77
|
+
.ThemeGrid_Margin11 { margin-left: 95.4248366013072%; }
|
|
78
|
+
|
|
79
|
+
/* ── List reset ──────────────────────────────────────── */
|
|
80
|
+
.ListRecords {
|
|
81
|
+
display: block;
|
|
82
|
+
}
|
package/template/theme/theme.css
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
/* ── Project Theme ─────────────────────────────────────
|
|
2
2
|
Override OutSystems UI variables and add custom styles here.
|
|
3
|
-
This file loads after outsystems-ui.css.
|
|
3
|
+
This file loads after outsystems-ui.css and grid.css.
|
|
4
4
|
──────────────────────────────────────────────────────── */
|
|
5
5
|
|
|
6
|
+
/* ── 1. Brand tokens ─────────────────────────────────── */
|
|
6
7
|
:root {
|
|
7
8
|
/* Brand colors – change these to match your app */
|
|
8
9
|
--color-primary: #2979ff;
|
|
@@ -16,4 +17,7 @@
|
|
|
16
17
|
--font-size-base: 14px;
|
|
17
18
|
}
|
|
18
19
|
|
|
19
|
-
/*
|
|
20
|
+
/* ── 2. Custom styles ────────────────────────────────── */
|
|
21
|
+
/* Add custom component classes here.
|
|
22
|
+
Use named classes for button variants, dark-section overrides,
|
|
23
|
+
gradient backgrounds, etc. Keep OSUI utilities for layout/spacing. */
|