Bootstrapをカスタマイズして軽量化する方法

Dreamweaver cc が Bootstrap に対応したことによりCSSフレームワークにBootstrapを導入する方も増えてきたのではないでしょうか。Bootsrapは非常に便利なCSSフレームワークなのですが、ファイルが重いというデメリットがあります。モバイルファーストの観点からもなるべくファイルは軽くするのが鉄則です。また、不要なコードが多いとカスタマイズする際に非常に面倒に感じます。この記事ではbootstrapをカスタマイズし、必要最低限の機能のみを使い、軽量化する方法をご紹介します。

Customize and download

bootstrapオフィシャルサイトの「customize」ページでは、bootstrapの内容の必要なもののみを選択してダウンロードするこができます。

https://getbootstrap.com/docs/3.3/customize/

各項目の解説

Less files

Choose which Less files to compile into your custom build of Bootstrap. Not sure which files to use? Read through the CSS and Components pages in the docs.

意訳：BootstarpのカスタムビルドにコンパイルするLessファイルを選択してください。 どのファイルを使用するのか分からない場合はCSSとコンポーネントのページをご参考下さい。

Common CSS

Components

Glyphicons	Bootstrapアイコン
Button groups	ボタン グループ
Input groups	インプット グループ
Navs	ナビゲーション
Navbar	グローバルナビ
Breadcrumbs	パンくずリスト
Pagination	ページネーション
Pager	ページャー
Labels	ラベル
Badges	バッジ
Jumbotron	ジャンボトロン
Thumbnails	サムネイル
Alerts	アラート
Progress bars	プログレスバー
Media items	メディア アイテム
List groups	リストグループ
Panels	パネル
Responsive embed	埋め込みのレスポンシブ化
Wells	インセットエフェクト
Close icon	クローズアイコン

JavaScript components

Component animations (for JS)(includes Collapse)	アニメーションコンポーネント
Dropdown	ドロップダウン
Tooltip	ツールチップ
Popover	ポップオーバー
Modal	モーダルウインドウ
Carousel	カルーセル

jQuery plugins

Choose which jQuery plugins should be included in your custom JavaScript files. Unsure what to include? Read the JavaScript page in the docs.

意訳：カスタムJavaScriptファイルに含めるjQueryプラグインを選択してください。 何を選択するかわからない場合はJavaScriptのページをご参考下さい。

Linked to components

Magic

カスタマイズ例

今回下記のように設定しました。

主にグリッドシステム、フォーム、ボタン、Bootstrapアイコン、グローバルナビ、埋め込みレスポンシブ化、ドロップダウンのみを残し、他のチェックは外しました。

ダウンロード

ページ最下部の「Compile and Download」をクリックするとカスタマイズされたBootstrapがダウンロードされます。

ダウンロード後のファイルを比較すると大幅に軽減されていることが解ります。

まとめ

Bootstrapは非常に有能なCSSフレームワークですが、ファイルが重い、デザインのカスタマイズのし難いといった理由で導入に踏み切れない方もいらっしゃるかと思います。Dreamweaverをお使いでしたらBootstarpのグリッドシステムを活用することによって、レスポンシブサイトの構築が非常に効率的に進めることができます。ぜひBootstrapをカスタマイズ・軽量化してサイト作成にお役立て下さい。