Declarative Layouts
CSS is a declarative language, with a modal layout system. We’ll dig into the implications of that, and how to understand the CSS mental model. We’ll also dig into the default ‘flow’ layout model, intrinsic and extrinsic sizing, and logical properties, to see how things move.
CodePen Demos
- DOM demo
- CSS is rad
- Normal flow
- Logical properties
- Block & inline shorthands
- Logical (flow-relative) sides
- Inline flow
- Block flow
- Intrinsic sizing
- Out of flow
- Floats and the BFC
- BFC preventing wrapping of floats
- BFC margin collapsing
Resources
- Display module level 4
- CSS backgrounds and borders
- CSS logical properties and values
- display-contents support data
- Introduction to formatting contexts
- Understanding layout algorithms, by Josh Comeau
- display-inside
- CHSS proposal
- Intrinsic size keywords support
- Relationship between display, position, and float
- Understanding CSS layout and the block formatting context