Creating Themes with Atomic Design

Transcript

1. CREATING THEMES WITH ATOMIC DESIGN CARRIE FORDE
2. 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…
3. 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
4. WHAT IS ATOMIC DESIGN?
5. ATOMIC DESIGN IS A METHODOLOGY COMPOSED OF DISTINCTIVE STAGES WORKING TOGETHER TO CREATE DELIBERATE INTERFACE DESIGN SYSTEMS. Brad Frost
6. Image from Atomic Design by Brad Frost
7. ATOMS Image by Mike Reithmuller
8. An Anchor / Link <a /> A text input <input type=“text” /> A button input <input type=“button” />
9. 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
10. A NAVIGATION MOLECULE A SEARCH FORM
11. ORGANISMS
12. TEMPLATES & PAGES
13. THE ADVANTAGES OF ATOMIC DESIGN
14. CREATING THEMES WITH ATOMIC DESIGN ADVANTAGES OF ATOMIC DESIGN ▸ Promotes consistency ▸ Facilitates a more iterative process ▸ Keeps code DRY
15. THE ATOMIC DESIGN PROCESS
16. 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
17. INCORPORATING ATOMIC DESIGN INTO YOUR THEMES
18. 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
19. 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
20. CREATING THEMES WITH ATOMIC DESIGN I TEMPLATE TAGS ❤
22. CREATING THEMES WITH ATOMIC DESIGN TEMPLATE PARTS ARE PRETTY TOO
23. CREATING THEMES WITH ATOMIC DESIGN PAGE TEMPLATES
24. 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/
25. QUESTIONS