search
LoginSignup
92

More than 5 years have passed since last update.

posted at

updated at

Organization

bootstrapよりかっこいい? Foundationを導入する

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のような重量級のフレームワークとは一味違う、軽量フレームワークについて紹介したいと思います。

参考

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
92