Responsive Spacing System
Intro
The responsive spacing system uses responsive padding and margin style sheet classes to control and optimize padding between elements that are common to all SAP Fiori interfaces.
Responsive Padding and Margin Classes
Responsive padding and margin classes control:
- The left and right spacing within the header and content areas
- The space between components, such as tables and forms
These classes adapt to different screen sizes at specific breakpoints to ensure that no space is wasted on small screens and that content has more room to breathe on large screens:
- Size S screen: Up to 599 pixels
- Size M screen: Between 600 pixels and 1023 pixels
- Size L screen: Between 1024 pixels and 1439 pixels
- Size XL screen: 1440 pixels or more
The visual below illustrates how the padding adapts to different screen sizes.
Spacing adapts to different screen sizes
The spacing system is built into SAP Fiori Elements, but it must be implemented manually in freestyle SAP Quartz-themed applications using the responsive margin and padding classes in SAPUI5. You can use individual spacing and padding classes to apply individual spacing inside or around controls.
More Information
- How to Code Padding and Margin Classes (YouTube video)
- Enabling Responsive Paddings (SAPUI5 Demo Kit)
- Using Predefined CSS Margin Classes (SAPUI5 Demo Kit)
Resources
Elements and Controls
- Content Density (guideline)
Implementation
- Standard Margins (implementation)
- Standard Paddings (implementation)
Visual Design
[internal_only][/internal_only]
- Responsive Spacing Specification
(visual design specification) - Paddings and Margins
(visual design specification) - Content Density
(visual design specification)