This course will give 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.

Outline

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?