# 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

```cmd
npm i @glue42/theme@latest
```

- Add `dark` or `light` class to the `<html>` tag.
- If you are using AG Grid, add the `ag-tick42` class to the wrapper of your grid.

## Supported Frameworks and Features

- React support is provided by [reactstrap](https://reactstrap.github.io/).
- React support for the `Select` component is provided by [React Select](https://react-select.com/).
- React support for the `Date` component is provided by [React Datetime](https://www.npmjs.com/package/react-datetime).
- React support for the `Notification` component is provided by [React Notification System](https://www.npmjs.com/package/react-notification-system).
- Angular support is provided using the popular [Ng-bootstrap](https://ng-bootstrap.github.io/) library.

## Examples

### HTML 

```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

```html
<div id="myGrid" style="height: 330px; width:100%;" class="ag-tick42">
```

## Tree Structure

dist   
--- t42bootstrap.bundle.css   
├── components  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; │--- alert.css  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; │--- badge.css   
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; │--- breadcrumb.css  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; │--- buttons.css  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; │--- card.css  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; │--- code.css  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; │--- dropdown.css  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; │--- fonts.css  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; │--- fonts.css.map  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; │--- forms.css  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; │--- grid.css  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; │--- icons.css  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; │--- icons.css.map  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; │--- images.css  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; │--- list-group.css  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; │--- loader.css  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; │--- modal.css  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; │--- nav.css  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; │--- navbar.css  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; │--- pagination.css  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; │--- popover.css  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; │--- progress.css  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; │--- reboot.css  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; │--- tables.css  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; │--- themes.css  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; │--- tooltip.css  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; │--- transitions.css  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; │--- type.css  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; │--- utilities.css  
└── packages  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; │---  ag-grid.css  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; │---  highlight.css  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; │---  jsoneditor.css  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; │---  ng-datepicker.css  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; │---  ng-pagination.css  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; │---  ng-rating.css  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; │---  ng-timepicker.css  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; │---  ng-toastr.css  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; │---  ng-typeahead.css  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; │---  rc-notification.css  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; │---  rc-rdt.css  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; │---  rc-select.css  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; │---  search.css  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; │---  select.css