2年 ago
4570 Views

CSSフレームワーク「Bootstrap」と「Foundation」比較

foundation.zurb.com_

Web制作を効率的にスピードアップしてくれる便利な「フレームワーク」を一度は耳にしてことありますよね。フレームワークとは、グリッドレイアウト、タブ、ナビゲーションバー、パンくずリスト、ドロップダウンメニューなどのコンポーネントを標準で提供してくれる制作のベースや骨組みになるテンプレートみたいなもんです。レスポンシブデザインに対応。単一のソースで、デバイスの種類/画面サイズに応じた最適な表示が可能なので楽ちん。その有名なフロントエンドフレームワーク「Bootstrap」と「Foundation」を比較してみました。

Bootstrap

getbootstrap.com_

  • クリエイター:Twitter
  • 対応ブラウザー:Chrome (Mac, Windows, iOS, Android), Safari (Mac and iOS only) ,Firefox (Mac, Windows) , Opera (Mac and Windows) , IE8+(Respond.js が必要)
  • リセット:normalize.css
  • グリッド:可変12カラム(480px, 768px, 992px, 1200px)
  • コア:レスポンシブデザイン、モバイル対応だけど、デスクトップファースト
  • サイズ:145 KB
  • プロセッサー:Less and Sass
  • アイコンセット:Glyphicons Halflings set
  • 記号:pix
  • ユニークコンポネント:Jumbotron
  • カラーピッカーがない(でも、bootstrapテーマbootswatchなんてのも出てる)有名なので詳細なども検索で出てきやすいけど、皆が使いすぎてbootstrapデザインがばれやすい。カスタマイズしにくいと言う意見もあり…

bootswatch.com_

Foundation

foundation.zurb.com_

  • クリエイター:ZURB
  • 対応ブラウザー:Chrome, Firefox, Safari, IE9+; iOS, Android, Windows Phone 7+
  • リセット:normalize.css
  • グリッド:可変グリッド1~16カラム(デフォルト12)デフォルト大きさ最大62.5em
  • コア:レスポンシブデザイン、モバイルファースト、セマンティック
  • サイズ:326 KB
  • プロセッサー:Sass
  • アイコンセット:Foundation Icon Fonts
  • 記号:em
  • ユニークコンポネント:Icon Bar, Clearing Lightbox, Flex Video, Keystrokes, Joyride, Pricing Tables
  • bootstrapに比べるとマイナーなので情報が出てきにくいですが、スマホ優先で作る時はこっちの方が強い模様。すぐれている分容量がでかいかな。パターンも多く初心者にも使いやすそうです。

海外のサイトでBootstrap vs Foundation的なのをよく見かけます。。。bootstrapで飽きた人たちがfoundationにでも移っていってるのでしょうか?w
foundationを見かける率が高くなってきてますので、日本語での説明を増えてくるかな?っと期待大ですね。

Article Tags:
Article Categories:
html&CSS · フレームワーク
12345 (No Ratings Yet)
Loading...

Leave a Comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Menu Title
ツールバーへスキップ