Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

fundamental-styles

Package Overview
Dependencies
Maintainers
1
Versions
2229
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

fundamental-styles

Fundamental Styles 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-styles/

  • 0.2.0-rc.18
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
27K
decreased by-2.19%
Maintainers
1
Weekly downloads
 
Created
Source

Fundamental Styles

npm version Build Status Slack

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/

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.

CDN

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

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

NPM Package

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 fundamental-styles --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 Fundamental Styles.

Working with the Project

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-styles.git

  2. Install NPM Dependencies: npm install

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

  4. Serve the documentation website locally - npm start

  5. Serve the development playground locally: npm run start:playground

Project Dependencies

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)

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 Fundamental Styles 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/fundamental-styles/scss/icons/"; // should be declared before the scss import

@import "../node_modules/fundamental-styles/scss/fundamental-styles.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. Also check the Development Guidelines and Visual Testing Guide.

Versioning

The fundamental-styles 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:

  • 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 role, aria-*, data-*)
  • 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 role, aria-*, data-*)

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.

FAQs

Package last updated on 30 Jun 2019

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc