ITエンジニア/デザイナ向けにオープンソースを毎日紹介

最近はWebサービスやWebシステムのデザインを一から作ることも減ってきました。数多あるデザインフレームワークから選んだり、JavaScriptフレームワークが自然とデザインまで決めてくれることもあります。

今回はモバイルやデスクトップ向けにUIコンポーネントを提供するTitonを紹介します。

Titonの使い方

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

アコーディオン。
アコーディオン。

ボタン。
ボタン。

カルーセル。
カルーセル。

コードブロック。
コードブロック。

ドロップダウン。
ドロップダウン。

フォーム。
フォーム。

グリッド。
グリッド。

入力系。
入力系。

入力グループ。
入力グループ。

ラベル。
ラベル。

ローディングラベル。
ローディングラベル。

マスキング。
マスキング。

マトリックス。
マトリックス。

モーダル。
モーダル。

通知。
通知。

サイドメニュー表示。
サイドメニュー表示。

ページネーション。
ページネーション。

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

ツールチップ。
ツールチップ。

プログレスバー。
プログレスバー。

画像だけを拡大表示。
画像だけを拡大表示。

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

ステップ。
ステップ。

スイッチ。
スイッチ。

タブ。
タブ。

テーブル。
テーブル。

左下に通知表示。
左下に通知表示。

入力補完。
入力補完。

タイポグラフィ。
タイポグラフィ。

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

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

Toolkit - Project Titon

titon/toolkit

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2