Atomic & Molecular Design with Drupal

Atomic & Molecular Design with Drupal

Atomic and molecular design are great tools to ensure consistency in design language across a website. It can be hard for content editors to use elements from your design library unless Drupal is set up correctly.

This course gives front end developers the knowledge they need to build components in Drupal that empower content editors to create flexible, dynamic page designs that also make use of elements of the atomic design.

Cost: $450 CAD

Sign up for training

Learning Objectives

You'll come away from the course with knowledge of how to:

  • Make atomic & molecular design accessible for content editors and end users
  • Plan effective landing pages that work for content editors and end-users
  • Pick the best configuration for reusable page components
  • How to use Block types and Paragraphs to build pages
  • Theming techniques that will enable consistent components
  • Accessibility as a key for component design
  • Using the Layout Builder to create more flexible pages
Atomic Design

The Blended Learning Process: How it Works

This blended learning course is scheduled over three weeks. It consists of pre-recorded videos and exercises that allow you to self-direct your learning and learn at your own schedule, live training with your instructor and cohort to deepen your understanding, and one-on-one training sessions with instructors to get more guidance and support as needed.

Here's what to expect:

  • 👩‍🏫 6 live, interactive sessions over Zoom (Tuesdays and Thursdays at 1pm ET)
  • 📺 19 carefully crafted videos and virtual exercises to complete in between the sessions
  • 👨‍💻 One-on-one sessions for personalized support
  • 💬 A dedicated Slack channel to learn and grow together
  • 🏆 A certificate upon completion
Atomic Design

About Your Instructor

Suzanne Dergacheva oversees Evolving Web’s design, user experience, and development work. She also provides in-depth Drupal training to clients and thought leadership to the Drupal community. She is passionate about helping organizations adopt Drupal and making it easy to use. She enjoys opening people’s minds to what they can build with Drupal, whether their background is in web, marketing or elsewhere.

Suzanne has given Drupal training to teams across North America and around the world, including at the University of Toronto, Georgia Tech, the Art Gallery of Ontario, the Government of Canada, and numerous web agencies. She has taught thousands of new Drupalers and is one of the top Drupal teachers in Canada.

Suzanne Dergacheva

Week-by-Week Outline

It's recommended that you spend 3 hours a week on learning per week to fully absorb the course materials. You'll have lessons to complete between live sessions (exercises with video instructions) and access to a Slack channel and a one-on-one session to help you out.

Week 1 

Tuesday Live Session: Install Party (30 minutes)

In this session, we'll make sure you're set up for success. We'll check that you have all the requirements for the course and troubleshoot any setup issues.

Thursday Live Session: Introductions (30 minutes)

We'll also do class introductions and talk about the problems that atomic & molecular design set out to solve.

Week 2

Tuesday Live Session: Drupal Content Component Options (45 minutes)

Share the landing page use cases. Drupal options for creating the building blocks that make up a landing page: Paragraphs, Blocks and the Layout Builder.

Thursday Live Session: Atomic Design and Styling (45 minutes)

Review of previous exercises and demo of Paragraph types. This week, we'll look at approaches to creating templates and CSS, following an atomic design approach.

Week 3

Tuesday Live Session: Layout Builder & Custom Blocks (45 minutes)

Review of Paragraphs and atomic design lessons learned. This week: building more flexible landing pages with the Layout Builder and applying atomic design to Blocks.

Thursday Live Session: Wrap-Up (45 minutes)

What are the pros and cons of each approach? What are the challenges of maintaining a website built with atomic design? What are the benefits for content editors and content governance?

Cost: $450 CAD

Sign up for training




 I have been working with Drupal for over 5 years now and I still want more Evolving Web training. Suzanne and her team are experts and will help you become one.

Joseph Olstad
Canadian Transportation Agency


What do I need to bring? You need to have a laptop on which you can install Drupal and a stable internet connection for accessing the videoconferencing.

Can I pay with a cheque? In most cases, we do accept payment by cheque. Contact us and we can issue you an invoice for the training.

What size is the class? Our classes usually have 6-10 participants, and we have a hard limit of 12 participants per trainer. 

Do you offer discounts for charities or individuals? Yes, contact us to receive a discount on the course.

Do you offer custom training? Yes, we can provide on-site, custom training for your team. Just get in touch with us and we can set up a training that fits your needs.

Do you offer refunds? Tickets are non-refundable, however it's free and easy to transfer your ticket to another person. Contact us to let us know if you'd like to transfer your registration.