Modes & Contexts
CSS is fundamentally different from other languages or design tools, built around a radical vision for contextual style and user-control. We’ll dig into the practical implications of that vision, and how the ‘grain’ of the language can guide us to more performant and resilient styles.
CodePen Demos
- Resilient HTML
- Flow (boxes)
- Flow (inline)
- Flow (block)
- Logical (flow-relative) Sides
- Logical properties
- Block & Inline Shorthands
- Margin collapse & float overflow
- Floats and the BFC
- A BFC preventing wrapping of floats
- BFC Margin Collapsing
- Inline Splitting
- Out of Flow
- Overflow-Wrap
- CSS is Rad
Resources
- Zoom, zoom, and zoom by Miriam Suzanne
- Resilient, Declarative, Contextual, by Keith Grant
- A Dao of Web Design, by John Allsopp
- CSS Values & Units Level 4 Specification
- Introduction to Formatting Contexts on MDN
- Understanding Layout Algorithms by Josh Comeau
- CSS Display Module Level 4 Specification
- CSS Backgrounds and Borders Specification
- Intrinsic Size Keywords browser support on MDN
- Contents-display browser support on CanIUse
- CSS logical properties and values on MDN
- Understanding CSS Layout And The Block Formatting Context by Rachel Andrew
- Relationship between
display,position, andfloatin CSS2 - Polypane