Skip to content

PBGUX/pb-design-system

Folders and files

NameName
Last commit message
Last commit date

Latest commit

c122b31 · Sep 23, 2024
Mar 8, 2024
May 17, 2024
May 17, 2024
May 17, 2024
May 17, 2024
Sep 23, 2024
May 17, 2024
May 17, 2024
Aug 1, 2024
May 17, 2024
Aug 1, 2024
Mar 8, 2024
May 17, 2024
May 17, 2024
May 17, 2024
May 17, 2024
Aug 9, 2017
Sep 23, 2024
Aug 2, 2024
Mar 8, 2024
Sep 23, 2024
Mar 8, 2024

Repository files navigation

PB Design System 16

This is a release of the Design System with Bootstrap 5.

It requires Bootstrap 5, Angular 16, and NG-Bootstrap 15 to be installed.

Your node version must be 16 or 18, please check by running node -v.

Installation

Install this package with npm:

npm install pb-design-system --save

Also you will need to install Boostrap 5.x and Angular Material:

npm install bootstrap @angular/material @popperjs/core --save

You will see warnings about peer dependencies (such as D3); those only need to be installed if you need them.

Configuring angular.json

Add your app's styles.scss after the Design System css file in the styles array, as follows:

"styles": [
  "node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "node_modules/pb-design-system/dist/css/designsystem.css",
  "styles.scss"
],

Optional Installs:

To use Bootstrap's javascript components (header, dropdowns, tooltips, and/or popovers) you will also need to load its js files in the scripts array:

 "scripts": [
    "node_modules/jquery/dist/jquery.slim.js",
    "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
    "node_modules/bootstrap/dist/js/bootstrap.js"
 ],