Overview

Fundamental Library Styles is a lightweight presentation layer that can be used with any UI framework to create visually consistent and professional-looking Fiori applications in web-based technologies such as Angular, React, and Vue. The library includes a collection of stylesheets and HTML tags that developers can utilize.

Features

• Lightweight presentation layer
• Compatible with any UI framework
• Collection of stylesheets and HTML tags
• Visually consistent and professional-looking Fiori applications
• Supports Angular, React, and Vue implementations

Installation

1. Include the library via CDN by adding the following script tag to your HTML file:

<script src="https://unpkg.com/fundamental-styles@{versionNumber}/dist/fundamental-styles.min.js"></script>

Replace {versionNumber} with the desired version number.

2. To use a specific theme, include the CSS variables files in your HTML:

<link rel="stylesheet" href="https://unpkg.com/fundamental-styles@{versionNumber}/dist/themes/{themeName}.css">

Replace {versionNumber} with the desired version number and {themeName} with the desired theme (e.g., sap_horizon).

3. Download the @sap-theming library for fonts and icons separately. Add the fonts and icons to your project and include the following CSS in your project:

@import url('path/to/fundamental-styles.css');
@import url('path/to/sap-theming.css');

4. Clone the Fundamental Library Styles repository using Git:

git clone https://github.com/SAP/fundamental-styles.git

5. Install the NPM dependencies:

npm install

6. Run the development playground and documentation website locally:

npm start

Summary

Fundamental Library Styles is a lightweight presentation layer that allows developers to create visually consistent and professional-looking Fiori applications in any web-based technology. The library is modular and can be used with any UI framework. It can be easily installed via CDN or NPM, and supports theming for customization. Additionally, it provides icons and project configuration guidelines for smooth integration into projects.