Installation

CSS

Add Chi CSS by copying and pasting the stylesheet below into the header of your project. Chi's stylesheet is hosted on Lumen's Assets Server which is a highly available and performant option for loading assets into your Lumen project.

<link rel="stylesheet" href="https://assets.ctl.io/chi/5.12.0/chi.css" integrity="sha256-yBtODzbiqaMgExjfGAUfMH0/79H2KfjJMK8GULd6fAc=
" crossorigin="anonymous">

<link rel="stylesheet" href="https://assets.ctl.io/chi/5.12.0/chi-centurylink.css" integrity="sha256-j0HdsDyt/6WYQZlTsgKt3gVKNafwqg+6sKmg5m6eo8I=
" crossorigin="anonymous">

<link rel="stylesheet" href="https://assets.ctl.io/chi/5.12.0/chi-portal.css" integrity="sha256-TMZ2R6HMXXSKDxAm3h+iBeL2QAgnho8WvV1cwRO8mJA=
" crossorigin="anonymous">

Next, add the chi CSS class to the <html> tag of your document to properly scope the styles. This allows Chi to override any existing styles that have been defined by legacy markup.

<html class="chi">
  ...
</html>

At this point you can now start using Chi. The documentation includes a wealth of templates and code samples to get you started.

Favicon

Optional

A favicon is a small icon associated with a webpage that is typically displayed in a browser's address bar, bookmarks, and tabs. To add a Lumen favicon to your project, insert the following code before the closing <head> tag.

<link rel="icon" type="image/svg+xml" href="https://assets.ctl.io/chi/5.12.0/assets/themes/lumen/images/favicon.svg" integrity="sha256-s8cfYbPxhcrLj+FL/OxALhZoDmlCwvX2/K3I0hq1PAs=
" crossorigin="anonymous"><link rel="alternate icon" href="https://assets.ctl.io/chi/5.12.0/assets/themes/lumen/images/favicon.ico" integrity="sha256-EkKmbH+i/VIQAtUl7NF4bPVaaJZCeBc5xWx8LTcMJp0=
" crossorigin="anonymous">

<link rel="icon" type="image/svg+xml" href="https://assets.ctl.io/chi/5.12.0/assets/themes/centurylink/images/favicon.svg" integrity="sha256-5RkYwEB1kGRtp6mggDQTuEY/wsmVdIG+AYurQhglosI=
" crossorigin="anonymous"><link rel="alternate icon" href="https://assets.ctl.io/chi/5.12.0/assets/themes/centurylink/images/favicon.svg" integrity="sha256-CT3YteLQVYlkdxGsjd628GvTzCD9ViZWmJ3zheSnl3w=
" crossorigin="anonymous">

JavaScript

Optional

Although Chi can be used as a pure HTML and CSS library with only the stylesheet above, many advanced components like tabs, drop downs, date pickers, and others require JavaScript to function. In most cases the need is minimal. You may write your own JavaScript to integrate Chi's CSS and blueprints into your project, or use Chi's JavaScript library which was written to provide a complete solution.

Chi's JavaScript library depends on Popper.js for positioning components like Popovers and Dropdown menus, and Day.js for calculating dates in the Datepicker component. For the rest, the library is entirely independent.

Chi's JavaScript library is developed as an ES6 component, but with the help of Webpack, it is available in several flavors. Choose the method that best fits your project.

JavaScript file
AMD module
ES6 modules

To use the old method of including Chi in your project, include the ES5, browser prepared, JavaScript file from the Lumen Assets Server. In this solution Popper.js and Day.js are bundled into the file.

<script src="https://assets.ctl.io/chi/5.12.0/js/chi.js" integrity="sha256-jaAjPx24VcYrD2eHN4lh3otwLh4L4S3S7Ba6CZnO0Eo=
" crossorigin="anonymous"></script>

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'
  }
}

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";

Web Components

Optional

Chi Web Components are Custom Elements designed to Lumen's specifications and built according to the HTML Living Standard. They are written in vanilla Javascript for compatibility with major frameworks including AngularJS, ReactJS, VueJS, or no framework at all.

Add Chi Web Components by copying and pasting the JavaScript files below into the header of your web application. Placing the files in the header is important as it will load any Polyfill if the browser doesn't support Web Components.

<script type="module" src="https://assets.ctl.io/chi/5.12.0/js/ce/ux-chi-ce/ux-chi-ce.esm.js" integrity="sha256-3EKkhrIa8IR494wscrN1IxqmtkbocadXWN/JBfK1Duw=
" crossorigin="anonymous"></script><script nomodule="" src="https://assets.ctl.io/chi/5.12.0/js/ce/ux-chi-ce/ux-chi-ce.js" integrity="sha256-YrDiIH91dWgnfQRTLsWYoxQj7LGxf7PHV4TIZcazh5M=
" crossorigin="anonymous"></script>

After placing the files in your header, you are now ready to use the Web Components described in this documentation.

Chi Web Components can be used in several different ways. The most common are the HTML attributes and the DOM properties. In most cases, we keep them synchronized. For example, the chi-button element has a size attribute that can be accessed and modified in two ways.

Modifying the HTML attribute

<chi-button id="close-btn" size="md">Close</chi-button>
<script>
  document.getElementById("close-btn").setAttribute("size", "xl");
</script>

Setting the DOM property

<chi-button id="close-btn" size="md">Close</chi-button>
<script>
  document.getElementById("close-btn").size="xl";
</script>

Some Chi components have boolean attributes which function the same way as the well known disabled attribute. Boolean attributes are true when the HTML element has the attribute and false when not.

Boolean attributes can be set to true this way:

<input type="text" disabled />
<chi-drawer id="drawer" active />
<script>
  document.getElementById("drawer").active = true;
  document.getElementById("drawer").setAttribute("active", "active");
</script>

And set to false this way:

<input type="text"  />
<chi-drawer id="drawer" />
<script>
  document.getElementById("drawer").active = false;
  document.getElementById("drawer").removeAttribute("active");
</script>

Some components, like chi-drawer, have helper methods in order to change the state of commonly modified attributes:

<chi-drawer id="drawer" />
<script>
  document.getElementById("drawer").show();   // This sets the active property to true
  document.getElementById("drawer").hide();   // This sets the active property to false
  document.getElementById("drawer").toggle(); // This toggles the state of the active property
</script>

Chi Vue

Optional

Chi supports a set of native Vue components. Chi Vue can be installed via Github npm registry or included from CDN as a UMD library.

registry=https://registry.npmjs.org
@centurylink:registry=https://npm.pkg.github.com/centurylink

"@centurylink/chi-vue": "1.3.1",
"copy-webpack-plugin": "^5.1.1",

Import Chi Vue and register its components globally

import(/* webpackChunkName: "chi-vue" */ '@centurylink/chi-vue').then(chiVue => {
  Object.keys(chiVue.library.components).forEach((name: string) => {
    Vue.component(name, chiVue.library.components[name]);
  });
}).finally(() =>{
  new Vue({
    render: h => h(App),
  }).$mount('#app')
}).catch(() => {
  throw('@centurylink/chi-vue library is not loaded correctly!');
});

Use CopyWebpackPlugin in vue.config.js to copy Chi Vue assets to dist

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
    configureWebpack: config => {
      if (!config.externals) {
        config.externals = {};
      }

      config.output.filename = '[name].js';
      config.output.chunkFilename = '[name].js';

      let plugins = [{ from: '@centurylink/chi-vue/dist' }];
      config.plugins.push(
        new CopyWebpackPlugin(plugins, {
          context: 'node_modules',
          ignore: ['.DS_Store'],
        }));
    },
  };

Include Chi Vue UMD library from CDN and register the components you need.

<!-- UMD asset -->
<script src="https://assets.ctl.io/chi/5.12.0/chi-vue/umd/chi-vue.umd.js"></script>

<!-- Vue component example -->
new Vue({
  components: {
    chiVuePagination: window['chi-vue'].library.components.ChiPagination,
  }
});

<!-- Vue template example -->
<chi-vue-pagination :pages="5" :current-page="currentPage"></chi-vue-pagination>

Framework specific boilerplates

Boilerplates include:
Framework	chi.css	chi.js	Web components	Favicon	Download
Vue					Download
Stencil					Download
Angular					Download
React					Download
Vue + ES6					Download