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からの関数に２箇所追加
// [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');
}
