Edited at

全部はいらないよね?bootstrap-sassをカスタマイズして使う方法

More than 3 years have passed since last update.

Bootstrap

29日に人生初の胃カメラをしてきます、デザイナーの紺谷です。

さて、うちの会社は基本Ruby on Railsを使っていて、

フロント側だとコーディング作業効率化のために

最近ではBootstrapを使うようにしています。

もう有名すぎて何を今更って感じでしょうが、

Bootstrapが使えるGemに、

bootstrap-sassっていうのがあって、

これをカスタマイズして使う方法について

今回は紹介したいと思います。

※今回はRuby on Railsでの使い方に限って解説します


インストール

以下の2行を Gemfile に記述してください。

gem 'bootstrap-sass'

gem 'sass-rails'

(sass-railsはデフォルトで書いてあることもあるのでいらないかも)

これだけでもいいのですが、自動でベンダープレフィックス

を追加してくれる以下のGemも追加しておくとなお良し。

gem 'autoprefixer-rails'

で、bundle install。

次に、 app/assets/stylesheets/ の中にある

application.cssapplication.css.scss に名前を変更してから

以下の2行を追加。

@import "bootstrap-sprockets";

@import "bootstrap";

bootstrap-sprockets は必ず bootstrap の上に書いてください。

jsのコンポーネントも使うので

app/assets/javascripts/application.js に以下を追加。

//= require bootstrap-sprockets

これで完了。

Bootstrap自体の詳しい使い方に関しては

http://getbootstrap.com/

こちらのサイトを参照してください。


カスタマイズ方法

コーダーにとってbootstrap-sassの厄介なところは、

BootstrapのCSSやjavascriptが app/assets の中に

直接入るわけじゃないってこと。

実際のファイルはどこかしら奥深くに置いていらっしゃる。

なので編集しようにも毎回そいつらを開くのもめんどくさい。

しかも、Bootstrapって結構機能(コンポーネント?)が多い。

ぶっちゃけこんなにいらないよね、ってなります。

全部は使わないよね、と。

そんなとき、/app/assets/stylesheets/ の直下に

_bootstrap-custom.scssってファイル作ってください。

中身は以下をまるまるコピペ。

// Core variables and mixins

@import "bootstrap/variables";
@import "bootstrap/mixins";

// Reset and dependencies
@import "bootstrap/normalize";
@import "bootstrap/print";
@import "bootstrap/glyphicons";

// Core CSS
@import "bootstrap/scaffolding";
@import "bootstrap/type";
@import "bootstrap/code";
@import "bootstrap/grid";
@import "bootstrap/tables";
@import "bootstrap/forms";
@import "bootstrap/buttons";

// Components
@import "bootstrap/component-animations";
@import "bootstrap/dropdowns";
@import "bootstrap/button-groups";
@import "bootstrap/input-groups";
@import "bootstrap/navs";
@import "bootstrap/navbar";
@import "bootstrap/breadcrumbs";
@import "bootstrap/pagination";
@import "bootstrap/pager";
@import "bootstrap/labels";
@import "bootstrap/badges";
@import "bootstrap/jumbotron";
@import "bootstrap/thumbnails";
@import "bootstrap/alerts";
@import "bootstrap/progress-bars";
@import "bootstrap/media";
@import "bootstrap/list-group";
@import "bootstrap/panels";
@import "bootstrap/responsive-embed";
@import "bootstrap/wells";
@import "bootstrap/close";

// Components w/ JavaScript
@import "bootstrap/modals";
@import "bootstrap/tooltip";
@import "bootstrap/popovers";
@import "bootstrap/carousel";

// Utility classes
@import "bootstrap/utilities";
@import "bootstrap/responsive-utilities";

で、application.css.scss の以下の1行を、

@import "bootstrap";

以下のように書き換える。

@import "bootstrap-custom";

あとは、bootstrap-custom.css.scss の中の、

使わないコンポーネントをコメントアウトまたは削除

すればそのコンポーネントだけ読み込まれなくなります。

jsに関しても、同じ感じです。

/app/assets/javascripts/ 直下に

bootstrap-sprockets-custom.js

ってファイル作ります。

中身は以下コピペ。

//= require bootstrap/affix

//= require bootstrap/alert
//= require bootstrap/button
//= require bootstrap/carousel
//= require bootstrap/collapse
//= require bootstrap/dropdown
//= require bootstrap/tab
//= require bootstrap/transition
//= require bootstrap/scrollspy
//= require bootstrap/modal
//= require bootstrap/tooltip
//= require bootstrap/popover

で、application.js の以下の1行を、

//= require bootstrap-sprockets

以下に書き換える。

//= require bootstrap-sprockets-custom

あとは、bootstrap-sprockets-custom.js の中の

使わないコンポーネントをコメントアウトまたは削除。

以上!


おまけ

Bootstrapの中で1つだけ気に喰わないのが、

PrimaryとかWarningとかの名前付け。

使用用途を明確にあらわしてくれているのは

ありがたいんだけど、直感的にどんな表示になるのか

わかりずらい。

なので、これはあくまで個人的なやり方なんだけど、

/app/assets/stylesheets/ 直下に、bootstrap-custom ってフォルダ作って、

その中に _variables.scss ってファイルを作る。

中身はココのコピペ。

このファイルにサイトで使う色を以下のように設定する。

$blue: #3677a3;

$blue-shade-2: shade($blue, 40);
$blue-shade-1: shade($blue, 20);
$blue-tint-1: tint($blue, 20);
$blue-tint-2: tint($blue, 40);
$blue-tint-3: tint($blue, 60);

$green: #31947c;
$green-shade-2: shade($green, 40);
$green-shade-1: shade($green, 20);
$green-tint-1: tint($green, 20);
$green-tint-2: tint($green, 40);
$green-tint-3: tint($green, 60);

$orange: #bd853f;
$orange-shade-2: shade($orange, 40);
$orange-shade-1: shade($orange, 20);
$orange-tint-1: tint($orange, 20);
$orange-tint-2: tint($orange, 40);
$orange-tint-3: tint($orange, 60);

$red: #b9403e;
$red-shade-2: shade($red, 40);
$red-shade-1: shade($red, 20);
$red-tint-1: tint($red, 20);
$red-tint-2: tint($red, 40);
$red-tint-3: tint($red, 60);

この方が直感的。

あとはこの変数をBootstrapで初めから設定されている変数に

ぶち込んでやればサイトのカラーはこれで完結できる。

上記で作ったファイルを読み込ませるには、

/app/assets/stylesheets/_bootstrap-custom.scss

@import "bootstrap/variables";

@import "bootstrap-custom/variables";

に書き換えれば適用される。

はあ、胃カメラ怖い!