Using Component Libraries for Rapid Theme Development

Presented at WordCamp Orange County

Learn about component libraries and how they can be used to improve the WordPress theme development process.

Transcript

1. Using Component Libraries for Rapid Theme Development
2. Today’s process
3. The waterfall approach reinforces exceptions about delivering pixel- perfection
4. The waterfall approach is broken
5. It’s not about creating page templates, it’s about creating reusable components.
6. But first, let’s talk about atomic design Graphic modified from Atomic Design by Brad Frost
7. Atomic design is a methodology composed of distinctive stages working Together to create deliberate interface design systems. –Brad Frost “ ”
8. Atoms
9. Molecules
10. Organisms
11. Templates
12. Pages
13. A component library is essentially a collection of molecules & organisms
14. A reference component library should include your go-to UI components
15. A good component library makes design & development as frictionless as possible
16. It’s all in the details • Component name • A live example • Information about the component • Usage guidelines • Implementation • Code • Resources • Meta • Status • Category
17. Code: PHP
18. Code: Sass / CSS / LESS
19. Code: HTML & Other Tips
20. Component Libraries as a deliverable
21. Theme, Plugin, or Something Else?
22. Use the tools you're comfortable using
23. Will use component libraries in the future?
24. Hi, I'm Carrie ! ‣ Senior Front-End Developer at WebDevStudios ‣ Silicon Valley & the SF Bay Area are my playground ‣ ‣ I consider Sass a love language, and really love refactoring front-end code
25. Further Reading Atomic Design - Brad Frost Anatomy of a Pattern Library - Brad Frost On Building Component Libraries - Clearleft Front-end Style Guides - Anna Debenham
26. Component Library Resources & Inspiration ‣ WP Components ‣ WDS Components Library ‣ 10up WordPress Component Library ‣ PatternLab
27. Questions? http://bit.ly/2t6LCZE @CarrieForde carrie@carrieforde.com