Supercharge Theme
Development with Component
Libraries
Slide 2
Slide 2 text
Today’s approach
Slide 3
Slide 3 text
The waterfall approach
isn’t efficient
Slide 4
Slide 4 text
The waterfall approach can
cause maintenance nightmares
Slide 5
Slide 5 text
It’s not about creating page
templates, it’s about creating
reusable components.
Slide 6
Slide 6 text
Your starter theme is not a junk
drawer
Slide 7
Slide 7 text
A good component library
makes design & development
as frictionless as possible
Slide 8
Slide 8 text
It’s all in the details
• Component name
• A live example
• Information about the component
• Usage guidelines
• Implementation
• Code
• Resources
• Meta
• Status
• Category
Slide 9
Slide 9 text
Live Example
Slide 10
Slide 10 text
Component Info
Slide 11
Slide 11 text
Implementation
Slide 12
Slide 12 text
Code:
HTML
Slide 13
Slide 13 text
Code:
PHP
Slide 14
Slide 14 text
Code:
Sass / CSS / LESS
Slide 15
Slide 15 text
Code:
JavaScript
Slide 16
Slide 16 text
Won’t all my sites look the
same?
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
Use the tools you're
comfortable using
Slide 20
Slide 20 text
Go forth and supercharge your
development!
Slide 21
Slide 21 text
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
Slide 22
Slide 22 text
Further Reading
Atomic Design - Brad Frost
Anatomy of a Pattern Library - Brad Frost
On Building Component Libraries - Clearleft
Front-end Style Guides - Anna Debenham