OutSystems Front-End Developer Specialist cheat sheet

OutSystems Front-end Development Fundamentals - UI Design and Styling (ODC and O11)

• Screen composition: a Screen references a Layout block (Layouts/BaseLayout, Layouts/SideMenu, Layouts/Blank) plus Blocks; the Layout renders placeholders (Title, MainContent, Breadcrumbs) that the Screen fills - styling a Layout changes every Screen that uses it.

• CSS specificity in OutSystems theme CSS: inline Style attribute > Style Sheet Editor rules for the Screen/Block > module theme (ThemeGrid, Grid) > OutSystems UI framework styles. To beat a framework rule without !important, scope with a container class, e.g. .card.my-list .card-title.

• OutSystems UI (O11: Forge/OutSystems UI Web; ODC: OutSystems UI in the ODC asset library) supplies Patterns (Cards, Columns, Master Detail, Gallery, Tabs) and responsive Grid utilities; customize via CSS variables such as --color-primary and --space-* rather than editing framework stylesheets.

• Responsive breakpoints in the OutSystems Grid: phone < 768px, tablet 768–1023px (some references use 768–1024), desktop ≥ 1024px; Columns widths are set per device with the Phone/Tablet/Desktop tabs, and 'All' applies the value to every device.

• Mobile vs Reactive web: Reactive Web Apps render server-side with client-side reactivity and target browsers; Mobile Apps (MABS) are native shells using the same Reactive UI, so use the touch-friendly patterns (List on Phone, Tabs, Bottom Bar) and never rely on hover-only interactions.

• Style Sheet Editor placement: a Screen/Block-level stylesheet applies only to that element and its children; a Theme (module-level) stylesheet applies module-wide; global styles shared across modules belong in a Style Guide/theme module referenced by the app.

• Client-side validation and formatting: Input widgets use Built-in Validations (Required, Integer, Decimal, Email, Phone) rendered as HTML5 attributes plus server-side checks; set Input Type (text, number, date, password) so mobile keyboards and date pickers behave correctly.

• Images and icons: use the Image widget with a Screen/Block-resolved resource or External URL, always setting the Alt Text for accessibility; icons come from the OutSystems UI icon font (Font Awesome subset) via the Icon widget, sized with the Size property, not ad-hoc font-size CSS.

• Pixel-perfect workflow: inspect the rendered DOM in browser DevTools, identify which theme rule wins by specificity, then override in the Screen's Style Sheet with a scoped selector; avoid !important because it blocks later theme updates and breaks encapsulation.