Twitter Bootstrapのデザインカスタマイズお役立ちサイト
CSSフレームワークTwitter Bootstrapについて。
Twitter Bootstrap(以下、Bootstrap)はあらかじめナビヘッダーやボタンなど多くのパーツがCSSで定義されているので、その定義されたclassを指定してあげるだけでフラットなデザインができたりする優れものだったりする。配色などは公式ダウンロードページでカスタマイズできるものの、トータルデザインを考慮しつつ配色カスタマイズを考えるはなかなか難しい。
そこで、Bootstrapのカスタマイズに役立つ無料の便利サイトをいくつか紹介してみる。
○画像イメージから拡張テンプレートを自動生成してくれるサイト
WEBに公開されている画像を参考に、イメージにあった配色のBootstrapカスタマイズテンプレートを提供してくれるのが以下のサイト。画像にサイトロゴなんかを設定して[Go Lavish]ボタンを押せばサイトロゴのデザインにあったテンプレートが出力される。完成品も修正できるので、完成度高い。今やっている案件ではこのテンプレートを採用している。
○カラーテーマ集
そのまま様々なカラーのテーマテンプレートを無料で提供しているサイト。配色がキレイなものばかり。
○ボタンの色拡張CSS自動生成サイト
テンプレートではないのだけど、Bootstrapのボタンの色を細かくグラフィカルに指定した拡張用CSSを出力してくれるサイト。ただし、色によってはhovar時の色が合わなくて自分で調整しないといけない自体になるところが難点。
Beautiful Buttons for Twitter Bootstrappers
以上。これらのツール使った上でどうしても納得いかないところだけカスケードしたりして、いいかんじに仕上げてください。
参考：http://getbootstrap.com/css/
