ウェブ制作の時間を大幅に短縮する、今時のUIコンポーネントが簡単に実装できる -Chico UI

HTML5+CSS3+JavaScriptで制作されたオープンソースのUIコンポーネントコレクションを紹介します。

サイトのキャプチャ

Chico UI

Chico UIの対応ブラウザは下記の通りです。
IE6には対応していませんが、十分でしょう。

対応ブラウザ
  • Google Chrome
  • Safari
  • Firefox 4+
  • Internet Explorer 7+
  • Opera

Chico UIのウェブページに使用するさまざまなUIコンポーネントを紹介します。
と、その前にレイアウトとグリッドから。

サイトのキャプチャ

Mesh: Layout
可変・エラスティックのレイアウト。

サイトのキャプチャ

Mesh: Grid
グリッドのパターン。

続いて、スタイルシートのライブラリです。
シンプルなHTMLにclassを付与するだけで実装できます。

サイトのキャプチャ

CSS Library: Buttons
画像無し、スタイルシートで実装したボタン。

サイトのキャプチャ

CSS Library: Icons
各種アイコンも簡単なコードで実装可能。

サイトのキャプチャ

CSS Library: Message Boxes
メッセージボックスも多種用意。

サイトのキャプチャ

CSS Library: Pagination
ページネーション。

サイトのキャプチャ

Form
フォームもclass名を変更するだけで多種多様なスタイルで。

以下、最近のウェブサイトでよく見かけるUIコンポーネントです。

サイトのキャプチャ

Auto Complete
フォームの入力欄にヒントなどのテキストを表示します。

サイトのキャプチャ

Blink
カラーをアニメーションで変更します。

サイトのキャプチャ

Calendar
カレンダー(リードオンリー)。

サイトのキャプチャ

Carousel
コンテンツリストをアニメーションでスライドするカルーセル。

サイトのキャプチャ

CountDown
Twitterのように文字をカウントダウンします。

サイトのキャプチャ

Date Picker
日付入力を支援。

サイトのキャプチャ

Dropdown
ドロップダウン。

サイトのキャプチャ

Expando
アローをクリックするとインフォメーションが表示されます。

サイトのキャプチャ

menu
入れ子のリストをアニメーションで開閉するメニュー。

サイトのキャプチャ

Modal
モーダルウインドウを表示します。

サイトのキャプチャ

Tab Navigation
タブコンテンツ。

サイトのキャプチャ

Zoom
画像の一部を拡大表示します。

top of page

©2017 coliss