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

bootstrapでカスタムカラー配列を作成して不要な多色コンポーネントを削除する方法

bootstrapでカスタムカラー配列を作成して不要な多色コンポーネントを削除する方法



先日は、bootstrapのテーマカラーから、不要なカラーパターンをmap-removeを使用して削除する方法を紹介しました。

bootstrapのテーマカラーを削減する方法 – モノグサにお灸
参考
bootstrapのテーマカラーを削減する方法 – モノグサにお灸

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

bootstrapのテーマカラーを削減する方法 – モノグサにお灸 モノグサにお灸

しかし、アラートや文字色に関しては、やはり色数が欲しい。でも、テーブルやボタンには色数は不要だ、という具合に各コンポーネントによって色数を調整したい場合があります。

その場合は、

$point-colors: () !default;
$point-colors: map-merge(
	(
		"primary":    $primary,
		"secondary":  $secondary,
		"light":      $light,
		"dark":       $dark,
	),
	$point-colors
);

$btn-colors: () !default;
$btn-colors: map-merge(
	(
		"primary":    $primary,
		"secondary":  $secondary,
		"success":    $success,
		"warning":    $warning,
	),
	$btn-colors
);

のように、テーマカラーとは異なるカラー配列を作成して、例えばアラートの色を$point-colors配列を使用する場合は、_alert.scssの

@each $color, $value in $theme-colors {
  .alert-#{$color} {
    @include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level));
  }
}

@each $color, $value in $point-colors {
  .alert-#{$color} {
    @include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level));
  }
}

のように@eachで取得する配列を$theme-colorsから$point-colorsに変更します。

その他のコンポーネントも各scssファイルの$theme-colorsの配列を変更すれば色数を調整することが可能です。

HTML&CSSとWebデザインが 1冊できちんと身につく本

HTML&CSSとWebデザインが 1冊できちんと身につく本

服部 雄樹
2,462円(08/23 10:32時点)
発売日: 2017/07/21
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( …


こちらはいかが?


コメントを残す