Zurb Foundation 4 チートシート

Posted by admin at 8:50 日時 2013/05/08

CSSフレームワークとして、個人的にTwitter Bootstrapより断然注目しているZurb製のFoundation 4のまとめです。Bootstrapはウェブアプリ、ウェブサービス向けという感じがしますが、Foundationはウェブサイトに適していると思います。

今回はとりあえず使いはじめるためのガイドとして作成したもので、全ての機能を網羅したものではありません。詳細は公式ドキュメントを確認してください。また、Foundation 4にどんな要素があるのか、実際の表示で確認するには Kitchen Sink ページに全サンプルがあります。

今回記事にしてみて思ったのは、既存サイトであっても、これからFoundation 4を導入することができるように考えられているなということです。SCSSを使うことが前提になりますが。この記事でいくつかは紹介していますが、Mix-inが用意されていたりして、読みこむだけで既存のクラス名にFoundation 4の機能を付加することができるようになります。この記事で紹介していないものもほぼ全て入っています。これもそのうちやってみようと思います。

表示・非表示のコントロール

たとえば、CSSクラス .show-for-small をつければ768px以下で表示され、.hide-for-small をつければ768px以下では表示されない、といったコントロールがかんたんにできる。横置きの時のみの .show-for-landscape タッチデバイスのみの .show-for-touch など、モバイル機器を対象にしたコントロールもCSSクラスのみでできる。

CSSクラス名が乱立するとソースが汚くなるのが気になるという方は、SCSSを使ってこのクラスを継承すれば良い。

.your-class-name { @extend .hide-for-small; }

→ Visibility Classes

グリッド

.row の中に .columns を入れるのが基本セット。.row の中は12に分割される。

.small-2.columns だとブラウザ幅が狭い時は 2/12
.large-4.columns だとブラウザ幅が広い時は 4/12

&lt;div class=&quot;row&quot;&gt;    &lt;div class=&quot;small-2 large-4 columns&quot;&gt;...&lt;/div&gt;    &lt;div class=&quot;small-4 large-4 columns&quot;&gt;...&lt;/div&gt;    &lt;div class=&quot;small-6 large-4 columns&quot;&gt;...&lt;/div&gt;  &lt;/div&gt;

→ グリッド幅のサンプル

入れ子構造が可能

&lt;div class=&quot;row&quot;&gt;    &lt;div class=&quot;small-8 columns&quot;&gt;8      &lt;div class=&quot;row&quot;&gt;        &lt;div class=&quot;small-8 columns&quot;&gt;8 Nested          &lt;div class=&quot;row&quot;&gt;            &lt;div class=&quot;small-8 columns&quot;&gt;8 Nested Again&lt;/div&gt;            &lt;div class=&quot;small-4 columns&quot;&gt;4&lt;/div&gt;          &lt;/div&gt;        &lt;/div&gt;        &lt;div class=&quot;small-4 columns&quot;&gt;4&lt;/div&gt;      &lt;/div&gt;    &lt;/div&gt;    &lt;div class=&quot;small-4 columns&quot;&gt;4&lt;/div&gt;  &lt;/div&gt;

→入れ子構造のサンプル

オフセット指定が可能

.large-offset-1 や .small-offset-3 と言ったクラスで、数字で指定した広さの余白をカラムの左側に入れることができる。

カラムの中央寄せ

.large-centered または .small-centered クラスで、カラムを中央寄せにできる。広い画面でのみ中央寄せ解除したい時は .large-uncentered

順番の入れ替え

.push-2 と言ったクラスで、数字で指定した分カラムを右側にずらすことができる。左側にずらす時は .pull-2 になる。これを組み合わせることで、通常左から埋まっていくカラムの順序を入れ替えることができる。

&lt;div class=&quot;row&quot;&gt;    &lt;div class=&quot;small-2 push-10 columns&quot;&gt;幅2　右側&lt;/div&gt;    &lt;div class=&quot;small-10 pull-2 columns&quot;&gt;幅10　左側&lt;/div&gt;  &lt;/div&gt;  &lt;div class=&quot;row&quot;&gt;    &lt;div class=&quot;small-2 columns&quot;&gt;幅2　左側&lt;/div&gt;    &lt;div class=&quot;small-10 columns&quot;&gt;幅10　右側&lt;/div&gt;  &lt;/div&gt;

→ Grid

ブロックグリッド

div内の要素を横に並べたいということがありますが、それも自動でやってくれます。親になる要素に small-block-grid-2 や large-block-grid-4 と言ったクラスを指定すれば、自動的にその子要素が数字で指定した数並びます。そもそもレスポンシブ設計のため、画像サイズも親要素の幅に合わさるようになっているので可能なのでしょう。

&lt;ul class=&quot;small-block-grid-2 large-block-grid-4&quot;&gt;  	&lt;li&gt;&lt;img alt=&quot;&quot; src=&quot;../img/demos/demo1.png&quot; /&gt;&lt;/li&gt;  	&lt;li&gt;&lt;img alt=&quot;&quot; src=&quot;../img/demos/demo2.png&quot; /&gt;&lt;/li&gt;  	&lt;li&gt;&lt;img alt=&quot;&quot; src=&quot;../img/demos/demo3.png&quot; /&gt;&lt;/li&gt;  	&lt;li&gt;&lt;img alt=&quot;&quot; src=&quot;../img/demos/demo4.png&quot; /&gt;&lt;/li&gt;  &lt;/ul&gt;

これもSCSSのmix-inになっているので、自作のクラスに読みこませることもできるのが特徴です。

@import &quot;foundation/foundation-global&quot;, &quot;foundation/components/global&quot;, &quot;foundation/components/block-grid&quot;;    .your-class-name { @include block-grid($per-row, $spacing, $base-styles); }    $per-row: false  $spacing: $block-grid-default-spacing  $base-style: true

→ Block Grind

&lt;ul class=&quot;side-nav&quot;&gt;  	&lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;#&quot;&gt;Link 1&lt;/a&gt;&lt;/li&gt;  	&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Link 2&lt;/a&gt;&lt;/li&gt;  	&lt;li class=&quot;divider&quot;&gt;&lt;/li&gt;  	&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Link 3&lt;/a&gt;&lt;/li&gt;  	&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Link 4&lt;/a&gt;&lt;/li&gt;  &lt;/ul&gt;

→ Side Nav

サブナビ

&lt;dl class=&quot;sub-nav&quot;&gt;&lt;dt&gt;Filter:&lt;/dt&gt;&lt;dd class=&quot;active&quot;&gt;&lt;a href=&quot;#&quot;&gt;All&lt;/a&gt;&lt;/dd&gt;&lt;dd&gt;&lt;a href=&quot;#&quot;&gt;Active&lt;/a&gt;&lt;/dd&gt;&lt;dd&gt;&lt;a href=&quot;#&quot;&gt;Pending&lt;/a&gt;&lt;/dd&gt;&lt;dd&gt;&lt;a href=&quot;#&quot;&gt;Suspended&lt;/a&gt;&lt;/dd&gt;&lt;/dl&gt;

→ Sub Nav

トップバー

&lt;nav class=&quot;top-bar&quot;&gt;    &lt;ul class=&quot;title-area&quot;&gt;      &lt;!-- タイトルエリア --&gt;      &lt;li class=&quot;name&quot;&gt;        &lt;h1&gt;&lt;a href=&quot;#&quot;&gt;Top Bar Title &lt;/a&gt;&lt;/h1&gt;      &lt;/li&gt;      &lt;!-- &quot;menu-icon&quot;を外すとアイコンが消える。&quot;Menu&quot;を消すとアイコンだけになる。 --&gt;      &lt;li class=&quot;toggle-topbar menu-icon&quot;&gt;&lt;a href=&quot;#&quot;&gt;&lt;span&gt;Menu&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;    &lt;/ul&gt;      &lt;section class=&quot;top-bar-section&quot;&gt;      &lt;!-- 左寄せナビゲーション --&gt;      &lt;ul class=&quot;left&quot;&gt;        &lt;li class=&quot;divider&quot;&gt;&lt;/li&gt;        &lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;#&quot;&gt;Main Item 1&lt;/a&gt;&lt;/li&gt;        &lt;li class=&quot;divider&quot;&gt;&lt;/li&gt;        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Main Item 2&lt;/a&gt;&lt;/li&gt;        &lt;li class=&quot;divider&quot;&gt;&lt;/li&gt;        &lt;li class=&quot;has-dropdown&quot;&gt;&lt;a href=&quot;#&quot;&gt;Main Item 3&lt;/a&gt;            &lt;ul class=&quot;dropdown&quot;&gt;            &lt;li class=&quot;has-dropdown&quot;&gt;&lt;a href=&quot;#&quot;&gt;Dropdown Level 1a&lt;/a&gt;                &lt;ul class=&quot;dropdown&quot;&gt;                &lt;li&gt;&lt;label&gt;Dropdown Level 2 Label&lt;/label&gt;&lt;/li&gt;                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Dropdown Level 2a&lt;/a&gt;&lt;/li&gt;                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Dropdown Level 2b&lt;/a&gt;&lt;/li&gt;                &lt;li class=&quot;has-dropdown&quot;&gt;&lt;a href=&quot;#&quot;&gt;Dropdown Level 2c&lt;/a&gt;                    &lt;ul class=&quot;dropdown&quot;&gt;                    &lt;li&gt;&lt;label&gt;Dropdown Level 3 Label&lt;/label&gt;&lt;/li&gt;                    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Dropdown Level 3a&lt;/a&gt;&lt;/li&gt;                    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Dropdown Level 3b&lt;/a&gt;&lt;/li&gt;                    &lt;li class=&quot;divider&quot;&gt;&lt;/li&gt;                    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Dropdown Level 3c&lt;/a&gt;&lt;/li&gt;                  &lt;/ul&gt;                &lt;/li&gt;                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Dropdown Level 2d&lt;/a&gt;&lt;/li&gt;                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Dropdown Level 2e&lt;/a&gt;&lt;/li&gt;                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Dropdown Level 2f&lt;/a&gt;&lt;/li&gt;              &lt;/ul&gt;            &lt;/li&gt;            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Dropdown Level 1b&lt;/a&gt;&lt;/li&gt;            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Dropdown Level 1c&lt;/a&gt;&lt;/li&gt;            &lt;li class=&quot;divider&quot;&gt;&lt;/li&gt;            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Dropdown Level 1d&lt;/a&gt;&lt;/li&gt;            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Dropdown Level 1e&lt;/a&gt;&lt;/li&gt;            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Dropdown Level 1f&lt;/a&gt;&lt;/li&gt;            &lt;li class=&quot;divider&quot;&gt;&lt;/li&gt;            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;See all &amp;rarr;&lt;/a&gt;&lt;/li&gt;          &lt;/ul&gt;        &lt;/li&gt;        &lt;li class=&quot;divider&quot;&gt;&lt;/li&gt;      &lt;/ul&gt;        &lt;!-- 右寄せナビゲーション --&gt;      &lt;ul class=&quot;right&quot;&gt;        &lt;li class=&quot;divider hide-for-small&quot;&gt;&lt;/li&gt;        &lt;li class=&quot;has-dropdown&quot;&gt;&lt;a href=&quot;#&quot;&gt;Main Item 4&lt;/a&gt;            &lt;ul class=&quot;dropdown&quot;&gt;            &lt;li&gt;&lt;label&gt;Dropdown Level 1 Label&lt;/label&gt;&lt;/li&gt;            &lt;li class=&quot;has-dropdown&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;&quot;&gt;Dropdown Level 1a&lt;/a&gt;                &lt;ul class=&quot;dropdown&quot;&gt;                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Dropdown Level 2a&lt;/a&gt;&lt;/li&gt;                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Dropdown Level 2b&lt;/a&gt;&lt;/li&gt;                &lt;li class=&quot;has-dropdown&quot;&gt;&lt;a href=&quot;#&quot;&gt;Dropdown Level 2c&lt;/a&gt;                    &lt;ul class=&quot;dropdown&quot;&gt;                    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Dropdown Level 3a&lt;/a&gt;&lt;/li&gt;                    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Dropdown Level 3b&lt;/a&gt;&lt;/li&gt;                    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Dropdown Level 3c&lt;/a&gt;&lt;/li&gt;                  &lt;/ul&gt;                &lt;/li&gt;                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Dropdown Level 2d&lt;/a&gt;&lt;/li&gt;                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Dropdown Level 2e&lt;/a&gt;&lt;/li&gt;                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Dropdown Level 2f&lt;/a&gt;&lt;/li&gt;              &lt;/ul&gt;            &lt;/li&gt;            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Dropdown Level 1b&lt;/a&gt;&lt;/li&gt;            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Dropdown Level 1c&lt;/a&gt;&lt;/li&gt;            &lt;li class=&quot;divider&quot;&gt;&lt;/li&gt;            &lt;li&gt;&lt;label&gt;Dropdown Level 1 Label&lt;/label&gt;&lt;/li&gt;            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Dropdown Level 1d&lt;/a&gt;&lt;/li&gt;            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Dropdown Level 1e&lt;/a&gt;&lt;/li&gt;            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Dropdown Level 1f&lt;/a&gt;&lt;/li&gt;            &lt;li class=&quot;divider&quot;&gt;&lt;/li&gt;            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;See all &amp;rarr;&lt;/a&gt;&lt;/li&gt;          &lt;/ul&gt;        &lt;/li&gt;        &lt;li class=&quot;divider&quot;&gt;&lt;/li&gt;        &lt;li class=&quot;has-form&quot;&gt;          &lt;form&gt;            &lt;div class=&quot;row collapse&quot;&gt;              &lt;div class=&quot;small-8 columns&quot;&gt;                &lt;input type=&quot;text&quot;&gt;              &lt;/div&gt;              &lt;div class=&quot;small-4 columns&quot;&gt;                &lt;a href=&quot;#&quot; class=&quot;alert button&quot;&gt;Search&lt;/a&gt;              &lt;/div&gt;            &lt;/div&gt;          &lt;/form&gt;        &lt;/li&gt;        &lt;li class=&quot;divider show-for-small&quot;&gt;&lt;/li&gt;        &lt;li class=&quot;has-form&quot;&gt;          &lt;a class=&quot;button&quot; href=&quot;#&quot;&gt;Button!&lt;/a&gt;        &lt;/li&gt;      &lt;/ul&gt;    &lt;/section&gt;  &lt;/nav&gt;

トップバーは標準でウィンドウ幅に合うようになっている。スクロール時に上部固定したい場合は div class=”fixed” グリッド幅に合わせたい場合は div class=”contain-to-grid” で囲む。併用可能。

ドロップダウンメニューの場合は .has-dropdown クラスを付けた li の中に ul.dropdown

li.divider で区切り線

ボタンを内側に含む（検索フォーム用かな）場合は .has-form

div class=”contain-to-grid sticky” で囲むことでパララックス効果を狙うデザインでよくある、上部固定のページ内リンクが作れる

→ Top Bar

パンくず

2パターンのマークアップに対応しているのは嬉しい。

&lt;ul class=&quot;breadcrumbs&quot;&gt;  	&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;  	&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Features&lt;/a&gt;&lt;/li&gt;  	&lt;li class=&quot;unavailable&quot;&gt;&lt;a href=&quot;#&quot;&gt;Gene Splicing&lt;/a&gt;&lt;/li&gt;  	&lt;li class=&quot;current&quot;&gt;&lt;a href=&quot;#&quot;&gt;Cloning&lt;/a&gt;&lt;/li&gt;  &lt;/ul&gt;  &lt;!-- こちらのマークアップも使える --&gt;  &lt;nav class=&quot;breadcrumbs&quot;&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;   &lt;a href=&quot;#&quot;&gt;Features&lt;/a&gt;   &lt;a class=&quot;unavailable&quot; href=&quot;#&quot;&gt;Gene Splicing&lt;/a&gt;   &lt;a class=&quot;current&quot; href=&quot;#&quot;&gt;Cloning&lt;/a&gt;  &lt;/nav&gt;

ボタン

単体の要素にクラス名を付けるだけなのでかんたん。ドキュメント参照

→ Buttons

フォーム

同上

→ Forms

見出し

&lt;h1&gt;h1. This is a very large header.&lt;/h1&gt;

普通の見出し。h1〜h6まで対応

&lt;h1 class=&quot;subheader&quot;&gt;h1.subheader&lt;/h1&gt;

副見出し、色が薄い。

&lt;h1&gt;h1. &lt;small&gt;Small segment header.&lt;/small&gt;&lt;/h1&gt;

見出しの中にサブキャッチがあるパターン。これがあるのはありがたい

印刷

印刷時のみ表示する要素には .print-only 印刷時に隠す要素には .hide-on-print

→ Typography

水平リスト

&lt;ul class=&quot;inline-list&quot;&gt;    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Link 1&lt;/a&gt;&lt;/li&gt;    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Link 2&lt;/a&gt;&lt;/li&gt;    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Link 3&lt;/a&gt;&lt;/li&gt;    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Link 4&lt;/a&gt;&lt;/li&gt;    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Link 5&lt;/a&gt;&lt;/li&gt;  &lt;/ul&gt;

→ Inline Lists

アラート表示

div.alert-box : 通常のアラート
div.alert-box.success : 成功時
div.alert-box.alert : 警告
div.alert-box.secondary : 弱め

→ Alert Boxes

パネル

枠で囲って目立たせたい要素に。

&lt;div class=&quot;panel&quot;&gt;    &lt;!-- Content here --&gt;  &lt;/div&gt;

.callout クラスを追加するとより目立つ

.radius クラスを追加すると角丸に

→ Panels

サムネイル

.th クラスをimg要素を囲むa要素に付けるだけ。.radius を追加すると角丸に

&lt;a class=&quot;th radius&quot; href=&quot;../img/demos/demo2.png&quot;&gt;  &lt;img src=&quot;../img/demos/demo2-th.png&quot;&gt;  &lt;/a&gt;

→ Thumbnails

ビデオ

YouTube等のiframe埋め込みをレスポンシブ対応するのもすぐ。

&lt;div class=&quot;flex-video&quot;&gt;    &lt;iframe width=&quot;420&quot; height=&quot;315&quot; src=&quot;http://www.youtube.com/embed/0_EW8aNgKlA&quot; frameborder=&quot;0&quot; allowfullscreen&gt;&lt;/iframe&gt;  &lt;/div&gt;

.widescreen クラスを追加すると、動画のワイドスクリーン比率に対応。
Vimeoはちょっと特殊なので .vimeo クラスを追加する。

→ Flex Video

Javascriptプラグイン

ウェブサイト制作でありがちなものは揃っている印象です。しかも全てレスポンシブ対応。

Clearing（ライトボックス）
Dropdown（ドロップダウンメニュー）
Joyride（吹き出し）
Magellan（ウィンドウ上部固定）
Orbit（スライドショー）
Reveal（ブラウザ内ポップアップウィンドウ、モーダル表示）
Sections（タブ切り替え）
Tooltips（吹き出し、ツールチップ表示）

Blog