Skip to content

Latest commit

 

History

History
65 lines (46 loc) · 2.03 KB

CommonCSS.mdx

File metadata and controls

65 lines (46 loc) · 2.03 KB

import { Footer, TableOfContent } from '@sb/components'; import { Meta } from '@storybook/blocks'; import { Link, MessageStrip } from '@ui5/webcomponents-react';

Using Common CSS in your application

We recommend using the @sap-ui/common-css package for applying common styling blocks based on SAP Fiori Design Guidelines.

<MessageStrip hideCloseButton children={ <> This documentation is only showing a few samples which we consider to be useful for applications using UI5 Web Components for React. You can find the full documentation for SAP UI Common CSS{' '} here. </> }



Content Paddings

Full Documentation

You can import the content paddings by adding the following imports to your project:

import '@sap-ui/common-css/dist/sap-content-paddings.css';
import '@sap-ui/common-css/dist/sap-container-type.css';

Responsive Content Paddings

You can apply a dynamic content padding for your element by applying the following classes to your HTML:

<div className="sap-container-type-inline-size">
  <div className="sap-content-paddings-container">I will have a responsive content padding</div>
</div>

Margins & Paddings

Common CSS is offering classes that you can use to create some spacing between elements.

Full Documentation:

<div className="sap-padding-x-small">
  <button className="sap-margin-begin-small">Start Button</button>
  <button className="sap-margin-x-small">Mid Button</button>
  <button className="sap-margin-end-small">End Button</button>
</div>