bootstrapで"col-xs-"より小さい"col-xxs-"クラスを作ってみる

bootstrapのグリッドシステムなんですけど、使いにくいと思うのって自分だけですかね?

具体的に言うと、col-xs-の表示幅が結構範囲が広いんですよね。自分はレスポンシブで作る時はだいたい最小幅はiPhone4,5の320pxとして作るので、実質320px〜767pxまでcol-xs-で対応しなきゃいけない。これが結構広いせいで、1カラムだと767pxまで広げた時に無駄に広くなる、かといって2カラムだと320pxでだいぶ小さくなる。一番マシな選択肢は1カラムで最大幅を設定しておいて中央寄せかなと思うんですが、480あたりで2カラムにできればいいのに!って思ったりしませんか?

というわけで、480pxをブレークポイントとして、480px〜767pxをcol-xs-、〜480pxはさらに小さいcol-xxs-で対応するっていうのを作れないかなと思ってSASSを適当にいじってみたところ、上手くできたので自分用の備忘録も兼ねて書きたいと思います。

ちなみに現時点での最新バージョン(3.3.6)で書いていきます。ダウンロードは公式ページの右端にある「Download Sass」から。

変更するファイル

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

  • _grid.scss
  • mixins/_grid-framework.scss
  • mixins/_grid.scss

では、一つずついきましょう。

_grid.scss

変更するのは、56行目。

@include make-grid(xs);

こんな感じで書き換えます。

@include make-grid(xxs);
@media (min-width: $screen-xs-min) {
  @include make-grid(xs);
}

mixins/_grid.scss

こちらは22〜38行目を変更。

@mixin make-xs-column($columns, $gutter: $grid-gutter-width) {
  position: relative;
  float: left;
  width: percentage(($columns / $grid-columns));
  min-height: 1px;
  padding-left: ($gutter / 2);
  padding-right: ($gutter / 2);
}
@mixin make-xs-column-offset($columns) {
  margin-left: percentage(($columns / $grid-columns));
}
@mixin make-xs-column-push($columns) {
  left: percentage(($columns / $grid-columns));
}
@mixin make-xs-column-pull($columns) {
  right: percentage(($columns / $grid-columns));
}

こんな感じにしてください。

@mixin make-xxs-column($columns, $gutter: $grid-gutter-width) {
  position: relative;
  float: left;
  width: percentage(($columns / $grid-columns));
  min-height: 1px;
  padding-left:  ($gutter / 2);
  padding-right: ($gutter / 2);
}
@mixin make-xxs-column-offset($columns) {
  margin-left: percentage(($columns / $grid-columns));
}
@mixin make-xxs-column-push($columns) {
  left: percentage(($columns / $grid-columns));
}
@mixin make-xxs-column-pull($columns) {
  right: percentage(($columns / $grid-columns));
}

@mixin make-xs-column($columns, $gutter: $grid-gutter-width) {
  position: relative;
  min-height: 1px;
  padding-left: ($gutter / 2);
  padding-right: ($gutter / 2);

  @media (min-width: $screen-xs-min) {
    float: left;
    width: percentage(($columns / $grid-columns));
  }
}
@mixin make-xs-column-offset($columns) {
  @media (min-width: $screen-xs-min) {
    margin-left: percentage(($columns / $grid-columns));
  }
}
@mixin make-xs-column-push($columns) {
  @media (min-width: $screen-xs-min) {
    left: percentage(($columns / $grid-columns));
  }
}
@mixin make-xs-column-pull($columns) {
  @media (min-width: $screen-xs-min) {
    right: percentage(($columns / $grid-columns));
  }
}

まぁ説明しなくても恐らくわかるかと思いますが、要するにこの二つのファイルは、col-xs-の方をコピペしてxsを全部xxsに書き換え、xsの方は他のsm,md,lgの書き方にならって書き換えって感じにすればOKです。

mixins/_grid-framework.scss

最後に_grid-framework.scssですが、これは簡単です。まずは7行目、

@mixin make-grid-columns($i: 1, $list: ".col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}") {

ここにxxsも追加してあげましょう。

@mixin make-grid-columns($i: 1, $list: ".col-xxs-#{$i}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}") {

同じく9行目、

$list: "#{$list}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}";

ここにもxxsを追加します。

$list: "#{$list}, .col-xxs-#{$i}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}";

以上!

コンパイルして出来上がったcssを確認しましょう。col-xxs-で検索して見つかれば成功です。同様にcol-xxs-push-、col-xxs-pull、col-xxs-offset-も出来ているはずです。

ちなみに応用してcol-xlとかも作れるかとは思うのですが、その場合は_variables.scssで$screen-xlとか、いくつか新たに定義しなきゃいけない気がするので、今のところ使う機会もないからめんどくさいや〜ってことでやってません。どなたかやってみたという方いたら、どうすればいいのか教えてください。

※追記
bootstrapで480px未満に対応する”hidden-xxs”、”visible-xxs-“も作ってみたという記事も書いてみましたので参考にどうぞ。

この投稿へのコメント

コメントはありません。

コメントを残す

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

CAPTCHA


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

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

トラックバック URL