この記事は、10年前に書かれました。
はじめに
レスポンシブ対応の短納期案件に対応するため、前から気になっていたCSSフレームワークのFoundationを使ってみました。
FoundationはZURB社によって開発されたCSSフレームワークで、Bootstrapと似たようなフレームワークとなります。
どちらを使用するか迷いましたが、今回は学習コストが低そうなFoundationを使用することにしました。
ダウンロード
Foundationのサイトからダウンロードします。
http://foundation.zurb.com/
ダウンロード時点（2014年）ではバージョン5.2.0が最新となっています。
インストール方法
今回はSASSは使用しません。
HTMLに直接読み込む方法にて実装します。
<head>でfoundation.cssを読み込みます。
<link rel="stylesheet" href="css/foundation.css" /></body>閉じタグの直前にてJavascriptを読み込ませます。
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/foundation/foundation.equalizer.js"></script>
<script src="js/foundation/foundation.topbar.js"></script>jQueryを使用して以下のようにfoudationを使用可能な状態にします。
<script>
$(document).foundation();
</script>使い方
基本的に、用意されたているClassを指定していく方法となります。
例えば、ブロックを横並び３分割のレイアウトにしたい場合は以下ようにします。
<section class="row">
<div class="large-4 medium-4 small-12 columns"></div>
<div class="large-4 medium-4 small-12 columns"></div>
<div class="large-4 medium-4 small-12 columns"></div>
</section>12分割されたグリッドの何列分を使用するかという形で指定していきます。Bootstrapと考え方は同じようです。
上記の場合ですとlarge-4はデスクトップおよびタブレットで閲覧時には4列分、スマートフォンの場合は12列分のグリッドを占有する形となります。
そのため、スマートフォンの場合３つのDIVブロックは縦一列に並ぶことになります。
ブロックの入れ子も可能です。
ブロックレイアウト以外にも、あらかじめ用意されたタブやボタンなどのスタイルもあります。管理画面のフロント設計の手間を掛けたくない場合には非常に有用なフレームワークだと思います。
感想
この手のフレームワークはある程度の学習コストがかかります。ゼロベースでCSSを作成したほうが早いような気もしますが、フレームワークにあらかじめ用意されているボタンやタブスタイルなど、そのまま使用しても問題ない案件の場合は導入してみるのもよいのではないでしょうか。管理画面作成には最適かもしれません。
ただ、class指定を多数羅列していく組み方となるため、コードがあまり美しくありません。これはBootstrapにも言えることです。その場合はSASSと組み合わせて使用する必要があるでしょう。
今回、実際の案件にて使用したのですが、グリッドレイアウト部分のみにfoundationを使用しました。その他のスタイルについてはゼロベースで作成しました。そのような使い方もありかと思います。