Every Layout-モジュラーなレスポンシブデザインを実現するCSS設計論

Chapter 1 メモ

CSS カスケード
* { box-sizing: border-box; } を指定することでボックスのサイズ計算や予想が簡単になる
一つ一つの小さなレイアウトをプリミティブとして定義し組み合わせることでUIパーツをつくる
デフォルトのフォントサイズを変更しているユーザーは Edge や IE のユーザーよりも多い
- 相対値で指定することが大事
font-size: calc(1rem + 0.5vw); のように書くことでブレークポイントを指定せずビューポートのサイズに比例してサイズを大きくすることができる
- 1vw は画面の幅の1%、1vh は画面の高さの1%
em単位はインライン要素、rem単位はブロック要素のサイズ指定に適している(筆者)
- インライン要素の一部のアイコンだけ 0.75em にしてアイコンを小さく見せたり

その後は特にメモとらなかった🙏

コンポジションあたりは各UIをレイアウトプリミティブで分解、共通化して組み合わせて作っていくみたいなところは一番勉強になった。画面の上からブロックを繋げていってページをつくるみたいなイメージだったけど、全体から捉えてレイアウトに分解していくマインドセットができたのが1番のポイントだった。

Stack、Cluster、Iconあたりのレイアウトはすぐに実践できると思ったし、Center、Grid、Imposterあたりも勉強になった。わからなかったやつもあるけど。