[Bootstrap 3] bootstrap-sass の導入とカスタマイズの手順を確認する

Sass として扱う。

[markdown]
## 経緯

– Middleman v4 で[アセットパイプライン機能がコアから削除](https://middlemanapp.com/jp/advanced/asset_pipeline/)されたため、Sprockets を介さない方法を試しておきたい。
– マイナーバージョンアップには楽に対応できるようにしたい。

環境としては bootstrap-sass v3.3.6, middleman v3.4.1 で確認も、特に限定されないはず。

## Install

プロジェクトに npm でインストールする。
assets 以下が本体となっている。

“`prettyprinted
% npm install bootstrap-sass –save
% ls node_modules/bootstrap-sass/
CHANGELOG.md README.md bower.json sache.json
CONTRIBUTING.md Rakefile composer.json tasks/
Gemfile assets/ lib/ templates/
LICENSE bootstrap-sass.gemspec package.json test/
“`

何かしらうまい方法があるかも知れないが、以下、マニュアルで設置する。
Saas ファイルをダウンロードして設置する方法と変わらない。
インストールした assets をドキュメントルートにコピーしておく。

“`prettyprinted
% cp node_modules/bootstrap-sass/assets source/
“`

## Configuration

プロジェクトは、以下のディレクトリ構成とする。
ディレクトリ以外は、後述のステップで利用するファイルのみ抜粋。

“`prettyprinted
source
├── assets
│   ├── fonts
│   │   └── bootstrap
│   ├── images
│   ├── javascripts
│   │   ├── bootstrap
│   │   └── bootstrap.js
│   └── stylesheets
│   ├── _bootstrap.scss
│   └── bootstrap
│   ├── _variables.scss
│   └── mixins
├── images
├── index.html
├── javascripts
│   ├── _bootstrap.js
│   └── all.js
└── stylesheets
├── all.sass
└── foundation
   ├── _bootstrap-variables.scss
   └── _bootstrap.scss
“`

### CSS

カスタマイズ用に _bootstrap.scss と _bootstrap-variables.scss を作成する。

“`prettyprinted
% cp assets/stylesheets/_bootstrap.scss source/stylesheets/foundation/
% cp assets/stylesheets/bootstrap/_variables.scss source/stylesheets/foundation/_bootstrap-variables.scss
“`

_bootstrap-variables.scss は、必要な値の書き換えでカスタマイズができる。
_bootstrap.scss は、コメントアウトで不要なモジュールの読込をコントロールできる。

HTML が読み込む all.sass から import する。
variables を先に読み込む。

“`css:source/stylesheets/all.sass
@import “foundation/_bootstrap-variables”
@import “foundation/_bootstrap”
“`

_bootstrap.scss から、assets 以下を読み込むようパスを変更する。

“`css:source/stylesheets/foundation/_bootstrap.scss
:
@import “../assets/stylesheets/bootstrap/variables”;
@import “../assets/stylesheets/bootstrap/mixins”;
:
“`

### Font

前ステップで作成した _bootstrap-variables.scss 内で font ファイルへのパスを指定する。
`$bootstrap-sass-asset-helper` には `false` が入っているので、後ろに `../assets/fonts/bootstrap/` を入力する。

“`css:source/stylesheets/foundation/_bootstrap-variables.scss
// [converter] If $bootstrap-sass-asset-helper if used, provide path relative to the assets load path.
// [converter] This is because some asset helpers, such as Sprockets, do not work with file-relative paths.
$icon-font-path: if($bootstrap-sass-asset-helper, “bootstrap/”, “../assets/fonts/bootstrap/”) !default;
“`

### JavaScript

全部入りは bootstrap.js で。

“`prettyprinted
% cp node_modules/bootstrap-sass/assets/javascripts/bootstrap.js source/javascripts/bootstrap.js
“`

CSS と同じく JavaScript を riquire する手段があれば、必要なモジュールのみを選択してコンパイルできる（略）。

## 動作確認

glyphicon や tooltip を用意して表示。

“`sass:source/index.haml
%button.btn.btn-default.btn-lg{:type => “button”, ‘data-toggle’ => ‘tooltip’, ‘data-placement’ => ‘top’, ‘title’ => ‘Tooltip on top’}
%span.glyphicon.glyphicon-star{“aria-hidden” => “true”}
Bootstrap Button
“`

“`javascript:source/javascripts/all.js
console.log(‘You are running jQuery version: ‘ + $.fn.jquery)
$(function () {
$(‘[data-toggle=”tooltip”]’).tooltip()
})
“`

## まとめ

ちょっと手間がかかりそう。
Bootstrap v4 も控えているので、当面 gem install する方針で。
[/markdown]