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

作成日:
📝 はじめに 本記事はBootstrapのCSS容量削減についての一考です。

bootstrapのグリッドは

Extra small
<576px
Small
≥576px
Medium
≥768px
Large
≥992px
Extra large
≥1200px
Max container widthNone (auto)540px720px960px1140px
Class prefix.col-.col-sm-.col-md-.col-lg-.col-xl-

のようにブレークポイントが設定されています。

しかし、これも画面いっぱいに表示する管理画面のダッシュボードやWebアプリで無ければここまで細かく設定する必要も無いと思います。

Bootstrapで作成された管理画面事例
Bootstrapで作成された管理画面事例

そこで、これもbootstrapの_variables.scssの配列を調整して数を減らすことで、全体の容量を削減することが出来ます。

今回はxlを削除して、mdlgに幅を持たせています。

SASS _variables.scss
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 992px,
  lg: 1300px,
) !default;

$container-max-widths: (
  sm: 540px,
  md: 960px,
  lg: 1280px,
) !default;

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

Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ Web制作者のための教科書シリーズ
📘 Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ Web制作者のための教科書シリーズ
2,376 円~ 2023年6月9日 6:54 AM時点のAmazon.co.jp 価格 価格および発送可能時期は表示された日付/時刻の時点のものであり、変更される場合があります。本商品の購入においては、購入の時点でAmazon.co.jpに表示されている価格および発送可能時期の情報が適用されます。
CSSをより便利に、効率的に書ける「Sass(サス)」の解説書を、最新のコーディング環境にあわせて大幅刷新!Sassは導入が面倒そう。はじめたいけどあと一歩が踏み出せない。CSSを今よりも効率的に書きたい。こうした方がSassを導入するきっかけとなり、ひと通りSassの機能を使いこなせるようになるのが本書の目標です。CSSをHTMLの構造に合わせて入れ子で書いていく「ネスト」や、便利な「変数」や「演算」などのSassの基本機能はもちろん、筆者が実際に仕事の現場で使っている実践的なテクニックまで、この一冊で網羅しています。
amazonでチェック
本サイト上で表示されるコンテンツの一部は、アマゾンジャパン合同会社またはその関連会社により提供されたものです。これらのコンテンツは「現状有姿」で提供されており、随時変更または削除される場合があります。
物草 灸太郎
物草 灸太郎

WordPressでホームページを制作しつつ、休日は畑を耕したりDIYを楽しんでいます。

Loading...

コメントをどうぞ

  • メールアドレスが公開されることはありません。
  • コメント欄にURLは入力できません。
  • このサイトはreCAPTCHAによって保護されており、Googleのプライバシーポリシー利用規約が適用されます。