Using Component Libraries for
Rapid Theme Development
Slide 2
Slide 2 text
Today’s process
Slide 3
Slide 3 text
The waterfall approach reinforces
exceptions about delivering pixel-
perfection
Slide 4
Slide 4 text
The waterfall approach is
broken
Slide 5
Slide 5 text
It’s not about creating page
templates, it’s about creating
reusable components.
Slide 6
Slide 6 text
But first, let’s talk about atomic
design
Graphic modified from Atomic Design by Brad Frost
Slide 7
Slide 7 text
Atomic design is a methodology
composed of distinctive stages working
Together to create deliberate interface
design systems.
–Brad Frost
“
”
Slide 8
Slide 8 text
Atoms
Slide 9
Slide 9 text
Molecules
Slide 10
Slide 10 text
Organisms
Slide 11
Slide 11 text
Templates
Slide 12
Slide 12 text
Pages
Slide 13
Slide 13 text
A component library is essentially a
collection of molecules & organisms
Slide 14
Slide 14 text
A reference component library
should include your go-to UI
components
Slide 15
Slide 15 text
A good component library
makes design & development
as frictionless as possible
Slide 16
Slide 16 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 17
Slide 17 text
Code:
PHP
Slide 18
Slide 18 text
Code:
Sass / CSS / LESS
Slide 19
Slide 19 text
Code:
HTML & Other Tips
Slide 20
Slide 20 text
Component
Libraries as a
deliverable
Slide 21
Slide 21 text
Theme, Plugin, or Something
Else?
Slide 22
Slide 22 text
Use the tools you're
comfortable using
Slide 23
Slide 23 text
Will use component libraries in
the future?
Slide 24
Slide 24 text
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
Slide 25
Slide 25 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