GroundworkCSSは多様なガジェットがサポートされたレスポンシブWebデザインのフレームワークです。

レスポンシブWebデザインがもてはやされていますが、テクニックはなかなか一般化しづらいものがあります。そこでフレームワークをベースにしてみるのはいかがでしょう。今回紹介するのはGroundworkCSSです。

[](http://images.moongift.jp/2013/02/Screenshot 2013-02-25 11.10.58.1361932969.png)
スライダーやタブメニューなど様々なウィジェットが提供されています。

[](http://images.moongift.jp/2013/02/Screenshot 2013-02-25 11.11.02.1361932973.png)
タブレット版。

[](http://images.moongift.jp/2013/02/Screenshot 2013-02-25 11.11.06.1361932977.png)
スマートフォン向け。

[](http://images.moongift.jp/2013/02/Screenshot 2013-02-25 11.11.11.1361932982.png)
横向き表示もサポート。

[](http://images.moongift.jp/2013/02/Screenshot 2013-02-25 11.11.19.1361932989.png)
サイドメニューを使った表示。

[](http://images.moongift.jp/2013/02/Screenshot 2013-02-25 11.11.36.1361932993.png)
幅が狭くなるとメニューは縦に並びます。

[](http://images.moongift.jp/2013/02/Screenshot 2013-02-25 11.11.44.1361932996.png)
ボタン、タイポグラフィ。

[](http://images.moongift.jp/2013/02/Screenshot 2013-02-25 11.11.49.1361933001.png)
フォーム。

[](http://images.moongift.jp/2013/02/Screenshot 2013-02-25 11.11.54.1361933004.png)
アラートやナビゲーション。

[](http://images.moongift.jp/2013/02/Screenshot 2013-02-25 11.11.58.1361933008.png)
テーブル。ソーシャルアイコンも多数用意されています。

[](http://images.moongift.jp/2013/02/Screenshot 2013-02-25 11.12.05.1361933011.png)
サイズも様々。使い分けが可能です。

[](http://images.moongift.jp/2013/02/Screenshot 2013-02-25 11.12.10.1361933016.png)
たくさんのアイコンも用意されています。

[](http://images.moongift.jp/2013/02/Screenshot 2013-02-25 11.12.24.1361933020.png)
モーダルウィンドウ。

[](http://images.moongift.jp/2013/02/Screenshot 2013-02-25 11.12.42.1361933024.png)
幅が狭い場合のボタン。

[](http://images.moongift.jp/2013/02/Screenshot 2013-02-25 11.12.49.1361933027.png)
タブの端がちょっと気になるかも…。

[](http://images.moongift.jp/2013/02/Screenshot 2013-02-25 11.13.00.1361933031.png)
スマートフォンの幅でもモーダルが使えます。

多彩なコンポーネントに加えて、タブレットやスマートフォンと言ったデバイスはもちろんのこと、IEやFirefox、Operaなどでも利用できます。Sassで作られているので自分でカスタマイズする際にも構造の理解が進みやすいのではないでしょうか。

GroundworkCSSはCSS3製、MIT Licenseのオープンソース・ソフトウェアです。

MOONGIFTはこう見る

レスポンシブWebデザインは高度なテクニックが必要な一方、ページ単位で請求を行う場合は3ページ（PC/タブレット/スマートフォン）が1ページ分の値段になってしまって損というイメージまであります。クライアント向けに提供する場合は慎重に行う方が良いでしょう。

やるならば自社向けに行うのが良いかと思います。多様化するデバイスのデザインが統一できれば、メンテナンスコストは大幅に軽減されます。ただしデザインの自由度は下がるというトレードオフを抑えておく必要があります。

GroundworkCSS ♥ A Responsive HTML5, CSS & Javascript Framework