コンテンツへスキップ

Bootstrapを自分好みにカスタマイズする

概要

bootstrap便利ですよね。

でもフォントサイズが微妙に大きかったり、

カラーパターンをそのまま使うとサイトがモロにbootstrapになったり、

ナビゲーションバーの高さが高い!とおもって小さくしようとしても

なかなかならなかったり

微妙にカスタマイズしたい部分があります。

今回は自分でbootstrapをビルドしてマイテーマを作ってみます。

この記事を参考にしました。

 

はじめに

bootstrapといいつつ、bootstrapのカスタムラッパーである

bootswatchをベースにカスタマイズします。

bootswatchはbootstrapをカスタマイズした独自テーマを配っています。

これをベースに作ればあんまりbootstrapっぽくないところから始められます。

 

手順

環境

node/npm/gitあたりが必要になります。

 

作業ディレクトリ

適当な位置に適当なディレクトリを作って作業します。

例として以下のようにしました。

mkdir custom_bootstrap
cd custom_bootstrap

ダウンロード

gitにあるbootswatchを落としてきます

git clone https://github.com/thomaspark/bootswatch.git

カレントディレクトリを移動

gitからダウンロードしてできたbootswatchディレクトリに入ります

わざわざこういうことを書くのは移動し忘れてエラーになった故です。

cd bootswatch

必要なライブラリをダウンロード

npmで簡単にセットできます

npm install

試しに実行

デフォルトでコンパイルと実行をしてくれるようにgruntがセットされてます。

単純に以下を叩く

grunt

ブラウザが起動して画面が表示されます。

windowsとかだとアドレスバー0.0.0.0:3000の部分をlocalhost:3000にしないとダメかもです。

表示された画面の上部「theme」からテーマを選ぶとテーマが表示されますね。

このテーマ毎にフォルダが分かれているのでこれをコピーしてカスタマイズします。

テーマのコピー

好きなテーマを選んでフォルダごとコピーして好きな名前に変えましょう。

ブラウザで確認

http://localhost:3000/コピーして作ったディレクトリ名

でブラウザから確認できます。

テーマの編集

基本的にlessで記載されているCSSを加工します。

テーマのフォルダを開くとvariables.lessとbootswatch.lessがありますね。

これをテキストエディタでガリガリ変更します。

例えばナビゲーションバーの高さを変えたいなら

variables.lessの

@navbar-height

の部分を変えればOKです。

変えて保存するとgruntが勝手にコンパイルしてブラウザに反映してくれます。

もってく

できあがったらディレクトリ内にあるbootstrap.cssもしくはbootstrap.min.cssを

もっていきましょう。

と思ったらこれだけでは足りませんでした。

index.htmlとbootstrap.cssを参考に以下のものを持って行きましょう。

./bootstrap.css もしくは./bootstrap.min.css
../assets/css/bootswatch.min.css
../bower_components/全部 *不要なものもあるけどわからない場合、全部を推奨
../fonts/全部

これらを適当なディレクトリにでもまとめて

index.htmlのように読みこめば完成です。

あとがき

gruntが整備されているので簡単にカスタマイズできましたね。

gruntだけでなくlessなども綺麗に記載されておりとっても勉強になります。

よーく読み込んでみるのをおすすめします。

 

コメントを残す

メールアドレスが公開されることはありません。