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

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

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


スライダーやタブメニューなど様々なウィジェットが提供されています。


タブレット版。


スマートフォン向け。


横向き表示もサポート。


サイドメニューを使った表示。


幅が狭くなるとメニューは縦に並びます。


ボタン、タイポグラフィ。


フォーム。


アラートやナビゲーション。


テーブル。ソーシャルアイコンも多数用意されています。


サイズも様々。使い分けが可能です。


たくさんのアイコンも用意されています。


モーダルウィンドウ。


幅が狭い場合のボタン。


タブの端がちょっと気になるかも…。


スマートフォンの幅でもモーダルが使えます。

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

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


MOONGIFTはこう見る

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

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

GroundworkCSS ♥ A Responsive HTML5, CSS & Javascript Framework

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2