Getting Started

Fundamental Library Styles is a light-weight presentation layer using HTML and CSS with the following implementations under active development: Angular, React, and Vue. With Fundamental Library Styles’ library of stylesheets and HTML tags, developers can build consistent Fiori apps in any web-based technology.

Current version (GitHub)

0.8.0-rc.13

NPM

npm i fundamental-styles --save

https://unpkg.com/fundamental-styles@0.8.0-rc.13/dist/fundamental-styles.css

Fonts

SAP 72 font family was designed from the ground up and made it possible to meet SAP Fiori’s typographic requirements, including - legibility enhancements, font styles, brand voice, character set and language support.


72 A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0
​‘ ? ’ “ ! ” ( % ) [ # ] { @ } / & \ < - + ÷ × = > ® © $ € £ ¥ ¢ : ; , . *



Learn More about the SAP 72 Font Family

Icons

See the Icon Component for a list of icon class names. See Project Configuration below for instructions to include SAP Fiori 3 icons in your project.

Project Configuration

This project does not contain fonts and icons - they must be added to your project separately. Fonts and icons can be found at @sap-theming/theming-base-content. After importing fonts and icons from @sap-theming/theming-base-content, add the following to your css:

    @font-face {
        font-family: "72";
        src: url("path/to/fonts") format("woff"); // Bold, Light, Regular available in woff and woff2
        font-weight: normal;
        font-style: normal;
    };

    @font-face {
        font-family: "SAP-icons";
        src: url("path/to/icons") format("woff"); // available in woff, woff2 and ttf
        font-weight: normal;
        font-style: normal;
    }


If you are not supporting IE11, the recommended format is woff2. If supporting IE11, use woff.