Common CSS

Global CSS settings including typography, buttons, iconography, tables, and much more.

Overview

CSS Reset

Chico use the Reset CSS to normalize the inconsistent default styling of HTML elements by browsers.

Headings

These are the heading tha you can use to semanticize your html markup.

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6
<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h4>Header 4</h4>
<h5>Header 5</h5>
<h6>Header 6</h6>

Paragraphs

Paragraphs description.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec ipsum tellus, quis ultricies nunc. Vestibulum ornare porta nunc, vitae tincidunt massa ornare vel. Nam ut felis odio.

Nam porta nunc vitae orci sollicitudin a ullamcorper purus dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed libero eget purus dictum fringilla non sed lectus. Etiam commodo quam in neque vehicula dapibus.

Phasellus ornare lacus ut purus elementum eget sodales dui placerat. Nunc ultrices porttitor mi, eu varius quam tristique in. Etiam tempor porta sodales.

Phasellus dui nisi, hendrerit a porta vel, tempus bibendum mauris.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus bibendum consectetur dignissim.

<p>...</p>

Lists

These are the lists that you can use in your html.

Unstyled

Unordered

Ordered

  1. MercadoLibre
  2. MercadoPago
  3. MercadoShops
  4. MercadoClics

Description

MercadoLibre
Donde compras y vendes de todo!
MercadoPago
La forma más simple de recibir pagos!
MercadoShops
Tu tienda virtual gratis y en minutos!
<!-- Unstyled list -->
<ul>
    <li><a href="http://www.mercadolibre.com">MercadoLibre</a></li>
    ...
</ul>

<!-- Unordered list -->
<ul class="ch-list">
    <li><a href="http://www.mercadolibre.com">MercadoLibre</a></li>
    ...
</ul>

<!-- Ordered list -->
<ol class="ch-list">
    <li><a href="http://www.mercadolibre.com">MercadoLibre</a></li>
    ...
</ol>

<!-- Definition list -->
<dl class="ch-list">
    <dt>MercadoLibre</dt>
    <dd>Donde compras y vendes de todo!</dd>
    ...
</dl>

Buttons

Normal Buttons

Disabled Buttons

<!-- Normal buttons -->
<input type="button" class="ch-btn ch-btn-large" value="Big button">
<input type="button" class="ch-btn" value="Button">
<input type="button" class="ch-btn ch-btn-small" value="Small button">
<input type="button" class="ch-btn-skin ch-btn-small" value="Skin button">
<button class="ch-btn-skin ch-btn-small">
    <i class="ch-icon-heart"></i>Favorite
</button>

<!-- Disabled buttons -->
<input type="button" class="ch-btn ch-btn-large ch-btn-disabled" value="Big button disabled">
<input type="button" class="ch-btn ch-btn-disabled" value="Button disabled">
<input type="button" class="ch-btn ch-btn-small ch-btn-disabled" value="Small button disabled">
<input type="button" class="ch-btn-skin ch-btn-small ch-btn-disabled" value="Skin button disabled">
<button class="ch-btn-skin ch-btn-small ch-btn-disabled" disabled>
    <i class="ch-icon-heart"></i>Favorite
</button>

Boxes

Container Box

Lorem ipsum dolor sit amet, consectetur adipiscing elit. adipiscing. Donec sit amet purus in sapien luctus sodales adipiscing.

Box Lite

Lorem ipsum dolor sit amet, consectetur adipiscing elit. adipiscing. Donec sit amet purus in sapien luctus sodales adipiscing.

Box

Lorem ipsum dolor sit amet, consectetur adipiscing elit. adipiscing. Donec sit amet purus in sapien luctus sodales adipiscing.

Box Error

Oops, something wrong happened. Click Here!

Box Help

Do you need any help?

Box Info

Here's more information Click Here!

Box Warn

Warning! something might be wrong

Box Ok

Everything is great!

This is a message, with an icon!

Warning!

This is a big warning message, be careful!

Oops, something wrong happened
Do you need any help?
Here's more information
Warning! something might be wrong 
<div class="ch-box-container">
    <h3>Container Box</h3>
    <p>...</p>
</div>

<div class="ch-box-lite">
    <h3>Box Lite</h3>
    <p>...</p>
</div>

<div class="ch-box">
    <h3>Box</h3>
    <p>...</p>
</div>

<div class="ch-box-error">
    <h3>Box Error</h3>
    <p>...</p>
</div>

<div class="ch-box-help">
    <h3>Box Help</h3>
    <p>...</p>
</div>

<div class="ch-box-info">
    <h3>Box Info</h3>
    <p>...</p>
</div>

<div class="ch-box-warn">
    <h3>Box Warn</h3>
    <p>...</p>
</div>

<div class="ch-box-ok">
    <h3>Box Ok</h3>
    <p>...</p>
</div>

<div class="ch-box-icon">
    <i class="ch-icon-truck"></i>
    <p>...</p>
</div>
<div class="ch-box-icon">
    <i class="ch-icon-warning-sign"></i>
    <h3>Warning!</h3>
    <p>...</p>
</div>

<div class="ch-box-icon ch-box-error"><i class="ch-icon-remove-sign"></i> ...</div>

<div class="ch-box-icon ch-box-help"><i class="ch-icon-help-sign"></i> ...</div>

<div class="ch-box-icon ch-box-info"><i class="ch-icon-info-sign"></i> ...</div>

<div class="ch-box-icon ch-box-warn"><i class="ch-icon-warning-sign"></i> ...</div>

Icons

The reference of all available icons.

  • ch-icon-search
  • ch-icon-heart
  • ch-icon-star
  • ch-icon-star-empty
  • ch-icon-user
  • ch-icon-th-large
  • ch-icon-th
  • ch-icon-user
  • ch-icon-ok
  • ch-icon-remove
  • ch-icon-zoom-in
  • ch-icon-zoom-out
  • ch-icon-cog
  • ch-icon-trash
  • ch-icon-time
  • ch-icon-repeat
  • ch-icon-refresh
  • ch-icon-lock
  • ch-icon-print
  • ch-icon-camera
  • ch-icon-pencil
  • ch-icon-map-marker
  • ch-icon-move
  • ch-icon-chevron-left
  • ch-icon-chevron-right
  • ch-icon-plus-sign
  • ch-icon-minus-sign
  • ch-icon-remove-sign
  • ch-icon-ok-sign
  • ch-icon-help-sign
  • ch-icon-info-sign
  • ch-icon-ban-circle
  • ch-icon-arrow-left
  • ch-icon-arrow-right
  • ch-icon-arrow-up
  • ch-icon-arrow-down
  • ch-icon-plus
  • ch-icon-minus
  • ch-icon-exclamation-sign
  • ch-icon-warning-sign
  • ch-icon-calendar
  • ch-icon-comment
  • ch-icon-chevron-up
  • ch-icon-chevron-down
  • ch-icon-key
  • ch-icon-comments
  • ch-icon-unlock
  • ch-icon-wrench
  • ch-icon-group
  • ch-icon-copy
  • ch-icon-paper-clip
  • ch-icon-reorder
  • ch-icon-truck
  • ch-icon-caret-down
  • ch-icon-caret-up
  • ch-icon-caret-left
  • ch-icon-caret-right
  • ch-icon-sort
  • ch-icon-sort-down
  • ch-icon-sort-up
  • ch-icon-envelope-alt
  • ch-icon-undo
  • ch-icon-comment-alt
  • ch-icon-comments-alt
  • ch-icon-phone
<i class="ch-icon-camera ch-icon-xx-large"></i>
<i class="ch-icon-camera ch-icon-x-large"></i>
<i class="ch-icon-camera ch-icon-large"></i>
<i class="ch-icon-camera"></i>

Badges

<i class="ch-badge ch-icon-camera"></i>
<i class="ch-badge-skin ch-icon-map-marker"></i>

Pagination

<ul class="ch-pagination">
    <li><a type="prev" href="/2.html">Previous</a></li>
    <li><a href="/1.html">1</a></li>
    <li><a href="/2.html">2</a></li>
    <li class="ch-pagination-current"><a href="/3.html">3</a></li>
    <li><a href="/4.html">4</a></li>
    <li><a href="/5.html">5</a></li>
    <li><a type="next" href="/4.html">Next</a></li>
</ul>

Tables

Table
Data Operation Seller Description Price Status Actions
02/04/2011 Sale mail@example.com Shopping at MercadoLibre $1200,30 Pending select
02/04/2011 Purchase mail@example.com Shopping at MercadoLibre $1200,30 Pending select
02/04/2011 Sale mail@example.com Shopping at MercadoLibre $1200,30 Pending select
02/04/2011 Sale mail@example.com Shopping at MercadoLibre $1200,30 Pending select 
<table class="ch-datagrid" summary="Listado de cobros en MercadoPago">
    <caption>Table</caption>
    <thead>
        <tr>
            <th scope="col">Date</th>
            ...
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>02/04/2011</td>
            ...
        </tr>
    </tbody>
</table>
Table
Data Operation Seller Description Price Status Actions
02/04/2011 Sale mail@example.com Shopping at MercadoLibre $1200,30 Pending select
02/04/2011 Purchase mail@example.com Shopping at MercadoLibre $1200,30 Pending select
02/04/2011 Sale mail@example.com Shopping at MercadoLibre $1200,30 Pending select
02/04/2011 Sale mail@example.com Shopping at MercadoLibre $1200,30 Pending select 
<table class="ch-datagrid-controls" summary="Listado de cobros en MercadoPago">
    <caption>Table</caption>
    <thead>
    <tr>
        <th scope="col">Date</th>
        ...
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>02/04/2011</td>
        ...
    </tr>
    </tbody>
</table>

Loadings

<span class="ch-loading-small"></span>
<span class="ch-loading"></span>
<span class="ch-loading-large"></span>