フラットなスタイルのUIエレメントがずらっと揃ったフレームワーク -Furatto

BootstrapFoundationのように、フロントエンドのさまざまなUIエレメントが揃ったフレームワークを紹介します。

一番の大きな違いは、名の通りフラットを前提に作成されている、ということでしょうか。

サイトのキャプチャ

Furatto
Furatto -GitHub

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

デモのキャプチャ

Buttons

まずは、ボタン類。

デモのキャプチャ

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

デモのキャプチャ

Images

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

デモのキャプチャ

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

デモのキャプチャ

Tables

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

デモのキャプチャ

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

デモのキャプチャ

Base

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

デモのキャプチャ

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

デモのキャプチャ

Grid

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

デモのキャプチャ

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

デモのキャプチャ

Forms

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

デモのキャプチャ

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

デモのキャプチャ

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

デモのキャプチャ

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

デモのキャプチャ

Components

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

デモのキャプチャ

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

デモのキャプチャ

ラベル。

デモのキャプチャ

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

デモのキャプチャ

JavaScript

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

デモのキャプチャ

モーダルウインドウ。

デモのキャプチャ

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

top of page

©2017 coliss