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

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

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



国内最速・高安定の高性能レンタルサーバー【ConoHa WING】

bootstrapは多くの便利なスタイルが格納されているフレームワークですが、一方で使用しないスタイルも多く、容量が大きいのが難点です。

例えばテーマカラーだけでも、

$theme-colors: map-merge(
  (
    "primary":    $primary,
    "secondary":  $secondary,
    "success":    $success,
    "info":       $info,
    "warning":    $warning,
    "danger":     $danger,
    "light":      $light,
    "dark":       $dark,
    "black":      $black,
  ),
  $theme-colors
);

と9パターンあり、これらの値を元に文字色や背景色のスタイルが生成されることになっています。

しかし、Webアプリケーションを作るのでなければここまでのカラーパターンは不要ですので、テーマカラーを厳選することでbootstrapの容量を削減することが出来ます。

そのために、bootstrapの_variables.scssの配列を調整するのですが、安易に

$theme-colors: map-merge(
  (
    "primary":    $primary,
    "secondary":  $secondary,
    "success":    $success,
    "info":       $info,
    "warning":    $warning,
    "danger":     $danger,
    //"light":      $light,
    //"dark":       $dark,
    //"black":      $black,
  ),
  $theme-colors
);

と、コメントアウトしてもSCSSのコンパイルエラーが発生しますので、

$theme-colors: map-remove($theme-colors, "light", "dark", "black");

と1行足してあげます。

Theming Bootstrap
参考
Theming Bootstrap

色を削除するには$theme-colors、次のようにしますmap-remove。

Theming Bootstrap

これで10kb程度削減出来ました。

Bootstrap4ファーストガイド―CSS設計の手間を大幅に削減!

Bootstrap4ファーストガイド―CSS設計の手間を大幅に削減!

相澤 裕介
3,520円(08/06 16:02時点)
発売日: 2018/05/01
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( …

1 件のコメント

コメントを残す

メールアドレスが公開されることはありません。