As part of the Infineon brand guidelines, the Infineon Digital Design System supports designers, developers and project managers to build user interfaces faster and better – with the ultimate goal to create a coherent and optimal user journey across all internal and external Infineon digital touchpoints.

This repository contains an Bootstrap implementation of Infineons Digital Design System and it's Storybook sourcecode.

Use it to build & run storybook and distribute the Bootstrap SCSS.

back to top

• Node v14 or older.
• Yarn v1.22.10 or older, or Npm v6.14.13 or older.

1. npm install --save @infineon/design-system-bootstrap

1. yarn add @infineon/design-system-bootstrap

import "@infineon/design-system-bootstrap";

1. Send an email to [email protected] to get the fontawesome token key. Then execute these two commands:

npm config set "@fortawesome:registry" https://npm.fontawesome.com/
npm config set "//npm.fontawesome.com/:_authToken" <PASTE KEY HERE>

Additional Fontawesome installation instructions can be found here:

For Angular: https://fontawesome.com/v5/docs/web/use-with/angular
For Vue https://fontawesome.com/v6/docs/web/use-with/vue/
For React: https://fontawesome.com/v6/docs/web/use-with/react/

back to top

Explore our components in Storybook.

https://storybook-bootstrap.icp.infineon.com

back to top

Install all the modules and dependencies listed on the package.json file with:

yarn install

or

npm install

To deploy Storybook, we first need to export it as a static web app. To do so, we can use the inbuild build-storybook command with npm or yarn.

yarn build-storybook

or

npm build-storybook

This will generate a static Storybook in the storybook-static directory.

To start storybook, simply run the inbuild command start-storybook with npm or yarn.

yarn start-storybook

or

npm start-storybook

start-storybook also executes watch-css and watch-storybook which automatically update storybook on code change.

back to top

Yanchev Tihomir
Werther Kai

[email protected]
[email protected]

back to top