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

創造意欲がかき立てられますよ!

Boostrap臭を嫌って導入に踏み切れないという方は多いですが、それもあって多彩なテーマが開発されています。それらと入れ替えると、イメージががらっと変わって見えるはずです。

今回は最近流行のフラットUIを取り入れたBootflatを紹介します。フラット=角張っているというイメージも壊してくれる素敵なテーマです。

Bootflatのスクリーンショット

今回はスクリーンショット多めで紹介します。

基本カラー。パステル系ではっきりとしていますね。
基本カラー。パステル系ではっきりとしていますね。

まずはボタンとボタングループ。
まずはボタンとボタングループ。

ボタン+ドロップダウン、ラベル、バッジ、ツールチップなど。
ボタン+ドロップダウン、ラベル、バッジ、ツールチップなど。

ドロップダウンはもちろん階層対応です。
ドロップダウンはもちろん階層対応です。

フォーム。
フォーム。

フォームの横にドロップダウンを付けることもできます。何かと応用できそうですね。
フォームの横にドロップダウンを付けることもできます。何かと応用できそうですね。

アラート。
アラート。

タブ。4辺全てに対応しています。
タブ。4辺全てに対応しています。

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

パン屑、通知、プログレスバー、ナビゲーション。
パン屑、通知、プログレスバー、ナビゲーション。

アコーディオン。
アコーディオン。

リスト。
リスト。

カルーセル付きの説明。
カルーセル付きの説明。

サムネイル。
サムネイル。

モーダル。
モーダル。

パネル。
パネル。

メディアリスト。インデントも対応しています。
メディアリスト。インデントも対応しています。

ヘッダーのところを見ると背景が透けています。iOS 7風ですね。
ヘッダーのところを見ると背景が透けています。iOS 7風ですね。

フッター。
フッター。

Bootflatの特徴としては、Bootstrap 3.1.0がベースであること、HTML5/CSS3で開発されていること、軽量でパフォーマンスが良いこと、そしてモバイルファーストというのが挙げられています。つまりこれらの機能はスマートフォンにおいても申し分なく利用できるようになっています。

これだけ見せつけられると色々作りたくなってきちゃいますね!

BootflatはHTML5/CSS3製のオープンソース・ソフトウェア(MIT License)です。

Bootflat

bootflat/bootflat.github.io

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2