最近はWebサービスやWebシステムのデザインを一から作ることも減ってきました。数多あるデザインフレームワークから選んだり、JavaScriptフレームワークが自然とデザインまで決めてくれることもあります。 今回はモバイルやデスクトップ向けにUIコンポーネントを提供するTitonを紹介します。

Titonの使い方

今回はスクリーンショット多めで紹介します。

アコーディオン。

ボタン。

カルーセル。

コードブロック。

ドロップダウン。

フォーム。

グリッド。

入力系。

入力グループ。

ラベル。

ローディングラベル。

マスキング。

マトリックス。

モーダル。

通知。

サイドメニュー表示。

ページネーション。

スクロール追従コンテンツ。

ツールチップ。

プログレスバー。

画像だけを拡大表示。

スクロールすると左側の見出しのハイライトが変わります。

ステップ。

スイッチ。

タブ。

テーブル。

左下に通知表示。

入力補完。

タイポグラフィ。

TitonはUIコンポーネントなのでデザインだけでなく、JavaScriptも含めたUIライブラリとなっています。特徴としてはモバイルファースト、レスポンシブとなっており、デザイン的にはセマンティックなマークアップ、CSS3アニメーションの利用があります。

TitonはHTML5/JavaScript/CSS3製のオープンソース・ソフトウェア(BSD License)です。

Toolkit - Project Titon titon/toolkit