Foundation6.3で作ったサイトを更新することになりました。

XY Gridが導入されたのが6.4からなので、Float Gridで作られたサイトです。6.4でも下位互換のような形でFloat Gridを使えるのかと試しましたが、うまく行きません。

選択肢は2つ。

1. 6.4を導入して、Float Gridで作ったページをXY Gridに書き換える。
2. 6.3のまま、Float Gridで作る。

どちらも気に入らないので、調べてみるとCSSをマージしてやれば共存できるようです。

1. Download Foundationのページから[Complete]の[Download Everything]をクリックしてダウンロードする。XY Gridのコンポーネントが含まれたバージョンがダウンロードされる。

https://foundation.zurb.com/sites/download.html/

2. [Customize Foundation] - [Choose Your Components] - [All Foundation Components]のチェックをはずし、[Grid] - [Float Grid]のみにチェックを入れ、[Download Custom Build]のボタンをクリックしてダウンロードする。

3. 2.でダウンロードしたフォルダ内のCSSフォルダを開き、foundation.CSSを開く。501行目から1258行目をコピーする。Float Gridに対応するCSS。

.row {
  max-width: 62.5rem;
  margin-right: auto;
  margin-left: auto; }
・
・
（省略）
・
・
.column-block {
  margin-bottom: 1.875rem; }
  .column-block > :last-child {
    margin-bottom: 0; }

4. 1.でダウンロードしたフォルダ内のCSSフォルダを開き、foundation.cssを開く。508行目から2178行目までがXUY GridのCSSなので、2180行目に3.でコピーしたFloat GridのCSSを貼り付ける。

.grid-container {
  padding-right: 0.625rem;
  padding-left: 0.625rem;
  max-width: 75rem;
  margin: 0 auto; }
・
・
（省略）XY GridのCSS
・
・
  .large-flex-dir-column-reverse {
    -ms-flex-direction: column-reverse;
        flex-direction: column-reverse; } }
・
この下にFloat GridのCSSを貼り付ける。

5. Foundation6.3のプロジェクト内の[css]、[js]のフォルダを1.でダウンロードしたものと置き換える。既存のページに影響がなければ完了。

FoundationのGridシステムは、それぞれ固有のものであることを再認識させられた出来事でした。

ちなみに、上記はCSSバージョンのFoundationを使用した場合の方法です。Sassではまた別の方法もあるのかもしれません。

参考

XY Grid compatibility with Float Grid