A facilitator giving training to a classroom

Atomic & Molecular Design with Drupal

Course Description

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.

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


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.

  • Install Party & Introductions: We'll make sure you're set up for success, do class introductions, and talk about the problems that atomic & molecular design set out to solve.
  • Drupal Content Components: 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.
  • Building Patterns in Drupal: How your content components fit into a larger design system. Learn how to break down the elements of a design into small pieces to apply a consistent style guide.
  • Atomic Design and Styling: We'll look at approaches to creating templates and CSS, following an atomic design approach.
  • Layout Builder & Custom Blocks: 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.
  • Wrap-Up: 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?

Who Will Gain the Most From This Course? 

This course is for front end developers that want to build components in Drupal that empower content editors to create flexible, dynamic page designs.


Blended Online Learning: How it Works

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

Here's what to expect:

  • 👩‍🏫 Interactive sessions over Zoom (Tuesdays and Thursdays from 2 pm to 4 pm ET)
  • 📺 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

Can you provide an invoice? 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 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 refundable up until 30 days before the start of the course. And it's always free and easy to transfer your ticket to another person, just contact us.

Related Courses

Drupal Logo

Drupal Theming

Customize Drupal's look and feel by creating themes from scratch and with Bootstrap
Drupal Logo

Drupal Site Building & Architecture

Learn how to structure your content, creating dynamic content listings, and use modules to add essential functionality to your site.