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

直接本体をいじらず、別途カスタマイズする事ができます〜

f:id:treeapps:20180418115102p:plain

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フォルダを丸ごと上書きコピーするだけで、簡単にバージョンアップする事ができます。