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