Getting started

How to use Chico in your site.

Overview

Chico supports desktop —called “ui”— and mobile platforms and has two major releases: v1x and v2x.

To get started, please, select version and platform:

Resources

To get started you first need to get a copy of Chico. You have 2 options:

Install it using npm:

npm install chico

Use the resources from our CDN:

// HTTP/1.1
https://ui.mlstatic.com/chico/2.0.11/mobile/chico.min.css
https://ui.mlstatic.com/chico/2.0.11/mobile/chico.min.js

// HTTP/2
https://http2.mlstatic.com/ui/chico/2.0.11/mobile/chico.min.css
https://http2.mlstatic.com/ui/chico/2.0.11/mobile/chico.min.js

For a specific version, please check the releases in the repository.

Usage and dependencies

Browser sniffing

We hate writing CSS hacks. Instead of hacking the code, we rather use IE’s conditional comments, so if you paste this code in your HTML, Chico UI will know how to fix the visual inconsistencies:

<!--[if IE 8]><html class="no-js lt-ie10 lt-ie9 ie8"><![endif]-->
<!--[if IE 9]><html class="no-js lt-ie10 ie9"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->

Dependencies

You must include Tiny as a dependency.

Including assets

Add the CSS file within the `head` tag:

<link href="https://ui.mlstatic.com/chico/2.0.11/mobile/chico.min.css" rel="stylesheet" />

Add the JavaScript files before the closing `body` tag:

<script src="https://ui.mlstatic.com/chico/tiny/0.2.4/tiny.min.js"></script>
<script src="https://ui.mlstatic.com/chico/2.0.11/mobile/chico.min.js"></script>

If you’re not using the assets from our CDN make sure that the references to the images and fonts are correct.

Example

Putting it all together we get something like the following document:

<!doctype html>
<!--[if IE 8]><html class="no-js lt-ie10 lt-ie9 ie8"><![endif]-->
<!--[if IE 9]><html class="no-js lt-ie10 ie9"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
<head>
    <meta charset="utf-8" />
    <title>Title<title>
    <link href="https://ui.mlstatic.com/chico/2.0.11/mobile/chico.min.css" rel="stylesheet" />

    <!--
        `head` content.
    -->
</head>
<body>
    <!--
        `body` content.
    -->

    <script src="https://ui.mlstatic.com/chico/tiny/0.2.4/tiny.min.js"></script>
    <script src="https://ui.mlstatic.com/chico/2.0.11/mobile/chico.min.js"></script>
</body>
<html>