Fight the Zombie Pattern Library - CSS Dev Conf 2015

9fa239b3154a0169d99ab7bf1422dd12?s=47 Marcelo Somers
October 26, 2015

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)

9fa239b3154a0169d99ab7bf1422dd12?s=128

Marcelo Somers

October 26, 2015
Tweet

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

  8. None
  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

  13. None
  14. None
  15. None
  16. None
  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
  37. None
  38. None
  39. #ZombieLibrary GETTING STARTED (TODAY)

  40. #ZombieLibrary TAKE AN INVENTORY 1

  41. None
  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

  45. None
  46. None
  47. None
  48. None
  49. None
  50. #ZombieLibrary DOCUMENT 3

  51. None
  52. None
  53. None
  54. None
  55. None
  56. None
  57. None
  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

  80. None
  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

  104. None
  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/