Module 15: UI5 Styling & Theming

Styling in SAPUI5 is not about writing random CSS.
It is about theme-aware, responsive, and consistent UI design aligned with SAP Fiori UX standards.

This module explains how styling works in UI5, from themes to custom CSS and theme parameters.

---

1. SAP Themes Overview

---

What is a SAP Theme?

A SAP theme defines:

• Colors
• Fonts
• Spacing
• Contrast

Themes ensure visual consistency across all SAP applications.

---

Standard SAP Themes

Theme	Use Case
Quartz Light	Default (modern)
Quartz Dark	Dark mode
Belize	Legacy
High Contrast	Accessibility

SAP Recommendation

Use Quartz themes for modern applications.

---

Theme Switching

Themes can be switched:

• Per user
• Without code changes
• At runtime

UX Benefit

UI adapts instantly without reload.

---

2. Custom CSS Usage

---

Where Custom CSS Lives

Custom styles are placed in:

webapp/css/style.css

And referenced in manifest.json.

---

Adding Custom CSS (manifest.json)

"sap.ui5": {
  "resources": {
    "css": [
      {
        "uri": "css/style.css"
      }
    ]
  }
}

---

Example Custom CSS

.myHighlight {
  font-weight: bold;
}

<Text text="Important" class="myHighlight" />

Rule

Never override SAP control internal CSS directly.

---

3. LESS Basics (Intro)

---

What is LESS?

LESS is a CSS preprocessor used by SAPUI5 themes.

Benefits:

• Variables
• Mixins
• Nested rules

---

Simple LESS Example

.myBox {
  padding: @sapUiContentPadding;
}

Note

LESS is mainly used in custom themes, not everyday apps.

---

4. Style Classes

---

Adding Style Classes in XML

<Button text="Save" class="sapUiSmallMarginTop" />

---

Common SAP Style Classes

Class	Purpose
sapUiSmallMargin	Small margin
sapUiMediumMargin	Medium margin
sapUiTinyMargin	Tiny margin
sapUiContentPadding	Consistent padding

Best Practice

Prefer SAP-provided style classes over custom CSS.

---

Adding Style Class Programmatically

this.byId("myButton").addStyleClass("myHighlight");

---

5. Responsive Design Principles

---

UI5 Responsiveness Strategy

UI5 achieves responsiveness via:

• Responsive controls
• Layouts (VBox, Grid, SimpleForm)
• Theme parameters
• Media queries (internally)

---

Responsive Best Practices

Follow These

• Use sap.m controls
• Avoid fixed widths/heights
• Use rem/em instead of px
• Test on multiple devices

Avoid These

• Absolute positioning
• Inline styles
• Fixed pixel layouts
• Device-specific hacks

---

6. Theme Parameters

---

What are Theme Parameters?

Theme parameters are global variables provided by UI5 themes.

Examples:

• Colors
• Spacing
• Font sizes

---

Using Theme Parameters in CSS

.myBox {
  background-color: var(--sapBackgroundColor);
  padding: var(--sapUiContentPadding);
}

Advantage

Theme parameters automatically adapt to light/dark themes.

---

7. Styling vs Theming (Important Distinction)

---

Aspect	Styling	Theming
Scope	App-specific	Global
Tool	CSS	Theme Designer
Change Impact	Local	System-wide

Interview Insight

Say: "Styling customizes apps, theming customizes the system."

---

8. Common Styling Mistakes

Avoid These

• Overwriting SAP CSS
• Ignoring theme parameters
• Hardcoding colors
• Excessive custom CSS

---

9. Interview-Grade Explanation

Q: How do you style SAPUI5 applications?

Answer:

I primarily use SAP-provided style classes and theme parameters to ensure Fiori compliance. Custom CSS is used sparingly and added via manifest.json, avoiding direct overrides of SAP control styles.

---

10. Summary

• SAPUI5 uses theme-based styling
• Quartz is the modern theme
• Custom CSS is allowed but limited
• Style classes simplify spacing
• LESS supports theme development
• Theme parameters enable adaptability

---

11. What's Next?

➡️ Module 16: Advanced Data Binding

Learning Tip

If your UI ignores theming, it will never look professional.