進め方
Layout Gridはページの骨格、つまりカラム、ガター、外側のマージン、そしてそれらがビューポートサイズによってどう変わるかに焦点を当てます。可変カラムと、最大幅固定のコンテナやアダプティブレイアウトを区別するため、グリッド仕様でデスクトップのスクリーンショットだけでなく挙動も記述できます。
ソースはコンパクトなガイドであり、実装ライブラリではありません。一般的なカラム数やブレークポイントの例は出発点です。有用な成果物は、コンテンツに合わせて選んだグリッドと、フルブリード領域、コンテナ内の読み物セクション、サイドバー、繰り返されるカードについての明確な指示です。
想定される成果物
- カラム、ガター、マージン、コンテナ上限を示したブレークポイント表。
- コンテナ内、フルブリード、サイドバー、カード領域のレイアウトルール。
- 幅ごとの適応方法を説明する開発者向けメモ。
ブリーフからレビューまで
- 01グリッドの種類を選ぶ
すべてのページに同じグリッドが必要だと決めつけず、コンテンツに合わせてカラム、モジュラー、ベースライン、複合のいずれかの構造を選びます。
- 02幅に応じた挙動を指定する
カラムが伸びる範囲、コンテナの拡大が止まる位置、カラムやサイドバーが折りたたまれるタイミングを定義します。
- 03中間幅を確認する
最小と最大の基準画面だけでなく、ブレークポイント前後の切り替わりも確認します。