シンプルなデザインが嬉しい、IE7もサポートしたレスポンシブデザイン用のHTML5フレームワーク -Wirefy

HTML, CSSだけでなく、jQueryやmodernizrなどJavaScriptやrobots.txtなど、ウェブサイトを構築する際の基本セットが揃ったレスポンシブデザイン用のフレームワークを紹介します。

Wirefy

[ad#ad-2]

• Wirefyの対応ブラウザとデバイス
• Wirefyのデモ

Wirefyの対応ブラウザとデバイス

WirefyはIE7をはじめ、すべてのモダンブラウザ、スマートフォンデバイス、タッチデバイスをサポートしています。

• Latest Chrome (Mac/PC)
• Firefox 4.0, 3.6, 3.5, 3.0 (Mac/PC)
• Latest Safari
• IE9, IE8, IE7
• iPhone (Retina)
• Droid (Charge/Original)
• iPad

あらかじめセットされているMedia Queriesのブレイクポイントは6つです。

• 320px
• 640px
• 720px
• 888px
• 984px
• 1200px

[ad#ad-2]

Wirefyのデモ

Wirefyにはレイアウトのベースとなるグリッドから、さまざまなUIエレメントが用意されています。

Grid
グリッドは960 grid systemをベースにしたもので、コードは非常にシンプルです。

MenuとBreadcrumb
メニューは2種類でリスト要素で実装するシンプルなものです。
パンくずはサイトのどの階層にいるか明示します。

PaginationとPager
複数のページに移動する際のページネーションとページャーです。

Images
画像は特にスタイルを設けていません、サイズはもちろん変更して配置できます。

Typography
見出しは階層が明確に伝わるように設計しています。サイズの指定はremです。
remの詳しい使い方は、下記ページをご覧ください。

• フォントのサイズ指定はpx？ em？ 既存の再検討とこれからのテクニック

Icon Fonts
アイコンフォントはFont Awesomeを使用しています。

ButtonsとTabs
ボタンはシンプルながら適度な質感ももたせています。タブはjQueryを使用した非常にシンプルなものです。

Tables
テーブルは各データが見やすいようデザインしています。

Forms
フォームは検索用フォームをはじめ、よく使用するものを用意しています。