fiori-fundamentals

SAP Fiori Fundamentals

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.

Learn more at http://sap.github.io/fundamental/

We are also working on Angular, React and Vue implementations.

Getting Started

The library is modular so you can use as little or as much as you need.

Full library

The fully compiled, minified library is available via CDN for inclusion in your application.

<link href="//unpkg.com/fiori-fundamentals@latest/dist/fiori-fundamentals.min.css" rel="stylesheet">

NPM

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

NOTE: We only distribute the fonts, icons and CSS and the SASS source, not the full project or HTML for specific components.

Working with the Project

You can clone the entire repo and work in the full project where we manage the documentation and the test framework.

Download and Installation

1. 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

2. Install NPM Dependencies: npm install

3. Install Ruby Gems - These gems are needed to be installed for the documentation site: gem install ruby bundle jekyll

4. Install Bundle Dependencies - Bundle dependencies must be installed the from docs directory: cd docs and then bundle install

5. Serve it locally - The documentation website is served from the docs/_site directory which is generated by Jekyll. To generate and launch the documentation site, from the root simply execute npm start

Project Dependencies

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)

Limitations

At the time this version was released, there are no known limitations.

Known Issues

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 scss/icons/icon.scss.

$fd-icons-path : "../node_modules/fiori-fundamentals/scss/icons/"; // should be declared before the scss import

@import "../node_modules/fiori-fundamentals/scss/all.scss";

Support

If you encounter an issue, you can create a ticket or post on the Fundamentals Slack channel.

Contributing

If you want to contribute, please check the Contribution Guidelines.

Versioning

The fiori-fundamentals library follows Semantic Versioning. These components strictly adhere to the [MAJOR].[MINOR].[PATCH] numbering system (also known as [BREAKING].[FEATURE].[FIX]).

Merges to the master branch will be published as a prerelease. Prereleases will include an rc version (e.g. [MAJOR].[MINOR].[PATCH]-rc.[RC]).

License

Copyright (c) 2019 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.