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

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

titon-toolkit

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

  • 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

B!

Comment

コメント(0)

コメントはまだありません。

コメントする

Trackback(0)