Chi (pronounced chee) provides developers with a collection of HTML and CSS patterns to build fast, reusable, and consistent responsive interfaces.
Adding Chi to your project is as simple as loading the Chi stylesheet from the CenturyLink Assets Server. Not only is this a great way to get started with Chi, it is also a highly available and performant option for loading the required assets into your project.
<link rel="stylesheet" href="https://assets.ctl.io/chi/1.4.2/chi.css">
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 will be able to target the styles available in Chi by referencing documentation.
Set up your Chi development environment with Docker. First make sure you have Docker installed, then run the command:
scripts/docker.sh alias
source ~/.bash_profile
Now your environment is set up. To start development run:
chi start
Once the container has been bootstrapped and the Chi project has started, connect to http://localhost:8000 in your browser to load Chi. While running, any changes to the Chi source will automatically be reloaded in your browser.
The project has been configured to run inside a Docker container so it won't work as a regular node application.
We use BackstopJS for visual regression testing of our CSS components. In order to account for differences in development environments we always run these tests in a consistent Docker container. To execute the test suite, run the following command:
chi test
A report containing the results of the test will be created under reports/html_report. If there were failures,
you will need to visually examine the changes and act appropriately based on the anticipated results.
If you receive a test failure and you've made changes that you know are correct, you will need to override the test
references with your new changes by running the approve command on BackstopJS:
chi approve
Once you have approved the changes, commit the new reference files with your changes.
Use the build command to make a ready-to-production build:
chi build