UI5 CSS Classes in Design Studio

405 Views

Hi all,

in the UI5m templates, CSS classes from UI5 are used.

Examples from the UI5m basic layout

Header: sapMIBar sapMIBar-CTX sapMPageSubHeader sapMSubHeader-CTX sapMTB sapMTB-Auto-CTX

Footer: sapMBar sapMBar-CTX sapMContent-CTX sapMFooter-CTX sapMIBar sapMIBar-CTX sapMPageFooter

Dialog Box: sapMDialog sapMDialog-CTX sapMPopup-CTX sapUiPopupWithPadding sapUiShd

These classes come from the file library.css, which is commented with "UI development toolkit for HTML5 (OpenUI5)".

It includes media queries and many more classes that define the style of UI5 elements in the browser.

Just a few examples:

sapUiHideOnPhone or sapUiVisibleOnlyOnPhone (see How to find Namespace(API Reference) for Standa... | SCN)
sapUiBusy
sapUiScrollBarTouch
...

The standard template elements in Design Studio like the dialog boxes in the basic layout are very inflexible (fixed width and height) and need to be adapted for each usecase. Out of the box they don't even do well on mobile.

The UI5 classes could make it very easy to implement responsive components.

Does anyone have experience with the usage of these classes? Are they documented anywhere? The only thing I could find was the UI5 documentation and no CSS classes are mentioned here.

An insight on further integration of UI5 options and elements into Design Studio would also be appreciated.

Thanks for your input!

Best,

Moritz