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. 1.

    #ZombieLibrary PATTERN LIBRARY ZOMBIE FIGHT THE CSS Dev Conf •

    10.26.15 Marcelo Somers Solution Architect, User Experience @marcelosomers #ZombieLibrary
  2. 5.

    #ZombieLibrary How do you keep living, knowing that’s what the

    world is like?” “ building interfaces
  3. 8.
  4. 9.
  5. 13.
  6. 14.
  7. 15.
  8. 16.
  9. 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
  10. 37.
  11. 38.
  12. 41.
  13. 42.

    Option List Group Seen On: • My Account » Account

    List • Send Money » Select Payment Option Desktop Mobile
  14. 45.
  15. 46.
  16. 47.
  17. 48.
  18. 49.
  19. 51.
  20. 52.
  21. 53.
  22. 54.
  23. 55.
  24. 56.
  25. 57.
  26. 80.
  27. 86.

    #ZombieLibrary module.exports = function(grunt) { grunt.initConfig({ patternpack: { run: {},

    build: {}, release: {} } }); grunt.loadNpmTasks('patternpack'); grunt.registerTask('default', ['patternpack:run']); } gruntfile.js
  28. 104.
  29. 105.
  30. 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" }
  31. 121.
  32. 122.
  33. 123.