@glue42/theme NPM

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 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.
React support for the Select component is provided by React Select.
React support for the Date component is provided by React Datetime.
React support for the Notification component 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