Css Library
Documentation updated onJune 4th.
Contents
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
| Example | Code snippet |
|---|---|
Heading 1Heading 2Heading 3Heading 4Heading 5Heading 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
| Example | Code 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
| Example | Code snippet |
|---|---|
| <ul>
<li>foo</li>
<li>foobar</li>
<li>bar</li>
</ul> |
Unordered
| Example | Code snippet |
|---|---|
| <ul class="ch-list">
<li>foo</li>
<li>foobar</li>
<li>bar</li>
</ul> |
Ordered
| Example | Code snippet |
|---|---|
| <ol class="ch-list"> <li>foo</li> <li>foobar</li> <li>bar</li> </ol> |
Boxes
Container
| Example | Code snippet |
|---|---|
Container | <div class="ch-box-container">Container Box</div> |
Lite Box
| Example | Code snippet |
|---|---|
Box | <div class="ch-box-lite">Lite Box</div> |
Box
| Example | Code snippet |
|---|---|
Box | <div class="ch-box">Box</div> |
Buttons
| Example | Code 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
| Example | Code 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
| Example | Code 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
| Example | Code 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
| Example | Code 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
| Code | Price | |
|---|---|---|
| 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
| Code | Price |
|---|---|
| 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>