What is SAP Fiori Fundamentals?
SAP Fiori Fundamentals is a light-weight presentation layer that can be used with your UI framework of choice (e.g. Angular, React, Vue, etc.). With Fiori Fundamentals’ library of stylesheets and HTML tags, developers can build consistent Fiori apps in any web-based technology.
The library is modular so you can use as little or as much as you need.
The fully compiled, minified library is available via CDN for inclusion in your application.
<link href="//email@example.com/dist/fiori-fundamentals.min.css" rel="stylesheet">
The compiled CSS for the full library and modules, e.g., core, layout, etc., are distributed via NPM along with the SASS source.
This gives you incredible flexibility to use individual components and enable advanced customization options.
npm install fiori-fundamentals --save
Working with the project
Download and Installation
Clone Repository - Clone the repo using the git software of your choice or using the git command
git clone https://github.com/SAP/fundamental.git
Install Gulp - In addition to Node, you must have Gulp installed globally:
npm install -g gulp
Install Ruby Gems - These gems are needed to be installed for the documentation site:
gem install ruby bundle jekyll
Install Bundle Dependencies - Bundle dependencies must be installed the from
cd docsand then
Install NPM Dependencies:
Serve it locally - The documentation website is served from the
docs/_sitedirectory which is generated by Jekyll. To generate and launch the documentation site, simply execute the gulp command in the terminal at the root of the project directory:
The project has the following prerequisites and works best with the noted versions.
- Git (for downloading this repo)
- Node LTS 8.12.0
- Gulp 6.4.1
- SCSS (for CSS)
- Nunjucks (for testing)
- Ruby (for documentation site)
- Python 2 (for Jekyll - documentation site)
- Bundle (for documentation site)
- Jekyll (for documentation site)
- Xcode (for some macOS users)
At the time this version was released, there are no known limitations
Configuring icons path when importing SCSS
If you are importing .scss files in your project, the icons path needs to be configured in your project's .scss file before the Fiori Fundamentals scss import as described below. Please note that the path variable name has to be
$fd-icons-path in order to override the default value set in
$fd-icons-path : "../node_modules/fiori-fundamentals/scss/icons/"; // should be declared before the scss import @import "../node_modules/fiori-fundamentals/scss/all.scss";
How to obtain support
Details of where and how to start developing the new component can be found in
New branches should include the type (feature, bug, or hotfix) and the issue number or release number.
git checkout -b feature/000 git checkout -b bug/000 git checkout -b hotfix/000
Create a pull request against branch develop and assign it for review. When accepted, the reviewer will merge and delete the branch.
Copyright (c) 2018 SAP SE or an SAP affiliate company. All rights reserved. This file is licensed under the Apache Software License, v. 2 except as noted otherwise in the LICENSE file.