Slide 1
Slide 1 text
PATTERN LIBRARIES
CSS DEV CONF 2016
BY ADAM MCCOMBS
CAN CHANGE YOUR LIFE
presented for #PATTERNLIFE
Slide 2
Slide 2 text
THE BEST OF CSS DEV CONF.
Text to Vote to
(504) 229-6828
#PatternLife 5 I love this talk!
Rating
Talk hashtag Your comment
Slide 3
Slide 3 text
Hi, I’m Adam McCombs
Designer + Developer
@adammccombs
Slide 4
Slide 4 text
Taecho Group
taechogroup.com craftpl.us
Craft Plus
Est. 2011 Est. 2014
A little bit about me
my passion
Slide 5
Slide 5 text
A little bit about me
my favorite platforms
Slide 6
Slide 6 text
A little bit about me
my history and skills
photographer > designer > frontend > backend
Built my first computer game when I was 12 (HyperCard ftw!)
Built my first website in ~2001
Had my first ‘real’ paying client in 2002
Freelanced from 2002-2006
Worked as an in-house graphic designer for 2+ years
Freelanced for another 3+ years
Launched my agency, Taecho Group, in 2011
Launched Craft Plus in 2014
Slide 7
Slide 7 text
WHAT IS A PATTERN LIBRARY?
Slide 8
Slide 8 text
- Paul Boag | November 12, 2013
https://boagworld.com/design/pattern-library/
Recurring solutions that solve common
design problems.
The site UI-Patterns described these user interface design patterns as:
Slide 9
Slide 9 text
PATTERN LIBRARIES
in disguise
[Living/Web] Style Guides
Atom Design
Material Design
Design Languages
Design Systems
Element Explorations
Style Tiles
Element Collages
Concept Boards
Slide 10
Slide 10 text
PATTERN LIBRARIES
are NOT
Bootstrap, Foundation, Blueprint,
Semantic UI, Susy, MaterializeCSS, Pure
Your Framework
PDFs, Photoshop docs or
[print] style guides
Static Mockups
Everyone should be able to access,
update and modify pattern libraries
(within reason)
Limited to Designers
Slide 11
Slide 11 text
- Brad Frost | August 15, 2016
bradfrost.com/blog/post/anatomy-of-a-pattern-in-a-pattern-library/
Technically a pattern library is a simple
collection of UI components, but in
order for design system users do their
best work, a pattern library should also
present other important info.
Slide 12
Slide 12 text
WHY ARE PATTERN
LIBRARIES A NECESSITY?
Slide 13
Slide 13 text
A BRIEF HISTORY
…first
Slide 14
Slide 14 text
‘THE DREADED’ WATERFALL PROCESS
DISCOVERY
IA/UX
GRAPHIC DESIGN
TEMPLATE
DEVELOPMENT
CMS
PLATFORM
DEVELOPMENT
or
LAUNCH
Slide 15
Slide 15 text
‘THE DREADED’ WATERFALL PROCESS
DESIGNER(S)
WIREFRAMES
‘STATIC’ MOCKUPS
DEVELOPER(S)
FRONTEND DEV
CMS TEMPLATES
BACKENDEND DEV
“just throw it over the wall”
Slide 16
Slide 16 text
Hardware Browser
Software
Language Front-end
Hosting PHP, Ruby etc. CMS / Framework HTML & CSS You are here
Front-end Developer
Designer
Back-end Developer
Sys Admin
Database
Designer or Developer?
BREAK DOWN THE WALLS
Slide 17
Slide 17 text
WHAT ABOUT DEVICES?
…buuuut
Slide 18
Slide 18 text
SCREENS, SCREENS EVERYWHERE
http://bradfrost.com/blog/post/this-is-the-web/
Slide 19
Slide 19 text
SCREENS, SCREENS EVERYWHERE
http://bradfrost.com/blog/post/this-is-the-web/
Slide 20
Slide 20 text
ENTER THE WEB
…there has to be a better way
RESPONSIVE
Slide 21
Slide 21 text
RWD
Slide 22
Slide 22 text
WHY ARE PATTERN
LIBRARIES A NECESSITY?
So if RWD is king…
Slide 23
Slide 23 text
CONSISTENCY
in all things
1
Slide 24
Slide 24 text
in all things
Consistency
1
http://style.codeforamerica.org/
Colors - Code for America
Slide 25
Slide 25 text
Typography - Mailchimp
in all things
Consistency
1
http://ux.mailchimp.com/patterns/typography
Slide 26
Slide 26 text
[Brand] Style - Clearleft
in all things
Consistency
1
http://clearleft.com/styleguide/
Slide 27
Slide 27 text
REUSABILITY
of elements and front-end markup
2
Slide 28
Slide 28 text
Buttons - Github (1 of 2)
of elements &
front-end markup
Reusability
2
http://primercss.io/buttons/
Slide 29
Slide 29 text
Buttons - Github (2 of 2)
of elements &
front-end markup
Reusability
2
http://primercss.io/buttons/
Slide 30
Slide 30 text
Forms - Github (1 of 2)
of elements &
front-end markup
Reusability
2
http://primercss.io/forms/
Slide 31
Slide 31 text
Forms - Github (2 of 2)
of elements &
front-end markup
Reusability
2
http://primercss.io/forms/
Slide 32
Slide 32 text
MAINTAINABILITY
of codebase before and after launch
3
Slide 33
Slide 33 text
Dialogs - Google Material
of codebase before &
after launch
Maintainability
3
https://material.google.com/components/dialogs.html
Slide 34
Slide 34 text
Blankslates - Github
http://primercss.io/blankslate/
of codebase before &
after launch
Maintainability
3
Slide 35
Slide 35 text
SPEED COST
Time is money
4 &
Slide 36
Slide 36 text
Static/Waterfall Process - 1 page
Time is money
Speed & Cost
4
User Experience Designer Front-end Dev Back-end Dev
2.5 hours each
10 hours total
Slide 37
Slide 37 text
Static/Waterfall Process - 5 pages
Time is money
Speed & Cost
4
User Experience Designer Front-end Dev Back-end Dev
2.5 hours per page
50 hours total
Slide 38
Slide 38 text
Pattern Library - 5 pages
Time is money
Speed & Cost
4
User Experience Designer Front-end Dev Back-end Dev
2.5 hours per page?
~37.5 hours total
Slide 39
Slide 39 text
DEVELOP SYSTEMS
not pages
5
Pattern Libraries allow you to
Slide 40
Slide 40 text
Atomic Design by Brad Frost
not pages
Develop Systems
5
http://bradfrost.com/blog/post/atomic-web-design/
Pre-order the book!
Slide 41
Slide 41 text
Atoms - Atomic Design by Brad Frost
not pages
Develop Systems
5
http://bradfrost.com/blog/post/atomic-web-design/
Slide 42
Slide 42 text
Molecules - Atomic Design by Brad Frost
not pages
Develop Systems
5
http://bradfrost.com/blog/post/atomic-web-design/
Slide 43
Slide 43 text
Organisms - Atomic Design by Brad Frost
not pages
Develop Systems
5
http://bradfrost.com/blog/post/atomic-web-design/
Slide 44
Slide 44 text
Templates - Atomic Design by Brad Frost
not pages
Develop Systems
5
http://bradfrost.com/blog/post/atomic-web-design/
Slide 45
Slide 45 text
HOW CAN PATTERN LIBRARIES
HELP YOU BUILD AND DEVELOP
FASTER?
Slide 46
Slide 46 text
BUILD AND DEVELOP FASTER
using pattern libraries
Automate deployments of updated patterns
Use tools like Gulp to minify, add browser autoprefixes and polyfills
Preview patterns using GitHub pages (for free*)
Allow for buy in by allowing access to everyone to the pattern library
Integrate tools like intercom, and help desks
Use your pattern library for visual testing (github.com/webdriverio/webdrivercss)
Slide 47
Slide 47 text
STUCK? PROTOTYPE!
with codepen.io/patterns
Slide 48
Slide 48 text
THE STRUCTURE
of pattern libraries
Style
Color, Typography, Images
Layout
Grids, units & measurements, structure
Components
Buttons, tables, navigation, lists
Patterns
Advanced navigation, filtering, modules
Slide 49
Slide 49 text
INTERACTING WITH PROJECTS
of pattern libraries
Patterns are specific
to an individual project
Patterns are externalized but
pushes into your project
as library.css
Patterns can be updated
but have no [automatic]
effect on the project(s)
EXTERNAL INTERNAL ISOLATED
Slide 50
Slide 50 text
https://una.im/pattern-libs/
Pattern libraries (and really CSS in general)
is one of those things that everyone has an
opinion on how to implement because of its
low barrier to entry. This can (and likely will)
cause strong opinions to form among
various members of your team.
- Una | September 26, 2016
Slide 51
Slide 51 text
WHAT YOU SHOULD BUILD INTO
YOUR PATTERN LIBRARY?
3 requirements for excellent a pattern library
Slide 52
Slide 52 text
DOCUMENTATION
document all the things!
1
Slide 53
Slide 53 text
Pattern Name
1A
DOCUMENTATION
document all the things!
1
Why does this pattern exist?
1B Pattern usage Description
1C (For complex patterns)
What is the wrong way to use a pattern?
1D
Slide 54
Slide 54 text
PATTERN PREVIEW
How should this pattern be displayed?
2
Slide 55
Slide 55 text
MARKUP
bonus points for copy & paste
3
Slide 56
Slide 56 text
HOW SHOULD YOU MAINTAIN A
PATTERN LIBRARY AFTER YOUR
PROJECT HAS LAUNCHED?
Slide 57
Slide 57 text
AUTOMATE. AUTOMATE.
AUTOMATE.
It really comes down to this.
Slide 58
Slide 58 text
https://speakerdeck.com/philhawksworth/static-sites-go-all-hollywood?slide=61
Unless it’s part of your build, your style
guide is just more documentation to
maintain
- Phil Hawksworth | September 22, 2015
Slide 59
Slide 59 text
DESIGN SYSTEM MATURITY MODEL
https://medium.com/@marcelosomers/a-maturity-model-for-design-systems-93fff522c3ba#.jcl6x3pxp
Slide 60
Slide 60 text
WORKING IN A TEAM?
find your common ground
STANDARDS
code standards
naming convention
file organization
TOOLS
other systems/libraries
gulp, grunt
GitHub pages
GOALS
what are your objectives
pattern library timelines
post launch maintenance
Slide 61
Slide 61 text
http://styleguides.io/
https://speakerdeck.com/marcelosomers/fight-
the-zombie-pattern-library-rwd-summit-2016
Fight the Zombie Pattern Library -
RWD Summit 2016 by Marcelo
Somers
3 Years of Pattern Libraries: Lessons Learned
https://una.im/pattern-libs/
styleguides.io
FURTHER READING
Slide 62
Slide 62 text
Thanks!
@adammccombs
taechogroup.com / craftpl.us
THE BEST OF CSS DEV CONF.
Text to Vote to
(504) 229-6828
#PatternLife 5 I love this talk!
Rating
Talk hashtag Your comment