• かちびと.net

    240pxから最大2560pxの画面サイズまで対応出来るレスポンシブWebデザイン構築用のグリッドシステム・Golden Grid Systemのご紹介。幅に応じてグリッドが可変しますので常にグリッドレイアウトで組むことが出来ます。

    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

240pxから最大2560pxの画面サイズまで対応出来るレスポンシブWebデザイン構築用のグリッドシステム・Golden Grid System

スポンサーリンク

iPhoneなどのモバイルや、超ワイドなモニターサイズ
までサポートしているレスポンシブWebデザイン構築用
のフレームワーク・Golden Grid Systemなるものが
登場した模様です。最大で2560pxまで対応できる
らしいですよ。テレビでネットを見れるようにもなって
いるのでそういった事情からですかね・・どんどん
進化していきますねー。

様々なデバイスでグリッドレイアウトに対応できるレスポンシブWebデザイン構築用のグリッドシステムです。240pxという狭い幅から2560px(27インチですかね?)のワイドモニターでもグリッドレイアウトを構築できます。ライセンスはMIT。

Golden Grid System


名前は同じですが、the-golden-gridとは別物です。Less Frameworkをベースとして、HTML5でマークアップされています。幅広いデバイスにグリッドレイアウトを対応させるために、16カラムをベースに、一定の幅になったら8カラム、4カラムと変化させています。

カラムが変化する様子を撮りましたので宜しければご覧ください。
※表示されない場合はお手数ですがリロードをお試しください。


このように幅に応じてカラム数が変化しますので、常にグリッドレイアウトを意識したWebデザインを設計できる、というもの。


ベースライングリッドにも揃えてくれる。

wrapperにはbox-sizingが使用されています。

.wrapper {
  padding: 0 0.75em;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}

本当はもっとしっかりと構成されているフレームワークなんですが、上手く説明できるほど知識も豊富ではないので実際にご覧いただいたほうが早いかもしれません。というわけで以下よりご覧くださいませ。

Golden Grid Systemはgithubでも公開されています。使いこなせれば便利そうですね。

Golden Grid System / github

URL :
TRB :

Comments & Trackbacks (1)

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services