Overview

Chi is a pure CSS and HTML framework. However, some of the components need JavaScript to work. In most cases, the need is reduced to having to add or remove some classes to the components. You can write your JavaScript code to integrate Chi into your project, but for those who need a complete solution, we have written a JavaScript library to make things easier.

Dependencies

Chi JavaScript library depends on Popper.js library to position some components. For the rest, this library is entirely independent. It doesn't require jQuery nor any other library to work correctly.

Integration

Chi JavaScript library is developed as an ES6 component, but with the help of Webpack, it is released in several flavours. It is up to you to choose the one that best fit your project.

JavaScript file

You can use the old way to include Chi into your project. Just include the ES5, browser prepared, JavaScript file from the CenturyLink Assets Server. It is a highly available and performant option for loading the required assets into your project. In this solution Popper.js is bundled into the file.

<script src="https://assets.ctl.io/chi/1.0.0/js/chi.js"></script>

AMD module

If you use RequireJS or any other AMD compatible module loader in your project, you will find the AMD compatible version in the amd folder. Then, you will have to update your require configuration:

'chi': {
  path: [CHI_PATH, 'amd', 'chi'].join('/'),
  shim: {
    deps: ['Popper'],
    exports: 'chi'
  }
}

ES6 modules

For recent projects already using ES6 modules, will find their version in the es6 folder. In this case, there is no need for importing the whole chi library as you can import each component separately by using ES6 import syntax.

import {Dropdown} from "route/to/chi/es6/dropdown.js";