bootstrapで480px未満に対応する"hidden-xxs"、"visible-xxs-"も作ってみた

先日書いた「bootstrapで”col-xs-“より小さい”col-xxs-“クラスを作ってみる」の続編です。

そこまでやったなら”hidden-xxs”や”visible-xxs-“というクラスも作ってしまった方がいいんじゃないか、と思いまして。自分としては特に必要じゃないかと思って作ってなかったのですが、まぁそういう需要もあるだろうから試しにやってみようか、上手くできたら記事にしちゃおう!と思ってやってみたら結構簡単にできたので書いておきます。

前回同様、最新バージョン(3.3.6)のSASSでやっていきます。

変更するファイル

assets/stylesheets/bootstrapの中にある以下のファイルです。

  • _responsive-utilities.scss
  • _variables.scss

今回はmixins側のファイルは変更しません。

_responsive-utilities.scss

変更するのはほとんどこのファイルです。まずは31行目、

@include responsive-invisibility('.visible-xs');

コピーしてxxsを追加します。

@include responsive-invisibility('.visible-xxs');
@include responsive-invisibility('.visible-xs');

続いて36〜38行目

.visible-xs-block,
.visible-xs-inline,
.visible-xs-inline-block,

ここにもxxsを追加しましょう。

.visible-xxs-block,
.visible-xxs-inline,
.visible-xxs-inline-block,
.visible-xs-block,
.visible-xs-inline,
.visible-xs-inline-block,

次に51〜68行目、

@media (max-width: $screen-xs-max) {
 @include responsive-visibility('.visible-xs');
}
.visible-xs-block {
 @media (max-width: $screen-xs-max) {
  display: block !important;
 }
}
.visible-xs-inline {
 @media (max-width: $screen-xs-max) {
  display: inline !important;
 }
}
.visible-xs-inline-block {
 @media (max-width: $screen-xs-max) {
  display: inline-block !important;
 }
}

同じ書き方でxxsを追加し、xsの方にはmin-widthを設定します。

@media (max-width: $screen-xxs-max) {
 @include responsive-visibility('.visible-xxs');
}
.visible-xxs-block {
 @media (max-width: $screen-xxs-max) {
  display: block !important;
 }
}
.visible-xxs-inline {
 @media (max-width: $screen-xxs-max) {
  display: inline !important;
 }
}
.visible-xxs-inline-block {
 @media (max-width: $screen-xxs-max) {
  display: inline-block !important;
 }
}
@media (min-width: $screen-xs-min) and (max-width: $screen-xs-max) {
 @include responsive-visibility('.visible-xs');
}
.visible-xs-block {
 @media (min-width: $screen-xs-min) and (max-width: $screen-xs-max) {
  display: block !important;
 }
}
.visible-xs-inline {
 @media (min-width: $screen-xs-min) and (max-width: $screen-xs-max) {
  display: inline !important;
 }
}
.visible-xs-inline-block {
 @media (min-width: $screen-xs-min) and (max-width: $screen-xs-max) {
  display: inline-block !important;
 }
}

最後に127〜129行目、こちらはhiddenの方ですね。

@media (max-width: $screen-xs-max) {
 @include responsive-invisibility('.hidden-xs');
}

ここも同様にxxsを追加し、xsの方にmin-widthを設定します。

@media (max-width: $screen-xxs-max) {
 @include responsive-invisibility('.hidden-xxs');
}
@media (min-width: $screen-xs-min) and (max-width: $screen-xs-max) {
 @include responsive-invisibility('.hidden-xs');
}

_variables.scss

以上でほぼ終わりなのですが、このままでは書き加えた$screen-xxs-maxという変数が存在しないので、そこだけ_variable.cssに追記してあげましょう。320行目の$screen-xs-maxのところを、

$screen-xs-max: ($screen-sm-min - 1) !default;

こうします。

$screen-xxs-max: ($screen-xs-min - 1) !default;
$screen-xs-max: ($screen-sm-min - 1) !default;

以上!

コンパイルしてみて、.hidden-xxs.visible-xxs-inline.visible-xxs-block.visible-xxs-inline-blockあたりが出来ていれば成功してると思われます。

この投稿へのコメント

コメントはありません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


この投稿へのトラックバック

トラックバックはありません。

トラックバック URL