Foundation 割と好きめのハマチです。
多機能過ぎて取っ付きにくい印象の Foundation でしたが、その全てを使いきらなくても十分便利でしたので数回に分けてかじっていこうと思います。

Foundation の準備

Foundation があればなんでもいいですが、今回は私がいつも開発用に使っている gulp-web-starter を使ったサンプルで紹介します。このサンプルは

• Shell Script が動く環境
• sass > 3.4
• sass-globbing
• node.js > 0.12.0
• npm > 2.7.3
• bower > 1.3.12

があれば上手く行くと思います。また、この記事が書かれた時点での Foundation のバージョンは5.5.1です。
Foundation の利用方法はいくつかありますが、この例では Bower を使った方法になります。

まずは gulp-web-starter を $ git clone して、セットアップします。

$ git clone https://github.com/vwxyutarooo/gulp-web-starter
$ cd gulp-web-starter
$ npm install
$ npm run gulp -- init

これで Foundation がいい感じに使えます。
BrowserSync のサーバとか Gulp の watch は

$ npm run gulp-server

で立ち上がるので以降この操作だけです。

Foundation の設定ファイル

上記の手順で設定した場合、Foundation のコンポーネントファイルは bower_components/foundaion/scss/foundation/components/ の中です。基本的にこれらのコンポーネントファイルは編集しません。
設定ファイルは前項の $ npm run gulp --init にて

bower_components/foundaion/scss/foundation/foudation.scss
↓
src/scss/core/_foudation.scss

bower_components/foundaion/scss/foundation/_settings.scss
↓
src/scss/core/_settings.scss

へと移動してあります。これで何かの拍子に $ bower install した時にも、設定ファイルが上書きされることはありませんので、この2つの設定ファイルを安心して編集できます。

今回使用するサンプルでは src/scss/app.scss を

7: // @import 'core/default';
8: @import 'core/settings';
9: @import 'core/foundation';

の様に書き直して foundation ファイルを読み込みます。core/settings を先に読み込まないと、デフォルトの値をオーバーライドすることが出来ないので注意して下さい。これで Foundation を使う準備ができました。

補足

Foundation の GitHub などで scss/ ファイルを見れば分かりますが、初期の状態では _settings.scss に書いてあるパスと _functions.scss の関係はずれています。_settings.scss 内の

58: @import "foundation/functions";

の記述に対して、初期の構成は

foundation.scss
foundation/_functions.scss
foundation/_settings.scss

です。Questions about project structure and SASS によれば、_seggings.scss は “Bower とかで上書きされないようにずらしてあるから自分で1個上の階層にコピーして使ってね” とのこと。私は自分の SASS ファイルからfoundation.scss を読み込みたいので上記の様な方法をとっています。

Foundation の不要な機能を無効化する

Foundation は多機能過ぎてコンパイルが遅いですし、出来上がる CSS も重たくなるので、必要な機能だけを有効化して使いたいです。
機能の有効/無効は src/scss/core/_foundation.scss の @import ファイルをコメントアウトすることでコントロールします。
今回は Media Queries だけ使いたいので、下記の通り全てコメントアウトです。

@charset "UTF-8";
// Foundation by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source

// Make sure the charset is set appropriately

// Behold, here are all the Foundation components.
  // @import "foundation/components/grid";
  // @import "foundation/components/accordion";
  // @import "foundation/components/alert-boxes";
  // @import "foundation/components/block-grid";
  // @import "foundation/components/breadcrumbs";
  // @import "foundation/components/button-groups";
  // @import "foundation/components/buttons";
  // @import "foundation/components/clearing";
  // @import "foundation/components/dropdown";
  // @import "foundation/components/dropdown-buttons";
  // @import "foundation/components/flex-video";
  // @import "foundation/components/forms";
  // @import "foundation/components/icon-bar";
  // @import "foundation/components/inline-lists";
  // @import "foundation/components/joyride";
  // @import "foundation/components/keystrokes";
  // @import "foundation/components/labels";
  // @import "foundation/components/magellan";
  // @import "foundation/components/orbit";
  // @import "foundation/components/pagination";
  // @import "foundation/components/panels";
  // @import "foundation/components/pricing-tables";
  // @import "foundation/components/progress-bars";
  // @import "foundation/components/range-slider";
  // @import "foundation/components/reveal";
  // @import "foundation/components/side-nav";
  // @import "foundation/components/split-buttons";
  // @import "foundation/components/sub-nav";
  // @import "foundation/components/switches";
  // @import "foundation/components/tables";
  // @import "foundation/components/tabs";
  // @import "foundation/components/thumbs";
  // @import "foundation/components/tooltips";
  // @import "foundation/components/top-bar";
  // @import "foundation/components/type";
  // @import "foundation/components/offcanvas";
  // @import "foundation/components/visibility";

風船をつければ飛んで行きそうな軽さになりました。

Foundation の Media Queries を使う

流石の Foundation もコンポーネントを全て無効にされることは想定しておらず、残念ながらこのままでは使えません。Media Queries を使うためには _global.scss が必要になります。これは各コンポーネントファイルから読まれているのですが、先程全てのコンポーネントファイルを読み込まないようにしてしまった為、これを別途記述します。_foundation.scss の適当な場所に

@import "foundation/components/global";

を書きましょう。これで上記の様にコンポーネントを全て除外しても Media Queries の機能だけを使うことができます。

使い方

使い方は簡単、公式ドキュメント Media Queries – Foundation に書いてある通りですが

@media #{$small-up} { }
@media #{$small-only} { }

@media #{$medium-up} { }
@media #{$medium-only} { }

@media #{$large-up} { }
@media #{$large-only} { }

@media #{$xlarge-up} { }
@media #{$xlarge-only} { }

@media #{$xxlarge-up} { }
@media #{$xxlarge-only} { }

こんな感じの10パターンが使えます。モバイルファーストの考え方ですね。
ブレイクポイントは

• 641px
• 1025px
• 1441px
• 1921px

となっています。

例えば

h1 {
  font-size: 10px;
  @media #{$medium-up} {
    font-size: 20px;
  }
  @media #{$large-up} {
    font-size: 40px;
  }
}

と書くと

• SP サイズの h1 が10px
• タブレットサイズの h1 が 20px
• PC サイズの h1 が 40px

と指定できます。ブレイクポイントが散らからず、書きやすくて見やすいです。大変便利。

ブレイクポイントの値を変更する

初期値のブレイクポイントは大変よく出来ていますが、好きな値に変更することも可能です。

src/scss/core/_settings.scss の記述を変更します。

153: // d. Media Query Ranges
154: // - - - - - - - - - - - - - - - - - - - - - - - - -
155:
156: // $small-range: (0em, 40em);
157: // $medium-range: (40.063em, 64em);
158: // $large-range: (64.063em, 90em);
159: // $xlarge-range: (90.063em, 120em);
160: // $xxlarge-range: (120.063em, 99999999em);
161:
162: // $screen: "only screen";

の値を変えれば好きなブレイクポイントを設定することができます。

Visibility Classes

Media Queries を使えるようになったので、ついでにサイズに対してコンテンツの出し分けもしてみましょう。CSS によるコンテンツの切替を多様するのはいかがなものかという声もあるかも分かりませんが、補助的に使う分にはこれも便利かなと思います。

src/scss/core/_foundation.scss 内

@import "foundation/components/visibility";

の行をコメントアウトします。ということは前項で _foundation.scss に書いた

@import "foundation/components/global";

は不要になります。
例えば src/jade/index.jade を

17: #main.l-main
18:   h1.show-for-small-only Hello Small World.
19:   h1.show-for-medium-up Hello World.

にすると結果 HTML は

<div id="main" class="l-main">
  <h1 class="show-for-small-only">Hello Small World</h1>
  <h1 class="show-for-medium-up">Hello World.</h1>
</div>

となり、small と medium 以上で要素の出し分けができます。Jade はインデントで結果が変わるので注意して下さい。コンパイル時に上書きされる可能性はありますが src/html/index.html を直接編集しても OK です。
紹介しきれない程のパターンがあるので、後は公式のドキュメントを見ながら活用して下さい。

Visibility Classes – Foundation

以上、かじる Foundation の Media Queries 編でした。