レスポンシブ対応の柔軟なグリッドを簡単に利用できる便利なフレームワークのまとめ
Post on:2014年3月18日
レスポンシブ対応の柔軟なグリッドが使えるだけのごくシンプルなものから、実用的なさまざまなユニットまで用意された高機能なものまで、便利なスタイルシートベースのフレームワークを紹介します。
まずは、シンプルなグリッドだけのものから。
![サイトのキャプチャ](/wp-content/uploads-201401/2014031803-09.png)
Aeon
LESS対応、1KBのコードでレスポンシブ対応の12カラムのグリッドをつくります。
![サイトのキャプチャ](/wp-content/uploads-201401/2014031803-08.png)
Ivory
320pxから1,200pxまでのスクリーンを想定したグリッドを提供するフレームワーク。
![サイトのキャプチャ](/wp-content/uploads-201401/2014031803-13.png)
Gridism
12, 16カラムではなく、縦のセクションに分割するという考え方のシンプルなフレームワーク。
![サイトのキャプチャ](/wp-content/uploads-201401/2014031803-04.png)
Kube
プロフェッショナルデベロッパ向けの超軽量フレームワーク、LESSにも対応。実用的なさまざまなユニットが用意されています。
![サイトのキャプチャ](/wp-content/uploads-201401/2014031803-01.png)
Susy
Sass, Compassでレスポンシブ対応の柔軟なグリッドをつくります。
![サイトのキャプチャ](/wp-content/uploads-201401/2014031803-02.png)
The Semantic Grid System
LESS, SCSS, Stylusでレスポンシブ対応のグリッドをつくります。
![サイトのキャプチャ](/wp-content/uploads-201401/2014031803-03.png)
Foundation -The Grid
CSSのフレームワーク「Foundation」の12カラムベースのレスポンシブ対応のグリッド。
![サイトのキャプチャ](/wp-content/uploads-201401/2014031803-05.png)
Bourbon Neat
SassのMixinライブラリ「Bourbon」のグリッド版。軽量でセマンティックです。
![サイトのキャプチャ](/wp-content/uploads-201401/2014031803-06.png)
Golden Grid System
IE6-8もサポートしているLESS, SCSSのレスポンシブ対応のグリッドをつくります。
![サイトのキャプチャ](/wp-content/uploads-201401/2014031803-07.png)
One% CSS Grid
緻密な計算でカラムや溝をパーセントで設計したレスポンシブ対応のグリッドをつくります。
![サイトのキャプチャ](/wp-content/uploads-201401/2014031803-10.png)
Gumby
12カラムをベースに使い勝手のよいさまざまなユニットが用意されています。
![サイトのキャプチャ](/wp-content/uploads-201401/2014031803-11.png)
Furatto
12カラムのグリッドをベースにしたフラットなスタイルのさまざまなエレメントが用意されたフレームワーク。
sponsors