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

HTML5のUIフレームワークは何を使っていますか。恐らく最も多いのはBootstrap、ついでZurb Foundationかなと思います。やはり情報量も多くてライブラリも多数揃っているのは大きなアドバンテージと言えるでしょう。

しかしその代わりにBootstrap臭と言われるような“らしさ”を感じさせてしまって敬遠されることもあります。そこでちょっとマイナーなフレームワークを採用することで他者と差別化をはかることができるでしょう。今回はTuktukを紹介します。

Tuktukの使い方

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

ブログテンプレート。
ブログテンプレート。

ランディングページ。
ランディングページ。

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

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

プロフィールページ風。
プロフィールページ風。

Webアプリケーション風。
Webアプリケーション風。

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

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

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

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

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

ナビゲーション。
ナビゲーション。

モーダルウィンドウ。
モーダルウィンドウ。

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

アイコンはFont Awesomeから。
アイコンはFont Awesomeから。

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

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

Tuktuk - Simple (but powerful) RWD Framework

soyjavi/tuktuk

 

MOONGIFTの関連記事

  • DevRel
  • Com2