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

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

Customize and download

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

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

bootstrap カスタマイズ

 

各項目の解説

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

Print media styles 印刷時に適応されるスタイル
Typography <h1 >～<h6 >、<p>、<strong >、<small >のスタイル
Code <code>、<pre>、<var>、<kbd>、<samp>のスタイル
Grid system グリッドシステムに用いられるスタイル
Tables <table>のスタイル
Forms  <form>のスタイル
Buttons  <a>、<button>、<input>のスタイル
Responsive utilities  ブレークポイント毎の表示/非表示に用いられるスタイル

 

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  インセットエフェクト  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

Alert dismissal アラートメッセージの制御
Advanced buttons ボタンの制御
Carousel functionality カルーセルの制御
Dropdowns ドロップダウンの制御
Modals モーダルウインドウの制御
Tooltips ツールチップの制御
Popovers (requires Tooltips) ポップオーバーの制御
Togglable tabs タブの制御

 

Magic

Affix 位置固定制御
Collapse  トグル動作制御
Scrollspy  navスクロール制御
Transitions(required for any kind of animation)  アニメーション制御

 

 

カスタマイズ例

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

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

less

 

 

ダウンロード

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

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

元ファイル カスタマイズ後
bootstrap.min.css 119KB 62.4KB
bootstrap.min.js 36.4KB 7.04KB

 

 

まとめ

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

記事がお気に召しましたらシェアお願いします！

関連記事