Fight the Zombie Pattern Library - CSS Dev Conf 2015

In "Fight the Zombie Pattern Library," presented at CSS Dev Conf 2015 in Long Beach, CA, we look at repeatable processes to implement Pattern Libraries in your product design and development workflow, so you can fight the slow rot of your interface design (and its underlying code) as your product grows and evolves.

These same processes can be used to "build a tiny Bootstrap" for every client and keep developers using them every day.

We also look at PatternPack (http://patternpack.org/), an open source tool for designing and building your interface, and then sharing the code. For more on getting started with PatternPack, check out the guides and resources (https://github.com/patternpack/patternpack/blob/master/docs/docs.md)

Transcript

1. #ZombieLibrary PATTERN LIBRARY ZOMBIE FIGHT THE CSS Dev Conf • 10.26.15 Marcelo Somers Solution Architect, User Experience @marcelosomers #ZombieLibrary
2. #ZombieLibrary WHO IS USING A PATTERN LIBRARY?
3. #ZombieLibrary IS YOUR PATTERN LIBRARY UP TO DATE?
4. PATTERN LIBRARIES ZOMBIE
5. #ZombieLibrary How do you keep living, knowing that’s what the world is like?” “ building interfaces
6. #ZombieLibrary DESIGN PROCESS RETHINKING THE
7. #ZombieLibrary BUILD SYSTEMS NOT PAGES http://stuffandnonsense.co.uk/blog/about/walls_come_tumbling_down_presentation_slides_and_transcript/ -Andy Clarke
9. #ZombieLibrary BUILD A TINY BOOTSTRAP https://speakerdeck.com/mdo/build-your-own-bootstrap – Mark Otto & Dave Rupert http://daverupert.com/2013/04/responsive-deliverables/
10. #ZombieLibrary DESIGN DESIGNING WITH PATTERNS
11. #ZombieLibrary DESIGN SLICE DESIGNING WITH PATTERNS
12. #ZombieLibrary DESIGN SLICE ASSEMBLE DESIGNING WITH PATTERNS
17. #ZombieLibrary DESIGN TOOLS
18. #ZombieLibrary
19. #ZombieLibrary
20. #ZombieLibrary
21. #ZombieLibrary
22. #ZombieLibrary
23. #ZombieLibrary
24. #ZombieLibrary BREAKS DOWN WHERE THE DESIGN PROCESS
25. #ZombieLibrary DESIGNERS DEVELOPERS DISCOVER DESIGN DEVELOP TEST
26. #ZombieLibrary BROKEN TRADITIONAL HANDOFF IS
27. #ZombieLibrary DISCOVER DESIGN DEVELOP TEST
28. #ZombieLibrary PATTERN LIBRARY SLICE DESIGNING WITH PATTERNS ASSEMBLE DESIGN
29. #ZombieLibrary
30. #ZombieLibrary
31. #ZombieLibrary
32. #ZombieLibrary
33. #ZombieLibrary WASTE ELIMINATE
34. #ZombieLibrary THE EVOLVING DESIGNER
35. #ZombieLibrary LIVE WHERE DOES THE PATTERN LIBRARY IN YOUR PROCESS?
36. #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
39. #ZombieLibrary GETTING STARTED (TODAY)
40. #ZombieLibrary TAKE AN INVENTORY 1
42. Option List Group Seen On: • My Account » Account List • Send Money » Select Payment Option Desktop Mobile
43. #ZombieLibrary BASE STYLES 1 2 COMPONENTS 3 PAGE TEMPLATES WHAT TO DOCUMENT
44. #ZombieLibrary STANDARDIZE 2
50. #ZombieLibrary DOCUMENT 3
58. #ZombieLibrary BASIC DOCUMENTATION NAME 1 2 DESCRIPTION 3 EXAMPLE 3 CODE SNIPPET
59. #ZombieLibrary CENTRALIZE YOUR CSS 3a
60. #ZombieLibrary DEFINE CSS STANDARDS 3 REFACTOR TO PERFECTION 4
61. #ZombieLibrary BREAK UP YOUR COMPONENTS
62. #ZombieLibrary NAMESPACE THE CSS
63. #ZombieLibrary FIND IN PROJECT IS YOUR FRIEND
64. #ZombieLibrary REGEX SEARCH FOR CLASSES class\s*?=\s*?["'].*?table will find all instances where class=“ “ contains table
65. #ZombieLibrary DON’T FORGET JAVASCRIPT!
66. #ZombieLibrary GOVERN YOUR LIBRARY 5
67. #ZombieLibrary https://css-tricks.com/what-a-css-code-review-might-look-like/
68. #ZombieLibrary https://medium.com/eightshapes-llc/team-models-for-scaling-a-design-system
69. https://medium.com/eightshapes-llc/team-models-for-scaling-a-design-system-2cf9d03be6a0#.cod1997sc SOLITARY
70. https://medium.com/eightshapes-llc/team-models-for-scaling-a-design-system-2cf9d03be6a0#.cod1997sc CENTRALIZED
71. https://medium.com/eightshapes-llc/team-models-for-scaling-a-design-system-2cf9d03be6a0#.cod1997sc FEDERATED
72. #ZombieLibrary PATTERN LIBRARY TOOLS http://www.smashingmagazine.com/2015/04/an-in-depth-overview-of-living-style-guide-tools/
73. #ZombieLibrary CSS DOCUMENTATION 1
74. #ZombieLibrary 1
75. #ZombieLibrary STATIC SITE GENERATION 2
76. #ZombieLibrary
77. #ZombieLibrary INTEGRATED 3
78. #ZombieLibrary
79. #ZombieLibrary BETTER WAY THERE HAS TO BE A
81. #ZombieLibrary
82. #ZombieLibrary GET STARTED WITH PATTERN PACK
83. #ZombieLibrary https://github.com/patternpack/patternpack-example-library
84. #ZombieLibrary $ npm init $ git init
85. #ZombieLibrary $ npm install grunt patternpack --save-dev
86. #ZombieLibrary module.exports = function(grunt) { grunt.initConfig({ patternpack: { run: {}, build: {}, release: {} } }); grunt.loadNpmTasks('patternpack'); grunt.registerTask('default', ['patternpack:run']); } gruntfile.js
87. #ZombieLibrary $ grunt patternpack:run
88. #ZombieLibrary
89. #ZombieLibrary CREATE YOUR FIRST PATTERN
90. #ZombieLibrary
91. #ZombieLibrary
92. #ZombieLibrary
93. #ZombieLibrary
94. #ZombieLibrary
95. #ZombieLibrary
96. #ZombieLibrary
97. #ZombieLibrary
98. #ZombieLibrary
99. #ZombieLibrary UNLEASH YOUR CREATION
100. #ZombieLibrary USE SEMANTIC VERSIONING FOR YOUR DESIGN SYSTEM
101. #ZombieLibrary 1.0.5 major release minor release patch release
102. #ZombieLibrary 1.0.5 major release minor release patch release Customize to your needs
103. #ZombieLibrary $ grunt patternpack:release $ git push --follow-tags
105. #ZombieLibrary BUILD YOUR STATIC SITE 1 INCREMENT YOUR VERSION 2 CREATE A NEW COMMIT 3 TAG THE COMMIT 4
106. #ZombieLibrary INTEGRATE INTO YOUR APPLICATION
107. #ZombieLibrary SUPPORT FOR NPM & BOWER
108. #ZombieLibrary $ npm install my-awesome-pattern-library
109. #ZombieLibrary $ npm install https://user:pass@github.com/user/my- awesome-library.git
110. #ZombieLibrary ANATOMY OF A PACKAGE.JSON DEPENDENCY "devDependencies": { “my-awesome-pattern-library“: "https://user:pass@bitbucket.org/jondoe/ my-awesome-pattern-library.git#1.0.0" }
111. #ZombieLibrary USERNAME & PASSWORD ANATOMY OF A PACKAGE.JSON DEPENDENCY "devDependencies": { “my-awesome-pattern-library“: "https://user:pass@bitbucket.org/jondoe/ my-awesome-pattern-library.git#1.0.0" }
112. #ZombieLibrary ANATOMY OF A PACKAGE.JSON DEPENDENCY "devDependencies": { “my-awesome-pattern-library“: "https://user:pass@bitbucket.org/jondoe/ my-awesome-pattern-library.git#1.0.0" } PATH TO GIT REPOSITORY
113. #ZombieLibrary ANATOMY OF A PACKAGE.JSON DEPENDENCY "devDependencies": { “my-awesome-pattern-library“: "https://user:pass@bitbucket.org/jondoe/ my-awesome-pattern-library.git#1.0.0" } VERSION COMMITISH
114. #ZombieLibrary
115. #ZombieLibrary
116. #ZombieLibrary
117. http://patternpack.org/
118. #ZombieLibrary DESIGN PROCESS RETHINKING THE
119. #ZombieLibrary DISCOVER DESIGN DEVELOP TEST Design PatternPack
120. INTERFACES FIGHT ZOMBIE
121. MODULARIZE
122. DOCUMENT
123. SHARE
124. #ZombieLibrary THANK YOU! Marcelo Somers @marcelosomers Slides h p://j.mp/zombie-library-cssdevconf PatternPack h p://pa ernpack.org/