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.
Online, wherever you are
To gain a thorough understanding
From a W3C Invited Expert
Documenting your education
To recording and shared docs
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:
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.
Many CSS properties are modal, behaving differently in different layout contexts. We’ll start from the default layout mode called ‘normal flow’ – a powerful default that often feels natural, but hides a lot of complexity 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.
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.
Practical use-cases, and interactive exercises related to distributing space.
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.
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:
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.