Skip to main
Talk
A cat sitting in a box
thinking OMG.
I have so many questions
for this damn box.

Cascading Layouts

A workshop on resilient CSS layouts

CSS layout techniques have come a long way since the early days of responsive design, but many websites are still using decade-old approaches that require more fragile code and more ongoing maintenance. Take your sites to the next level with this 3-session workshop on building more resilient and maintainable web layouts using modern CSS.

Register now for April 2025 »

Interactive Sessions

Online, wherever you are

Dedicated Q&A

To gain a thorough understanding

Cutting Edge Techniques

From a W3C Invited Expert

Certificate of Completion

Documenting your education

Immediate Access

To recording and shared docs

Register

Note:

This material will also be covered in the Smashing Online Workshop, October 2024 – along with sessions on the cascade, inheritance, custom properties, and progressive enhancement.

This workshop is intended for designers & developers with at least a basic understanding of HTML and CSS. You don’t need to be an expert to keep up, but even the experts are likely to learn something new.

Bring this workshop to your company »

Miriam is a developer, teacher, and pioneer of modern CSS – an Invited Expert on the W3C CSS Working Group and core contributor to the Sass language. She created Susy for responsive layouts back in 2009, and recently co-wrote the CSS specifications for Container Queries, Cascade Layers, and Scope.

In addition to presenting talks & workshops at conferences around the world, Miriam is a former staff writer for CSS-Tricks, co-founder of the Mozilla Developer Channel, and co-author of SitePoint’s Jump Start Sass. She’s also a cross-media artist with extensive experience in theatre, writing, music, and visual art.

The workshop is taught in three sessions:

1. Declarative Layouts

First, Do No Harm

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.

Normal Flow & Formatting Contexts

Normal Flow is the default layout engine of CSS, before we apply flexbox or grids. Often passed over, this powerful layout model has a lot of complexity hidden just below the surface. We’ll look at how the DOM is rendered as a tree of inline and block boxes, each generating a new ‘formatting context’ for the elements nested inside.

2. Distributing Space

Flowing & Flexing

Unlike the printed page, web content and context can be unpredictable. CSS provides tools to manage that uncertainty, aligning & distributing objects on the page. We’ll talk about normal flow, intrinsic and extrinsic sizing, logical properties, box sizing & alignment, and the flexible box model.

Flex & Alignment in Practice

Practical use-cases, and interactive exercises related to distributing space.

3. Defining Structure

Defining Structure

Sometimes we also need to impose external structure to create consistent and reliable layouts, even with unpredictable content. This is a full session dedicated to grid & subgrid, the multiple ‘stages of squishiness’, and container queries.

Grids & Containers in Practice

Practical use-cases, and interactive exercises related to defining layouts.

Register now for the online workshop, April 2025, or consider bringing us in to talk with your team directly:

Upcoming Workshop

Mia from behind,
standing at a laptop -
speaking to a conference audience
and gesturing to one side

Cascading Style Systems

A workshop on resilient & maintainable CSS

New CSS features are shipping at an unprecedented rate – cascade layers, container queries, the :has() selector, subgrid, nesting, and so much more. It’s a good time to step back and understand how these tools fit together in a declarative system – a resilient cascade of styles.

Register for the October workshop »

Events