HTML5のUIフレームワークは何を使っていますか。恐らく最も多いのはBootstrap、ついでZurb Foundationかなと思います。やはり情報量も多くてライブラリも多数揃っているのは大きなアドバンテージと言えるでしょう。 しかしその代わりにBootstrap臭と言われるような“らしさ”を感じさせてしまって敬遠されることもあります。そこでちょっとマイナーなフレームワークを採用することで他者と差別化をはかることができるでしょう。今回はTuktukを紹介します。

Tuktukの使い方

まずはサンプルを見ていきます。

ブログテンプレート。

ランディングページ。

最近よく見るような4つのカラムに分かれたページ構成もできます。

こういう大きな著者ページもよく見かけますね。

プロフィールページ風。

Webアプリケーション風。

Tuktukは緑と濃い灰色を基調にしたデザインとなっています。フラットUIでまさに今どきといった感じがありますね。

では部品を見ていきます。

フォーム、ボタン、テーブル。

フォームも一つ一つの部品にこだわりが感じられます。

リスト。入れ子に対応しています。

ナビゲーション。

モーダルウィンドウ。

二つのボタン付きのモーダルウィンドウ。

アイコンはFont Awesomeから。

Tuktukの特徴はCSS3ベース、軽量で高速となっています。カラムは他のUIフレームワークと変わらず12個に分けた形になっています。機能はまだ最低限ですが、だからこそあまりフレームワークに引っ張られることなくカスタマイズができそうです。

TuktukはCSS3製、MIT Licenseのオープンソース・ソフトウェアです。

Tuktuk - Simple (but powerful) RWD Framework soyjavi/tuktuk