フラットなスタイルのUIエレメントがずらっと揃ったフレームワーク -Furatto
Post on:2013年7月16日
BootstrapやFoundationのように、フロントエンドのさまざまなUIエレメントが揃ったフレームワークを紹介します。
一番の大きな違いは、名の通りフラットを前提に作成されている、ということでしょうか。
![サイトのキャプチャ](/wp-content/uploads-201302/2013071605.png)
Furattoは、かっこいいフラットなスタイルのUIエレメントを使ったウェブページが簡単に実装できるようになっています。
デモページから、そのUIエレメントをいくつか紹介します。
![デモのキャプチャ](/wp-content/uploads-201302/2013071607-01.png)
まずは、ボタン類。
![デモのキャプチャ](/wp-content/uploads-201302/2013071606-01.png)
デフォルトのボタン、カラフルなボタン、アイコン付きのボタンをはじめ、バータイプのボタンなどが揃っています。
![デモのキャプチャ](/wp-content/uploads-201302/2013071607-02.png)
画像もclassを加えるだけで、さまざまなスタイルで配置できます。
![デモのキャプチャ](/wp-content/uploads-201302/2013071606-02.png)
デフォルトの矩形状から、サークル状、ポラロイド状、ホバーエフェクトなどが揃っています。
![デモのキャプチャ](/wp-content/uploads-201302/2013071607-03.png)
テーブルも豊富なスタイルが用意されています。
![デモのキャプチャ](/wp-content/uploads-201302/2013071606-03.png)
ストライプのテーブル、レスポンシブ対応のテーブル、カラフルなテーブルなどなど。
![デモのキャプチャ](/wp-content/uploads-201302/2013071607-04.png)
Baseはページでよく使うエレメントです。
![デモのキャプチャ](/wp-content/uploads-201302/2013071606-04.png)
見出し、リスト、左右中央寄せ、強調、インラインリストなど。
![デモのキャプチャ](/wp-content/uploads-201302/2013071607-05.png)
グリッドは767pxの12カラムがベースです。
![デモのキャプチャ](/wp-content/uploads-201302/2013071606-05.png)
divなどにclassを加えるだけで、さまざまなグリッドを作りだすことができます。ネストにも対応しています。
![デモのキャプチャ](/wp-content/uploads-201302/2013071607-06.png)
フォームは利用にあわせて、さまざまなスタイルが用意されています。
![デモのキャプチャ](/wp-content/uploads-201302/2013071606-06.png)
インラインタイプ、ラベルと入力欄の水平タイプ。
![デモのキャプチャ](/wp-content/uploads-201302/2013071606-07.png)
チェックボックスやラジオボタン、セレクトメニューもフラットなスタイルです。
![デモのキャプチャ](/wp-content/uploads-201302/2013071606-08.png)
ステータスの表記もかっこいいフラットなスタイルです。
![デモのキャプチャ](/wp-content/uploads-201302/2013071607-07.png)
コンポーネントはウェブページでよく使うUIが揃っています。
![デモのキャプチャ](/wp-content/uploads-201302/2013071606-09.png)
ナビゲーションやページネーション。
![デモのキャプチャ](/wp-content/uploads-201302/2013071606-10.png)
ラベル。
![デモのキャプチャ](/wp-content/uploads-201302/2013071606-11.png)
通知パネルをはじめ、バッジ、ツールチップ、タグなども揃っています。また、イレギュラーなレイアウトで使う用のコードなども用意されています。
![デモのキャプチャ](/wp-content/uploads-201302/2013071607-08.png)
JavaScriptでは最近のウェブページでよく見かけるスクリプトが揃っています。
![デモのキャプチャ](/wp-content/uploads-201302/2013071606-12.png)
モーダルウインドウ。
![デモのキャプチャ](/wp-content/uploads-201302/2013071606-13.png)
画像とテキストをスライド表示するカルーセル、他にもツールバー、日付ピッカー、ドロップダウンメニューなども揃っています。
sponsors