はじめてBootstrap LESSをがっつりカスタマイズしたので、今回はその覚え書きです。
Bootstrap3 Lessを使用するにあたり、Gruntを導入したほうが俄然便利なため、今回はGruntの導入から説明いたします。

Botstrap LESSでカスタマイズする理由

前もって言ってしまうと、基本的なカスタマイズは公式サイトのカスタマイズページで十分すぎるくらい出来てしまいます（以前見た時よりも、ものすごく項目数が充実しているような気が…）。
そのため、わざわざLESSを使い、さらには環境を整えてやる必要があるかと言われれば、使用目的によっては不要かもしれないですね。
ただ、LESSでのカスタマイズだと公式サイト以上の編集が容易にスピーディーにでき、もしも途中で大幅な仕様変更があった場合でも柔軟に対応できます。
また、構造把握や管理がしっかりできるので、今後もBootstrapを使用していくつもりなら一度は経験したほうがいいかと思います。
大規模なフレームワークは構造把握が面倒なのですが、よくわからないまま使用してしまうと思わぬエラーにつながる恐れがありますし、作りがとてもよく出来ているのでとても勉強になりますよ。

コンパイル方法の変更

Bootstrap3になってからコンパイル方法がGruntになったので個人的には使いやすくなりました。
いままでは、makeコマンドを使用してコンパイルしていたようなのですが、今回からGruntになりました。
こういうのが苦手な方は、ちょっと「うっ」となってしまうかもしれないですが、Gruntfile.jsというタスクを実行するファイルが既に用意されているので、Gruntが入っている環境ならばコマンドを叩くだけで実行されます。
もちろんlessをコンパイルするだけならば、Koaraなどのコンパイラを使ってもいいとは思うのですが、コンパイル以外のタスクを実行できますので、これをきっかけに導入することをお勧めします。

Grunt.jsとは

Grunt.jsは、サーバーサイドのNode.jsというJavascriptを使用したビルドツールです。
コーディングの手助けをしてくれるタスクを自動で行ってくれます。
使用方法は、お馴染みの黒い画面になりますが、実行だけならば基本的にはscssとかと大差ないです。

では具体的にどんなことができるのかというと、一部ですが以下などです。

• sass,lessなどのメタ言語のコンパイル
• HTML,css,jsなどをminify化
• CSS Spriteの自動生成
• 画像を最適化
• ファイルの結合
• スタイルガイドの生成

フロント側コーディングの簡単な部分だけ抜粋しましたが、まだまだ多くのことができます。

Grunt.jsのインストール

Gruntを実行するためにNode.jsをインストールする必要があります。

Node.jsのインストール
下記からダウンロード・インストールしてください。
Node.js

Node.jsのインストールが完了しましたら、ターミナルやコマンドプロンプトにて、grunt-cli をインストールします。
コマンドを起動後、次のものを記述してください。

Mac

1

sudo npm install -g grunt-cli

Windows

1

npm install -g grunt-cli

Macの場合、パスワード入力を求められる場合がありますが、実行するとインストールがどんどん進みます。

これで、Gruntを使用できるようになっているはずです。
Gruntの使い方を始めるととても長くなってしまうので、それはまた別の機会に…

Bootstrap LESSのダウンロード

下記のgithubからデータをまるっとダウンロードしてください。
bootstrap
解凍した、bootstrapフォルダは任意の場所に置きます。
データを見ると、ものすごく色々なファイルがあるかと思いますが、さわるところは大体決まっているので簡単な説明です。

・/Gruntfile.js
Gruntの実行タスクを記述するファイルです。
デフォルトで主要なタスクは記述されているので、無理に編集する必要はないです。

・/less/
各lessファイルが格納されています。
このファイルを編集してカスタマイズを進めます。

・/js/
bootstrapのjsプラグインが格納されています。
最終的にbootstrap.jsに結合されて出力されますので、いらないプラグインがある場合は、Gruntfile.jsを編集します。

・/dist/
Gruntfile.jsがデフォルトのままだと、このフォルダにcssとjsがコンパイルされます。

・/assets/
jquery.jsやrespond.min.jsなどのライブラリです。
個人でライブラリを持っていない場合は、必要なものを使ってください。

Gruntfile.jsについて

前述通り、Gruntfile.jsには初めから実行タスクが記述されていますので、大幅にいじる必要はないと思いますが、制作を進める上で便利な変更点をあげます。

コンパイル先を編集

デフォルトだと、dist以下に書き出されてしまうのですが、そのままだと使いにくいですね。
私が普段している構造を例にカスタマイズ方法を説明します。

1
2
3
4
5
6
7
8
9

shared
 └css
 └js
 └img
 └bootstrap
   └dist
    ・
    ・
    ・

このような構造にしているためcssとjsは、distではなく、/shared/cssなどに出力したいとします。
そこで、Gruntfile.jsを編集します。

ファイルを開いてみると、長々とコードが書かれているのですが、38行目辺りに次のように書かれている部分があります。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

concat: {
  options: {
    banner: '',
    stripBanners: false
  },
  bootstrap: {
    src: [
      'js/transition.js',
      'js/alert.js',
      'js/button.js',
      'js/carousel.js',
      'js/collapse.js',
      'js/dropdown.js',
      'js/modal.js',
      'js/tooltip.js',
      'js/popover.js',
      'js/scrollspy.js',
      'js/tab.js',
      'js/affix.js'
    ],
    dest: 'dist/js/.js'
  }
},
uglify: {
  options: {
    banner: ''
  },
  bootstrap: {
    src: [''],
    dest: 'dist/js/.min.js'
  }
},
recess: {
  options: {
    compile: true
  },
  bootstrap: {
    src: ['less/bootstrap.less'],
    dest: 'dist/css/.css'
  },
  min: {
    options: {
      compress: true
    },
    src: ['less/bootstrap.less'],
    dest: 'dist/css/.min.css'
  },
  theme: {
    src: ['less/theme.less'],
    dest: 'dist/css/-theme.css'
  },
  theme_min: {
    options: {
      compress: true
    },
    src: ['less/theme.less'],
    dest: 'dist/css/-theme.min.css'
  }
},

これを見れば、大体の人はわかるかと思うのですが、“dest: ‘dist/”とパスが書かれている辺りをどんどん変えていけばいいだけです。
そのため、先ほどの構造の場合ではcss（less）の部分を、次のように書きかえればOKです。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

recess: {
  options: {
    compile: true
  },
  //bootstrap.lessをbootstrap.cssにコンパイルする
  bootstrap: {
    src: ['less/bootstrap.less'],
    dest: '../css/.css'
  },
  //bootstrap.lessをminifyしてbootstrap.min.cssにコンパイルする
  min: {
    options: {
      compress: true
    },
    src: ['less/bootstrap.less'],
    dest: 'dist/css/.min.css'
  },
  //theme.lessをbootstrap-theme.cssにコンパイルする
  theme: {
    src: ['less/theme.less'],
    dest: '../css/-theme.css'
  },
  //theme.lessをminifyしてbootstrap-theme.min.cssにコンパイルする
  theme_min: {
    options: {
      compress: true
    },
    src: ['less/theme.less'],
    dest: '../css/-theme.min.css'
  }
},

※ついでに何をしてる部分かコメント書いています

jsも同様に編集すれば、コンパイル先を変更できます。

Grunt起動

１．ターミナルを開きbootstrapフォルダまで移動

まずは、ターミナルなりコマンドプロンプトを起動して、ダウンロード・解凍したbootstrapの置き場所まで移動してください。
以前、SassとCompassの導入方法（Windows、Mac）でもコマンドの簡単な使い方を説明しましたが、慣れていない人は、cd␣を入力した後に移動したいフォルダをコマンド画面にドラッグ＆ドロップ＆Enterで楽に移動できます。
※␣は半角スペースです

２．Grunt実行のコマンド入力

その後、

grunt watch

を入力するだけで、Gruntの監視がはじまります。

Waiting…　となれば成功です。
編集ファイルを保存するたびに、compassのように自動でコンパイルしてくれますのでとても楽です。
また、cssなどの記述にエラーがあるとコンパイルされませんのでご注意ください。

終了時は、ctrl+c で終われます。

lessファイルの編集

bootstrapフォルダ内のLESSファイルに色々なLESSファイルが格納されています。
すべての説明はしきれないので、簡単に主要部分を説明していきます。
なお、機能については推測部分もありますのでご了承ください。

・variables.less

色々な変数の設定がまとめられているファイルです。
Bootstrapのカスタマイズ画面でできることは、このファイルの指定を編集でいけるはずです。
例えば、フォントがデフォルトの”Helvetica Neue”のままだとIE9,10で表示できないバグがありますので編集するには、以下のように書き換えます。

1
2
3
4

//42行目辺り
@font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
↓
@font-family-sans-serif: Arial, sans-serif;

このように、どんどん変えていってしまってください。
変数は400個以上ありますので、それぞれの役割を説明することはできませんが…大体変数名で推測できるかと思います。

・mixins.less

CSS3のベンダープリフィックスなどの設定がまとめられています。
mixinsとは何ぞやの人は、まず調べていただきたいのですが、簡単に言うと長ったらしい記述指定を短縮した記入ができるような設定をしています。
※もちろんそれ以外のものも書かれています

・bootstrap.less

いろいろなLESSファイルをすべて集約して、bootstrap.css として書きだすためのファイルです。
不要な機能があったら、コメントアウトすれば書きだされくなると思います

例えばモーダルウインドウを使わないときは、下記のようにしてください。

1
2

//モーダルウインドウ使わんな
//@import "modals.less";

・theme.less

デフォルトでは、bootstrap-theme.css という独自テーマのスタイル設定ファイルとして書きだされるファイルです。
Bootstrapオリジナルスタイルの上書きや（個人的にあまりやりたくない…）、独自のスタイルなどを記述します。

以上で主要な部分は上記でカバーできているかと思います。
あとは個々で詳細な構造や、LESSの知識を深めるなどしてどんどんカスタマイズしていけば、今までよりも制作が楽になるかもしれないですね。
また、これをきっかけにGruntの使い方をもっと勉強していくのもいいかと思います。

さわりだけの表面的な説明になってしまいましたが、今回はこの辺で失礼いたします。