Using Atomic Design to Make Your Site Manageable and Adaptable

Tassos Koutlas - UK Technical Director, FFW

Rob Fitzgibbon - UX Manager, Acquia

ffwagency.com

Introductions

Rob Fitzgibbon Tassos Koutlas

ffwagency.com

Contents

• Introduction

• Benefits

• How we use it

• How you can use it

• Q/A

ffwagency.com

Introduction to Atomic Design

• Definition

• Origins and history

• Methodology of problem solving

ffwagency.com

Definition

• Atomic design is a methodology to create design systems which is inspired by/borrows

from, the Linnaean system of biological taxonomy and the Atomic Table of Elements

• Just as you can sort living things by size and complexity into

kingdom/order/class/family etc., you can do the same with a design system using

atomic design.

• It’s 5 levels are Atoms/Molecules/Organisms/Templates/Pages

• Consider it an evolution from an “artisan” to a more “industrial” method of design

creation/production

ffwagency.com

Definition

Brad Frost, a web developer from Pittsburgh, PA,

created the concept back in 2013.

He wrote a book, it became popular, he gave

talks, he became popular, etc.

“Create Systems, Not Pages!”

source: http://atomicdesign.bradfrost.com/chapter-1/

ffwagency.com

Benefits of Atomic Design

• Process

• Brand

• Innovation potential

source: https://io9.gizmodo.com/the-

terrifying-age-of-radioactive-toys-for-kids-

1501777693

ffwagency.com

Process Benefits

source: http://hereandnow.legacy.wbur.org/2013/10/16/assembly-line-anniversary

ffwagency.com

Brand Benefits

ffwagency.com

Innovation Potential

• Quicker to deploy

• Faster time to market

• Team collaboration

• Easier coding

• Quicker prototyping

• Fewer components

• Modular

• Agility

• Build, measure, learn

ffwagency.com

How to use Atomic Design

A few steps into it:

1. Design components

2. Use a style guide

3. Integrate with Drupal

4. Align with content

5. Innovate

ffwagency.com

Need to share with the rest of the team

Need components to become code

Need to test and optimise based on devices, viewports

and browsers

Using a style guide

ffwagency.com

ffwagency.com

Library structure for all the patterns.

Deliver front end work faster

Unified experience

Parallelise work with the backend development

Guideposts of atomic design very early in the process.

Test the UX early with real code

Iterate on designs rapidly

Benefits

ffwagency.com

Integrate with Drupal

ffwagency.com

Modern web authoring with Drupal Paragraphs.

Paragraph components map into atomic design patterns.

Data model per component instead of per page.

Specific template per component.

Align with content

ffwagency.com

Produce content structure and see the result when

real content is added

More editing power to end users

Each component can be used to create content and

then piece together to make a fully functional page.

Core components can be defined for a functional

page and extended with more components

Components are not dependent on each other but

instead work together

Benefits

ffwagency.com

Adding components

Components present:

• atoms: text, subtitle, image

• molecule: text with image on the side

As these components are added, they contribute to

the page authoring process

Components are reused in other pieces of content.

ffwagency.com

Adding components

a. Subtitle (atom)

b. Text (atom)

c. Text with image on the side - left position (molecule)

d. Text with image on the side - right position (molecule)

e. Text with image on the side - left position (molecule)

ffwagency.com

Adding components

Vary templates by reusing components in different order.

For extendability, a new component can be easily added

to extend page features.

ffwagency.com

Now that we talked about how atomic design works with content

components, what about editors? Some benefits are:

• Design systems speed up team’s workflow through reusing

already established UI.

• UI components establish a shared vocabulary for editors which

creates more collaboration workflows.

• Create more future-friendly foundation to modify, extend and

improve over time.

• Give editors the flexibility to structure pages (via components)

as they wish and add different features depending on purpose.

Editorial experience

ffwagency.com

Reusable components speed up features and deliverables

Product owners interact with a functioning site at early stages

•Early feedback

•Establish visual direction

•Discard waterfall

Components make it easier to change scope

•A change reflects in all pages used

Product is adaptable and maintainable

•Adapting means better budget control

•Future-proof the implementation

Agile experience

ffwagency.com

• Before you begin

• Design setup

• Technical setup

•Style guide (Pattern Lab)

•Theme (Drupal)

•Components (Paragraphs module)

• Maintenance on the future proofness of design (easy it is to update the

site design)

• Content (think about content in the same way as design)

How You Can Use Atomic Design

ffwagency.com

Technical setup

There are 3 main moving parts:

1.Pattern Lab 2 (uses twig)

2.Theme

3.Content components

Design

Pattern Lab Patterns

TemplatesDrupal theme

Content

components

ffwagency.com

Technical setup - Pattern Lab

Design

Pattern Lab Patterns

TemplatesDrupal theme

Content

components

Browsing the Pattern Lab github repository

there are quite a few options.

We suggest to start with Pattern Lab Twig

Standard Edition for Drupal.

Contains:

• Pattern Lab twig edition

• Data transfer plugin (e.g. use Attributes

class in PL)

ffwagency.com

Technical setup - Theme

To enable a Drupal theme to register templates outside its root you need a module!

Find Component Libraries. It works by registering namespaces that twig understands

For example you can do the following:

> {% extends "@organisms/header.twig" %}

Design

Pattern Lab Patterns

TemplatesDrupal theme

Content

components

ffwagency.com

Technical setup - Content

Design

Pattern Lab Patterns

TemplatesDrupal theme

Content

components

Use Paragraphs. Define templates per component using standard Drupal notation (they are entities!)

Include, extend or embed to pull in the pattern templates from PL as well as pairing the vars together.

ffwagency.com

Design maintenance

ffwagency.com

Q/A

Thank You!