How to use

Artifactory

Ready to use, released version of the FROK is published in the BDC Artifactory. The npm packages can be found under following url:

BDC Cloud Artifactory: https://artifactory.boschdevcloud.com/artifactory/lab000089-npm-release-local/%40bosch/frontend.kit-npm/-/%40bosch/
On-Premises Fe-Artifactory: https://fe-artifactoryha.de.bosch.com/artifactory/npm-repo/@bosch/frontend.kit-npm/-/@bosch/

In production we recommend to use only released version. The snapshot versions can be used only for testing purpose.

The last version recommended by us is 3.10.0

As a login to the BDC Artifactory please use your Bosch NT user and as a password please use Artifactory API Key. The API key can be found in settings of your profile in the Artifactory UI. https://artifactory.boschdevcloud.com/

If you don't have an access, please use the IDM self service to assign the role IDM2BCD_BDC_Artifactory_01_perm74_reader for the application Bosch Development Cloud.

IDM - Manage IT roles

IDM - Choose application

In case you have any trouble logging on, please write to Michal Piasecki CI/DAD13

Files

The distribution package of the FROK contains the following files:

frontend-kit.complete.css: css file containing all styles of the FROK components
frontend-kit.js: contains javascript code of the FROK components
font files (boschsans*, bosch_icon*) - bosch font files

Styles in smaller chunks

Starting from version 4.0.0 FROK provides the CSS also in a more fine-grain distribution. Instead of importing the frontend-kit.complete.css, it is now possible to import the following parts:

frontend-kit.foundations.css - mandatory, includes the basic font and icon definitions, colors, ui-icons, typography, layout and focus-state
frontend-kit.light-mode.css - optional, can be used to use the light mode definitions of the FROK
frontend-kit.dark-mode.css - optional, can be used to use the dark mode definitions of the FROK
frontend-kit.icons.css - optional, includes all non ui-icons. If only ui-icons are used this file can be omitted
frontend-kit.atoms.css - optional, includes all style definitions for the atoms
frontend-kit.molecules.css - optional, includes all style definitions for the molecules
frontend-kit.organisms.css - optional, includes all style definitions for the organisms

Be aware when using molecules from the FROK, it is recommended also to include the styles for the atoms, because molecules are usually built on top of atoms. The same is true for organisms, then molecules should also be included.

In future releases, we will also provide imports for single components.

Configuration

The configuration of the FROK is straightforward. Please do the following steps to configure the FROK in your project:

the npm package of the FROK is stored in BDC Artifactory. To be able to use it, please add the following configuration to your .npmrc file. The configuration can be found as well on Artifactory website under "Set Me Up" button. As a SCOPE please use "@bosch".

add reference to @bosch/frontend.kit-npm@3.10.0 package in dependency section of your package.json file and run npm install. This will download frontend-kit packages to your node_modules directory.

{
      "name": "frontend-kit-consumer",
      "version": "2.0.0",
      "description": "",
      "main": "index.js",
      "author": "",
      "dependencies": {
          "@bosch/frontend.kit-npm": "^3.10.0"
      }
}

if your project doesn't use npm, please download FROK distribution from the website and add it to your project source code.

please reference frontend-kit.js and frontend-kit.complete.css file somewhere in your project. In most case it will be root file of your project like index.html.

Javascript

<script src="node_modules/@bosch/frontend.kit-npm/dist/frontend-kit.js"></script>

<link
  href="node_modules/@bosch/frontend.kit-npm/dist/frontend-kit.complete.css"
  rel="stylesheet"
/>

<!DOCTYPE html>
<html>
<head>
  <title>Exmaple usage of the FROK</title>
  <link href="node_modules/@bosch/frontend.kit-npm/dist/frontend-kit.css" rel="stylesheet" />
</head>
<body>
    <script src="node_modules/@bosch/frontend.kit-npm/dist/frontend-kit.js"></script>
</body>
</html>

copy the markup of the selected component from the preview server. To sign in to the preview server, please use the following credentials: login/password: bosch/uneo2019 e.g. to use FROK button component in primary variant please go to: https://frok.ui.bosch.tech/atoms/button/guide and copy the following markup into your project:
```
<button type="button" class="a-button a-button--primary -without-icon">
  <div class="a-button__label">Button label</div>
</button>
```

License

Contact

Michal Piasecki CI/PDX1