Help us understand the problem. What is going on with this article?

Zurb Foundation 導入前の予備知識

More than 3 years have passed since last update.

スクリーンショット 2016-03-21 12.04.49.png

個人的に、最強の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

スクリーンショット 2016-03-21 12.06.05.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

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バージョンについて、情報をまとめていきたいと思っています。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away