Bootstrap 4のアルファ版を試しに使ってみたのですが、
せっかくなのでソースコードとドキュメントを眺めつつ、
バージョン3からの主な変更点と所感についてまとめてみました。
大筋は、以下の公式ブログのアナウンスに沿って、主要な変更点をピックアップしながら解説しています。
インストール方法
バージョン4の公式サイトからzipファイルをダウンロードするか、
bowerを使って以下のコマンドを実行すれば、Bootstrap v4.0.0-alphaをインストールできます。
$ bower install bootstrap#4.0.0-alpha
ドキュメント
Bootstrap 4向けの公式ドキュメントは、以下のURLで公開されています。
現行のバージョン3とは仕様が異なるので、Bootstrap 4を使用・カスタマイズする際には、こちらの情報を確認しながら作業を行ってください。
主な変更点
CSSプリプロセッサーがLESSからSassへ変更
デフォルトのCSSコンパイラーがLESSからSassに移行されていました。
公式のアナウンスでは、Libsassによって高速化が実現されたと書かれていますが、
実際にはLibsassとRuby Sass、2バージョンのSassが内蔵されており、
好きな方に切り替えてコンパイルできるようになっています。
（コンパイラーの選択は、Gruntfile.jsにて設定）
// CSS distribution task.
// Supported Compilers: sass (Ruby) and libsass.
(function (sassCompilerName) {
require('./grunt/bs-sass-compile/' + sassCompilerName + '.js')(grunt);
})(process.env.TWBS_SASS || 'libsass');
// CSS distribution task.
// Supported Compilers: sass (Ruby) and libsass.
(function (sassCompilerName) {
require('./grunt/bs-sass-compile/' + sassCompilerName + '.js')(grunt);
})(process.env.TWBS_SASS || 'sass');
グリッドシステムの改善
Bootstrap 3では4つだったブレークポイントが5つに増え、
新たに544pxでの指定が行えるようになりました。
Bootstrap 3では、768px以下の指定が全て一括で適用されてしまうので、
（※変数としては480pxが定義されていますが、実際には使われていませんでした）
より小さなデバイス向けの設定が増えた形になります。
これによって例えばiPhone 5, 6のポートレート／ランドスケープ時に、
それぞれ表示を切り替えることができるので、
より柔軟にモバイル最適化が行えるようになりました。
Bootstrap 3のグリッドオプション
| Extra small | Small | Medium | Extra large |
|---|---|---|---|
| <768px | ≥768px | ≥992px | ≥1200px |
Bootstrap 4のグリッドオプション
| Extra small | Small | Medium | Large | Extra large |
|---|---|---|---|---|
| <544px | ≥544px | ≥768px | ≥992px | ≥1200px |
Gutter（カラムとカラムの間の余白）の単位がpxからremに変わっているのと、
各class名との対応がBootstrap 3から変更されている点に注意してください。
- http://getbootstrap.com/css/#grid-options
- http://v4-alpha.getbootstrap.com/layout/grid/#grid-options
Flexboxへの対応
より柔軟なレイアウトを可能にするFlexboxの使用がサポートされました。
Flexboxを使用すると、既存のコンポーネントがfloatレイアウトからflexレイアウトへと移行されるそうです。
ただし、この機能は現状デフォルトではOFFにされているので、
_variables.scssで変数を編集して有効化する必要があります。
$enable-flex: false !default;
$enable-flex: true !default;
新コンポーネント「Cards」の登場
wells, thumbnails, panelsの3つのコンポーネントが廃止となり、
cardsという新しいコンポーネントに統合されました。
サムネール（画像）やタイトル、リンクなどもcardsの中に内包できるので、
今後はいわゆるグリッドの中にコンテンツを入れるような場合は、
このcardsコンポーネントを利用すればよさそうです。
今どきのトレンドを取り入れて、画像の上にテキストをオーバーレイするような見せ方や、
Pinterest風のレイアウトも実現できるようです。
リセットCSSの変更
リセットCSSの構成が変更になりました。
Normalize.cssに加えて、Rebootと呼ばれる独自のリセットCSSが採用されたという風に書かれていますが、
実際にBootstrap 3のソースと見比べてみると、新たに追加された_reboot.scssは、
旧来のscaffolding.lessというファイルに近い役割をしており、
個人的にはそれほど大幅な変更という風には感じられませんでした。
カスタマイズ用オプションの拡充
Bootstrap 3では、グラデーションやトランジション、シャドウといった効果を無効化するには、
読み込んでいるLESSファイルを個別に削除する必要がありましたが、
Bootstrap 4ではそれらのCSSオプションを一括して、Sassの変数で管理できるようになりました。
具体的には、_variables.scssに下記のように記述されているので、
各オプションをtrueまたはfalseに設定することで、有効化または無効化できます。
// Options
//
// Quickly modify global styling by enabling or disabling optional features.
$enable-flex: false !default;
$enable-rounded: true !default;
$enable-shadows: false !default;
$enable-gradients: false !default;
$enable-transitions: false !default;
$enable-hover-media-query: false !default;
上記のオプションは、例えば以下のようなところで判別に使われています。
// Toggles
//
// Used in conjunction with global variables to enable certain theme features.
@mixin border-radius($radius: $border-radius) {
@if $enable-rounded {
border-radius: $radius;
}
}
@mixin box-shadow($shadow...) {
@if $enable-shadows {
box-shadow: $shadow;
}
}
@mixin transition($transition...) {
@if $enable-transitions {
transition: $transition;
}
}
IE 8サポートの廃止とrem, em単位への移行
IE 8のサポートが廃止され、
フォントやコンポーネントをpxによるサイズ指定から、
remとemによるサイズ指定へ移行されました。
デフォルトの基準サイズが16pxとなっているので、
ちょっとイメージしづらいかもしれませんが、
以下のような変換ツールを使えば、デザイン通りのサイズを確認しながら、
remでフォントサイズを設定することができます。
また、ベースフォントサイズが14pxから16pxに変更されているので、
今までと比べると全体的に大きく感じられるかもしれませんが、
下記CSSまたはSassファイルに記述されているベースサイズを一箇所編集するだけで、
全体のフォントサイズを連動して変えることが可能です。
html {
font-size: 16px;
-ms-overflow-style: scrollbar;
-webkit-tap-highlight-color: transparent;
}
$font-size-root: 16px !default;
これも相対サイズ指定であるremの導入に伴う、大きなメリットの一つですね。
※少し工夫すれば、ここにMedia Queriesを応用して、デバイスの種類に応じてサイトのフォントサイズを変える、等の実装も簡単に行うことができます。
Javascript ライブラリの刷新とES6(babel)への移行
Javascriptプラグインが全て書き直されました。
また、Javascriptの先行仕様であるECMAScript 6で記述し、
babelでコンパイルするような構成になっています。
※こちらもGruntによって変換を実行。
TooltipsとPopovers の処理の改善
TooltipsとPopoversのコンポーネントで、Tetherというライブラリを使用し、吹き出しを表示させる自動配置の処理を改善させたそうです。
ドキュメントの改善
仕様の変更に伴い、公式ドキュメントも刷新されました。
例えば、Componentsのページなども1ページでスクロールする見せ方ではなく、
1ページごとに遷移する見せ方に変わりました。
その分、一覧性は落ちますが、右上の検索ボックスに文字を入れると、自動的に候補を出してくれるようになっており、目的のページが探しやすくなっています。
また、ドキュメントの一部は内部でマークダウンで記述され、HTMLに変換される仕様になったようです。
その他
その他の変更点としては、まず汎用的に使えるUtilityクラスが増えました。
例えば、マージンやパディング調整用のclassはBootstrap 3にはなかったのですが、
以下のようにclassを追加すると、要素の上部または下部の余白を0にすることができます。
.m-t-0 { margin-top: 0 !important; }
.m-b-0 { margin-bottom: 0 !important; }
.p-t-0 { padding-top: 0 !important; }
.p-b-0 { padding-bottom: 0 !important; }
また、任意の幅で余白をつけたい場合は、以下の3段階のclassを利用できます。
.m-t { margin-top: $spacer-y !important; }
.m-t-md { margin-top: ($spacer-y * 1.5) !important; }
.m-t-lg { margin-top: ($spacer-y * 3) !important; }
この場合のデフォルトの余白の単位は1remとなっているので、
.m-tだと上部に1文字分の余白がつきます。
余白の基準単位は、以下の変数として定義されているので、こちらの値を編集することで自由にカスタマイズが可能です。
$spacer: 1rem !default;
$spacer-x: $spacer !default;
$spacer-y: $spacer !default;
$border-width: .0625rem !default;
その他、Formsコンポーネントに、よりカスタマイズしやすく、
アクセシビリティを考慮したCustom forms等が追加されました。
まとめ＆感想
実際に触ってみた感じとしては、モバイル用の新しいブレークポイントも、
remによるフォントサイズ指定も、なかなか使い勝手がよく、
ちょっとしたサイトを制作する分には、Bootstrap 4でも問題なく対応できそうです。
（まだα版なので、今後の仕様変更には要注意ですが）
レファレンスを見ながらコピペするだけでも、十分にマークアップできてしまう手軽さは相変わらずで、
よりモバイルフレンドリーになったことで、利便性と拡張性が向上している印象を受けました。
LESSからSassへ移行したものの、ビルドツールはGruntのままですし、
sass watchしつつ、配布段階のみ整形や圧縮などを行う設計になっているので、
フロントエンド的な構築手法はBootstrap 3とそれほど変わってなさそうです。
（LESSとLibsassだったら、コンパイル速度にそれほど差もないですしね・・）
がっつりカスタマイズする際には、オリジナルのSassや変数だけ流用しつつ、
gulpや他のコマンドラインツール等を使って、
適宜加工していくスタイルが主流になっていくのではないでしょうか？