レスポンシブなWebサイトを作る際にBootstrapやZurb Foundationといったフレームワークを使うことはままあります。それはなぜかと言えば便利な機能と整ったデザインが提供されるからなのですが、逆にデザイン上の縛りが出てしまうのが難点です。 そこで使ってみたいのがflexible.gsです。レスポンシブWebデザインの中でも肝になるであろう、メディアクエリーとグリッドについてのみ提供するスタイルシートフレームワークです。

flexible.gsの使い方

flexible.gsのパターンは次のように分かれています。

xl(デスクトップ)、lg(横向きのタブレット)、md(縦向きのタブレット)、sm(横向きのスマートフォン)、xs(縦向きのスマートフォン)といった組み合わせでデザインを指定するようになっています。

グリッドのデモとしては次のようになりまうs。

スマートフォンの場合は適用されるクラスが変わります。

スマートフォンの横向きの場合は次のようになります。

そして縦型。

リッチなフレームワークを使うと機能が多いので便利な反面、融通がきかないことが多々あります。flexible.gsは最低限の機能しかありませんので、Webデザイナーの方にとっては面倒な設定はflexible.gsで、自由にカスタマイズして使えるという点において便利ではないでしょうか。

flexible.gsはスタイルシート製、MIT Licenseのオープンソース・ソフトウェアです。

flexible.gs - Flexible Grid System flexiblegs/flexiblegs