個人的に、最強のCSS/JSフレームワークだと思っているZurb Foundation（以下、Foundation）について書いていきます。
日本ではBootstrapを使う人が多いですが、それぞれの細かい部分を比較すると、いわゆる「Webサイト」を制作するのには総合的にFoundationのほうが向いているんじゃないかな、と思っています。
比較についてはまたの機会にするとして、この記事では、Foundationを利用する上で知っておきたい諸々について記しておきます。
Zurbという企業
Foundationは、アメリカはカリフォルニア州に所在するデザインカンパニーで、創立は1998年とのこと。2011年に、Foundationの最初のバージョンをオープンソースとして公開しています。（最初のバージョンですが、2.0というバージョンでリリース）これは、Bootstrapとほぼ同じ時期です。
ZURB — Product Design, Interaction Design & Design Strategy
Zurb Foundation
ライセンス
MIT License
特徴
レスポンシブフレームワーク。CSSとJSを併用する。
Bootstrapと同じですね。
Foundation | The most advanced responsive front-end framework in the world.
バージョン
本記事の執筆時点での最新バージョンは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
3つのFoundation
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のことを指します。
レベルに応じた導入手段
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バージョンについて、情報をまとめていきたいと思っています。