モダンなUIコンポーネント Titon Toolkit

2015/1/5

Titon ToolkitはUIコンポーネント集です。
セマンティックなHTML5、CSS3のアニメーションやスタイル、JavaScript用のbroweser APIを使用してます。Sass、Grunt、パッケージマネージャーもサポートしてます。
Project Titon

下記のような特徴があります。

fontやmargin、paddingはemまたはremベースなのでスケーラブル
古いブラウザにはグレースフルデグラデーション、新しい機能はプログレッシブ・エンハンスメントで対応
レスポンシブ
CSSアニメーションはGPUを利用
CSSはBEM記法

基本的なUIコンポーネントはひと通り揃ってます。

Breadcrumb
Button
Button Group
Divider
Grid
Icon
Input Group
Label
Loader
Notice
Pagination
Progress
Step
Switch
Table

JavaScriptのモジュールは下記の通り。

Accordion
Blackout
Carousel
Drop
Flyout
Input
Lazy Load
Mask
Matrix
Modal
Off Canvas
Pin
Popover
Showcase
Stalker
Tab
Toast
Tooltip
Type Ahead

Lazy LoadやMatrixはこのようなツールではあまり見ないモジュールです。

これらの機能はデモで一覧できます。
Titon Toolkit – Demos

インストール

インストールはgitからcloneできます。

git clone git@github.com:titon/toolkit.git

cloneすると用途ごとにディレクトリ分けされてます。「dist」フォルダに本番環境で使うファイル一式があります。
初期状態では、

toolkit.css
toolkit.js
toolkit.min.css
toolkit.min.js

が入ってます。

下記のHTMLをBoilerplateとして「dist」フォルダに保存すれば、取り敢えずの使用は始められます。

<!DOCTYPE html>
<html>
<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
		<title>Titon Toolkit</title>
		<link href="toolkit.min.css" rel="stylesheet">
		<link href="style.min.css" rel="stylesheet">
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
		<script src="toolkit.min.js"></script>
</head>
<body>
</body>
</html>

コンポーネントなどはサイトにサンプルHTMLが記載されてるので、それを参照すれば簡単に使えそうです。
Components – Documentation – Project Titon

モダンなUIコンポーネント Titon Toolkit

インストール

Comment

コメント(0)

コメントする

Trackback(0)

関連記事

人気記事