あなたのデザインの自由度を邪魔しない、軽量なグリッドデザインフレームワーク「PocketGrid」
PocketGridは0.5KBの小さなCSSフレームワークです。レスポンシブWebデザインのベースにどうぞ。
Bootstrapをはじめ多様なデザインフレームワークが出回っていますが、デザインの可能範囲が狭まってしまうのを嫌がる声もあります。そこでほんの基礎部分だけを提供してくれるグリッドデザインテンプレート、PocketGridを使ってみましょう。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-27 11.00.56.1364359203.png)
サンプルです。左が30%、右が70%のコンテンツです。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-27 11.01.02.1364359207.png)
幅を狭めても比率を維持しています。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-27 11.01.13.1364359209.png)
よくある三層のWeb構造です。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-27 11.01.18.1364359212.png)
このように組み変わります。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-27 11.01.33.1364359215.png)
比率を維持させることもできます。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-27 11.02.21.1364359217.png)
より複雑な表示です。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-27 11.02.26.1364359220.png)
レスポンシブに並びが変わっています。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-27 11.02.43.1364359223.png)
維持させることもできます。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-27 11.03.02.1364359226.png)
元がこれで…
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-27 11.03.08.1364359228.png)
隙間をなくす設定も可能です。
PocketGridはピュアなCSSだけで作られています。レスポンシブだけでなくセマンティックにも対応しています。メディアクエリーは自由に設定が可能です。SEOを考慮したコンテンツファーストにも対応しています。サイズも0.5KB程度と軽量なのが特徴です。
PocketGridはスタイルシート製、MIT Licenseのオープンソース・ソフトウェアです。
MOONGIFTはこう見る
Bootstrapなどは便利なフレームワークなのですが、その作法の中ですべてを行うようにしないといけないのが欠点です。殆どのことはできるのですが、後一歩手が届かない場合に非常に苦労したりストレスを感じるでしょう。
だからこそ自社や個人が自分の責任範囲においてコントロールできる場合にはお薦めなのですが、クライアント向けなど要望に応えなければならない形での採用はお薦めしません。そういった時にはPocketGridのような影響の小さいフレームワークを採用すべきでしょう。