Slide 1

Slide 1 text

CREATING THEMES WITH ATOMIC DESIGN CARRIE FORDE

Slide 2

Slide 2 text

CREATING THEMES WITH ATOMIC DESIGN HI, I’M CARRIE! ▸ Front-end developer at WebDevStudios ▸ Find me online! ▸ carrieforde.com ▸ @CarrieForde ▸ github.com/carrieforde ▸ Really, carrieforde for all the things…

Slide 3

Slide 3 text

CREATING THEMES WITH ATOMIC DESIGN WHAT YOU’RE GONNA LEARN ▸ What is Atomic Design? ▸ The advantages of using the Atomic Design methodology ▸ The Atomic Design process ▸ How to begin incorporating Atomic Design into your WordPress themes

Slide 4

Slide 4 text

WHAT IS ATOMIC DESIGN?

Slide 5

Slide 5 text

ATOMIC DESIGN IS A METHODOLOGY COMPOSED OF DISTINCTIVE STAGES WORKING TOGETHER TO CREATE DELIBERATE INTERFACE DESIGN SYSTEMS. Brad Frost

Slide 6

Slide 6 text

Image from Atomic Design by Brad Frost

Slide 7

Slide 7 text

ATOMS Image by Mike Reithmuller

Slide 8

Slide 8 text

Slide 9

Slide 9 text

THE SMALLEST PHYSICAL UNIT OF AN ELEMENT OR COMPOUND, CONSISTING OF ONE OR MORE LIKE ATOMS IN AN ELEMENT AND TWO OR MORE DIFFERENT ATOMS IN A COMPOUND. dictionary.com CREATING THEMES WITH ATOMIC DESIGN MOLECULES

Slide 10

Slide 10 text

A NAVIGATION MOLECULE A SEARCH FORM

Slide 11

Slide 11 text

ORGANISMS

Slide 12

Slide 12 text

TEMPLATES & PAGES

Slide 13

Slide 13 text

THE ADVANTAGES OF ATOMIC DESIGN

Slide 14

Slide 14 text

CREATING THEMES WITH ATOMIC DESIGN ADVANTAGES OF ATOMIC DESIGN ▸ Promotes consistency ▸ Facilitates a more iterative process ▸ Keeps code DRY

Slide 15

Slide 15 text

THE ATOMIC DESIGN PROCESS

Slide 16

Slide 16 text

CREATING THEMES WITH ATOMIC DESIGN KEYS TO USING ATOMIC DESIGN WITH THE WATERFALL PROCESS ▸ Review all available design comps as a team and identify patterns across templates ▸ Have on person set up the atoms according to the style guide (if one exists, otherwise, try your best from what you’ve got) ▸ Parse out dev tasks based on patterns ▸ Assign a gatekeeper to ensure that patterns come together as templates / pages and match provided comps

Slide 17

Slide 17 text

INCORPORATING ATOMIC DESIGN INTO YOUR THEMES

Slide 18

Slide 18 text

CREATING THEMES WITH ATOMIC DESIGN A PATTERN LIBRARY-FOCUSED THEME CONSISTS OF… ▸ Well organized Sass / LESS / CSS ▸ Lots of template tags ▸ Template parts ▸ Page templates

Slide 19

Slide 19 text

CREATING THEMES WITH ATOMIC DESIGN TIPS FOR WELL-ORGANIZED STYLES ▸ Atoms ▸ Colors ▸ Typography ▸ Form Elements ▸ Molecules ▸ Grid / Layout ▸ Forms ▸ Navigation ▸ Organisms ▸ Header ▸ Footer ▸ Content Sections (loops) ▸ Templates ▸ Front Page

Slide 20

Slide 20 text

CREATING THEMES WITH ATOMIC DESIGN I TEMPLATE TAGS ❤

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

CREATING THEMES WITH ATOMIC DESIGN TEMPLATE PARTS ARE PRETTY TOO

Slide 23

Slide 23 text

CREATING THEMES WITH ATOMIC DESIGN PAGE TEMPLATES

Slide 24

Slide 24 text

CREATING THEMES WITH ATOMIC DESIGN RESOURCES ▸ Atomic Design by Brad Frost - http:// atomicdesign.bradfrost.com/ ▸ Pattern Lab - http://patternlab.io/ ▸ Atomic Design example on CodePen - http://codepen.io/ collection/XyJdaP/

Slide 25

Slide 25 text

QUESTIONS