All Projects → SAP → Fundamental React

SAP / Fundamental React

Licence: apache-2.0
React implementation of the reusable component library designed in Fundamental Library Styles

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Fundamental React

Mui Treasury
A collection of ready-to-use components based on Material-UI
Stars: ✭ 1,821 (+1130.41%)
Mutual labels:  open-source, react-components
Minimal Feedback
🗳 minimal-feedback is a blazingly fast and highly customizable component to get user feedback.
Stars: ✭ 78 (-47.3%)
Mutual labels:  open-source, react-components
Startbootstrap Agency
Start Bootstrap is an open source library of free Bootstrap themes and templates. All of the free themes and templates on Start Bootstrap are released under the MIT license, which means you can use them for any purpose, even for commercial projects.
Stars: ✭ 1,810 (+1122.97%)
Mutual labels:  open-source
Synergy
Synergy is a framework for building modular, configurable and scalable UI components for React-DOM projects
Stars: ✭ 146 (-1.35%)
Mutual labels:  react-components
Simple Gallery
Browse your memories without any interruptions with this photo and video gallery
Stars: ✭ 2,128 (+1337.84%)
Mutual labels:  open-source
Thehive4py
Python API Client for TheHive
Stars: ✭ 143 (-3.38%)
Mutual labels:  open-source
Fluentui
Fluent UI web represents a collection of utilities, React components, and web components for building web applications.
Stars: ✭ 12,587 (+8404.73%)
Mutual labels:  react-components
Logchimp
Track your customers feedback to build better products with LogChimp
Stars: ✭ 139 (-6.08%)
Mutual labels:  open-source
React Border Wrapper
A wrapper for placing elements along div borders.
Stars: ✭ 147 (-0.68%)
Mutual labels:  react-components
Opensourcegames
Infos and build tips for open source games.
Stars: ✭ 144 (-2.7%)
Mutual labels:  open-source
React User Tour
Give your user a guided tour around your application
Stars: ✭ 146 (-1.35%)
Mutual labels:  open-source
Startbootstrap Simple Sidebar
Start Bootstrap is an open source library of free Bootstrap templates and themes. All of the free templates and themes on Start Bootstrap are released under the MIT license, which means you can use them for any purpose, even for commercial projects.
Stars: ✭ 1,833 (+1138.51%)
Mutual labels:  open-source
Startbootstrap Clean Blog Jekyll
Start Bootstrap is an open source library of free Bootstrap templates and themes. All of the free templates and themes on Start Bootstrap are released under the MIT license, which means you can use them for any purpose, even for commercial projects.
Stars: ✭ 1,837 (+1141.22%)
Mutual labels:  open-source
Facebook Scripts Dom Manipulation
An open-source project includes many scripts with no Access Token needed for Facebook users by directly manipulating the DOM.
Stars: ✭ 146 (-1.35%)
Mutual labels:  open-source
Chatbotwidget
ChatBot UI to integrate with Rasa's REST channel
Stars: ✭ 142 (-4.05%)
Mutual labels:  open-source
Ocsinventory Ocsreports
Webconsole for OCS Inventory NG
Stars: ✭ 145 (-2.03%)
Mutual labels:  open-source
Translateproject
Linux中国翻译项目
Stars: ✭ 1,847 (+1147.97%)
Mutual labels:  open-source
Openhow
Open-source reimplementation of Gremlin's Hogs of War (PC/PSX).
Stars: ✭ 144 (-2.7%)
Mutual labels:  open-source
Moderncppstarter
🚀 Kick-start your C++! A template for modern C++ projects using CMake, CI, code coverage, clang-format, reproducible dependency management and much more.
Stars: ✭ 2,381 (+1508.78%)
Mutual labels:  open-source
Amazing Swift Ui 2019
23 Amazing iOS UI Libraries written in Swift for the Past Year (v.2019)
Stars: ✭ 147 (-0.68%)
Mutual labels:  open-source

Fundamental React

REUSE status npm version Minified Size Minzipped Size Build Status Coverage Status Slack

Deploys by Netlify

Description

The fundamental-react library is a set of React components built using SAP Fundamental Styles.

The SAP Fundamental Styles library is a design system and HTML/CSS component library used to build modern product user experiences with the SAP look and feel.

API Reference

See Component Documentation for examples and API details.

Requirements

You will need to install Node and Node Package Manager.

Polyfills

Fundamental React requires a polyfill for:

You will need to add your own polyfills. See core-js for instructions.

Getting Started

For an existing react application, follow the steps below:

  1. Install fundamental-react.

    npm install fundamental-react
    
  2. All components are currently packaged together with their respective css, you will need to edit your webpack configuration to handle these files. See css-loader.

  3. Import components as needed. See Component Documentation for examples and API details.

    import { MessageStrip } from 'fundamental-react/lib/MessageStrip';
    

    or

    import { MessageStrip } from 'fundamental-react';
    

    NOTE: Importing from specific component is recommended. Doing so will bring in only the component you are using instead of the whole library, which will reduce your bundle size significantly.

  4. This project does not contain fonts and icons - they must be added to your project separately. Download Font 72 and SAP icons. After adding fonts and icons to your project, include the following in your css:

    @font-face {
        font-family: "72";
        src: url("path/to/fonts") format("woff"); /* Bold, Light, Regular available in woff and woff2 */
        font-weight: normal;
        font-style: normal;
    };

    @font-face {
        font-family: "SAP-icons";
        src: url("path/to/icons") format("woff"); /* available in woff, woff2 and ttf */
        font-weight: normal;
        font-style: normal;
    }

Additionally, edit your webpack configuration to load font and icon fonts - see file-loader.

All styles are based on rem units. Include the following in your CSS to ensure components are sized correctly:

    html {
        font-size: 16px;
    }

Versioning

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

Merges to the main 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 BREAKING change:

  • A component’s existing API is altered (with the exception of additions)
  • 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 BREAKING change:

  • Additions to a component’s API
  • Non-visual HTML attribute changes/additions (such as role, aria-*, data-*)
  • An existing unit test is altered to account for non-visual HTML attribute changes/additions (such as role, aria-*, data-*)

CSS Modules

This library supports css-modules. The motivation for this support is to be able to include multiple versions or instances of fundamental styles on the same page without collisions in styles. This can be useful if you have a page using fundamental-ngx alongside fundamental-react, for example.

One way to use fundamental-react with hashed class names is to pass the library code through css-loader in your webpack config

// If you have an existing css rule
{
    test: /.css$/,
    exclude: [
        /node_modules\/fundamental-styles/
    ],
    use: [
        'style-loader',
        'css-loader'
    ]
},
// run css-loader with modules enabled for css files from fundamental-styles
{
    test: /.css$/,
    include: [
        /node_modules\/fundamental-styles/
    ],
    use: [
        'style-loader',
        {
            loader: 'css-loader',
            options: {
                modules: {
                    localIdentName: '[local]-[sha1#️⃣hex:6]'
                }
            }
        }
    ]
},

It's important to include [local] in the localIdentName which keeps the class name in the hash. This is because some of the style rules in fundamental-styles reference the name of the class, like [class*=level].

Known Issues

Please see Issues.

Support

If you encounter an issue or want to request a feature, you can create an issue.

Contributing

If you want to contribute, please check the Contribution Guidelines. Also see our Developer Guide to Getting Started.

Similar Projects

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].