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
package/package.json
CHANGED
|
@@ -5,7 +5,7 @@ description: >
|
|
|
5
5
|
CSS classes. Use when creating .visual.html prototypes, styling components, using
|
|
6
6
|
layout patterns (Cards, Columns, Forms, Tables, Tabs), applying spacing, colors,
|
|
7
7
|
typography, or scaffolding screens — even if the user doesn't mention "OutSystems"
|
|
8
|
-
explicitly. Covers all
|
|
8
|
+
explicitly. Covers all 86 UI patterns across 8 categories, 16 core widgets, and
|
|
9
9
|
the complete design token system (spacing, colors, borders, shadows, typography).
|
|
10
10
|
compatibility: Requires outsystems-ui.css linked in the HTML file. Designed for VS Code agents.
|
|
11
11
|
metadata:
|
|
@@ -22,16 +22,134 @@ Build pixel-perfect OutSystems-compatible `.visual.html` prototypes using only t
|
|
|
22
22
|
1. **Utility-first styling** — use OSUI utility classes (`.padding-m`, `.text-bold`, `.background-primary`). Never use raw CSS properties or inline `style=""` attributes.
|
|
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
|
-
4. **Layout
|
|
26
|
-
```html
|
|
27
|
-
<div class="layout active-screen">
|
|
28
|
-
<!-- header, content, footer -->
|
|
29
|
-
</div>
|
|
30
|
-
```
|
|
31
|
-
The `.active-screen` class is REQUIRED or utility classes and CSS variables will not resolve.
|
|
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.
|
|
32
26
|
5. **Strip platform IDs** — never include `os-internal-id` or similar platform-generated attributes.
|
|
33
27
|
6. **Widget slots** — use `{{content}}` placeholders in templates where nested widgets would go.
|
|
34
|
-
|
|
28
|
+
|
|
29
|
+
## Layouts
|
|
30
|
+
|
|
31
|
+
OutSystems has four top-level page layouts. **Every screen must use one.** The layout controls the header, navigation, sidebar, and content structure. Do NOT invent your own layout wrapper — use the correct template.
|
|
32
|
+
|
|
33
|
+
### Choosing a Layout
|
|
34
|
+
|
|
35
|
+
| Layout | Class | Best for | Template |
|
|
36
|
+
|--------|-------|----------|----------|
|
|
37
|
+
| **LayoutTopMenu** | `.layout.layout-top` | Web apps with 3–6 top-level pages. Horizontal nav in header. | [assets/layout-top.html](assets/layout-top.html) |
|
|
38
|
+
| **LayoutSideMenu** | `.layout.layout-side` | Backoffice/admin apps with many pages or deep navigation. Vertical sidebar. | [assets/layout-side.html](assets/layout-side.html) |
|
|
39
|
+
| **LayoutBase** | `.layout.layout-blank` | Landing pages, marketing pages, public screens. Full-width sections. Same header/nav as LayoutTopMenu. | [assets/layout-base.html](assets/layout-base.html) |
|
|
40
|
+
| **LayoutBlank** | `.layout.blank` | Login, error pages, splash screens. No header, no footer, no navigation. | [assets/layout-blank.html](assets/layout-blank.html) |
|
|
41
|
+
|
|
42
|
+
**Mixing layouts** within one app is normal. Use LayoutBase for the landing page and LayoutTopMenu for inner pages. Or LayoutBlank for login and LayoutSideMenu for the main app.
|
|
43
|
+
|
|
44
|
+
### Layout Structure
|
|
45
|
+
|
|
46
|
+
#### LayoutTopMenu & LayoutBase (shared pattern)
|
|
47
|
+
|
|
48
|
+
```
|
|
49
|
+
.active-screen
|
|
50
|
+
└── .layout.layout-top.fixed-header (or .layout.layout-blank.fixed-header)
|
|
51
|
+
└── .main
|
|
52
|
+
├── header.header [role=banner]
|
|
53
|
+
│ └── .header-top.ThemeGrid_Container
|
|
54
|
+
│ └── .header-content.display-flex
|
|
55
|
+
│ ├── .menu-icon [role=button] ← hidden on desktop, visible on mobile
|
|
56
|
+
│ └── .header-navigation (flex:1)
|
|
57
|
+
│ └── nav.app-menu-content.display-flex [role=navigation]
|
|
58
|
+
│ ├── .header-logo ← padding-right for gap
|
|
59
|
+
│ │ └── .application-name ← logo + app title
|
|
60
|
+
│ ├── .app-menu-links [role=menubar] (flex:1)
|
|
61
|
+
│ │ └── <a role="menuitem"> ← .active on current page
|
|
62
|
+
│ ├── .app-login-info > .user-info
|
|
63
|
+
│ └── .app-menu-overlay [role=button]
|
|
64
|
+
├── .content
|
|
65
|
+
│ ├── .main-content.ThemeGrid_Container [role=main] ← LayoutTopMenu
|
|
66
|
+
│ │ ├── .content-breadcrumbs
|
|
67
|
+
│ │ ├── .content-top.display-flex.align-items-center
|
|
68
|
+
│ │ │ ├── .content-top-title.heading1
|
|
69
|
+
│ │ │ └── .content-top-actions
|
|
70
|
+
│ │ └── .content-middle
|
|
71
|
+
│ │
|
|
72
|
+
│ │ OR for LayoutBase:
|
|
73
|
+
│ ├── .main-content [role=main] ← NO ThemeGrid_Container
|
|
74
|
+
│ │ └── .content-middle
|
|
75
|
+
│ │ └── LayoutBaseSection (.full-width-section)
|
|
76
|
+
│ │ └── .ThemeGrid_Container (inside EACH section)
|
|
77
|
+
│ │
|
|
78
|
+
│ └── footer.content-bottom [role=contentinfo]
|
|
79
|
+
│ └── .footer.ThemeGrid_Container
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
#### LayoutSideMenu (different structure)
|
|
83
|
+
|
|
84
|
+
The sidebar `<aside>` sits OUTSIDE `.main`, as a sibling:
|
|
85
|
+
|
|
86
|
+
```
|
|
87
|
+
.active-screen
|
|
88
|
+
└── .layout.layout-side.fixed-header
|
|
89
|
+
├── aside.aside-navigation [role=complementary] ← OUTSIDE .main
|
|
90
|
+
│ └── Common.Menu block (same nav as header)
|
|
91
|
+
│ ├── .app-menu-content
|
|
92
|
+
│ │ ├── .header-logo > .application-name
|
|
93
|
+
│ │ ├── .app-menu-links [role=menubar]
|
|
94
|
+
│ │ └── .app-login-info > .user-info
|
|
95
|
+
│ └── .app-menu-overlay [role=button]
|
|
96
|
+
└── .main
|
|
97
|
+
├── header.header [role=banner]
|
|
98
|
+
│ └── .header-top.ThemeGrid_Container
|
|
99
|
+
│ └── .header-content.display-flex
|
|
100
|
+
│ ├── .menu-icon [role=button]
|
|
101
|
+
│ ├── .application-name
|
|
102
|
+
│ └── .header-navigation
|
|
103
|
+
│ └── Common.Menu block (duplicate for desktop)
|
|
104
|
+
└── .content
|
|
105
|
+
├── .main-content.ThemeGrid_Container [role=main]
|
|
106
|
+
│ ├── .content-breadcrumbs
|
|
107
|
+
│ ├── .content-top > .content-top-title + .content-top-actions
|
|
108
|
+
│ └── .content-middle
|
|
109
|
+
└── footer.content-bottom [role=contentinfo]
|
|
110
|
+
└── .footer.ThemeGrid_Container
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
#### LayoutBlank (minimal)
|
|
114
|
+
|
|
115
|
+
```
|
|
116
|
+
.active-screen
|
|
117
|
+
└── .layout.blank
|
|
118
|
+
└── .content [role=main]
|
|
119
|
+
└── .main-content
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
No header, no footer, no navigation. For login pages, error pages, etc.
|
|
123
|
+
|
|
124
|
+
### Common.Menu Block (standard navigation)
|
|
125
|
+
|
|
126
|
+
All layouts that have navigation use the **same `Common.Menu` block**. It provides:
|
|
127
|
+
- **App title/logo** in `.header-logo` > `.application-name`
|
|
128
|
+
- **Menu links** in `.app-menu-links` with `role="menubar"`
|
|
129
|
+
- Simple links: `<a role="menuitem" href="#">Page</a>`
|
|
130
|
+
- Subsequent links use `.ThemeGrid_MarginGutter` for spacing
|
|
131
|
+
- Active page: add `.active` class to the link
|
|
132
|
+
- Dropdown submenus: use `Navigation.Submenu` pattern (`.osui-submenu`)
|
|
133
|
+
- Subsequent links add `.ThemeGrid_MarginGutter` for spacing
|
|
134
|
+
- **User info** in `.app-login-info` > `.user-info`
|
|
135
|
+
- **Overlay** `.app-menu-overlay` for mobile menu backdrop
|
|
136
|
+
|
|
137
|
+
### Mobile Responsive Behavior
|
|
138
|
+
|
|
139
|
+
The layouts are **automatically responsive** via the OSUI CSS — no custom media queries needed:
|
|
140
|
+
|
|
141
|
+
| Viewport | body class | Menu behavior |
|
|
142
|
+
|----------|-----------|---------------|
|
|
143
|
+
| Desktop | `desktop landscape` | Menu links visible in header (top) or sidebar (side) |
|
|
144
|
+
| Tablet | `tablet` | Burger icon appears, menu slides in from left |
|
|
145
|
+
| Phone | `phone portrait` | Burger icon appears, menu slides in from left |
|
|
146
|
+
|
|
147
|
+
How it works:
|
|
148
|
+
1. `.menu-icon` (burger) is `display: none` on desktop, `display: flex` on tablet/phone
|
|
149
|
+
2. Clicking burger adds `.menu-visible` to the layout wrapper
|
|
150
|
+
3. `.app-menu-content` slides in: `position: fixed; left: -300px` → `translateX(300px)`
|
|
151
|
+
4. `.app-menu-overlay` goes from `opacity: 0` to `opacity: 1` with `pointer-events: auto`
|
|
152
|
+
5. Menu links switch from `flex-direction: row` (desktop) to `flex-direction: column` (mobile)
|
|
35
153
|
|
|
36
154
|
## Buttons
|
|
37
155
|
|
|
@@ -188,17 +306,18 @@ Most-used palette entries. Load [references/colors.md](references/colors.md) for
|
|
|
188
306
|
|
|
189
307
|
## UI Pattern Categories
|
|
190
308
|
|
|
191
|
-
OutSystems UI includes
|
|
192
|
-
|
|
193
|
-
| Category | Count |
|
|
194
|
-
|
|
195
|
-
| Adaptive | 12 |
|
|
196
|
-
| Content | 16 |
|
|
197
|
-
| Interaction | 18 |
|
|
198
|
-
| Navigation | 9 |
|
|
199
|
-
| Numbers | 6 |
|
|
200
|
-
| Utilities | 9 |
|
|
201
|
-
| Widgets | 16 |
|
|
309
|
+
OutSystems UI includes 86 patterns across 8 categories plus 16 core widgets. All verified HTML structures are in **[references/ui-patterns.md](references/ui-patterns.md)** — load it when building any UI pattern.
|
|
310
|
+
|
|
311
|
+
| Category | Count | Key patterns |
|
|
312
|
+
|----------|-------|-------------|
|
|
313
|
+
| Adaptive | 12 | Columns 2–6, Columns Medium/Small Left/Right, Gallery, Master Detail, Display On Device |
|
|
314
|
+
| Content | 16 | Card, Card Background, Card Item, Card Sectioned, Accordion, Alert, Tag, Section, Tooltip, User Avatar, Chat Message, Flip Content, Floating Content, List Item Content, Blank Slate, Section Group |
|
|
315
|
+
| Interaction | 18 | Animated Label, Carousel, Date Picker, Dropdown Search, Dropdown Tags, Floating Actions, Input With Icon, Lightbox Image, Notification, Range Slider, Search, Sidebar, Stacked Cards, Video, Action Sheet, Animate, Scrollable Area, Range Slider Interval |
|
|
316
|
+
| Navigation | 9 | Breadcrumbs, Tabs, Pagination, Wizard, Timeline Item, Bottom Bar Item, Section Index, Submenu, Overflow Menu |
|
|
317
|
+
| Numbers | 6 | Badge, Counter, Icon Badge, Progress Bar, Progress Circle, Rating |
|
|
318
|
+
| Utilities | 9 | Align Center, Button Loading, Center Content, Inline SVG, Margin Container, Separator, Mouse Events, Swipe Events, Touch Events |
|
|
319
|
+
| Widgets | 16 | Button, Button Group, Checkbox, Dropdown, Feedback Message, Form, Input, Link, List, Popover, Popup, Radio Group, Switch, Table, TextArea, Upload |
|
|
320
|
+
| Advanced | 1 | DropdownServerSide |
|
|
202
321
|
|
|
203
322
|
For complete screen scaffolds (Dashboard, List/Detail, Form, Login, etc.), load [references/screen-templates.md](references/screen-templates.md).
|
|
204
323
|
|
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>{{screen-name}}</title>
|
|
7
|
+
<link rel="stylesheet" href="../theme/outsystems-ui.css" />
|
|
8
|
+
<link rel="stylesheet" href="../theme/theme.css" />
|
|
9
|
+
</head>
|
|
10
|
+
<body class="desktop">
|
|
11
|
+
<!--
|
|
12
|
+
LayoutBase — Full-width sections, content-first.
|
|
13
|
+
Best for: landing pages, marketing pages, public-facing screens.
|
|
14
|
+
Uses the same header/nav as LayoutTopMenu, but the content area has
|
|
15
|
+
NO ThemeGrid_Container — each section is full-bleed with its own container.
|
|
16
|
+
|
|
17
|
+
Can be mixed with LayoutTopMenu in the same app (e.g. LayoutBase for
|
|
18
|
+
the landing page, LayoutTopMenu for inner pages).
|
|
19
|
+
-->
|
|
20
|
+
<div class="active-screen">
|
|
21
|
+
<div data-block="Layouts.LayoutBase" class="layout layout-blank fixed-header">
|
|
22
|
+
<div class="main">
|
|
23
|
+
|
|
24
|
+
<!-- ═══════════ HEADER (same nav as LayoutTopMenu) ═══════════ -->
|
|
25
|
+
<header role="banner" class="header">
|
|
26
|
+
<div class="header-top ThemeGrid_Container">
|
|
27
|
+
<div class="header-content display-flex">
|
|
28
|
+
|
|
29
|
+
<!-- Burger menu (hidden on desktop, visible on tablet/phone) -->
|
|
30
|
+
<div class="menu-icon" role="button" aria-label="Toggle the Menu" aria-haspopup="true">
|
|
31
|
+
<div class="menu-icon-line" aria-hidden="true"></div>
|
|
32
|
+
<div class="menu-icon-line" aria-hidden="true"></div>
|
|
33
|
+
<div class="menu-icon-line" aria-hidden="true"></div>
|
|
34
|
+
</div>
|
|
35
|
+
|
|
36
|
+
<!-- Top Navigation -->
|
|
37
|
+
<div class="header-navigation">
|
|
38
|
+
<nav class="app-menu-content display-flex" role="navigation">
|
|
39
|
+
|
|
40
|
+
<!-- App Logo & Name (inside nav for proper spacing) -->
|
|
41
|
+
<div class="header-logo">
|
|
42
|
+
<div class="application-name display-flex align-items-center full-height">
|
|
43
|
+
<!-- <img class="app-logo" src="logo.png" alt="" style="height: 32px;" /> -->
|
|
44
|
+
<span class="heading6 text-neutral-8">{{app-name}}</span>
|
|
45
|
+
</div>
|
|
46
|
+
</div>
|
|
47
|
+
|
|
48
|
+
<div class="app-menu-links" role="menubar">
|
|
49
|
+
<a class="active" role="menuitem" href="#">Home</a>
|
|
50
|
+
<a class="ThemeGrid_MarginGutter" role="menuitem" href="#">{{nav-link-2}}</a>
|
|
51
|
+
<a class="ThemeGrid_MarginGutter" role="menuitem" href="#">{{nav-link-3}}</a>
|
|
52
|
+
</div>
|
|
53
|
+
</nav>
|
|
54
|
+
<div class="app-menu-overlay" role="button" aria-label="Close Menu"></div>
|
|
55
|
+
</div>
|
|
56
|
+
|
|
57
|
+
</div>
|
|
58
|
+
</div>
|
|
59
|
+
</header>
|
|
60
|
+
|
|
61
|
+
<!-- ═══════════ CONTENT ═══════════ -->
|
|
62
|
+
<div class="content">
|
|
63
|
+
<div class="main-content" role="main">
|
|
64
|
+
<div class="content-middle">
|
|
65
|
+
|
|
66
|
+
<!--
|
|
67
|
+
LayoutBaseSection — Full-width section block.
|
|
68
|
+
Each section spans the full viewport width.
|
|
69
|
+
Put ThemeGrid_Container INSIDE each section for centered content.
|
|
70
|
+
Use background-* classes on the section for colored bands.
|
|
71
|
+
-->
|
|
72
|
+
|
|
73
|
+
<!-- Hero Section -->
|
|
74
|
+
<div data-block="Layouts.LayoutBaseSection" class="full-width-section padding-y-xxl">
|
|
75
|
+
<div class="ThemeGrid_Container">
|
|
76
|
+
<h1 class="heading1">{{hero-title}}</h1>
|
|
77
|
+
<p class="font-size-base text-neutral-7">{{hero-subtitle}}</p>
|
|
78
|
+
</div>
|
|
79
|
+
</div>
|
|
80
|
+
|
|
81
|
+
<!-- Feature Cards Section -->
|
|
82
|
+
<div data-block="Layouts.LayoutBaseSection" class="full-width-section padding-y-xxl background-neutral-0">
|
|
83
|
+
<div class="ThemeGrid_Container">
|
|
84
|
+
<div class="columns3">
|
|
85
|
+
<div class="column">{{feature-1}}</div>
|
|
86
|
+
<div class="column">{{feature-2}}</div>
|
|
87
|
+
<div class="column">{{feature-3}}</div>
|
|
88
|
+
</div>
|
|
89
|
+
</div>
|
|
90
|
+
</div>
|
|
91
|
+
|
|
92
|
+
<!-- CTA Section -->
|
|
93
|
+
<div data-block="Layouts.LayoutBaseSection" class="full-width-section padding-y-xxl">
|
|
94
|
+
<div class="ThemeGrid_Container">
|
|
95
|
+
<h3>{{cta-title}}</h3>
|
|
96
|
+
<p class="margin-top-base">{{cta-text}}</p>
|
|
97
|
+
</div>
|
|
98
|
+
</div>
|
|
99
|
+
|
|
100
|
+
</div>
|
|
101
|
+
</div>
|
|
102
|
+
</div>
|
|
103
|
+
|
|
104
|
+
</div>
|
|
105
|
+
</div>
|
|
106
|
+
</div>
|
|
107
|
+
</body>
|
|
108
|
+
</html>
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>{{screen-name}}</title>
|
|
7
|
+
<link rel="stylesheet" href="../theme/outsystems-ui.css" />
|
|
8
|
+
<link rel="stylesheet" href="../theme/theme.css" />
|
|
9
|
+
</head>
|
|
10
|
+
<body class="desktop">
|
|
11
|
+
<!--
|
|
12
|
+
LayoutBlank — No header, no footer, no navigation.
|
|
13
|
+
Best for: login pages, error pages, splash screens, or any screen
|
|
14
|
+
that needs full control with zero chrome.
|
|
15
|
+
|
|
16
|
+
This is the most minimal OutSystems layout.
|
|
17
|
+
-->
|
|
18
|
+
<div class="active-screen">
|
|
19
|
+
<div data-block="Layouts.LayoutBlank" class="layout blank">
|
|
20
|
+
|
|
21
|
+
<div class="content" role="main">
|
|
22
|
+
<div class="main-content">
|
|
23
|
+
{{content}}
|
|
24
|
+
</div>
|
|
25
|
+
</div>
|
|
26
|
+
|
|
27
|
+
</div>
|
|
28
|
+
</div>
|
|
29
|
+
</body>
|
|
30
|
+
</html>
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>{{screen-name}}</title>
|
|
7
|
+
<link rel="stylesheet" href="../theme/outsystems-ui.css" />
|
|
8
|
+
<link rel="stylesheet" href="../theme/theme.css" />
|
|
9
|
+
</head>
|
|
10
|
+
<body class="desktop">
|
|
11
|
+
<!--
|
|
12
|
+
LayoutSideMenu — Vertical navigation in a left sidebar.
|
|
13
|
+
Best for: backoffice/admin apps with many pages or deep navigation.
|
|
14
|
+
|
|
15
|
+
Structure differs from LayoutTopMenu:
|
|
16
|
+
- <aside> with the menu sits OUTSIDE .main (sibling, before .main)
|
|
17
|
+
- Header inside .main has the burger icon + app title + header-navigation
|
|
18
|
+
- On mobile: body changes to "phone portrait", burger becomes visible,
|
|
19
|
+
sidebar slides in from left via translateX, overlay appears
|
|
20
|
+
-->
|
|
21
|
+
<div class="active-screen">
|
|
22
|
+
<div data-block="Layouts.LayoutSideMenu" class="layout layout-side fixed-header">
|
|
23
|
+
|
|
24
|
+
<!-- ═══════════ SIDEBAR (outside .main) ═══════════ -->
|
|
25
|
+
<aside class="aside-navigation" role="complementary">
|
|
26
|
+
<nav class="app-menu-content display-flex" role="navigation">
|
|
27
|
+
<div class="header-logo">
|
|
28
|
+
<div class="application-name display-flex align-items-center full-height">
|
|
29
|
+
<!-- <img class="app-logo" src="logo.png" alt="" style="height: 32px;" /> -->
|
|
30
|
+
<span class="heading6 text-neutral-8">{{app-name}}</span>
|
|
31
|
+
</div>
|
|
32
|
+
</div>
|
|
33
|
+
<div class="app-menu-links" role="menubar">
|
|
34
|
+
<a class="active" href="#" role="menuitem">Home</a>
|
|
35
|
+
<a class="ThemeGrid_MarginGutter" href="#" role="menuitem">{{nav-link-2}}</a>
|
|
36
|
+
<a class="ThemeGrid_MarginGutter" href="#" role="menuitem">{{nav-link-3}}</a>
|
|
37
|
+
<a class="ThemeGrid_MarginGutter" href="#" role="menuitem">{{nav-link-4}}</a>
|
|
38
|
+
</div>
|
|
39
|
+
<div class="app-login-info">
|
|
40
|
+
<div class="user-info">
|
|
41
|
+
<span>{{user-name}}</span>
|
|
42
|
+
</div>
|
|
43
|
+
</div>
|
|
44
|
+
</nav>
|
|
45
|
+
<div class="app-menu-overlay" role="button"></div>
|
|
46
|
+
</aside>
|
|
47
|
+
|
|
48
|
+
<div class="main">
|
|
49
|
+
|
|
50
|
+
<!-- ═══════════ HEADER ═══════════ -->
|
|
51
|
+
<header role="banner" class="header">
|
|
52
|
+
<div class="header-top ThemeGrid_Container">
|
|
53
|
+
<div class="header-content display-flex">
|
|
54
|
+
|
|
55
|
+
<!-- Menu Toggle (hamburger) — visible on mobile, hidden on desktop -->
|
|
56
|
+
<div class="menu-icon" aria-label="Toggle the Menu" role="button" tabindex="0">
|
|
57
|
+
<div class="menu-icon-line"></div>
|
|
58
|
+
<div class="menu-icon-line"></div>
|
|
59
|
+
<div class="menu-icon-line"></div>
|
|
60
|
+
</div>
|
|
61
|
+
|
|
62
|
+
<!-- App Logo & Name -->
|
|
63
|
+
<div class="application-name display-flex align-items-center full-height">
|
|
64
|
+
<span class="heading6 text-neutral-8">{{app-name}}</span>
|
|
65
|
+
</div>
|
|
66
|
+
|
|
67
|
+
<!-- Header navigation (duplicate menu for desktop top bar + user info) -->
|
|
68
|
+
<div class="header-navigation">
|
|
69
|
+
<nav class="app-menu-content display-flex" role="navigation">
|
|
70
|
+
<div class="app-menu-links" role="menubar">
|
|
71
|
+
<!-- Same links as sidebar — shown in header on desktop -->
|
|
72
|
+
</div>
|
|
73
|
+
<div class="app-login-info">
|
|
74
|
+
<div class="user-info">
|
|
75
|
+
<div class="padding-y-base display-flex align-items-center">
|
|
76
|
+
<span>{{user-name}}</span>
|
|
77
|
+
</div>
|
|
78
|
+
</div>
|
|
79
|
+
</div>
|
|
80
|
+
</nav>
|
|
81
|
+
</div>
|
|
82
|
+
|
|
83
|
+
</div>
|
|
84
|
+
</div>
|
|
85
|
+
</header>
|
|
86
|
+
|
|
87
|
+
<!-- ═══════════ CONTENT ═══════════ -->
|
|
88
|
+
<div class="content">
|
|
89
|
+
<div class="main-content ThemeGrid_Container" role="main">
|
|
90
|
+
|
|
91
|
+
<div class="content-breadcrumbs"></div>
|
|
92
|
+
|
|
93
|
+
<div class="content-top display-flex align-items-center">
|
|
94
|
+
<div class="content-top-title heading1">{{page-title}}</div>
|
|
95
|
+
<div class="content-top-actions">
|
|
96
|
+
<!-- Action buttons go here -->
|
|
97
|
+
</div>
|
|
98
|
+
</div>
|
|
99
|
+
|
|
100
|
+
<div class="content-middle">
|
|
101
|
+
{{content}}
|
|
102
|
+
</div>
|
|
103
|
+
|
|
104
|
+
</div>
|
|
105
|
+
|
|
106
|
+
<footer role="contentinfo" class="content-bottom">
|
|
107
|
+
<div class="footer ThemeGrid_Container">
|
|
108
|
+
{{footer}}
|
|
109
|
+
</div>
|
|
110
|
+
</footer>
|
|
111
|
+
</div>
|
|
112
|
+
|
|
113
|
+
</div>
|
|
114
|
+
</div>
|
|
115
|
+
</div>
|
|
116
|
+
</body>
|
|
117
|
+
</html>
|
|
@@ -1,43 +1,66 @@
|
|
|
1
|
+
<!--
|
|
2
|
+
DEPRECATED — Use one of the specific layout templates instead:
|
|
3
|
+
- layout-top.html (LayoutTopMenu — horizontal nav, best for web apps)
|
|
4
|
+
- layout-side.html (LayoutSideMenu — sidebar nav, best for backoffice)
|
|
5
|
+
- layout-base.html (LayoutBase — minimal chrome, best for login/landing)
|
|
6
|
+
-->
|
|
1
7
|
<!DOCTYPE html>
|
|
2
8
|
<html lang="en">
|
|
3
9
|
<head>
|
|
4
10
|
<meta charset="UTF-8" />
|
|
5
11
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
-
<title>{{screen-name}}
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
This stylesheet provides all OSUI utility classes, pattern styles,
|
|
10
|
-
and CSS variables used in this prototype.
|
|
11
|
-
-->
|
|
12
|
-
<link rel="stylesheet" href="../theme/outsystemsui.css" />
|
|
13
|
-
<style>
|
|
14
|
-
/* Only add overrides here if absolutely necessary.
|
|
15
|
-
Prefer OSUI utility classes over custom CSS. */
|
|
16
|
-
</style>
|
|
12
|
+
<title>{{screen-name}}</title>
|
|
13
|
+
<link rel="stylesheet" href="../theme/outsystems-ui.css" />
|
|
14
|
+
<link rel="stylesheet" href="../theme/theme.css" />
|
|
17
15
|
</head>
|
|
18
|
-
<body>
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
and CSS variables to resolve correctly.
|
|
23
|
-
-->
|
|
24
|
-
<div class="layout active-screen">
|
|
16
|
+
<body class="desktop">
|
|
17
|
+
<div class="active-screen">
|
|
18
|
+
<div data-block="Layouts.LayoutTopMenu" class="layout layout-top fixed-header">
|
|
19
|
+
<div class="main">
|
|
25
20
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
21
|
+
<header role="banner" class="header">
|
|
22
|
+
<div class="header-top ThemeGrid_Container">
|
|
23
|
+
<div class="header-content display-flex">
|
|
24
|
+
<div class="menu-icon" role="button" aria-label="Toggle the Menu" aria-haspopup="true">
|
|
25
|
+
<div class="menu-icon-line" aria-hidden="true"></div>
|
|
26
|
+
<div class="menu-icon-line" aria-hidden="true"></div>
|
|
27
|
+
<div class="menu-icon-line" aria-hidden="true"></div>
|
|
28
|
+
</div>
|
|
29
|
+
<div class="header-navigation">
|
|
30
|
+
<nav class="app-menu-content display-flex" role="navigation">
|
|
31
|
+
<div class="header-logo">
|
|
32
|
+
<div class="application-name display-flex align-items-center full-height">
|
|
33
|
+
<span class="heading6 text-neutral-8">{{app-name}}</span>
|
|
34
|
+
</div>
|
|
35
|
+
</div>
|
|
36
|
+
<div class="app-menu-links" role="menubar">
|
|
37
|
+
<a class="active" role="menuitem" href="#">Home</a>
|
|
38
|
+
</div>
|
|
39
|
+
</nav>
|
|
40
|
+
<div class="app-menu-overlay" role="button" aria-label="Close Menu"></div>
|
|
41
|
+
</div>
|
|
42
|
+
</div>
|
|
43
|
+
</div>
|
|
44
|
+
</header>
|
|
30
45
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
46
|
+
<div class="content">
|
|
47
|
+
<div class="main-content ThemeGrid_Container" role="main">
|
|
48
|
+
<div class="content-top display-flex align-items-center">
|
|
49
|
+
<div class="content-top-title heading1">{{page-title}}</div>
|
|
50
|
+
<div class="content-top-actions"></div>
|
|
51
|
+
</div>
|
|
52
|
+
<div class="content-middle">
|
|
53
|
+
{{content}}
|
|
54
|
+
</div>
|
|
55
|
+
</div>
|
|
35
56
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
57
|
+
<footer role="contentinfo" class="content-bottom">
|
|
58
|
+
<div class="footer ThemeGrid_Container">{{footer}}</div>
|
|
59
|
+
</footer>
|
|
60
|
+
</div>
|
|
40
61
|
|
|
62
|
+
</div>
|
|
63
|
+
</div>
|
|
41
64
|
</div>
|
|
42
65
|
</body>
|
|
43
66
|
</html>
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>{{screen-name}}</title>
|
|
7
|
+
<link rel="stylesheet" href="../theme/outsystems-ui.css" />
|
|
8
|
+
<link rel="stylesheet" href="../theme/theme.css" />
|
|
9
|
+
</head>
|
|
10
|
+
<body class="desktop">
|
|
11
|
+
<!--
|
|
12
|
+
LayoutTopMenu — Horizontal navigation bar at the top.
|
|
13
|
+
Best for: web apps with few top-level pages (3–6 menu items).
|
|
14
|
+
The real OutSystems layout uses these structural classes exactly.
|
|
15
|
+
-->
|
|
16
|
+
<div class="active-screen">
|
|
17
|
+
<div data-block="Layouts.LayoutTopMenu" class="layout layout-top fixed-header">
|
|
18
|
+
<div class="main">
|
|
19
|
+
|
|
20
|
+
<!-- ═══════════ HEADER ═══════════ -->
|
|
21
|
+
<header role="banner" class="header">
|
|
22
|
+
<div class="header-top ThemeGrid_Container">
|
|
23
|
+
<div class="header-content display-flex">
|
|
24
|
+
|
|
25
|
+
<!-- Burger menu (hidden on desktop, visible on tablet/phone) -->
|
|
26
|
+
<div class="menu-icon" role="button" aria-label="Toggle the Menu" aria-haspopup="true">
|
|
27
|
+
<div class="menu-icon-line" aria-hidden="true"></div>
|
|
28
|
+
<div class="menu-icon-line" aria-hidden="true"></div>
|
|
29
|
+
<div class="menu-icon-line" aria-hidden="true"></div>
|
|
30
|
+
</div>
|
|
31
|
+
|
|
32
|
+
<!-- Top Navigation -->
|
|
33
|
+
<div class="header-navigation">
|
|
34
|
+
<nav class="app-menu-content display-flex" role="navigation">
|
|
35
|
+
|
|
36
|
+
<!-- App Logo & Name (inside nav for proper spacing) -->
|
|
37
|
+
<div class="header-logo">
|
|
38
|
+
<div class="application-name display-flex align-items-center full-height">
|
|
39
|
+
<!-- <img class="app-logo" src="logo.png" alt="" style="height: 32px;" /> -->
|
|
40
|
+
<span class="heading6 text-neutral-8">{{app-name}}</span>
|
|
41
|
+
</div>
|
|
42
|
+
</div>
|
|
43
|
+
|
|
44
|
+
<div class="app-menu-links" role="menubar">
|
|
45
|
+
<a class="active" role="menuitem" href="#">Home</a>
|
|
46
|
+
<a class="ThemeGrid_MarginGutter" role="menuitem" href="#">{{nav-link-2}}</a>
|
|
47
|
+
<a class="ThemeGrid_MarginGutter" role="menuitem" href="#">{{nav-link-3}}</a>
|
|
48
|
+
</div>
|
|
49
|
+
|
|
50
|
+
<!-- User Info -->
|
|
51
|
+
<div class="app-login-info">
|
|
52
|
+
<div class="user-info">
|
|
53
|
+
<div class="padding-y-base display-flex align-items-center">
|
|
54
|
+
<span>{{user-name}}</span>
|
|
55
|
+
</div>
|
|
56
|
+
</div>
|
|
57
|
+
</div>
|
|
58
|
+
</nav>
|
|
59
|
+
<div class="app-menu-overlay" role="button" aria-label="Close Menu"></div>
|
|
60
|
+
</div>
|
|
61
|
+
|
|
62
|
+
</div>
|
|
63
|
+
</div>
|
|
64
|
+
</header>
|
|
65
|
+
|
|
66
|
+
<!-- ═══════════ CONTENT ═══════════ -->
|
|
67
|
+
<div class="content">
|
|
68
|
+
<div class="main-content ThemeGrid_Container" role="main">
|
|
69
|
+
|
|
70
|
+
<!-- Breadcrumbs (optional) -->
|
|
71
|
+
<div class="content-breadcrumbs"></div>
|
|
72
|
+
|
|
73
|
+
<!-- Title Bar + Actions -->
|
|
74
|
+
<div class="content-top display-flex align-items-center">
|
|
75
|
+
<div class="content-top-title heading1">{{page-title}}</div>
|
|
76
|
+
<div class="content-top-actions">
|
|
77
|
+
<!-- Action buttons go here -->
|
|
78
|
+
</div>
|
|
79
|
+
</div>
|
|
80
|
+
|
|
81
|
+
<!-- Main Content Area -->
|
|
82
|
+
<div class="content-middle">
|
|
83
|
+
{{content}}
|
|
84
|
+
</div>
|
|
85
|
+
|
|
86
|
+
</div>
|
|
87
|
+
|
|
88
|
+
<!-- ═══════════ FOOTER ═══════════ -->
|
|
89
|
+
<footer role="contentinfo" class="content-bottom">
|
|
90
|
+
<div class="footer ThemeGrid_Container">
|
|
91
|
+
{{footer}}
|
|
92
|
+
</div>
|
|
93
|
+
</footer>
|
|
94
|
+
</div>
|
|
95
|
+
|
|
96
|
+
</div>
|
|
97
|
+
</div>
|
|
98
|
+
</div>
|
|
99
|
+
</body>
|
|
100
|
+
</html>
|