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

fitgridは本番環境下でも耐えられる軽量なレスポンシブグリッドなスタイルシートです。

レスポンシブなWebデザインを実現するのは大変ですが、Bootstrapを使うとそれっぽさが残ってしまう…。そんなジレンマを感じている方はfitgridを試しましょう。fitgridは軽量なグリッドレイアウトを提供します。


デスクトップサイズでの表示。


1〜4列で細かく制御できます。


タブレットサイズ。幅が狭くなっても奇麗に表示されます。


画像もグリッドに沿っています。


幅を狭くすると画像の並びも変わります。


一番狭くした場合。整然と並んで表示されます。

fitgridは横幅を12に分割してグリッド化します。.fg3といったクラスを使えば4つ並べられる計算です。12を一つ、4を3つといった具合に組み合わせて利用できます。fitgridは軽量であり、本番環境下でも使えるように余計なことはしないように設計されているとのことです。

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


MOONGIFTはこう見る

Bootstrapは便利なフレームワークですが、それっぽさが残ってしまうので嫌がるケースもあります。より本格的なWebサービスを作る上でそう感じることが多いです。またデザイン上の自由度も下がる傾向があり、作法から外れると一気にデザインバランスを保つのが困難になったりします。

しかし同時にレスポンシブWebデザインを適切に行うのもまた難しい技術です。fitgridはまさにそのレスポンシブなグリッドデザインを行うノウハウをソフトウェアにしたと言えるでしょう。そのまま使っても良いですし、ソースを見ることで得られるテクニックもありそうです。

fitgrid

jayalai/fitgrd · GitHub

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2