Integration with major frameworks

The Frontend Kit is framework-agnostic. It has been confirmed to work with React, Angular and VueJS and it's expected to work with any other framework.

Importing FROK CSS

First you have to install the Frontend Kit package from BDC Artifactory (read detailed instructions in How to use section).

You can import complete CSS or smaller chunks (read detailed instructions in How to use section).

After you have installed our package do the following:

React & VueJS

Importing complete CSS:

import '@bosch/frontend.kit-npm/frontend-kit.complete.css';

Importing smaller chunks of CSS (only atoms in dark mode):


import '@bosch/frontend.kit-npm/frontend-kit.foundations.css';
import '@bosch/frontend.kit-npm/dark-mode-gradations.css';
import '@bosch/frontend.kit-npm/dark-mode-primary-schemes.css';
import '@bosch/frontend.kit-npm/dark-mode-secondary-schemes.css';
import '@bosch/frontend.kit-npm/frontend-kit.atoms.css';

Angular

Configure angular.json:

      "architect": {
        "build": {
            ...
            "styles": [
              "node_modules/@bosch/frontend.kit-npm/dist/frontend-kit.complete.css",
              "src/styles.scss"
            ],
          },
          ...

Using FROK JavaScript

We recommend the following approach for all the frameworks:

Copy frontend-kit.js from our package "dist" folder
Place it in your application static files, it could be "public" folder or "assets" folder
Link the file in your app index.html as following:

<!DOCTYPE html>
<html lang="">
  <head>
    <title>My App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/assets/frontend-kit.js"></script>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

Using FROK components

Copy a markup of the selected component from the preview server. Create your reusable component based on it.

To sign in to the preview server, please use the following credentials: login/password: bosch/uneo2019