Since it was first proposed in 1994, CSS has attempted to solve two important problems:

• How can we design with systems that keep our work consistent, performant, and maintainable?
• How can we design with resilience across a wide range of interfaces – past, present, and future?

Now we’re building full mobile and desktop-style applications on the web, and those core CSS questions are more essential than ever. We need systems that scale, with resilience across an ever-growing range of bowsers and devices. Can we write CSS that’s up to the task?

Together, we’ll explore:

• Why CSS works the way it does: from cascade and inheritance to normal flow and formatting contexts
• Modern and “intrinsic” web layout in-depth: putting flexbox, grid, floats, alignment, writing modes, media queries and display in context
• Moving past “browser support” to write modern and resilient CSS everywhere, without duplicating your efforts and driving up budgets
• CSS architectures at the foundation of every naming convention, from OOCSS to BEM and ITCSS and beyond
• Building meaningful and maintainable design systems with modern CSS and Sass
• Integrating documentation and cross-team communication
• What’s new in both CSS and Sass, and how you can get involved in where they go next

Register for this workshop →

What prerequisites skills do you need?

This is a full workshop, delivered in six 2-hour long sessions with lots of time for Q&A.

The workshop is intended for professional front-end developers with experience in HTML and CSS.

What hardware/software do you need?

Bring your own laptop, your favorite text editor, and any practical CSS issues you’re facing.

About Miriam Suzanne

Miriam is a co-founder at OddBird, with 15 years experience as a project manager, user-experience designer, and front-end architect.

She is the creator of Susy, a core contributor to Sass, author of SitePoint’s Jump Start Sass, staff-writer for CSS Tricks, teacher for the Mozilla Developer channel and Invited Expert on the CSS Working Group.

Time & Schedule

This workshop is split over six days. The schedule may change slightly based on how we are progressing through the material, giving time to answer questions as we go.

You can always re-watch the sessions at a more convenient time and follow the workshop at your own pace.

The workshop sessions will run on the following days:

• Thu, May 7, 09:00 – 11:30 AM PDT
• Fri, May 8, 09:00 – 11:30 AM PDT
• Thu, May 14, 09:00 – 11:30 AM PDT
• Fri, May 15, 09:00 – 11:30 AM PDT
• Thu, May 21, 09:00 – 11:30 AM PDT
• Fri, May 22, 09:00 – 11:30 AM PDT

Thu, May 7: Cascading Design

8:30 AM – 9:00 AM PDT
Virtual doors open, registration, chat and introductions.

9:00 AM – 9:45 AM | First, Do No Harm
CSS is designed around a radical vision of accessibility and user-control. We’ll look at the practical implications that make CSS fundamentally different from other languages or design tools.

9:45 AM – 10:00 AM
Break

10:00 AM – 10:45 AM | Cascading & Inheritance
A deep-dive into the core tools of the language — why we have them, how they work, and how we can use them to manage the contextual nature of design on the web.

10:45 AM – 11:00 AM
Break

11:00 AM – 11:30 AM
Q&A with Mia’s on the day’s material. Networking!

Friday, May 8: Intrinsic Layouts, Distributing Space

8:30 AM – 9:00 AM PDT
Virtual doors open, registration, chat and introductions.

9:00 AM – 9:45 AM | Distributing Space
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 logical properties, display context, box sizing & alignment, flexbox, and writing modes.

9:45 AM – 10:00 AM
Break

10:00 AM – 10:45 AM | Flex & Alignment in Practice
Practical use-cases, and interactive exercises related to distributing space…

10:45 AM – 11:00 AM
Break

11:00 AM – 11:30 AM
Q&A with Mia’s on the day’s material. Networking!

Thu, May 14: Intrinsic Layouts, Defining Structure

8:30 AM – 9:00 AM PDT
Virtual doors open, registration, chat and introductions.

9:00 AM – 9:45 AM | Defining Structure
Sometimes we also need to impose structure on objects – creating consistent and reliable layouts, even with unpredictable content from a CMS. This is a full session dedicated to Grids & Sub-grids.

9:45 AM – 10:00 AM
Break

10:00 AM – 10:45 AM | Grids in Practice
Practical use-cases, and interactive exercises related to defining layouts…

10:45 AM – 11:00 AM
Break

11:00 AM – 11:30 AM
Q&A with Mia’s on the day’s material. Networking!

Fri, May 15: Dynamic CSS

8:30 AM – 9:00 AM PDT
Virtual doors open, registration, chat and introductions.

9:00 AM – 9:45 AM | Custom Properties & Functions
CSS “variables” provide an opportunity for much more robust, meaningful, and dynamic style logic — along with more control of the cascade.

9:45 AM – 10:00 AM
Break

10:00 AM – 10:45 AM | CSS Variables in Practice
Practical use-cases, and interactive exercises related to CSS variables and functions…

10:45 AM – 11:00 AM
Break

11:00 AM – 11:30 AM
Q&A with Mia’s on the day’s material. Networking!

Thu, May 21: Cascade Aligned Programming

8:30 AM – 9:00 AM PDT
Virtual doors open, registration, chat and introductions.

9:00 AM – 9:45 AM | Modern AND Resilient
CSS is designed to adapt to context – failing silently, and enhancing progressively. Feature support is constantly in flux along a continuum, but we have tools to manage that context and support everyone — without giving up on the latest features.

9:45 AM – 10:00 AM
Break

10:00 AM – 10:45 AM | Naming & Organizing Conventions
There are many conventions for organizing CSS, but the best systems all share underlying principles based on CSS itself. What would it mean to use The Cascade as our guide for writing maintainable CSS?

10:45 AM – 11:00 AM
Break

11:00 AM – 11:30 AM
Q&A with Mia’s on the day’s material. Networking!

Fri, May 22: Design Systems

8:30 AM – 9:00 AM PDT
Virtual doors open, registration, chat and introductions.

9:00 AM – 9:45 AM | Sass Modules & Tools
While CSS has become more and more powerful in the browser, there will always be a place for server-side logic & tooling. Sass is particularly powerful for managing design systems.

9:45 AM – 10:00 AM
Break

10:00 AM – 10:45 AM | Integrated Systems & Living Documentation
Successful design systems rely on a tight integration of code, living documentation, and team process. We’ll look at various tools and techniques for designing agile systems that last.

10:45 AM – 11:00 AM
Break

11:00 AM – 11:30 AM
Q&A with Mia’s on the day’s material. Networking!