• かちびと.net

    著作権放棄・シンプル・軽量で、iPhoneなどにもレイアウトを調整できるレスポンシブWebデザイン対応のHTML5フレームワーク・Fluid Baseline Gridのご紹介。なんとも太っ腹なソフトウェアがあったのでシェア。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

著作権放棄・シンプル・軽量で、iPhoneなどにもレイアウトを調整できるレスポンシブWebデザイン対応のHTML5フレームワーク・Fluid Baseline Grid

スポンサーリンク

なかなか凄いフレームワークがあったので
反射的にメモ。パブリックドメインという
のが何より太っ腹ですねー。自由に使用で
きて、シンプルで汎用的、しかも軽量で
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

URL :
TRB :

Ads

Posts

Contact

Services