Getting started

How to download and install Chico in your site.

Download

Getting started with Chico is easy. Whether you are a master of Sass, building a new app, or making your existing site responsive, we’ve got you covered. How would you like to get started?

Download Chico

Installing Chico in your site

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:

<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie10 lt-ie9 lt-ie8 lt-ie7 ie6"> <![endif]-->
<!--[if IE 7]>	<html class="no-js  lt-ie10 lt-ie9 lt-ie8 ie7"> <![endif]-->
<!--[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]-->

Pointing to assets

You only have to add the CSS, JavaScript and assets of Chico UI, and that’s all!

Make sure to add the stylesheet call into the <head> tag.

<link rel="stylesheet" href="dist/ui/chico.min.css" />

And you should add the JavaScript at bottom of page, before the </body> closing tag and after jQuery script call.

<script src="dist/ui/chico.min.js"></script>

Don’t forget to link to asset files within the stylesheet code.

Overview

<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie10 lt-ie9 lt-ie8 lt-ie7 ie6"> <![endif]-->
<!--[if IE 7]>	<html class="no-js  lt-ie10 lt-ie9 lt-ie8 ie7"> <![endif]-->
<!--[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>
<!-- Avoid script blocking -->
<script></script>
<meta charset="utf-8" />
<title>Document Title</title>
<!-- Chico UI Core stylesheet -->
<link rel="stylesheet" href="dist/ui/chico.min.css" />
</head>
<body>
...
<!-- All markup here... -->
...
<script src="dist/ui/chico.min.js"></script>
<script src="Call your JavaScript here..."></script>
</body>
</html>