CSS Advent Calendar 2014 三日目です。偉大な@izumin5210先輩の後に書く事になってしまいとても緊張しています。
bootstrapは良いものです。デザイナーじゃなくてもそれっぽいデザインができるし、日本語の情報も豊富だし、公式ドキュメントもとてもわかりやすい。
ただ、あまりにもたくさんの人が使うので、bootstrapを使うだけでは「またbootstrapか…」と思われるようになってしまいました。
もちろん、bootstrapだって考えて使えば良いデザインは出来ますが、当然その分手間はかかります。
ということで、bootstrapよりも手間をかけずに、bootstrapよりもかっこいいサイトが作れるCSSフレームワークであるFoundationを紹介したいと思います。
特徴
良い所
適当に作ってもbootstrapっぽいデザインにならない(当たり前ですが)
公式ドキュメントがわかりやすい
railsと組み合わせて使いやすい(後述)
悪いところ
bootstrapと同様かなり大きい
日本語の資料はbootstrapより少なめ
導入
See Foundation Docs
ぶっちゃけこれで十分なんですが、それではあまりに手抜きなので軽く解説します。
静的サイト
公式サイトにzipがあるのでダウンロードして適当に配置します。
または、以下のようにCDNを使うことも可能。
<link rel="stylesheet" href="http://cdn.foundation5.zurb.com/foundation.css" />
<script src="http://cdn.foundation5.zurb.com/foundation.js"></script>
Ruby on Rails
foundation-railsというgemがあるのでそれを使います。
Gemfileに追加してインストールしたら、下記のコマンドで色々置き換えてくれます。
rails g foundation:install
foundation_and_overrides.scssに色の設定などの定義があるので、簡単なカスタマイズならそこから行えます。
使い方
bootstrapと同じく、公式ドキュメントが非常に読みやすいので一度読んでみることをおすすめします。
改めてbootstrapと比較
現状では細かい違いはあるものの、全体としての優劣はほぼない
レスポンシブにするならFoundationのほうがやりやすいイメージ
カスタマイズもFoundationのほうがやりやすい気がします
私がFoundation好きなのでFoundationの長所ばかり書いているが、bootstrapが劣っているというわけではない
結局好み
まとめ
身も蓋もないですが、結局好みだと思います(タイトルはFoundationの方がかっこいいって書いてますが、私の好みだからというだけです)。
明日はbootstrapやFoundationのような重量級のフレームワークとは一味違う、軽量フレームワークについて紹介したいと思います。