読者です 読者をやめる 読者になる 読者になる

文系プログラマによるTIPSブログ

文系プログラマ脳の私が開発現場で学んだ事やプログラミングのTIPSをまとめています。

twitter bootstrap本体を触らずにカスタマイズする方法

サイト作成 bootstrap

Bootstrap
tree-tipsではtwitter bootstrapを使ってデザインしています。

このbootstrap、簡単に綺麗なデザインができ、デザイナーでない私でも簡単綺麗なUIが実現できます。
しかしこのbootstrap、主にmargin・paddingに問題があると思っています。

bootstrapをカスタマイズしたデザイン
f:id:treeapps:20121103144948p:plain
bootstrapをカスタマイズしないデザイン
f:id:treeapps:20121103145007p:plain
色々いじってるので単純な比較ではありませんが、
カスタマイズしない場合はmargin・paddingが酷い事になっているように見えます。
これはtwitter流の黄金比?でしょうか。それとも日本人は小さいもの好きだからか。
それにbootstrapを知っている、使った事が有る方には、
bootstrapを使っている事が即バレして悲しい
デザインはしない(キリッ と公言しているようで悲しい
ので、カスタマイズする事をおすすめします。
青いボタンとか、背景色とか、妙に大きめのマージンとか、見た瞬間解るレベルです。
ウンコード・マニアとか、FESSとか、
見た瞬間に「ああ、bootstrapか」と解ります。。

bootstrapをカスタマイズする方法
カスタマイズ方法の一つですが、bootstrapのcssには全く手をつけず、
別途作成したcssでbootstrapのセレクタを上書きする方法を、tree-tipsでは使っています。
具体的には以下の通りです。

<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap-responsive.min.css">
↓↓↓↓ これを追加 ↓↓↓↓
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap-custom.css" />

bootstrapのcss(カスタマイズしないのだから圧縮版のminでいい)を普通に読み込んだ後に、
新規に作成したbootstrap-custom.cssを読み込み、bootstrap.cssセレクタを上書きします。

例えば<p>ですが、bootstrap.cssでは以下になっています。

p {
  margin: 0 0 10px;
}

bootstrap-custom.cssに以下を記述してbootstrap.min.cssセレクタを上書きします。

p {
  margin: 5px 2px 5px 2px;
}

こうすることで、bootstrap.min.cssとbootstrap-responsive.min.cssは全くいじる必要無くなるので、
bootstrapがバージョンアップした場合も簡単に対応できるかと思います。
バージョンアップ時はbootstrapフォルダを丸ごと上書きコピーするだけで、簡単にバージョンアップする事ができます。


以下の記事も合わせてどうぞ!!
twitter bootstrapのテーマ5個、拡張コンポーネント8個を紹介 - treeのメモ帳