nlog

とめどなく流れるよだれ

Bootstrap4移行ガイドを読む(導入編)

Bootstrapはできれば使いたくない。個人で使うにもチームで使うにも巨大すぎるシステムな気がして、触りたいと思えない。

しかし中身を知らずにそう言ってばかりはいられない。それにBootstrap製の案件がいつ舞い込んでくるかわからない。

備えあれば憂いなし。まずは日本語に翻訳されたドキュメントを見ながら、Bootstrap4の概要を把握したいと思う。

はじめに - Bootstrap4移行ガイド

ダウンロード - Bootstrap4移行ガイド

  • Bootstrapを使うには、コンパイル済みファイルをダウンロードする、ソースファイルをダウンロードしてコンパイルする、CDNを使う、パッケージマネージャーを使うなどの手段がある
  • スタイルシートは標準( bootstrap.css) のものを読み込むこともできるし、部分的にグリットだけ( bootstrap-grid.css)読み込んだりRebootだけ( bootstrap-reboot.css )読み込んだりできる
  • bootstrap.min.css のように軽量版もある

ファイルの内容 - Bootstrap4移行ガイド

  • bootstrap/docs/examples/ にBootstrapの使用例が入っている

ブラウザとデバイス - Bootstrap4移行ガイド

  • 最新の安定リリース版をサポート。WindowsではIE10とIE11、Edge
  • IE10ではHTML5とCSS3が完全にはサポートされていないので、プレフィックスつきのクラスが必要
  • バグや最善の体験を提供するためにCSSハックを使っている箇所がある。これらの箇所はバリデーターで警告がでることもあるが、実際は問題ない

JavaScript - Bootstrap4移行ガイド

  • bootstrap.bundle.js およびその軽量版にはPopper.jsが組み込まれている
  • Popper.jsに依存しているのは dropdown.jspopover.jstooltip.js
  • js/dist/ 内のJavaScriptファイルは alert.jsbutton.js など、コンポーネント別に管理されている
  • BootstrapのJavaScriptjQueryに依存している
  • BootstrapのJavaScriptファイルをHTMLで読み込む前に、別途jQueryファイルを読み込む必要がある
  • JQueryのどのバージョンをサポートしているかは package.json を確認
  • JavaScriptはHTMLのデータ属性を使って適用される

テーマ - Bootstrap4移行ガイド

  • テーマのカスタマイズはSass変数、Sassマップ、およびカスタムCSSによっておこなう
  • カスタマイズするSassファイル( custom.scss )は、Bootstrapのファイルとは完全に分けて管理されることを想定
  • Sassの @import を使って部分的にスタイルを読み込むこともできるが、Bootstrapのコンポーネントにはいくつかの要件と依存関係があるので注意
  • BootstrapのSass変数には !default フラグがつけられているので、カスタマイズするSassファイルで変数の上書きがしやすい

ツールの構築 - Bootstrap4移行ガイド

  • 構築システムにNPM scriptsを利用。ローカルで実行するにはNode v8.xをインストール
  • npm run distコンパイル。SassとAutoprefixerとUglifyJSを実行する
  • npm test でテストを実行する
  • npm run docsJavaScriptを構築してlintでチェック
  • ローカルでドキュメントを書くのにJekyllを使ってる。ドキュメントを更新する場合は bundle install が必要になる

webpack - Bootstrap4移行ガイド

  • Webpack 3を使ってBootstrapを組み込む方法の紹介

アクセシビリティ - Bootstrap4移行ガイド

  • Bootstrapの利用者が無茶をしなければ、WCAG2.0(A/AA/AAA)、Section 508および類似のアクセシビリティ標準を満たすことができる
  • デフォルトのカラーテーマでは色のコントラストが不十分なので、Bootstrapの利用者がアクセシビリティ要件を満たしたい場合、これを適切な値に変更しなければいけない(なので、そのままBootstrapを使えばアクセシビリティが満たせるわけではない)
  • 視覚的に非表示にする要素には sr-only クラスを使う