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
- Intrinsic Sizing
- Flow (boxes)
- Flow (inline)
- Flow (block)
- Logical (flow-relative) Sides
- Logical properties
- Block & Inline Shorthands
- Flex-flow
- Grid Terminology
- A quick bit of grid
- Margin collapse & float overflow
- Floats and the BFC
- A BFC preventing wrapping of floats
- BFC Margin Collapsing
- Inline Splitting
- Overflow-Wrap
- Alignment: placing content vs items
- Block Box Alignment
- Absolute Position Box Alignment
- Baseline Values
- 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
- Flex shorthand values from the specification
- Layout Land videos by Jen Simmons
- Grid by Example from Rachel Andrew
- Winging It LIVE with Stephanie Eckles
- An Interactive Guide to CSS Grid by Josh Comeau
- Understanding CSS Layout And The Block Formatting Context by Rachel Andrew
- Polypane
- CSS Box Alignment Specification