@glue42/theme
v4.0.8
Published
Glue42 Bootstrap theme
Downloads
287
Readme
Tick42 Design System
Overview
The Tick42 Design System is based on Bootstrap 5.x. Use it to ensure a unified experience and consistency across the UI of all applications.
Usage
npm i @glue42/theme@latest- Add
darkorlightclass to the<html>tag. - If you are using AG Grid, add the
ag-tick42class to the wrapper of your grid.
Supported Frameworks and Features
- React support is provided by reactstrap.
- React support for the
Selectcomponent is provided by React Select. - React support for the
Datecomponent is provided by React Datetime. - React support for the
Notificationcomponent is provided by React Notification System. - Angular support is provided using the popular Ng-bootstrap library.
Examples
HTML
<!DOCTYPE HTML>
<html lang="en" class="dark">
<head>
<link rel="stylesheet" href="../t42bootstrap.bundle.css">
<link rel="stylesheet" href="./custom-style.css">
</head>
<!-- your app -->
</html>AG Grid
<div id="myGrid" style="height: 330px; width:100%;" class="ag-tick42">Tree Structure
dist
--- t42bootstrap.bundle.css
├── components
│--- alert.css
│--- badge.css
│--- breadcrumb.css
│--- buttons.css
│--- card.css
│--- code.css
│--- dropdown.css
│--- fonts.css
│--- fonts.css.map
│--- forms.css
│--- grid.css
│--- icons.css
│--- icons.css.map
│--- images.css
│--- list-group.css
│--- loader.css
│--- modal.css
│--- nav.css
│--- navbar.css
│--- pagination.css
│--- popover.css
│--- progress.css
│--- reboot.css
│--- tables.css
│--- themes.css
│--- tooltip.css
│--- transitions.css
│--- type.css
│--- utilities.css
└── packages
│--- ag-grid.css
│--- highlight.css
│--- jsoneditor.css
│--- ng-datepicker.css
│--- ng-pagination.css
│--- ng-rating.css
│--- ng-timepicker.css
│--- ng-toastr.css
│--- ng-typeahead.css
│--- rc-notification.css
│--- rc-rdt.css
│--- rc-select.css
│--- search.css
│--- select.css