グリッドからナビゲーション、スライダー、フォームなど、レスポンシブ対応のさまざまなコンポーネントが利用できるフレームワーク -Responsive Framework
Post on:2014年12月12日
ページのグリッドをはじめ、ナビゲーション、スライダー、タブ、アコーディオン、フォーム、ショッピングカートなど、レスポンシブ対応のさまざまなコンポーネントが利用できるフレームワークを紹介します。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201404/2014121201.png)
Free Responsive Framework
Free Responsive Framework -GitHub
Free Responsive FrameworkはMITライセンスで、個人でも商用でも無料で利用できます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201404/2014121204.png)
コンポーネントのコードは非常にシンプルでW3C標準に基づいて作成されており、アニメーションはJavaScriptではなくCSS3で実装されています。
各コンポーネントを組み合わせると、今風のWebページも簡単に作成できます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201404/2014121202.png)
ヘッダは、レスポンシブ対応のコンテンツスライダー。
スクロールすると、さまざまなコンポーネントが使用されています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201404/2014121203.png)
UX デモページのスクロールしたキャプチャ
現在のところ12種類のコンポーネントが用意されています。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201404/2014121205-01.png)
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201404/2014121205-02.png)
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201404/2014121205-03.gif)
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201404/2014121205-04.png)
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201404/2014121205-05.png)
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201404/2014121205-06.png)
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201404/2014121205-07.png)
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201404/2014121205-08.png)
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201404/2014121205-09.png)
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201404/2014121205-10.png)
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201404/2014121205-11.png)
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201404/2014121205-12.png)
sponsors