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.
What Will Attendees Get?
Copy permalink to “What Will Attendees Get?”Online, wherever you are
To gain a thorough understanding
From a W3C Invited Expert
Documenting your education
To recording and shared docs
What Will Attendees Learn In This Workshop?
Copy permalink to “What Will Attendees Learn In This Workshop?”- Building maintainable CSS layouts with progressive enhancement
- The built-in power of normal flow
- Distributing space with flexbox and alignment
- Dynamic layouts using grid and subgrid
- More intrinsic and modular design with container queries
Who Is This For?
Copy permalink to “Who Is This For?”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 »
About Miriam
Copy permalink to “About Miriam”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.
Workshop Outline
Copy permalink to “Workshop Outline”The workshop is taught in three sessions:
1. Declarative Layouts
Cascading Styles
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.
Layout Modes & Formatting Contexts
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.
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.
Contact Us to Book a Workshop
Copy permalink to “Contact Us to Book a Workshop”Consider bringing us in to talk with your team directly: