カスタマイズしたものに変更
昨日カスタマイズしたものを実際に反映した。今見えている「見てくれ」がそうである。
LESSファイルはここにある。ソースコード自体は「boilerplate」をベースにしている。
実際行った手順は下記の通りである。
- Hatena-Blog-Themes/boilerplate at master · hatena/Hatena-Blog-ThemesをForkしてclone.
- Bootstrapをダウンロードし、プロジェクトディレクトリに展開。 必要なのはLESSフォルダのみだが、とりあえず全部展開して置いておく。
- boilerplate.less を main.lessにコピー。@import周りを取り除き、bootstrap.lessのみを@importするように変更。
@import (reference) "bootstrap/less/bootstrap.less";
※referenceキーワードを入れて、利用したmixinやclassのみをインクルードするようにするところがポイント。 - boilerplate.lessの変数をbootstrap.lessの変数に置き換え。必要に応じてmixinを追加。
- コンパイル。
- サイズチェックして問題なければデザイン→CSSに張り付けてチェック。
ちょっと気を付けないといけないところ
ちょっとハマったところは以下のとおりだ。
グリッドシステム
rowやcol-md-3はLESSの実行時に生成されるものなので、LESSファイル定義フェーズでは使用できない。
// NG
.row-test {
.row;
}
.col-test {
col-md-6;
}
かわりに相当するmixinを呼び出すようにする。
// OK
.row-test {
.make-row();
}
.col-test {
.make-md-column(6);
}
モバイルをレスポンシブ対応にするには
CSS定義の先頭に以下のコメントを追加する。これを入れないとモバイル画面のビューポート定義がレスポンシブ対応にならないので注意する。
/*Responsive: yes */
まだちょこっといじっている程度なので今後カスタマイズを進めていくといろいろハマりポイントは出てくるかもしれない。
またJSが必要なwidgetはまだ利用していない。これはちょっと工夫が必要だろう。右のサイドバーをnavbarにしてみたいんだけども、無理かな。。
scaffolding.lessとnormalize.lessはやっぱり強制importが必要
入れとかないと、tableのデザインとグリッドがうまく動きませんな。。