Jamband

CSS/JS Framework の Bootstrap 4 の安定版がリリースされたので PlusArchive を Bootstrap 3 から Bootstrap 4 にした。今回はそこらの大まかな変更箇所を書いていく。

環境

Yii Framework 2.0.14.1
Bootstrap 4.0.0
webpack 3.x

大まかな変更箇所

PHP のフレームワークとして Yii Framework を使っていて、かつ webpack でアセット周りをカスタムビルドしているので以下の追加が必要になる。

必要なパッケージをインストール:

npm i -S bootstrap@4.0.0 popper.js
npm i -D exports-loader

webpack の設定ファイルの更新:

const webpack = require('webpack')

module.exports = {
  entry: {
     // ...
  },
  // ...
  plugins: [
    new webpack.ProvidePlugin({
      Popper: ['popper.js', 'default'],
      Util: 'exports-loader?Util!bootstrap/js/dist/util'
    }),
    // ...
  ]
}

vendor ファイルの例:

window.$ = window.jQuery = require('jquery')

require('bootstrap/js/dist/button')
require('bootstrap/js/dist/collapse')
require('bootstrap/js/dist/dropdown')
require('bootstrap/js/dist/modal')
// ...

Yii の開発環境で使う yii2-debug と yii2-gii も Bootstrap に依存していてかつ 3.x なので、それは Composer を使ってインストールする:

composer require --dev twbs/bootstrap:3.3.7

ソースパスも変更しておく config/web.php:

<?php
if (YII_ENV_DEV) {
    // ...
    $config['container']['definitions'] += [
        yii\bootstrap\BootstrapAsset::class => [
            'sourcePath' => '@vendor/twbs/bootstrap/dist',
        ],
        yii\bootstrap\BootstrapPluginAsset::class => [
            'sourcePath' => '@vendor/twbs/bootstrap/dist',
        ],
    ];

これで node_modules ディレクトリ以下には Bootstrap 4 が、vendor ディレクトリ以下には Bootstrap 3 が置かれているという状況にできる。若干トリッキーだけど、これで安心してブラウザから Gii も使える。コマンドラインから使ってもいいんだけども...。

あとはゴリゴリ Yii の Widget 関連のものや Sass、HTML ファイルを修正していく。
詳しくは GitHub: jamband/plusarchive.com を見てみてください。

いくつかの問題箇所

PlusArchive はいくつかのページで Pinterest 風のグリッドレイアウトを採用している (Masonry を使用)。Bootstrap 4 から Card Columns というコンポーネントがあって Masonry を使わずともそれを実現できると思っていたけど、表示順序の問題で不採用になった:

// Card Columns
147
258
369

// Masonry
123
456
789

また Card の画像の縦の長さが IE 11 で伸びてしまうバグもある。いろいろ調べた結果、回避策としては以下を利用した:

.card {
  @include media-breakpoint-up(sm) {
    display: block;
    // ...
  }
}

まとめ

Flexbox がーとかわーわー言うてますが、IE 11 とか Safari のことを考えるとまだまだ安定していない感じ...。

環境

大まかな変更箇所

いくつかの問題箇所

まとめ

リンク