I85PREP
⌘ K
OutSystems Front-End Developer Specialist study materials
OutSystems Front-End Developer Specialist study resources

OutSystems Front-End Developer Specialist: Front-end Fundamentals: UI Design and Styling for Pixel-Perfect Web and Mobile Apps (ODC and O11)

OutSystems Front-End Developer Specialist · Work through your exam, one topic at a time.

All guide sections

Front-end Fundamentals: UI Design and Styling for Pixel-Perfect Web and Mobile Apps (ODC and O11)

This domain tests whether you can turn a design specification into maintainable UI in OutSystems instead of one-off CSS. It covers the styling stack shared by ODC and O11 Reactive Web apps, the extra rules that apply to Traditional Web modules, and the concrete widgets, theme settings and extended properties an assessor expects you to name.

Style in layers, not in widgets

Every decision should sit as high in this stack as it can:

  • Theme - colours, typography, spacing and border radius are edited in the Theme Editor and generated into CSS; the theme's Style Sheet holds CSS that must apply app-wide.
  • Layout - Layouts and Placeholders define the chrome (header, side menu, content area) that Screens and Blocks reuse.
  • Screen or Block - structure only; anything reusable belongs in a Block, not copy-pasted.
  • Widget - Style Classes (space-separated class names), Style (inline CSS), and extended properties such as data-* and aria-* for behaviour and accessibility.

The grid is your pixel grid

A Container centres and pads content; Columns splits it. Each Columns widget exposes widths per device (desktop, tablet, phone), so responsiveness is configured on the widget, not written as media queries. Use the 12-column scheme: 4 of 12 for a three-up row, 12 of 12 when it stacks.

Worked example

A design shows three cards on desktop, one per row on phone, with the brand accent and 16px inner padding. Reasoning: drop a Columns widget with three Column items, set desktop width to 4 of 12 and phone width to 12 of 12 (leave tablet Auto); style the card container with the theme's primary background class rather than a hex value in Style; apply the OutSystems UI spacing utility for medium padding instead of hardcoded pixels. Result: the accent and spacing change everywhere when the theme changes, and no media queries were written.

Traps that cost marks

  • Hardcoding hex colours or pixel values in Style - the next theme change breaks the screen.
  • Reaching for !important instead of fixing selector specificity.
  • Targeting OutSystems-generated internal classes; they are not a stable contract across versions.
  • In Traditional Web, a Web Block's own Style Sheet is scoped to the block: parent-page rules do not reach inside it, so style the block's own widgets.
  • Forgetting phone widths on Columns, which is the usual cause of horizontal scrolling on mobile.