Articles, Links, and Tools From An Event Apart: Online Together

Understanding the interaction between layout methods will enable you to easily create fallbacks for older browsers, and knowing how the various formatting contexts behave unlocks margin collapsing and the behavior of items inside grid or flex layout. The examples used in the talk are available as a CodePen collection.

Historical

• CSS Layout Evolution 2012
• CSS Level 1 Specification

Normal Flow (Block and Inline Layout)

• MDN: CSS Flow Layout
• Everything You Need To Know About Margins In CSS
• MDN: Visual Formatting Model

Display Level 3

• CSS Display Module Level 3
• The Two-Value Syntax of the Display Property
• Digging Into The Display Property: The Two Values of Display

Box Generation

• Digging Into The Display Property: Box Generation
• display: contents is not a CSS Reset
• More accessible markup with display: contents

Writing Modes

• Writing Modes And CSS Layout

Lists

• CSS Lists, Markers, and Counters

Flexbox

• Flexbox Use Cases
• What Happens When You Create A Flexbox Flex Container?

CSS Grid and subgrid

• Digging Into The Display Property: Grids All The Way Down
• Supporting Older Browsers
• CSS Grid Level 2: Here Comes Subgrid
• Hello, subgrid!
• Editorial layouts with Exclusions and CSS Grid
• Grid by Example Subgrid examples

Testing

• Web Platform Tests Dashboard
• Testing the Web Platform

• Taranamol Kaur on the GetCalFresh team's adaptation to remote research during the pandemic
• Bernard Tyers on ethical research with vulnerable participants
• Vivianne Castillo on self-care for designers
• Timecode engine in Google Sheets (make a copy to use)
• Remote Research site’s tools list