Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
349
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

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

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";

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

はあ、胃カメラ怖い!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
349
Help us understand the problem. What are the problem?