#ZombieLibrary
PATTERN
LIBRARY
ZOMBIE
FIGHT
THE
CSS Dev Conf • 10.26.15
Marcelo Somers
Solution Architect, User Experience
@marcelosomers
#ZombieLibrary
Slide 2
Slide 2 text
#ZombieLibrary
WHO IS USING A
PATTERN LIBRARY?
Slide 3
Slide 3 text
#ZombieLibrary
IS YOUR
PATTERN LIBRARY
UP TO DATE?
Slide 4
Slide 4 text
PATTERN LIBRARIES
ZOMBIE
Slide 5
Slide 5 text
#ZombieLibrary
How do you keep living,
knowing that’s what
the world is like?”
“ building interfaces
Slide 6
Slide 6 text
#ZombieLibrary
DESIGN PROCESS
RETHINKING THE
Slide 7
Slide 7 text
#ZombieLibrary
BUILD
SYSTEMS
NOT
PAGES
http://stuffandnonsense.co.uk/blog/about/walls_come_tumbling_down_presentation_slides_and_transcript/
-Andy Clarke
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
#ZombieLibrary
BUILD A TINY
BOOTSTRAP
https://speakerdeck.com/mdo/build-your-own-bootstrap
– Mark Otto & Dave Rupert
http://daverupert.com/2013/04/responsive-deliverables/
Slide 10
Slide 10 text
#ZombieLibrary
DESIGN
DESIGNING WITH PATTERNS
Slide 11
Slide 11 text
#ZombieLibrary
DESIGN SLICE
DESIGNING WITH PATTERNS
Slide 12
Slide 12 text
#ZombieLibrary
DESIGN SLICE ASSEMBLE
DESIGNING WITH PATTERNS
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
#ZombieLibrary
DESIGN
TOOLS
Slide 18
Slide 18 text
#ZombieLibrary
Slide 19
Slide 19 text
#ZombieLibrary
Slide 20
Slide 20 text
#ZombieLibrary
Slide 21
Slide 21 text
#ZombieLibrary
Slide 22
Slide 22 text
#ZombieLibrary
Slide 23
Slide 23 text
#ZombieLibrary
Slide 24
Slide 24 text
#ZombieLibrary
BREAKS DOWN
WHERE THE DESIGN PROCESS
Slide 25
Slide 25 text
#ZombieLibrary
DESIGNERS
DEVELOPERS
DISCOVER DESIGN
DEVELOP TEST
Slide 26
Slide 26 text
#ZombieLibrary
BROKEN
TRADITIONAL HANDOFF IS
Slide 27
Slide 27 text
#ZombieLibrary
DISCOVER DESIGN
DEVELOP
TEST
Slide 28
Slide 28 text
#ZombieLibrary
PATTERN LIBRARY
SLICE
DESIGNING WITH PATTERNS
ASSEMBLE
DESIGN
Slide 29
Slide 29 text
#ZombieLibrary
Slide 30
Slide 30 text
#ZombieLibrary
Slide 31
Slide 31 text
#ZombieLibrary
Slide 32
Slide 32 text
#ZombieLibrary
Slide 33
Slide 33 text
#ZombieLibrary
WASTE
ELIMINATE
Slide 34
Slide 34 text
#ZombieLibrary
THE
EVOLVING
DESIGNER
Slide 35
Slide 35 text
#ZombieLibrary
LIVE
WHERE DOES THE PATTERN LIBRARY
IN YOUR PROCESS?
Slide 36
Slide 36 text
#ZombieLibrary
STYLE GUIDE
MATURITY
MODEL
INCONSISTENT
Different apps are styled inconsistently
ONE-TIME
A static style guide document gives basic direction
MANUAL
A pattern library has been built, but must be manually updated
AUTOMATED
The pattern library shares code with the app(s)
TEAM
A dedicated team
maintains the pattern library
#ZombieLibrary
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
#ZombieLibrary
GETTING STARTED
(TODAY)
Slide 40
Slide 40 text
#ZombieLibrary
TAKE AN INVENTORY
1
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
Option List Group
Seen On:
• My Account » Account List
• Send Money » Select Payment Option
Desktop
Mobile
Slide 43
Slide 43 text
#ZombieLibrary
BASE STYLES
1
2 COMPONENTS
3 PAGE TEMPLATES
WHAT TO
DOCUMENT
Slide 44
Slide 44 text
#ZombieLibrary
STANDARDIZE
2
Slide 45
Slide 45 text
No content
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
No content
Slide 49
Slide 49 text
No content
Slide 50
Slide 50 text
#ZombieLibrary
DOCUMENT
3
Slide 51
Slide 51 text
No content
Slide 52
Slide 52 text
No content
Slide 53
Slide 53 text
No content
Slide 54
Slide 54 text
No content
Slide 55
Slide 55 text
No content
Slide 56
Slide 56 text
No content
Slide 57
Slide 57 text
No content
Slide 58
Slide 58 text
#ZombieLibrary
BASIC
DOCUMENTATION
NAME
1
2 DESCRIPTION
3 EXAMPLE
3 CODE SNIPPET
Slide 59
Slide 59 text
#ZombieLibrary
CENTRALIZE YOUR CSS
3a
Slide 60
Slide 60 text
#ZombieLibrary
DEFINE CSS STANDARDS
3
REFACTOR TO PERFECTION
4
Slide 61
Slide 61 text
#ZombieLibrary
BREAK UP YOUR
COMPONENTS
Slide 62
Slide 62 text
#ZombieLibrary
NAMESPACE
THE CSS
Slide 63
Slide 63 text
#ZombieLibrary
FIND IN
PROJECT IS
YOUR FRIEND
Slide 64
Slide 64 text
#ZombieLibrary
REGEX SEARCH FOR CLASSES
class\s*?=\s*?["'].*?table
will find all instances where class=“ “ contains table
#ZombieLibrary
ANATOMY OF A PACKAGE.JSON DEPENDENCY
"devDependencies": {
“my-awesome-pattern-library“: "https://user:[email protected]/jondoe/
my-awesome-pattern-library.git#1.0.0"
}
Slide 111
Slide 111 text
#ZombieLibrary
USERNAME &
PASSWORD
ANATOMY OF A PACKAGE.JSON DEPENDENCY
"devDependencies": {
“my-awesome-pattern-library“: "https://user:[email protected]/jondoe/
my-awesome-pattern-library.git#1.0.0"
}
Slide 112
Slide 112 text
#ZombieLibrary
ANATOMY OF A PACKAGE.JSON DEPENDENCY
"devDependencies": {
“my-awesome-pattern-library“: "https://user:[email protected]/jondoe/
my-awesome-pattern-library.git#1.0.0"
}
PATH TO GIT
REPOSITORY
Slide 113
Slide 113 text
#ZombieLibrary
ANATOMY OF A PACKAGE.JSON DEPENDENCY
"devDependencies": {
“my-awesome-pattern-library“: "https://user:[email protected]/jondoe/
my-awesome-pattern-library.git#1.0.0"
}
VERSION
COMMITISH
Slide 114
Slide 114 text
#ZombieLibrary
Slide 115
Slide 115 text
#ZombieLibrary
Slide 116
Slide 116 text
#ZombieLibrary
Slide 117
Slide 117 text
http://patternpack.org/
Slide 118
Slide 118 text
#ZombieLibrary
DESIGN PROCESS
RETHINKING THE
Slide 119
Slide 119 text
#ZombieLibrary
DISCOVER DESIGN
DEVELOP
TEST
Design
PatternPack
Slide 120
Slide 120 text
INTERFACES
FIGHT ZOMBIE
Slide 121
Slide 121 text
MODULARIZE
Slide 122
Slide 122 text
DOCUMENT
Slide 123
Slide 123 text
SHARE
Slide 124
Slide 124 text
#ZombieLibrary
THANK YOU!
Marcelo Somers
@marcelosomers
Slides
h p://j.mp/zombie-library-cssdevconf
PatternPack
h p://pa ernpack.org/