OutSystems Front-End Developer Specialist key terms

A global styling layer in OutSystems that defines colors, fonts, spacing, and component appearance across an entire module or app, applied through CSS variables and generated stylesheets.

A visual tool in Service Studio for adjusting theme-level settings such as primary color, typography scale, and border radius without editing raw CSS, generating updated styles automatically.

Custom properties defined in the theme (for example color and spacing tokens) that components reference, allowing a single change to propagate consistently to every styled element that uses them.

Named, reusable design decisions such as color, spacing, and typography values stored centrally in the theme so that styling stays consistent and maintainable across screens and components.

A module-level CSS resource in OutSystems where developers add custom rules, either globally or scoped to a screen or block, overriding or extending the default theme styling.

The rule that determines which conflicting CSS declaration wins, based on selector type; understanding it is essential when custom styles must override generated theme rules without breaking other screens.

Styling applied directly to a single widget through its Style property or attribute, affecting only that element and overriding stylesheet rules unless higher-specificity selectors or important flags apply.

A widget property listing one or more CSS class names applied to the rendered HTML element, letting developers reuse stylesheet rules instead of repeating inline styling on each screen.

A design approach where screen structure adapts to viewport size using breakpoints, fluid containers, and column behavior, so the same screen remains usable on phone, tablet, and desktop.

A defined viewport width threshold at which layout or styling rules change, typically configured per device type in the theme to control column stacking and visibility.

A column-based layout framework in OutSystems UI where content is placed in columns that reflow or stack across breakpoints, forming the backbone of responsive page structure.

A layout widget that groups and positions child widgets, offering alignment, direction, gap, and wrapping controls that map to modern flexbox layout behavior.

A CSS layout model used by OutSystems layout containers to align and distribute children along an axis, controlled through direction, justify, align, and gap properties on the widget.

A structural widget such as container, columns, or list that arranges other widgets on screen; choosing the right layout widget prevents unnecessary custom CSS and keeps screens maintainable.

A reusable screen fragment with its own logic and styling that can be placed on multiple screens, helping keep UI consistent while isolating layout and style scope.

A top-level UI unit that renders a page for web or mobile, containing widgets, layout, and its own stylesheet scope; screens are the primary composition surface for front-end work.

A screen type rendered in a browser, supporting responsive layouts, URLs, and server-side rendering patterns; styling and layout choices differ from mobile screens.

A screen type rendered inside a native mobile app shell, where styling must account for device conventions, safe areas, and native navigation patterns rather than browser behavior.

The standard UI framework providing ready-made patterns, components, and styles for OutSystems apps, forming the base layer that themes and custom styles extend.

A prebuilt interface component in OutSystems UI, such as a card, accordion, or carousel, that bundles markup, styling, and behavior so developers avoid rebuilding common interactions.

A visual element placed on a screen, from simple text and images to complex lists and containers; each widget exposes properties that control its rendering and styling.

A configurable attribute on a widget, such as Style, Style Classes, or Visible, that changes how the element renders or behaves at runtime without requiring custom code.

A styling strategy that defines base styles for small viewports first, then layers enhancements at larger breakpoints, matching how OutSystems responsive themes cascade rules.

The practice of matching a design specification exactly, including spacing, typography, and color, verified through inspection tools and careful use of theme tokens rather than ad hoc overrides.

Browser inspection tools used to view rendered markup, computed styles, and applied classes, essential for diagnosing why a widget looks different from the intended design.

A storage layer that keeps previously served assets such as stylesheets and scripts; stale cache can make style changes appear missing, so invalidation matters after theme edits.

The OutSystems integrated development environment where screens, blocks, themes, and stylesheets are authored, previewed, and published to an environment.

The action that compiles a module and deploys changes, including styling and layout updates, to the target environment so users see the new version.

OutSystems Developer Cloud, the container-based platform generation where apps are built, deployed, and managed with its own studio and portal, sharing core UI concepts with O11.

The earlier platform generation (OutSystems 11) with its own lifecycle and portal conventions; many UI and theming concepts carry over, but tooling and deployment differ from ODC.

Designing and styling interfaces usable by people with disabilities, covering contrast, focus states, labels, and semantic markup that OutSystems UI patterns partially provide by default.

An HTML attribute conveying roles, states, or labels to assistive technology; applied to widgets when custom markup or styling removes native semantic meaning.

Styling that adapts to language and locale differences, such as right-to-left layouts or longer translated labels, requiring flexible widths and direction-aware rules.

A targeted stylesheet rule written to change a specific component's appearance beyond theme settings, ideally scoped narrowly to avoid unintended effects elsewhere.

Preparing and serving images at appropriate dimensions and formats so pages load quickly; oversized assets undermine perceived quality even when layout and styling are correct.

How web fonts are declared and fetched, affecting render timing and layout stability; incorrect setup causes flashes of unstyled text or inconsistent typography across screens.