Supercharge Theme Development with Component Libraries

How many hero banners have you built from scratch? One? Two? Twenty, or more? Stop rebuilding UI components for each project, and focus on actually theming your WordPress themes. In this talk, I’ll outline the power of component libraries by defining what they are, and how you can use them to speed up design and development. I’ll also share existing component library resources, as well as tips and tricks for building your own component library using WordPress and Advanced Custom Fields.

Transcript

1. Supercharge Theme Development with Component Libraries
2. Today’s approach
3. The waterfall approach isn’t efficient
4. The waterfall approach can cause maintenance nightmares
5. It’s not about creating page templates, it’s about creating reusable components.
6. Your starter theme is not a junk drawer
7. A good component library makes design & development as frictionless as possible
8. It’s all in the details • Component name • A live example • Information about the component • Usage guidelines • Implementation • Code • Resources • Meta • Status • Category
9. Live Example
10. Component Info
11. Implementation
12. Code: HTML
13. Code: PHP
14. Code: Sass / CSS / LESS
15. Code: JavaScript
16. Won’t all my sites look the same?
19. Use the tools you're comfortable using
20. Go forth and supercharge your development!
21. Hi, I'm Carrie ! ‣ Front-end engineer currently heads down learning JavaScript ‣ Silicon Valley & the SF Bay Area are my playground ‣ ‣ I consider Sass a love language, and really love refactoring front-end code
22. Further Reading Atomic Design - Brad Frost Anatomy of a Pattern Library - Brad Frost On Building Component Libraries - Clearleft Front-end Style Guides - Anna Debenham
23. Component Library Resources & Inspiration ‣ WP Components ‣ 10up WordPress Component Library ‣ PatternLab
24. Questions? http://bit.ly/2y1FlBd @CarrieForde carrie@carrieforde.com