ブラウザのサイズに合わせてグリッドも変更する -Fluid Grid system

可変グリッドシステム用のスタイルシートのフレームワーク「Fluid Grid system」を紹介します。

サイトのキャプチャ

Fluid Grid system
※グリッド表示は右上の「SHOW GRID」をクリック

上記ページではブラウザのサイズを小さくすると、それに合わせてグリッドも小さく変更されます。

サイトのキャプチャ

ブラウザのサイズを小さくしたキャプチャ

「Fluid Grid system」は成果物としてのレイアウトと同様、プロトタイプでも素早く使えるように設計されたものです。
デザイナーは素早くレイアウトがデザインでき、しっかりと設計された水平や垂直のリズムをもつ複雑なページの変更をすることもできます。

ダウンロードできるデモファイルには、6カラムと9カラムのレイアウトが用意されています。

デモファイルのキャプチャ

デモファイル:6カラム

デモファイルのキャプチャ

デモファイル:9カラム

このフレームワークのライセンスはオープンソースで、GPLMITの元でリリースされています。

sponsors

top of page

©2018 coliss