Trimble css library

Trimble css library is the initiative to develop the css class for commonly used ui elements such as checkbox, form elements, table, grid, etc. This strictly follow the trimble style guidelines and coding standard.

Status of ui elements

Element name	status
Buttons	Completed
Input box	Completed
Checkbox	Completed
Text area	Completed
Label	Completed
Select box	Completed
Radio button	Completed
Avatar image	Completed
Table view	Completed
Grid view	Completed

Above css code are available in three formats.

• Scss file
• Css file
• Dom-module file (this can be include in any web component)

Installation

Through npm

$npm install trmb-css
//If you want to include in all css element in your application
import 'node_modules/trmb-css/src/scss/style.scss'

//If you want to include only one element
import 'node_modules/trmb-css/src/scss/button.scss'

Through yarn

$yarn add trmb-css
//If you want to include in all css element in your application
import 'bower_components/trmb-css/src/scss/style.scss'

//If you want to include only one element
import 'bower_components/trmb-css/src/scss/button.scss'

Through cdn url

//If you want to include in all css element in your application
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/trmb-css@0.0.52/dist/css/style.min.css">

//If you want to include only one element
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/trmb-css@0.0.52/dist/css/button.min.css">

Javascript support

For javascript functional support, like show and hide accordian menu, upload avatar, cropper plugins, etc you need to include the below javascript file in your application along with Css

via npm
<script src="node_modules/trmb-css/dist/js/trmb-css.js" type="text/javascript">
via yarn
<script src="bower_components/trmb-css/dist/js/trmb-css.js" type="text/javascript">
via cdn
<script src="https://cdn.jsdelivr.net/npm/trmb-css@0.0.52/dist/js/trmb-css.js" type="text/javascript">

Latest version

0.0.52

For development mode

$ git clone ssh://git@bitbucket.trimble.tools/twc/trmb-css.git
$ cd trmb-css
$ npm install -g gulp
$ npm install
$ npm install safe-regex -g (if needed)
//To compile sass to css
$ gulp sass
//To generate documentation from kss comments
$ gulp kss

UX Team

• Megan (megan_ezeadi@trimble.com)
• Marita (marita_franzke@trimble.com)
• Durai (durai_murugan@trimble.com)
• Balasubramanian (balasubramanian_dharmaraj@trimble.com)