Bootstrap3のブレークポイントを増やしたいときの処方箋
やりたいこと
Bootstrap3のグリッドシステムを利用してるけど、タブレット以下のブレークポイントが768px未満ってこれちょっと大雑把すぎませんかね?(Extra(特別な)smallっていう割には全然特別感のない幅感というか・・・)
ということで自力で
col-xs ~320px
col-ss 360px (これを追加)
col-sm 768px
col-md 992px
col-lg 1200px~
となるようにscssを改変->cssを生成したい!
というのがやりたいことです。
(特別なブレークレイアウトにしなきゃいけないのって個人的にはiPhoneSEなどの横幅320px系だと思っているので、こういう分け方にしてます。)
稼働中のサービスに反映させたいと言うことで、col-xsが一番小さいブレークポイントとしていたるところにクラス指定してるので、
途中に挟み込む形にしたいと言うわけです。
編集するscss
当方はHonoka v3.3.7を利用しているため、これを改変していきますが、
行数は違えど公式版bootstrap3でも役に立つかもしれません。
honokak.osaka
※バージョン指定でダウンロードしたい場合は、Gitページに飛んでからTagsをご参照ください。
また、デフォルトで生のbootstrap3のsassはhonokaには同梱されていないので、別途/honoka/bootstrap/~として配置する必要があります。
github.com
※これもバージョンをTagsからしっかり合わせるようにしてください。
※分かりづらいですが/assets/stylesheets/配下にあります。
編集するファイル
honoka/_variables.scss
#289あたり
// Extra small screen / phone //** Deprecated `$screen-xs` as of v3.0.1 $screen-xs: 320px !default; // !変更! //** Deprecated `$screen-xs-min` as of v3.2.0 $screen-xs-min: $screen-xs !default; //** Deprecated `$screen-phone` as of v3.0.1 $screen-phone: $screen-xs-min !default; // !追加!Small screen / smart //** Deprecated `$screen-sm` as of v3.0.1 $screen-ss: 360px !default; $screen-ss-min: $screen-ss !default; //** Deprecated `$screen-smart` as of v3.0.1 $screen-smart: $screen-ss-min !default; // Small screen / tablet //** Deprecated `$screen-sm` as of v3.0.1 $screen-sm: 768px !default; $screen-sm-min: $screen-sm !default; //** Deprecated `$screen-tablet` as of v3.0.1 $screen-tablet: $screen-sm-min !default;
#320あたり つながる様に追加&変更
$screen-xs-max: ($screen-ss-min - 1) !default; /*!sm->ss!*/ $screen-ss-max: ($screen-sm-min - 1) !default;/*!追加!*/ $screen-sm-max: ($screen-md-min - 1) !default; $screen-md-max: ($screen-lg-min - 1) !default;
honoka/bootstrap/_grid.scss
#56あたり
@include make-grid(xs); // !追加! @media (min-width: $screen-ss-min) { @include make-grid(ss); } // Small grid // // Columns, offsets, pushes, and pulls for the small device range, from phones // to tablets. @media (min-width: $screen-sm-min) { @include make-grid(sm); }
honoka/bootstrap/mixins/_grid.scss
#38おわりあたり
// !追加!Generate the smart columns @mixin make-ss-column($columns, $gutter: $grid-gutter-width) { position: relative; min-height: 1px; padding-left: ($gutter / 2); padding-right: ($gutter / 2); @media (min-width: $screen-ss-min) { float: left; width: percentage(($columns / $grid-columns)); } } @mixin make-ss-column-offset($columns) { @media (min-width: $screen-ss-min) { margin-left: percentage(($columns / $grid-columns)); } } @mixin make-ss-column-push($columns) { @media (min-width: $screen-ss-min) { left: percentage(($columns / $grid-columns)); } } @mixin make-ss-column-pull($columns) { @media (min-width: $screen-ss-min) { right: percentage(($columns / $grid-columns)); } }
honoka/bootstrap/mixins/_grid-framework.scss
#6からの関数に2箇所追加
// [converter] This is defined recursively in LESS, but Sass supports real loops @mixin make-grid-columns($i: 1, $list: ".col-xs-#{$i}, .col-ss-#{$i}, /*!追加!*/ .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}") { @for $i from (1 + 1) through $grid-columns { $list: "#{$list}, .col-xs-#{$i}, .col-ss-#{$i},/*!追加!*/ .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}"; } #{$list} { position: relative; // Prevent columns from collapsing when empty min-height: 1px; // Inner gutter via padding padding-left: ceil(($grid-gutter-width / 2)); padding-right: floor(($grid-gutter-width / 2)); } }
honoka/bootstrap/_responsive-utilities.scss
#31
@include responsive-invisibility('.visible-xs'); @include responsive-invisibility('.visible-ss'); /*!追加!*/
#37あたり
.visible-xs-block, .visible-xs-inline, .visible-xs-inline-block, .visible-ss-block,/*!追加!*/ .visible-ss-inline,/*!追加!*/ .visible-ss-inline-block,/*!追加!*/
#74あたり 真似して追加
/*!追加!*/ @media (min-width: $screen-ss-min) and (max-width: $screen-ss-max) { @include responsive-visibility('.visible-sm'); } .visible-ss-block { @media (min-width: $screen-ss-min) and (max-width: $screen-ss-max) { display: block !important; } } .visible-ss-inline { @media (min-width: $screen-ss-min) and (max-width: $screen-ss-max) { display: inline !important; } } .visible-ss-inline-block { @media (min-width: $screen-ss-min) and (max-width: $screen-ss-max) { display: inline-block !important; } }
#154あたり 真似して追加
/*!追加!*/ @media (min-width: $screen-ss-min) and (max-width: $screen-ss-max) { @include responsive-invisibility('.hidden-ss'); }