フラットなスタイルのUIエレメントがずらっと揃ったフレームワーク -Furatto
Post on:2013年7月16日
BootstrapやFoundationのように、フロントエンドのさまざまなUIエレメントが揃ったフレームワークを紹介します。
一番の大きな違いは、名の通りフラットを前提に作成されている、ということでしょうか。

Furattoは、かっこいいフラットなスタイルのUIエレメントを使ったウェブページが簡単に実装できるようになっています。
デモページから、そのUIエレメントをいくつか紹介します。

まずは、ボタン類。

デフォルトのボタン、カラフルなボタン、アイコン付きのボタンをはじめ、バータイプのボタンなどが揃っています。

画像もclassを加えるだけで、さまざまなスタイルで配置できます。

デフォルトの矩形状から、サークル状、ポラロイド状、ホバーエフェクトなどが揃っています。

テーブルも豊富なスタイルが用意されています。

ストライプのテーブル、レスポンシブ対応のテーブル、カラフルなテーブルなどなど。

Baseはページでよく使うエレメントです。

見出し、リスト、左右中央寄せ、強調、インラインリストなど。

グリッドは767pxの12カラムがベースです。

divなどにclassを加えるだけで、さまざまなグリッドを作りだすことができます。ネストにも対応しています。

フォームは利用にあわせて、さまざまなスタイルが用意されています。

インラインタイプ、ラベルと入力欄の水平タイプ。

チェックボックスやラジオボタン、セレクトメニューもフラットなスタイルです。

ステータスの表記もかっこいいフラットなスタイルです。

コンポーネントはウェブページでよく使うUIが揃っています。

ナビゲーションやページネーション。

ラベル。

通知パネルをはじめ、バッジ、ツールチップ、タグなども揃っています。また、イレギュラーなレイアウトで使う用のコードなども用意されています。

JavaScriptでは最近のウェブページでよく見かけるスクリプトが揃っています。

モーダルウインドウ。

画像とテキストをスライド表示するカルーセル、他にもツールバー、日付ピッカー、ドロップダウンメニューなども揃っています。
sponsors