Themes, CSS Styling, OutSystems UI, and UI Patterns (Popup/Modal)

Quick Answer: A Theme is a CSS-based module that styles all Screens in a module. StyleClasses applies CSS class names to any widget. OutSystems UI is the built-in framework of widgets, templates, and UI patterns (Popup, Modal, Tabs, Accordion). The responsive layout grid is a 12-column system with phone/tablet/desktop breakpoints. You use OutSystems UI classes before writing custom CSS.

Themes

A Theme in OutSystems is a CSS-based module defining the visual identity of Screens. A Theme contains CSS files (and optionally CSS variables, images, JavaScript) cascading to all widgets on Screens using that Theme. You set it at the module level; it applies to all Screens unless a Screen overrides it.

Exam trap: a Theme is CSS-based, not JSON or XML. The chain is: UI module → Module.Theme property → Theme module → CSS → styles cascade to Screens and widgets.

When you create a new Reactive Web module, Service Studio sets a default Theme (typically OutSystems UI Theme). Custom Themes are created by forking the default and modifying CSS variables (colors, spacing, typography), not writing CSS from scratch.

StyleClasses

Every widget has a StyleClasses property accepting CSS class names, space-separated. Example: "btn btn-primary padding-m" applies three classes, resolved against the Theme's CSS and OutSystems UI CSS library.

StyleClasses is the primary styling mechanism without per-widget CSS. Use OutSystems UI predefined classes first (tested, responsive, theme-aware); add custom classes only when they don't cover your need.

The ExtendedClass property appends classes without overriding defaults — useful when a widget already has a default class. StyleClasses replaces the default list; ExtendedClass augments it.

OutSystems UI Framework

OutSystems UI is the built-in framework shipped with the platform. It provides:

1. Widgets: UI widgets (Button, Link, Form, List, Container) pre-styled with the default Theme.
2. Templates: Screen templates (Empty, Dashboard, List+Detail, Login) that scaffold layout and placeholders.
3. UI Patterns: reusable design solutions (Blocks + CSS + JavaScript) — Popup Editor, Modal, Tabs, Accordion, Carousel, Notification.
4. Building Blocks: pre-composed widget combinations (e.g., "Card with Image and Action") you drag onto a Screen.

OutSystems UI is the default styling foundation — it provides the responsive grid, widget classes, and UI patterns. You build on top of it, not replace it.

UI Patterns: Popup Editor and Modal

UI Patterns are reusable design solutions in OutSystems UI — composed of Blocks and CSS, not custom code. Two high-yield patterns:

Popup Editor

The Popup Editor displays transient content (detail panel, edit form) in an overlay. It consists of:

• A trigger (Button or Link) that sets a Boolean to show the popup.
• The Popup widget (from OutSystems UI), with Show bound to that Boolean.
• Content inside (a Form, a detail Container).
• A close mechanism (X button or backdrop click) setting the Boolean to false.

Modal

The Modal is a dialog overlaying the Screen, dimming the background and centering content. It blocks interaction until dismissed. Typical use: confirmation dialogs ("Are you sure you want to delete?") and edit forms that should not navigate away.

Exam trap: Popup Editor and Modal are OutSystems UI patterns — drag from the toolbox, not code from scratch. Driven by a Boolean Show variable; no server action needed. Set true to display, false to hide.

Responsive Layout Grid

OutSystems UI provides a responsive 12-column grid. You use Columns containers with classes specifying how many of 12 columns the content spans at each breakpoint.

Key behaviors:

• The grid is 12 columns wide. col-md-6 spans 6 (half) on tablet/desktop; on phone it stacks full width.
• Columns stack on small screens and spread on larger ones — automatic, no media-query CSS needed.
• Compose rows by placing Columns inside a Row; columns should sum to 12 (or they wrap).

Exam trap: the grid stacks columns on phone and spreads on larger screens automatically — no media queries or conditional visibility needed. The OutSystems UI classes handle breakpoints. The exam may show columns stacking on phone and ask why — the answer is built-in responsive breakpoints, not custom CSS.

Putting It Together

The styling stack: raw CSS in the Theme → OutSystems UI classes → custom StyleClasses (add what OutSystems UI lacks) → UI Patterns (composed blocks). The exam tests the order: use OutSystems UI first; custom CSS only when necessary. Themes cascade to all Screens; StyleClasses apply per-widget; UI Patterns are drag-and-drop composites.