• かちびと.net

    レスポンシブWebデザイン対応のグリッドレイアウト向けコンタクトフォームを構築する為のCSSフレームワーク・Grid Formsのご紹介です。

    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

レスポンシブWebデザイン対応のグリッドレイアウト向けコンタクトフォームを構築する為のCSSフレームワーク・Grid Forms

スポンサーリンク

RWD対応のグリッドレイアト向けフォームを作る為のCSSフレームワークのご紹介です。表題のとおり用途はある程度限定されますが、覚えておいて損は無さそうです。

フレームワークと言っていいかどうか分かりませんが本サイトにそう書いてありました。フォームの為のCSSフレームワークです。RWDへの対応はRespond.jsを併用することで実現しています。

Grid Forms

動作デモが用意されていましたので以下でご覧下さい。デモでは全画面に実装、RWD対応にもなったモバイルファーストなフォームになっています。

Sample

<div data-row-span="2">
	<div data-field-span="1">
		<label>Flat no. and bldg. name</label>
		<input type="text">
	</div>
	<div data-field-span="1">
		<label>Road no./name</label>
		<input type="text">
	</div>
</div>
<div data-row-span="4">
	<div data-field-span="3">
		<label>Area and landmark</label>
		<input type="text">
	</div>
	<div data-field-span="1">
		<label>City</label>
		<input type="text">
	</div>
</div>

グリッドはカスタムデータ属性を利用します。

尚、JSはjQueryでフォーカス時にclassを付与させるために使っているみたいです。

このままだとどこが入力スペースなのかちょっと分かりにくい気もするので見た目は少し工夫が必要かもしれませんが、項目の多いフォームをスマフォでもストレス無く入力出来る様に努力するのはとても素敵な事ですね。今後の開発にも期待です。ライセンスはMITとの事。

Grid Forms

URL :
TRB :

Comments & Trackbacks

Comments are closed.

Twitter

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

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

twitter facebook rss contact

Ads

Posts

Contact

Services