What is Fundamental Styles?
Fundamental Styles is a light-weight presentation layer that can be used with your UI framework of choice (e.g. Angular, React, Vue, etc.). With Fundamental Styles’ 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-styles/
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/fundamental-styles@latest/dist/fundamental-styles.css" rel="stylesheet">
The compiled CSS for the full library and modules, e.g., core, layout, etc., are distributed via NPM.
npm install fundamental-styles --save
NOTE: We only distribute the fonts, icons and compiled CSS for each component, not the full project or HTML for specific components.
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-styles.git
Install NPM Dependencies:
Install Ruby Gems - These gems are needed to be installed for the documentation site. Navigate to the
gem install ruby bundler jekyll
Serve the documentation website locally -
Serve the development playground locally:
npm run start:playground
The project has the following prerequisites:
- Git (for downloading this repo)
- Node LTS
- Ruby (for running the documentation website locally)
- Docker (for running the visual regression testing framework)
fundamental-styles library follows Semantic Versioning. These components strictly adhere to the
[MAJOR].[MINOR].[PATCH] numbering system (also known as
Merges to the
master branch will be published as a prerelease. Prereleases will include an rc version (e.g.
The following circumstances will be considered a MAJOR or BREAKING change:
- Droppping existing classnames, css variables, color names, color groups, spacing parameters
- The existing underlying HTML markup of a component is altered
- An existing unit test is altered to account for either of the above
The following circumstances will NOT be considered a MAJOR or BREAKING change:
- Introducing new classnames, css variables, color names, color groups, spacing parameters
- Non-visual HTML attribute changes/additions (such as
- Adding or modifying CSS properties and values of existing classnames.
- An existing unit test is altered to account for non-visual HTML attribute changes/additions (such as
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.