最近Twitter Bootstrapばかりいじっているので、カスタマイズのやりかたが非常にきになって仕方がない。LESS覚えないといけないけど、それはあんまり問題じゃなくて、アップデートに柔軟に対応できるような構成にしておくのが重要だったりする。

できるだけカスタマイズ性をあげつつ、一方で更新に対応するため、bootstrap自身はできるだけ触らないようにするにはどうしたらいいか探してたら、sofに2つほどやり方載っていた

Twitter Bootstrap Customization Best Practices

add-on.lessをbootstrap.lessの途中に挟み込む方法

変数の設定とミックスインの設定をした後に独自の定義を施したlessを読み込んで上書きする。

// CSS Reset
@import "reset.less";

// Core variables and mixins
@import "variables.less"; // Modify this for custom colors, font-sizes, etc
@import "mixins.less";

// Custom Addons
@import "addon-file.less"; // <--- My custom LESS addon

// Grid system and page structure
@import "scaffolding.less";

...

bootstrap.lessに手を入れちゃうので、更新するたびにこの一行を書きなおす可能性があるかも。あんまり気にならないのかもしれないが。

bootstrapには触らない方法

bootstrapは適当なディレクトリ(この場合はbootstrap)においておいて、bootstrap.lessとvariables.lessをコピーしてくる。bootstrap.lessはtheme.lessに名前を変える。

/Website            
       theme.less
       variables.less
       /bootstrap

variables.lessは好き放題変更を加える。theme.lessの方は変更を加えたvaliables.lessをimportするようにして、残りはbootstrap/*.lessをimportするように修正を加える。

こうしておけば、bootstrap以下は常に安全に更新できる。

特にgit cloneしたtwitter-bootstrapの場合、git pullで安全に更新することができるのでこっちのほうがいいかもしれない。

今度つくるサイトはこの方法でやってみる。