ITエンジニア/デザイナ向けにオープンソースを毎日紹介

PocketGridは0.5KBの小さなCSSフレームワークです。レスポンシブWebデザインのベースにどうぞ。

Bootstrapをはじめ多様なデザインフレームワークが出回っていますが、デザインの可能範囲が狭まってしまうのを嫌がる声もあります。そこでほんの基礎部分だけを提供してくれるグリッドデザインテンプレート、PocketGridを使ってみましょう。


サンプルです。左が30%、右が70%のコンテンツです。


幅を狭めても比率を維持しています。


よくある三層のWeb構造です。


このように組み変わります。


比率を維持させることもできます。


より複雑な表示です。


レスポンシブに並びが変わっています。


維持させることもできます。


元がこれで…


隙間をなくす設定も可能です。

PocketGridはピュアなCSSだけで作られています。レスポンシブだけでなくセマンティックにも対応しています。メディアクエリーは自由に設定が可能です。SEOを考慮したコンテンツファーストにも対応しています。サイズも0.5KB程度と軽量なのが特徴です。

PocketGridはスタイルシート製、MIT Licenseのオープンソース・ソフトウェアです。


MOONGIFTはこう見る

Bootstrapなどは便利なフレームワークなのですが、その作法の中ですべてを行うようにしないといけないのが欠点です。殆どのことはできるのですが、後一歩手が届かない場合に非常に苦労したりストレスを感じるでしょう。

だからこそ自社や個人が自分の責任範囲においてコントロールできる場合にはお薦めなのですが、クライアント向けなど要望に応えなければならない形での採用はお薦めしません。そういった時にはPocketGridのような影響の小さいフレームワークを採用すべきでしょう。

arnaudleray/pocketgrid · GitHub

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2