Updated: August 11, 2020

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
Spacing adapts to different screen sizes
Developer Hint
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

Resources

Elements and Controls

Implementation