How to install chico

Documentation updated on December 6th.

Contents
1 Dependencies
2 Browser sniffing
3 jQuery JavaScript Library
4 Which are the sources?
5 Overview

Dependencies

To install the library you need get some dependencies and the sources files. For example, Chico UI depends on jQuery to work.

Besides that, you can add some snippets to improve the cross-browser task.

Browser sniffing

We hate writting 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 IE 7]>    <html class="no-js lt-ie10 lt-ie9 lt-ie8 ie7" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie10 lt-ie9 ie8" lang="en"> <![endif]-->
<!--[if IE 9]>    <html class="no-js lt-ie10 ie9" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

jQuery JavaScript Library

Most of our framework’s functionality is built on jQuery. That's why we need to pre-load this toolbox.

You can get jQuery from many places like Google CDN:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/x.x.x/jquery.min.js"></script>

Or jQuery CDN:

<script src="http://code.jquery.com/jquery-x.x.x.min.js"></script>

We recommend put all the <script> calls at bottom of HTML page, before </body> tag close.

Which are the sources?

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="chico-min-x.x.x.css" />

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

<script src="build/chico-min-x.x.x.js"></script>

Assets (images and icons) are into the zip file that you download. Put assets on a folder into your project and link to files within stylesheet code.

Overview

<!doctype html>
<!--[if IE 7]>    <html class="no-js lt-ie10 lt-ie9 lt-ie8 ie7" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie10 lt-ie9 ie8" lang="en"> <![endif]-->
<!--[if IE 9]>    <html class="no-js lt-ie10 ie9" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
	<!-- Avoid script blocking -->
	<script></script>
	<meta charset="utf-8">
	<title>Document Title</title>
 
	<!-- Chico UI Core stylesheet -->
	<link rel="stylesheet" href="build/chico-min-x.x.x.css">
</head>
<body>
	...
	<!-- All markup here... -->
	...
 
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/x.x.x/jquery.min.js"></script>
	<script src="build/chico-min-x.x.x.js"></script>
	<script>
		// Write your JavaScript here...
	</script> 
</body>
</html>