シリーズ『bootstrapの容量削減』~

bootstrapから使用しないコンポーネントを削除する方法

bootstrapから使用しないコンポーネントを削除する方法



次にbootstrapからホームページを作成するにあたって使用しないコンポーネントを削除します。

そのためには、bootstrap.scssimportから不要なコンポーネントをコメントアウトしてコンパイルするだけです。

ひとまず、“code”“button-group”“custom-forms”“jumbotron”“progress”“popover”は不要だと思いますので削除します。

@import "functions";
@import "variables";
@import "mixins";
@import "root";
@import "reboot";
@import "type";
@import "images";
//@import "code";
@import "grid";
@import "tables";
@import "forms";
@import "buttons";
@import "transitions";
@import "dropdown";
//@import "button-group";
@import "input-group";
//@import "custom-forms";
@import "nav";
@import "navbar";
@import "card";
@import "breadcrumb";
@import "pagination";
@import "badge";
//@import "jumbotron";
@import "alert";
//@import "progress";
@import "media";
@import "list-group";
@import "close";
@import "modal";
@import "tooltip";
//@import "popover";
@import "carousel";
@import "utilities";
@import "print";

これで15kb程度削除出来ました。

Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ

Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ

平澤 隆, 森田 壮
2,592円(08/23 11:43時点)
発売日: 2017/09/15
Amazonの情報を掲載しています
今日はここまで

関連する記事



シリーズ『bootstrapの容量削減』


bootstrapから使用しないコンポーネントを削除する方法
bootstrapから使用しないコンポーネントを削除する方法

次にbootstrapからホームページを作成するにあたって使用しないコンポーネントを削除します。 そのためには、bootstrap.scssのimportから不要なコンポーネントをコメントアウトしてコンパイルするだけです…

bootstrapのブレークポイントを削減する方法
bootstrapのブレークポイントを削減する方法

bootstrapのグリッドは xs(<576px) sm(≥576px) md(≥768px) lg(≥992px) xl(≥1200px) のようにブレークポイントが設定されています。 しかし、これも画面いっぱ…

bootstrapのテーマカラーを削減する方法
bootstrapのテーマカラーを削減する方法

bootstrapは多くの便利なスタイルが格納されているフレームワークですが、一方で使用しないスタイルも多く、容量が大きいのが難点です。 例えばテーマカラーだけでも、 $theme-colors: map-merge( …


こちらはいかが?


コメントを残す