Responsive Web Design用のグリッドをさくっと作成できるオンラインサービス -Gridpak

スマートフォンをはじめ、タブレット、デスクトップなど、さまざまなデバイス用に最適なウェブデザインを提供するResponsive Web Design用のグリッドを作成し、実装に利用できるスタイルシートや確認用の画像などを生成するオンラインサービスを紹介します。

Gridpak - The Responsive grid generator

Gridpakの使い方は簡単です。
グリッド生成ツールによくある、グリッド全体のサイズ、カラム数、カラムのパディング、溝のサイズを設定すると、すぐに反映されます。

全体サイズ960pxで設定

ここからが他のオンラインサービスと異なります。
グリッドの右側の矢印をドラッグで操作し、全体のサイズを変更することできます。

全体サイズを480pxに変更
カラムのサイズも縮みます。

カラムを保持するためのブレークポイントを設定することもできます。
全体サイズを変更したら、右側の「Add beak point」ボタンをクリックします。

ブレークポイントを設定
下のバーにブレークポイントが設定されます。

ブレークポイントを設定し、サイズを変更してみます。

全体サイズを300pxに変更
ブレークポイントを設定すると、カラムのサイズは維持されます。

グリッドの設定が完了し「Download your Gridpak」ボタンをクリックをすると、実装用・確認用のファイルが生成されます。

生成されたファイル群

設定したグリッドは「gridpak.css」でページを作成することができます。LESS, SCSS用のファイルも用意されます。

グリッドを確認する画像も用意されており、スクリプトは「G」キーを押すとグリッドを描画します。