構造体
グリッド
http://foundation.zurb.com/docs/components/grid.html
div.rowの中にdiv.columnsをセットし、.rowを12分割し、.columnsでカラム幾つ分にあたるかを指定します。
標準で768pxをブレークポイントとして、それ以下をsmall、それ以上をlargeとして.columnsの合計が12になるようにします。
例えば、
...
...
...
のように指定することで、768px以下の場合は2カラム-4カラム-6カラムのグリッドができあがりますが、768px以上の場合は、4カラム-4カラム-4カラムのグリッドになります。
実際にウィンドウ幅を変化させて、下のカラムがどう変化するかを確認してください。
2
4
6
- smallを指定しない場合は、(smallのサイズになった場合は)すべてフルカラムで1列に並べて表示されます
- グリッドのネスト表示も可能です。
8カラム-4カラムに分け、8カラムの中をさらに8カラム-4カラムに分ける、など
これにより、例えば(3-3-3-3)-4といった分割も可能になります。 - 間を開けたい場合は、offsetを指定します。
large-1とlarge-9で、間を1カラム分開けたい場合、large9のほうで、class="large-9 large-offset-2 columns"と指定します。 - ○カラム分をセンタリングしたい、という場合は、centeredを指定します。
3カラム分をセンタリングする場合：class="small-3 small-centered columns" - さらに、上記の場合にlargeのときにセンタリングさせたくない、という場合はuncenteredを指定します。
smallサイズで3カラム分をセンタリングするがlargeではセンタリングしない場合：
class="small-3 small-centered large-uncentered columns" - 順番の入れ替え
カラムを指定分ずらして表示することができます。現在のカラム位置より右側にずらしたい場合は、push-*で移動したいカラム数を指定します。左にずらしたい場合はpull-*で指定します。
サイドの固定ナビなどに有効です。
10
2, last
↓結果
10
2, last
表示／非表示クラス
http://foundation.zurb.com/docs/components/visibility.html
Foundationは、スクリーンサイズやデバイスの向き、タッチデバイスなどに、クラスを指定するだけで簡単に対応できます。
/* "表示する"クラス */
.show-for-small /* ブラウザサイズが768pxまでの場合に表示 */
.show-for-medium-down /* ブラウザサイズが768pxを区切りに、フォントサイズを変えて表示 */
.show-for-medium /* ブラウザサイズが768pxから1280pxの間の場合のみ表示 */
.show-for-medium-up /* ブラウザサイズが768px以上で表示 */
.show-for-large-down /* ブラウザサイズが768px以下では、フォトを小さく表示、768px-1280pxでは通常表示、1280pxを超えると非表示 */
.show-for-large /* ブラウザサイズが1280pxから1440pxの間の場合のみ表示 */
.show-for-large-up /* ブラウザサイズが1280px以上で表示 */
.show-for-xlarge /* ブラウザサイズが1440px以上の場合に表示 */
/* The hide classes */
.hide-for-small /* ブラウザサイズが768pxまでの場合は非表示 */
.hide-for-medium-down /* ブラウザサイズが1280pxまでの場合は非表示（hide-for-large-downとの違いが不明） */
.hide-for-medium /* ブラウザサイズが768pxから1280pxの間の場合のみ非表示 */
.hide-for-medium-up /* ブラウザサイズが768px以上の場合は非表示 */
.hide-for-large-down /* ブラウザサイズが1280px以下の場合は非表示 */
.hide-for-large /* ブラウザサイズが1280pxから1440pxの間の場合のみ非表示 */
.hide-for-large-up /* ブラウザサイズが1280px以上の場合は非表示 */
.hide-for-xlarge /* ブラウザサイズが1440px以上の場合は非表示 */
/* 方向に関するクラス（デバイスの縦横の判別ではなく、ブラウザの縦横の長さで判別している模様） */
.show-for-landscape /* ランドスケープ（横長）の際に表示 */
.show-for-portrait /* ポートレイト（縦長）の際に表示 */
.hide-for-landscape /* ランドスケープ（横長）の際に非表示 */
.hide-for-portrait /* ポートレイト（縦長）の際に非表示 */
/* タッチデバイスに関するクラス（モバイル機器を対象にしたクラス） */
.show-for-touch /* タッチデバイスの場合に表示 */
.hide-for-touch /* タッチデバイスの場合に非表示 */
ブロックグリッド
http://foundation.zurb.com/docs/components/block-grid.html
画像など、横並びに並べたい場合にブロックグリッドを使用できます。
ブロックグリッドは.row .columnsは使用せず、ulにクラス指定します。
.small-block-grid-# か、.large-block-grid-# で指定しますが、もちろん、両方の指定も可能です。
↓結果（768px以上では４カラム、以下では2カラムで表示します）