個人でWebサイト作る人の雑記ブログ

Webサイトを個人で作ってる人が人の役に立ちそうなことを書いていく雑記ブログです

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');
}

お疲れ様でした。コンパイルしましょう!

honoka/階層にある「bootstrap.scss」をコンパイルして生成されるcss
元のbootstrap.cssと置き換えて、ちゃんと動くか確認してみてください!