レスポンシブなWebサイトを作る際にBootstrapやZurb Foundationといったフレームワークを使うことはままあります。それはなぜかと言えば便利な機能と整ったデザインが提供されるからなのですが、逆にデザイン上の縛りが出てしまうのが難点です。 そこで使ってみたいのがflexible.gsです。レスポンシブWebデザインの中でも肝になるであろう、メディアクエリーとグリッドについてのみ提供するスタイルシートフレームワークです。 flexible.gsの使い方 flexible.gsのパターンは次のように分かれています。 xl(デスクトップ)、lg(横向きのタブレット)、md(縦向きのタブレット)、sm(横向きのスマートフォン)、xs(縦向きのスマートフォン)といった組み合わせでデザインを指定するようになっています。 グリッドのデモとしては次のようになりまうs。 スマートフォンの場合