@sap-ui/common-css

SAP UI Common CSS Package

What is SAP UI Common CSS?

SAP UI Common CSS Package is a set of utility classes and SCSS mixins that allow developers to add padding, margin, color, font, shadow, and more to their applications and controls without writing custom css. The class naming follows the BEM (Block Element Modifier) methodology and the values of the CSS rules are based on SAP Fiori Design Guidelines. Further customization is possible by using the SCSS mixins and providing user defined values as parameters. SCSS Mixins help in defining styles that can be re-used throughout the project's stylesheet.

Getting Started

1. SAP UI Common CSS Package included in Fundamental Styles

SAP UI Common CSS Package is part of the Fundamental Styles. If you have installed the Fundamental Styles in your project, you automatically get the SAP UI Common CSS Package.

Learn more at http://sap.github.io/fundamental-styles/

2. SAP UI Common CSS Package on its own

SAP UI Common CSS Package can stand on its own. To install the package:

npm i @sap-ui/common-css

Common CSS Properties

The SAP UI Common CSS Package consists of property values that align with the SAP Fiori designs.

border-radius border content-paddings display flex focus margin media-queries padding shadow typography