How to use

What is jt-ui-theme?

jt-ui-theme is meant to replace Metronic and create a lighter layer of theming for our JobTarget projects.

The goal of this project is to allow for drop-in theming across all JobTarget apps (you should be able to simply add the stylesheet and follow the markup structure and your app will reflect the JobTarget brand).

jt-ui-theme relies heavily on Bootstrap 4. When in doubt, refer to the Bootstrap 4 Documentation for HTML snippets.

You can view the designs in Figma here https://www.figma.com/files/1024312224877226276/team/1024308968604884822/JobTarget-Design-Team?fuid=1042493409103375107

Pulling HTML snippets

You can View the Source Markup by hovering over the section and clicking this button: < >

jt-ui-theme is JavaScript agnostic. It expects you to use Markup and CSS from Bootstrap 4, but you can use any flavor of Bootstrap 4 JavaScript that you need...
For the most part, you will just use standard Bootstrap Markup and the library should work.
When using inside of a Client-side rendering framework, you can hookup plugins once they have mounted on the DOM.
Examples of Bootstrap JavaScript flavors include the following:

• jQuery
  • Bootstrap Bundles
  • jQuery Documentation
• React
  • Reactstrap
  • React Bootstrap
• VueJS
  • Bootstrap-Vue
• Vanilla JavaScript
  • Bootstrap.Native

Versioning

You may notice that the version is but the files reference . This is because we use SemVer to version our theme. Path/Bugfix pushes will be available without updating the reference to the CSS and JS.

When a Minor or Major version is pushed out, developers should migrate to the latest version within 4 weeks.

Usage With React/Vue

Using these vanilla and jQuery components/plugins with React and Vue is quite easy. The best way to implement them is hook into the component lifecycle methods

    
        // React
        componentDidMount(){
            // instantiate jQuery or vanilla plugin
        }

        componentWillUnmount(){
            // destroy the instance
        }

        componentDidUpdate(){
            // refresh the instance if you need to
        }

        // Vue
        mounted(){
            // instantiate jQuery or vanilla plugin
        }

        beforeUnmount(){
            // destroy the instance
        }

        updated(){
            // refresh the instance if you need to
        }
    

Using the Navbar and Footer

The Shared Navbar and Footer are written as Web Components, compiled by StencilJS.

https://developer.mozilla.org/en-US/docs/Web/Web_Components

https://stenciljs.com/

In order to use these components, you must add them to the DOM as shown in the Starter Template

The x-x in the src attribute should be replaced with the Major and Minor version found on the UI Kit Repository in the master branch inside of the package.json file.

Here is the Gitlab repo master branch

Job Target Custom Components

By including the Job Target theme JavaScript, custom UI component JavaScript will be accessible via the JTComponents object attached to the window

            
                window.JTComponents; // Object containing component class definitions
            
        

You can check the exact version of the script by accessing the version property on window.JTComponents

The current list of JobTarget components includes

Theme Scripts and Styles

Theme CSS

• Prod:

  https://uithemeplatform.jobtarget.com/jt.ui.theme.v1.0.bundle.min.css

• UAT:

  https://uat-uithemeplatform.jobtarget.com/jt.ui.theme.v1.0.bundle.min.css

• QA:

  https://qa-uithemeplatform.jobtarget.com/jt.ui.theme.v1.0.bundle.min.css

Theme JS

• Prod:

  https://uithemeplatform.jobtarget.com/jt.ui.theme.v1.0.bundle.min.js

• UAT:

  https://uat-uithemeplatform.jobtarget.com/jt.ui.theme.v1.0.bundle.min.js

• QA:

  https://qa-uithemeplatform.jobtarget.com/jt.ui.theme.v1.0.bundle.min.js

Navbar JS

• Prod:

  https://uikitplatform.jobtarget.com/js/jt-ui-kit-v-1-1/jt-ui-kit-v-1-1.js

• UAT:

  https://uat-uikitplatform.jobtarget.com/js/jt-ui-kit-v-1-1/jt-ui-kit-v-1-1.js

• QA:

  https://qa-uikitplatform.jobtarget.com/js/jt-ui-kit-v-1-1/jt-ui-kit-v-1-1.js

Template Changelog

1. Oct 5, 2021 - updated #jt-app HTML to remove mt-4 mb-4 classes and add my-1 class.
2. Oct 7, 2021 - updated #jt-app-header HTML to add align-items-center class to the first col-sm-6 columns.
3. Oct 7, 2021 - Swapped out multiple font-awesome link tags for one that pulls in all of font-awesome pro. This should remedy any issues where icons are not rendering.
4. Nov 11, 2021 - Adds class px-2 to "More" button in #jt-app-header to make button square.

Tokens

Bootstrap v4 has a large number of SASS variables which can be found at the following link:

https://raw.githubusercontent.com/twbs/bootstrap/v4-dev/scss/_variables.scss

These variables are overwritten by the JobTarget theme.

Colors

Bootstrap class names can be found here https://getbootstrap.com/docs/4.6/utilities/colors/

Theme

Theme colors have built-in utility CSS classes you can use throughout your HTML.

Utility/Content

Grays

Themeable Aspects

Accordion

JT Custom Progress

Instantiation

new window.JTComponents.JTCustomProgress(root : {HTMLElement | DOMString})

1. root - The containing div of the custom progress

Markup

The Custom Progress component relies on an underlying progress HTML element.

For accessibility the containing div uses an aria tag to semantically connect the hidden progress bar to a hidden description.

To shape the Steps use Bootstraps Border-radius utility classes found here https://getbootstrap.com/docs/4.6/utilities/borders/#border-radius

This component relies on the following data- attributes

    
      data-jt-component="JTCustomProgress"  // denotes the root DOM node of the component

      data-jt-ref-array="JTCustomProgress.steps"  // maps to a Nodelist of the steps called $steps

      data-jt-ref="JtCustomProgress.progress"
    
  

Methods

• setProgressValue(number):void -- triggers rerender
• calcActiveSteps():number -- returns the step number that the progress bar is active through
• rerenderActiveSteps():void -- rerenders the steps determining whether or not they are active and applying the ".active" class
• renderCurrentStep():void -- renders the current step with the ".current" class

Events

• change:jt:customprogress - fired from window when a the custom progress is rerendered

JTOffcanvas

Offcanvas can be customized via the Utility classes for height and width and the additional Bootstrap utils here https://getbootstrap.com/docs/4.6/utilities/sizing/

Instantiation

new window.JTComponents.JTOffCanvas(panel : {HTMLElement | DOMString}, trigger?: {NodeList | DOMString})

1. panel - the section of HTML that will open and close
2. trigger - optional -- the triggers that will open and close the panel

Markup

This components requires the following classes for styling:

    
        <div class="JTOffcanvas__panel [direction]" data-jt-ref=[selector]>
            <div class="position-relative p-3 [padding]">
        
    

    
        <button class="btn btn-link close position-absolute p-4 [position]" data-jt-ref="JTOffcanvas.toggle">
            <i class="fal fa-times float-right text-2 text-muted"></i>
          </button>

        
    

Methods

• hide():void -- hides the panel
• show():void -- shows the panel

Events

• hide:jt:offcanvas -- triggered when the panel is hidden
• show:jt:offcanvas -- triggered when the panel is shown

Pagination

Regular Size

Small Size

Large Size

Non-Table Pagination

The JavaScript or links should be implemented with specific logic outside the scope of this theme.

DataTables

This relies on the DataTables plugin found here

https://datatables.net/

For REACT please use this library

react-data-table-component/

Messages

Popovers

NOTE: to initiate Popovers you must use the following script after your HTML has been loaded into the DOM.

  $('[data-toggle="popover"]').popover();

Trigger on Click

Trigger on Hover & Focus

Tooltips

Toasts

Alerts

Labels

Regular

Light

Outline

Sizes

Labels are made by using Utility Classes. You can mix and match the classes to create whatever combination you need.