なかなか凄いフレームワークがあったので
反射的にメモ。パブリックドメインという
のが何より太っ腹ですねー。自由に使用で
きて、シンプルで汎用的、しかも軽量で
iPhoneやiPadにもレイアウトを自動調整
するレスポンシブWebデザイン対応のHTML5
フレームワークです。

これ、凄く良い感じです。いいもの全部詰め込んだ、みたいなソフトウェアですね・・・ちゃんと使いこなせるようになりたいかも。

Fluid Baseline Grid


Media Queriesを使ったレスポンシブWebデザイン対応のCSSフレームワークです。3カラム構成で組めるようにもしてあります。マークアップはHTML5+CSS3ですが、jsを使ってIEにも対応してくれています。

以下にざっと特徴を。

  • 著作権放棄(パブリックドメイン)
  • 軽量(CSSは9kb)
  • ベースライングリッドに揃済み
  • グリッドレイアウト対応
  • iPhoneやiPadなどにも自動でレイアウトを調整
  • HTML5+CSS3
  • (一応)クロスブラウザ対応　※IE6と7はcssを追加する必要ありそうですが表示自体は問題ないです
  • robots.txt付き

見た感じ、IE6と7も普通になんとかなりそうです。

レスポンシブWebデザイン

様々なモニターサイズでもレイアウトが崩れません。


ブレークポイントは以下のサイズです。

  • 320px
  • 480px
  • 600px
  • 768px
  • 591px
  • 1280px

構造

  • Media Queriesを加えた、正規化CSS
  • GoogleCDNのjQueryを使用
  • GoogleCDNのhtml5.jsを使用
  • Respond.jsでIEにもMedia Queriesを効かせる※このjsだけMIT/GPLです

CSSの正規化

リセットは、クロスブラウザの整合性を修正したり、デフォルトの設定が保持されない、という理由であえてしていないようです。

Fluidレイアウト


Fluid Baseline Gridは3カラムのレイアウトを組めるようになっていますが、マークアップは変えることなく、違う環境でも時系列を崩しません。

まだ少し触っただけですけど良い感じです。自分用に変えて色々使いまわしたいですね。なによりパブリックドメインであることに感謝です。ご利用は以下よりどうぞ。

Fluid Baseline Grid