シンプルなデザインが嬉しい、IE7もサポートしたレスポンシブデザイン用のHTML5フレームワーク -Wirefy
Post on:2012年7月17日
sponsors
HTML, CSSだけでなく、jQueryやmodernizrなどJavaScriptやrobots.txtなど、ウェブサイトを構築する際の基本セットが揃ったレスポンシブデザイン用のフレームワークを紹介します。
[ad#ad-2]
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の詳しい使い方は、下記ページをご覧ください。
Icon Fonts
アイコンフォントはFont Awesomeを使用しています。
ButtonsとTabs
ボタンはシンプルながら適度な質感ももたせています。タブはjQueryを使用した非常にシンプルなものです。
Tables
テーブルは各データが見やすいようデザインしています。
Forms
フォームは検索用フォームをはじめ、よく使用するものを用意しています。
sponsors
