レスポンシブ対応で柔軟性に富んだグリッドを使いたいならこのフレームワーク -Extra Strength Responsive Grids
Post on:2013年2月5日
sponsors
デスクトップ・タブレット・スマートフォンなど、レスポンシブ対応で柔軟性に富んだ可変グリッドのレイアウトをつくるのに便利なフレームワークを紹介します。
各エレメントのツラや高さの異なるパネルも簡単に揃えることができます。
Extra Strength Responsive Grids
Extra Strength Responsive Grids -GitHub
Extra Strength Responsive Gridsの特徴
- %ベースの可変グリッド
- デスクトップ・タブレット・スマフォなどのレスポンシブ対応
- 各エレメントのツラ揃えも簡単
- グリッドのネストにも対応
- 使いやすいclass名
- Sass対応
- 不揃いの高さも揃えます
Extra Strength Responsive Gridsのデモ
デモは上部から、表示サイズを変更して紹介します。
まずはレイアウトのベースとなるグリッドで、デスクトップで3, 4カラムのものが表示サイズにより最適なサイズに変更されます。
サイドバーに垂直に配置されたエレメントは、サイズが小さくなると水平配置になります。
デモ：レイアウトとサイドバー：1200pxで表示
デモ：レイアウト：左780px、右480pxで表示
デモ：サイドバー：左780px、右480pxで表示
12カラムに区切られたグリッドで設計されており、12は2, 3, 4, 6で割り切れる数字なので汎用性があります。
デモ：グリッドの設計：1200pxで表示
paddingを使った揃えとネストのデモです。
デモ：揃えとネスト：1200pxで表示
デモ：揃えとネスト：左780px、右480pxで表示
最後は高さが異なるパネルの高さを揃えます。
上が不揃い、下が揃えです。
デモ：高さを揃える：1200pxで表示
デモ：高さを揃える：左780px、右480pxで表示
sponsors
