Zurb Foundation 導入前の予備知識

![スクリーンショット 2016-03-21 12.04.49.png](https://qiita-image-store.s3.amazonaws.com/0/116223/5dca7a45-8dd5-6314-da6f-87ebde1f445e.png)


個人的に、最強のCSS/JSフレームワークだと思っているZurb Foundation（以下、Foundation）について書いていきます。

日本ではBootstrapを使う人が多いですが、それぞれの細かい部分を比較すると、いわゆる「Webサイト」を制作するのには総合的にFoundationのほうが向いているんじゃないかな、と思っています。

比較についてはまたの機会にするとして、この記事では、Foundationを利用する上で知っておきたい諸々について記しておきます。

#Zurbという企業

Foundationは、アメリカはカリフォルニア州に所在するデザインカンパニーで、創立は1998年とのこと。2011年に、Foundationの最初のバージョンをオープンソースとして公開しています。（最初のバージョンですが、2.0というバージョンでリリース）これは、Bootstrapとほぼ同じ時期です。

[ZURB &mdash; Product Design, Interaction Design &amp; Design Strategy](http://zurb.com/)
#Zurb Foundation

## ライセンス
MIT License

## 特徴

レスポンシブフレームワーク。CSSとJSを併用する。
Bootstrapと同じですね。

[Foundation | The most advanced responsive front-end framework in the world.](http://foundation.zurb.com/)

## バージョン
本記事の執筆時点での最新バージョンは6.2.0。これまで、

* 2.x
* 3.x
* 4.x
* 5.x
* 6.x ←イマココ

と進化し続けています。

### バージョンアップ上の大きな変化
バージョン3系と4系の間で、大きな変更があり、特にGrid（グリッドフレームワーク）のクラス名などが変わりました。
現在のv6系統は、v4からの流れを汲んでいます。

## サポートブラウザ
v6系では、

* IE9+
* モダンブラウザは、過去直近の2バージョン
* Android 2.3+

となっています。

### IE8は？
Foundation 3系をお使いくださいとのこと。
[Foundation | Frequently Asked Questions](http://foundation.zurb.com/support/faq.html)

# 3つのFoundation
![スクリーンショット 2016-03-21 12.06.05.png](https://qiita-image-store.s3.amazonaws.com/0/116223/c4396998-3a9e-b8c3-3131-5f886aa5d775.png)

v6系では、3種類のFoundationが存在します。

## Foundation for sites
いわゆる、ここでFoundationと呼んでいるものです。その名の通り、Webサイト向けのパッケージです。

## Foundation for Emails
HTMLメール用のレスポンシブフレームワークです。v6になってからFoundationに統合されましたが、それまではInkという別のシリーズ扱いでした。

## Foundation for Apps
Webアプリケーション用のフレームワーク。Rubyで使っている人が多いイメージ。v5から登場。

なお、私が普段Foundationと言うのは常にFoundation for sitesのことを指します。

# レベルに応じた導入手段
![スクリーンショット 2016-03-21 12.08.03.png](https://qiita-image-store.s3.amazonaws.com/0/116223/c2e8d9c6-fc83-b5e6-a079-277771ce9d3e.png)

Foundation for sitesには、利用者のレベルに応じた導入方法が選べます。

## CSSバージョン
FoundationのcssとjsをHTMLに読みこめばすぐに利用開始できます。Bootstrapと同じイメージですし、有り物のCSSテンプレートやjQueryプラグインを組み込めるレベルの人にはお手軽で良いと思います。

### Foundation CSSバージョンのメリット
* お手軽
* 簡単
* わかりやすい

### Foundation CSSバージョンのデメリット
Foundationが有するすべての機能を読み込むので、CSS/JSファイルが巨大になります。
また、Foundationの持つスタイルを変更したい場合、CSSのオーバーライド記述が必要となり、変更が多岐に渡る場合、オーバーライド記述量もかなりの量になります。

* ソースが肥大
* カスタマイズ性に難

## カスタムダウンロードバージョン
上記CSSバージョンは、Foundationが持つ機能全部入りですが、カスタムダウンロードのページではFoundationの持つ機能を個別に選択し、ダウンロードすることができます。

例えば、フォームやボタンの機能は必要ないけど、段組の機能は欲しいな、という時は、Gridのコンポーネントだけダウンロードできるサービスです。

### Foundation カスタムダウンロードのメリット
* ソース量を減らせる
* それ以外はCSS版と同じメリット

### Foundation カスタムダウンロードのデメリット
* 欲しい機能が増えると、ファイル数が増える→リクエスト数が増える

## Sassバージョン
本来のFoundationと言えばこれを指します。SCSSで記述されたソースコードをビルドツールを使ってCSSに変換します。

この時に、ユーザーが追記したオリジナルのスタイルやオーバーライドも同時にコンパイルされます。CompassやBourbonといったSassのmixin集を使ったことがある人には、馴染みがあるやり方でしょう。

やりようによっては、HTML側にFoundationのクラスを振らず、完全にセマンティックなマークアップを実現することも可能です。このあたりがBootstrapと思想が異なる部分でしょう。

Foundationは伝統的にcompassを使ってコンパイルしてきましたが、v5系統から、npmを使ったlibsassによるコンパイルにも対応し、v6からは完全にlibsassに変更されました。v5まではソースコード変更の監視もcompassでしたが、v5ではGruntにも対応し、v6からはgulpに変更されています。

### CLIとYeti Launch
FoundationにはCLIツールがあり、伝統的にgemを使ってインストールすることが可能でした。v6からはnpmに変更されています。

一方でCLIを扱うには黒い画面を触る必要があり、そこが「難しいねん」と批判の対象で在り続けました（英語でググるとそういう愚痴っぽいブログ記事とかフォーラム記事にあたります）

そこで、v6からは、Yeti LaunchというGUIのプロセスツールが登場しました。Macのネイティブアプリで、CLIの機能を完全にGUIから操作出来るものです。

イメージとしては、Preprosのような感じです。（個人的にはGUIは好かないので、試しにインストールしただけで終わってますが）

### Foundation Sassバージョンのメリット
* カスタマイズ性に富む
* 必要な機能のSCSSだけ読み込み、コンパイルすることができる

このカスタマイズ性に富む、というところがBootstrapとくらべて柔軟性ハンパないので、今後少しずつ紹介していきたいところです。

### Foundation Sassバージョンのデメリット
* Yeti Launchを使わない場合、黒い画面を使う必要がある
* Yeti Launchを使う場合、Yeti Launch自体かなりファイルサイズが大きい

# まとめ
というわけで、今後はFoundation for sitesのSassバージョンについて、情報をまとめていきたいと思っています。