Material Design for Bootstrap は、Googleのマテリアルデザインの概念を取り入れた Bootstrap のテーマで、Bootstrap でマテリアルデザインのデザインや操作感を実現することができます。Bootstrap の豊富なコンポーネントに加えてマテリアルデザインを使用できるので、Bootstrap に慣れたユーザは特に便利に使えそうです。

Material Design for Bootstrap は、 現在の Bootstrap(V3)向けの開発と並行して、Bootstrap の次期バージョン(V4)と互換性のある Material Design for Bootstrap V4 の開発が進められています。

Material Design for Bootstrap V4 の CSS を一部カスタマイズしてWebアプリケーションに使用する機会がありましたので、CSSのカスタマイズ方法を備忘録として本記事にまとめます。

※※ ご注意ください ※※
Material Design for Bootstrap V4 は日々開発が進められているため、本記事の内容が古くなっていることがあります。Material Design for Bootstrap V4 の最新情報は以下GitHubを確認してください。
GitHub – FezVrasta/bootstrap-material-design at v4-dev

ビルド環境

OS X Yosemite (10.10.X)

ビルドツールの準備

まずは Material Design for Bootstrap V4 のビルドツールを導入します。
Material Design for Bootstrap V4 は CSS と Javascript のビルドに Gulp v4 を使用します。npm を使用してグローバルとローカルに gulp をインストールします。(本記事ではnpmのインストール方法については割愛します。)

$ npm install -g gulpjs/gulp-cli#4.0
$ npm install gulpjs/gulp.git#4.0
$ gulp -v
[12:23:16] CLI version 0.4.0
[12:23:16] Local version 4.0.0-alpha.2

Sass のコンパイルを行う gulp-sass をローカルにインストールします。

$ npm install gulp-sass

Material Design for Bootstrap V4 をローカルにインストールします。
本記事ではバージョン4.0.1を使用します。

$ npm install bootstrap-material-design@4.0.1

gulpfile.jsの作成

gulpfile.js を作成し、以下のように記述します。

var gulp = require('gulp');
var sass = require('gulp-sass');

var paths = {
  /* Sassファイル */
  'scss': 'bmd.scss',
  /* CSSファイルの出力先 */
  'css': 'dist/'
}

function defaultTask(done) {
  gulp.src(paths.scss)
    .pipe(sass({
      includePaths: [
        './node_modules/',
        './node_modules/bootstrap-material-design/node_modules/'
      ]
    }))
    .pipe(gulp.dest(paths.css));
  done();
};

gulp.task('default', defaultTask);

Sassファイルの作成

Sassファイル(bmd.scss)を作成してカスタマイズしたい内容を記述します。

以下の例では、オリジナルのカラーパレット bit-blue を定義し、bit-blue をプライマリーカラーとして brand-primary に設定しています。
カラーパレットの色の生成には、 Material Design Palette Generator を利用しました。

$bit-blue-50: #a2b0e0 !default;
$bit-blue-100: #6880cd !default;
$bit-blue-200: #3f5cbf !default;
$bit-blue-300: #2d4289 !default;
$bit-blue-400: #263772 !default;
$bit-blue-500: #1e2c5b !default;
$bit-blue-600: #162144 !default;
$bit-blue-700: #0f162d !default;
$bit-blue-800: #070b16 !default;
$bit-blue-900: #000000 !default;
$bit-blue-a100: #a2b0e0 !default;
$bit-blue-a200: #6880cd !default;
$bit-blue-a400: #263772 !default;
$bit-blue-a700: #0f162d !default;
$bit-blue: $bit-blue-500 !default;

$brand-primary: $bit-blue !default;

@import "bootstrap-material-design/scss/core";

CSSファイルの生成

CSSファイルの出力先ディレクトリをあらかじめ作成しておきます。

$ mkdir dist

カレントディレクトリに以下のようにファイル、ディレクトリが設置されていることを確認してください。

.
├── bmd.scss
├── dist
├── gulpfile.js
└── node_modules
    ├── bootstrap-material-design
    ├── gulp
    └── gulp-sass

gulp コマンドを実行してCSS ファイルを生成します。

$ gulp

dist ディレクトリ以下にカスタマイズされた CSS ファイル(bmd.css)が生成されます。