bootstrapでresponsiveのgrid systemだけ使いたい

bootstrapでは.containerでセンタリングし.rowでマイナスマージンをセット, .col-sm-3や.col-xs-6等でデバイス幅に応じたレスポンシブレイアウトを可能にする グリッドシステム を提供しています。

この機能は非常に便利です。他にグリッドシステムを提供しているcss frameworkはないことにはないですが、bootstrapほどメジャーなものは存在しません。しかし、bootstrapでp,ul,li等にデフォルトで設定されるcss styleは細かいレイアウトを自分で調整したい場合には不都合なことが多いです。

そこで弊社では管理画面のようなデザインで妥協できる画面はbootstrapを全て採用し、ユーザの目に触れる部分ではbootstrapのgrid systemだけを使うようにしました。

bootstrapのインストール

弊社ではrails-assetsを使っているので、これを用いてインストールします。 (※ 2016/12追記、rails-assetsは今では廃れているのでnpmを使いましょう)

Gemfile

source 'https://rails-assets.org'
gem 'rails-assets-bootstrap-sass-official'

必要なモジュールをimportする

application.css.scss

@import 'bootstrap-sass-official/bootstrap-sprockets';
@import "bootstrap-sass-official/bootstrap/variables";
@import "bootstrap-sass-official/bootstrap/mixins";
@import 'bootstrap-sass-official/bootstrap/grid';
@import 'bootstrap-sass-official/bootstrap/scaffolding';
@import 'bootstrap-sass-official/bootstrap/responsive-utilities';

パッケージの中身を見たところ、grid systemを提供しているのはbootstrap/gridというモジュールのようです。そこでこれをimportしますが、どうやらbootstrapのパッケージ構成は

bootstrap/mixins/** alertやnavなど各種のいわゆるbootstrapっぽいスタイルやcssをmixinで提供する bootstrap/_alerts.scss等実際にalertやnavのスタイルを使いたいときはこっちをimportする必要がある例えば.alertのようなクラスをつけるとbootstrapっぽくなるという機能は_alerts.scssで提供されていますが、実際にはそのscssの中では

.alert-success {
  @include alert-variant($alert-success-bg, $alert-success-border, $alert-success-text);
}

のようにmixinの読み込みが行われています。

何が言いたいかというと、

@import "bootstrap-sass-official/bootstrap/mixins";
@import "bootstrap-sass-official/bootstrap/variables"

の部分ではmixinと変数をすべて読み込むのですが、これらをincludeしない限り(あるいはincludeしたscssをimportしないかぎり)余計なcssが吐き出されることはありません。

そのほかですが、scaffoldingではなんとなくresetっぽい機能があったりimg-responsiveが入っているので使用しました。responsive-utilitiesはvisible-xsのような機能ですね。これはほしいので入れました。

おまけ1

デバイスサイズはxsのときだけに有効にしたいスタイルのためのmixinです。xs環境(幅768px以下)だけに有効化したいcssが多かったので作りました。

responsive_utility.sass

=only-xs
  @media only screen and (max-width: $screen-sm)
    @content

使うときは

.hoge
  +only-xs
    padding: 0

おまけ2

bootstrapで読み込んでいるscaffoldingの中でスマートフォンでリンクをタップした時の色を透明(無効化)しているのですが、これはスマホでのインタラクティブさが減少してよくなかったので上書きしました。

my/_scaffolding

html
  -webkit-tap-highlight-color: rgba(170, 170, 170, 0.3)

Bootstrapとのつきあいかた

弊社のプロジェクトにかぎらずbootstrapを使用したプロジェクトに何度も取り組んだことがありますが、bootstrapは強力な機能なので毒にも薬にもなります。毒というのは、bootstrap依存になってしまったデザインをbootstrapから離れたデザインにしようとすると途端にスパゲティcssになってしまう。一方薬とは、なんといっても開発効率の高さです。

そこでbootstrapを使用する場合は慎重に必要な機能を見極めて、不要なものを排除するようにしてはいかがでしょうか。

アトラシエの開発ブログ

株式会社アトラシエのブログです