Early bird tickets
on sale through April 12. For workshop
updates and demos of workshop content,
subscribe to OddNews.
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.
Freelancer and other
need-based scholarships available.
For discounts,
please contact us.
Miriam is one of the very few people I trust enough to point my own
students toward. She gets the “why” as much as the “how,” and makes
learning CSS feel genuinely empowering.
There are few, if any, who are more qualified to cover the ins and outs
of CSS layout, and I can tell you that Miriam’s work really helped
inspire and inform the content in my course.
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.
Miriam is a developer, teacher,
and pioneer of modern CSS –
an Invited Expert on the
W3CCSS 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.
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.
