CUBE CSS, a CSS methodology from Andy Bell, is orientated towards simplicity, pragmatism, and consistency. It’s designed to work with the medium that you’re working in—often the browser—rather than against it.

This methodology has roots in both huge projects that service millions of people, all the way down to small websites and starter kits, thanks to its flexibility.

The focus of the methodology is utilizing the power of CSS and the web platform as a whole, with some added controls and structures that help to keep things more maintainable and predictable. The end-goal is shipping as little CSS as possible—leaning heavily into progressive enhancement and modern techniques. By the end of this workshop, you’ll probably rethink how you write CSS in the future.

In this workshop, Andy Bell will teach you how to set up a resilient, scalable design system with CSS. Using the CUBE CSS framework, Andy will show how not only to create components with CSS, but also how these components fit together in a greater system. At the end of this workshop, you are able to build a modular design system from scratch.

Video Message From Andy (1 min)

A short 1-min introduction to the class by Andy Bell himself.

Who Is This For?

This is a full workshop, delivered in five 2-hour long sessions with lots of time for Q&A. It’s for designers and developers. To follow along, you should have a fundamental understanding of HTML and CSS.

You’ll walk away from this workshop with a solid foundation about how to plan, execute, and maintain a successful design system with CSS in your organization.

What will attendees learn in this workshop?

• How to set up a design system using the CUBE CSS framework.
• How to work with design tokens, powered by a static design tool, such as Figma.
• How to set up a pattern library and style guide.
• How to put everything together and compose a full pattern lab.

Register for this workshop →

About Andy Bell

Andy Bell is an educator and freelance web designer—based in the U.K. Andy has worked in the design and web industries for well over a decade and in that time, has worked with some of the largest organisations in the world, like Harley-Davidson, BSkyB, Unilever, Oracle, Capita, Vice Media and the NHS.

Andy has already started applying that knowledge and experience into education material. Firstly, by co-authoring Every Layout with Heydon Pickering, and secondly, running Front-End Challenges Club, which is focused on teaching you front-end development best-practice, via short, fun, challenges.

Time & Schedule

This workshop is split over five days. Our virtual doors open at 8:45, we start at 9 AM PDT.

The workshop sessions will run on the following days:

• Thu, December 3, 09:00 – 11:30 AM PDT
• Fri, December 4, 09:00 – 11:30 AM PDT
• Thu, December 10, 09:00 – 11:30 AM PDT
• Fri, December 11, 09:00 – 11:30 AM PDT
• Thu, December 17, 09:00 – 11:30 AM PDT

Day 1: Getting Started & Modular CSS

8:45 am PDT
Virtual doors open, registration, chat and introductions.

9:00 am – 11:00 am
Workshop overview, setting up our machines, learning about Modular CSS and Cube CSS. Building a simple, quick and easy example of CUBE CSS together to get a feel of it.

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

Day 2: Design Tokens And How To Translate A Design

8:45 am PDT
Virtual doors open, registration, chat and introductions.

9:00 am – 11:00 am
Design tokens: what they are and why we use them. A closer look at the design (your own — or ours) we’ll be working with. How we will split it up and how it will translate into a system.

Together we’re going to set up our asset pipeline and style guide by using a design tool like Figma as our source of truth. We’ll extract tokens from there and build out utility classes and custom properties for our project.

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

Day 3: Global CSS Deep Dive

8:45 am PDT
Virtual doors open, registration, chat and introductions.

9:00 am – 11:00 am
Global CSS — the main part of CUBE. We’re going to be applying global CSS to our system. Enhancing Global CSS with design tokens and utilities. Together, we’ll apply our utilities to our style guide to generate rules for type, colour and spacing.

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

Day 4: Building Components

8:45 am PDT
Virtual doors open, registration, chat and introductions.

9:00 am – 11:00 am
Components and their relationship to blocks. We’re going to build out the key blocks of our design using existing global styles and utilities.

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

Day 5: Composing It All Together

8:45 am PDT
Virtual doors open, registration, chat and introductions.

9:00 am – 11:00 am
Composition, macro-thinking to generate flexible layout systems that power our pages and views.

We’re going to be using composition to put everything we have learned together to create our first proper page/view. If time, we’d implement another page too, so demonstrate how flexible our new system is

We finish the workshop with a round-up of what we have learned.

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