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

ほほーこれはますますBootstrapにハマってしまいそうです。

Bootstrapはデザインが苦手なプログラマー(筆者のような)にとって救世主のようなライブラリになっています。しかしそれだけにカスタマイズは苦手でどれも似たような雰囲気になってしまいます。そこでFancybootを使ってみましょう。

Fancybootでは色設定をはじめ、ボックスの大きさや必要なプラグインを自分で選択してカスタマイズできるようになっています。それもオンライン上でできるとなれば使わない手はないでしょう。


トップページ。可愛い猫がお出迎え。ネットは猫のためにあるとはまさにこのこと。


まずコンポーネントを選択します。必要ではないコンポーネントを外せますが…まぁ大抵は外さないですよね。ということで次のステップに進みます。


jQueryプラグインを選択します。これもあるに越したことはないですし、そのままで良いのかな。では次にいきます。


こちらはプレビュー。不要なコンポーネントを外したりするとプレビュー内容が変わります。


最後にカラーカスタマイズ。ピッカーが変な気はしますが慣れれば大丈夫です。自由に色を選択できます。


反映はリアルタイムに行われるので調整がしやすいです。


ボタンなども色を変更できます。

色が与えるインパクトは大きく、黒いツールバーや青いボタンなどを見るとBootstrapっぽさを感じてしまいます。そこでちょっと色を変えてあげるだけでも印象が変わるものです。サービスカラーに合わせて変更したいですね。

恐らくコンポーネントやjQueryプラグインは外す必要はないように思いますが、サイズをなるべく小さくしたい時や別なJavaScriptフレームワークを選択する場合には良いかも知れません。いずれにせよWebブラウザだけでカスタマイズできるのは便利ですよ!

FancybootはBootstrap用のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。

Fancyboot - Customize · Bootstrap

prabinpebam/fancyboot

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2