fiori-fundamentals
Advanced tools
Fiori Fundamentals is a Design System and HTML/CSS Component Library used to build modern Product User Experiences with the SAP look and feel. Learn more about this project at - http://sap.github.io/fundamental/
SAP Fundamentals is deprecated. Fundamental Styles is its successor. If you are using this library consider migrating over to fundamental-styles. SAP Fundamentals' Documentation Site is hosted here for time being.
SAP Fundamentals is a light-weight presentation layer that can be used with your UI framework of choice (e.g. Angular, React, Vue, etc.). With 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/old.html
We are also working on Angular, React and Vue implementations.
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="//unpkg.com/fiori-fundamentals@latest/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
NOTE: We only distribute the fonts, icons and compiled CSS and the SASS source, not the full project or HTML for specific components. If your project uses LESS, see LESS compatible Fiori Fundamentals.
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 NPM Dependencies: npm install
Install Ruby Gems - These gems are needed to be installed for the documentation site. Navigate to the docs folder and gem install ruby bundler jekyll
Serve the documentation website locally - npm start
Serve the development playground locally: npm run start:playground
The project has the following prerequisites:
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";
If you encounter an issue, you can create a ticket or post on the Fundamentals Slack channel.
If you want to contribute, please check the Contribution Guidelines. Also check the Development Guidelines and Visual Testing Guide.
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]).
The following circumstances will be considered a MAJOR or BREAKING change:
The following circumstances will NOT be considered a MAJOR or BREAKING change:
role, aria-*, data-*)role, aria-*, data-*)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.
1.7.6-rc.1 (2020-07-17)
FAQs
Fiori Fundamentals is a Design System and HTML/CSS Component Library used to build modern Product User Experiences with the SAP look and feel. Learn more about this project at - http://sap.github.io/fundamental/
The npm package fiori-fundamentals receives a total of 1,949 weekly downloads. As such, fiori-fundamentals popularity was classified as popular.
We found that fiori-fundamentals demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PEP 770 proposes adding SBOM support to Python packages to improve transparency and catch hidden non-Python dependencies that security tools often miss.
Security News
Socket CEO Feross Aboukhadijeh discusses open source security challenges, including zero-day attacks and supply chain risks, on the Cyber Security Council podcast.
Security News
Research
Socket researchers uncover how threat actors weaponize Out-of-Band Application Security Testing (OAST) techniques across the npm, PyPI, and RubyGems ecosystems to exfiltrate sensitive data.