Css Library

Documentation updated onJune 4th.

Contents
1 Description
2 Typography
2.1 Headings
2.2 Paragraphs
3 Lists
3.1 Unstyled
3.2 Unordered
3.3 Ordered
4 Boxes
4.1 Container
4.2 Lite Box
4.3 Box
5 Buttons
6 Loadings
7 Icons
8 Message boxes
9 Pagination
10 Tables

Description

Here's a list of CSS Library that are part of Chico UI look and feel. They will help you with common layout elements, such as buttons and tables.

Typography

Headings

ExampleCode snippet

Heading 1

Heading 2

Heading 3

Heading 4

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

Paragraphs

ExampleCode snippet

Lorem ipsum dolor sit amet.

Ut enim ad minim veniam, quis nostrud exercitation.

<p>Lorem ipsum dolor sit amet.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation.</p>

Lists

Unstyled

ExampleCode snippet
  • foo
  • foobar
  • bar
<ul>
    <li>foo</li>
    <li>foobar</li>
    <li>bar</li>
</ul>

Unordered

ExampleCode snippet
  • foo
  • foobar
  • bar
<ul class="ch-list">
    <li>foo</li>
    <li>foobar</li>
    <li>bar</li>
</ul>

Ordered

ExampleCode snippet
  1. foo
  2. foobar
  3. bar
<ol class="ch-list">
   <li>foo</li>
   <li>foobar</li>
   <li>bar</li>
</ol>

Boxes

Container

ExampleCode snippet
Container
<div class="ch-box-container">Container Box</div>

Lite Box

ExampleCode snippet
Box
<div class="ch-box-lite">Lite Box</div>

Box

ExampleCode snippet
Box
<div class="ch-box">Box</div>

Buttons

ExampleCode snippet
<input class="ch-btn ch-btn-big" ... />
<input class="ch-btn" ... />
<input class="ch-btn ch-btn-small" ... />
<input class="ch-btn-skin ch-btn-small" ... />
<input class="ch-btn ch-btn-big ch-btn-disabled" disabled="disabled" />
<input class="ch-btn ch-btn-disabled" disabled="disabled" />
<input class="ch-btn ch-btn-small" disabled="disabled" />
<input class="ch-btn-skin ch-btn-small ch-btn-disabled" disabled="disabled" />

Loadings

ExampleCode snippet
<span class="ch-loading-small"></span>
<span class="ch-loading"></span>
<span class="ch-loading-big"></span>

Icons

Font Awesome - CC BY 3.0 -http://fortawesome.github.com/Font-Awesome

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

Message Boxes

ExampleCode snippet

Do you need any help?

<p class="ch-box-help">Do you need any help?</p>

Here's more information

<p class="ch-box-information">Here's more information</p>

Oops! something went wrong

<p class="ch-box-error">Oops! something went wrong</p>

Warning! be careful

<p class="ch-box-attention">Warning! be careful</p>

Great! you're awesome

<p class="ch-box-ok">Great! you're awesome</p>

Pagination

ExampleCode snippet
<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 type="next" href="/4.html">Next</a></li>
</ul>

Tables

Controls

CodePrice
A001XXL

$10000

A002XXL

$11000

A003XXL

$12000

A004XXL

$13000

A005XXL

$14000

<table class="ch-datagrid-controls">
    <thead>
        <tr>
            <th scope="col">
                <input type="checkbox" />
            </th>
            <th scope="col">Code</th>
            <th scope="col" class="ch-datagrid-selected">Price
                <i class="ch-datagrid-asc"><i>
            </th>
        <tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox" /></td>
            <td>A001XXL</td>
            <td><p>$100<sup>00<sup></p></td>
        </tr>
        <tr class="ch-datagrid-selected">
            <td><input type="checkbox" checked /></td>
            <td>A002XXL</td>
            <td><p>$110<sup>00<sup></p></td>
        </tr>
        <tr>
            <td><input type="checkbox" /></td>
            <td>A003XXL</td>
            <td><p>$100<sup>00<sup></p></td>
        </tr>
	 </tbody>
</table>

Readonly

CodePrice
A001XXL

$10000

A002XXL

$11000

A003XXL

$12000

<table class="ch-datagrid">
    <thead>
        <tr>
            <th scope="col">Code</th>
            <th scope="col">Price</th>
        <tr>
    </thead>
    <tbody>
        <tr>
            <td>A001XXL</td>
            <td><p>$100<sup>00<sup></p></td>
        </tr>
        <tr>
            <td>A002XXL</td>
            <td><p>$110<sup>00<sup></p></td>
        </tr>
        <tr>
            <td>A003XXL</td>
            <td><p>$100<sup>00<sup></p></td>
        </tr>
    </tbody>
</table>