XY GridとFloat Gridを共存して使いたい Foundation6.3と6.4の互換性

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]のボタンをクリックしてダウンロードする。

Customize Foundation Download

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

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

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

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

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

参考

XY Grid compatibility with Float Grid

コメント