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

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

サイトのキャプチャ

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

Wirefyのデモ

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

デモのキャプチャ

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

デモのキャプチャ

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

デモのキャプチャ

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

デモのキャプチャ

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

デモのキャプチャ

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

デモのキャプチャ

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

デモのキャプチャ

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

デモのキャプチャ

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

デモのキャプチャ

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

top of page

©2017 coliss