create-flowmo 1.1.1 → 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 +41 -43
- 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 +3 -13
package/package.json
CHANGED
|
@@ -23,10 +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. **Scroll model** — OSUI sets `html { overflow: hidden }`. The `.active-screen` div is the actual scroll container.
|
|
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
27
|
6. **Strip platform IDs** — never include `os-internal-id` or similar platform-generated attributes.
|
|
28
28
|
7. **Widget slots** — use `{{content}}` placeholders in templates where nested widgets would go.
|
|
29
|
-
8. **
|
|
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.
|
|
30
30
|
|
|
31
31
|
## Layouts
|
|
32
32
|
|
|
@@ -362,19 +362,22 @@ Some patterns expose CSS custom properties for fine-tuning. Set these on the pat
|
|
|
362
362
|
|
|
363
363
|
## Theme Customization
|
|
364
364
|
|
|
365
|
-
Every project ships
|
|
365
|
+
Every project ships three CSS files, loaded in this order:
|
|
366
366
|
|
|
367
|
-
|
|
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.
|
|
368
370
|
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
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
|
|
376
379
|
|
|
377
|
-
|
|
380
|
+
1. **Brand tokens** — override `:root` CSS variables:
|
|
378
381
|
```css
|
|
379
382
|
:root {
|
|
380
383
|
--color-primary: #1a56db;
|
|
@@ -383,7 +386,7 @@ Every project ships two CSS files: `outsystems-ui.css` (base framework) and `the
|
|
|
383
386
|
}
|
|
384
387
|
```
|
|
385
388
|
|
|
386
|
-
|
|
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`):
|
|
387
390
|
```css
|
|
388
391
|
.hero__btn--primary { ... }
|
|
389
392
|
.hero__btn--outline { ... }
|
|
@@ -396,6 +399,7 @@ Every project ships two CSS files: `outsystems-ui.css` (base framework) and `the
|
|
|
396
399
|
### What theme.css should NOT do
|
|
397
400
|
|
|
398
401
|
- Don't redefine OSUI layout structure (`.layout`, `.main`, `.content`, `.header-content`)
|
|
402
|
+
- Don't redefine grid classes (`.ThemeGrid_*`) — those belong in `grid.css`
|
|
399
403
|
- Don't add `@media` queries — OSUI handles responsiveness
|
|
400
404
|
- Don't override `.btn` base styles — create new named classes instead
|
|
401
405
|
|
|
@@ -428,39 +432,33 @@ When placing content on a dark background (`.background-primary`, `.background-s
|
|
|
428
432
|
- Links default to the primary color — use custom classes for white/light link colors
|
|
429
433
|
- Border colors may be invisible — use `border-color: rgba(255,255,255,0.1)` overrides
|
|
430
434
|
|
|
431
|
-
##
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
-
|
|
454
|
-
- **Check for invisible text** — buttons or links with white-on-white or same-color text/background
|
|
455
|
-
- **Confirm scrolling works** — the page should scroll within `.active-screen`
|
|
456
|
-
- **Verify icons render** — Font Awesome icons should not be 0×0 invisible boxes
|
|
457
|
-
- **Inspect computed styles** — confirm utility classes resolve as expected against OSUI
|
|
458
|
-
|
|
459
|
-
Do NOT run `npm install` yourself — only use `npm run dev` if `node_modules` already exists.
|
|
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
|
|
460
458
|
|
|
461
459
|
## Gotchas
|
|
462
460
|
|
|
463
|
-
- `.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**
|
|
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.
|
|
464
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.
|
|
465
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`.
|
|
466
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).
|
|
@@ -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,19 +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.
|
|
7
|
-
OSUI sets html { overflow: hidden }. The .active-screen
|
|
8
|
-
div is the actual scroll container for the page.
|
|
9
|
-
WITHOUT this rule, pages will not scroll.
|
|
10
|
-
──────────────────────────────────────────────────────── */
|
|
11
|
-
.active-screen {
|
|
12
|
-
overflow: hidden auto;
|
|
13
|
-
height: 100vh;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
/* ── 2. Brand tokens ─────────────────────────────────── */
|
|
6
|
+
/* ── 1. Brand tokens ─────────────────────────────────── */
|
|
17
7
|
:root {
|
|
18
8
|
/* Brand colors – change these to match your app */
|
|
19
9
|
--color-primary: #2979ff;
|
|
@@ -27,7 +17,7 @@
|
|
|
27
17
|
--font-size-base: 14px;
|
|
28
18
|
}
|
|
29
19
|
|
|
30
|
-
/* ──
|
|
20
|
+
/* ── 2. Custom styles ────────────────────────────────── */
|
|
31
21
|
/* Add custom component classes here.
|
|
32
22
|
Use named classes for button variants, dark-section overrides,
|
|
33
23
|
gradient backgrounds, etc. Keep OSUI utilities for layout/spacing. */
|