Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Fight the Zombie Pattern Library - CSS Dev Conf 2015

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)

Marcelo Somers

October 26, 2015
Tweet

More Decks by Marcelo Somers

Other Decks in Design

Transcript

  1. #ZombieLibrary
    PATTERN
    LIBRARY
    ZOMBIE
    FIGHT
    THE
    CSS Dev Conf • 10.26.15
    Marcelo Somers
    Solution Architect, User Experience
    @marcelosomers
    #ZombieLibrary

    View full-size slide

  2. #ZombieLibrary
    WHO IS USING A
    PATTERN LIBRARY?

    View full-size slide

  3. #ZombieLibrary
    IS YOUR
    PATTERN LIBRARY
    UP TO DATE?

    View full-size slide

  4. PATTERN LIBRARIES
    ZOMBIE

    View full-size slide

  5. #ZombieLibrary
    How do you keep living,
    knowing that’s what
    the world is like?”
    “ building interfaces

    View full-size slide

  6. #ZombieLibrary
    DESIGN PROCESS
    RETHINKING THE

    View full-size slide

  7. #ZombieLibrary
    BUILD
    SYSTEMS
    NOT
    PAGES
    http://stuffandnonsense.co.uk/blog/about/walls_come_tumbling_down_presentation_slides_and_transcript/
    -Andy Clarke

    View full-size slide

  8. #ZombieLibrary
    BUILD A TINY
    BOOTSTRAP
    https://speakerdeck.com/mdo/build-your-own-bootstrap
    – Mark Otto & Dave Rupert
    http://daverupert.com/2013/04/responsive-deliverables/

    View full-size slide

  9. #ZombieLibrary
    DESIGN
    DESIGNING WITH PATTERNS

    View full-size slide

  10. #ZombieLibrary
    DESIGN SLICE
    DESIGNING WITH PATTERNS

    View full-size slide

  11. #ZombieLibrary
    DESIGN SLICE ASSEMBLE
    DESIGNING WITH PATTERNS

    View full-size slide

  12. #ZombieLibrary
    DESIGN
    TOOLS

    View full-size slide

  13. #ZombieLibrary

    View full-size slide

  14. #ZombieLibrary

    View full-size slide

  15. #ZombieLibrary

    View full-size slide

  16. #ZombieLibrary

    View full-size slide

  17. #ZombieLibrary

    View full-size slide

  18. #ZombieLibrary

    View full-size slide

  19. #ZombieLibrary
    BREAKS DOWN
    WHERE THE DESIGN PROCESS

    View full-size slide

  20. #ZombieLibrary
    DESIGNERS
    DEVELOPERS
    DISCOVER DESIGN
    DEVELOP TEST

    View full-size slide

  21. #ZombieLibrary
    BROKEN
    TRADITIONAL HANDOFF IS

    View full-size slide

  22. #ZombieLibrary
    DISCOVER DESIGN
    DEVELOP
    TEST

    View full-size slide

  23. #ZombieLibrary
    PATTERN LIBRARY
    SLICE
    DESIGNING WITH PATTERNS
    ASSEMBLE
    DESIGN

    View full-size slide

  24. #ZombieLibrary

    View full-size slide

  25. #ZombieLibrary

    View full-size slide

  26. #ZombieLibrary

    View full-size slide

  27. #ZombieLibrary

    View full-size slide

  28. #ZombieLibrary
    WASTE
    ELIMINATE

    View full-size slide

  29. #ZombieLibrary
    THE
    EVOLVING
    DESIGNER

    View full-size slide

  30. #ZombieLibrary
    LIVE
    WHERE DOES THE PATTERN LIBRARY
    IN YOUR PROCESS?

    View full-size slide

  31. #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

    View full-size slide

  32. #ZombieLibrary
    GETTING STARTED
    (TODAY)

    View full-size slide

  33. #ZombieLibrary
    TAKE AN INVENTORY
    1

    View full-size slide

  34. Option List Group
    Seen On:
    • My Account » Account List
    • Send Money » Select Payment Option
    Desktop
    Mobile

    View full-size slide

  35. #ZombieLibrary
    BASE STYLES
    1
    2 COMPONENTS
    3 PAGE TEMPLATES
    WHAT TO
    DOCUMENT

    View full-size slide

  36. #ZombieLibrary
    STANDARDIZE
    2

    View full-size slide

  37. #ZombieLibrary
    DOCUMENT
    3

    View full-size slide

  38. #ZombieLibrary
    BASIC
    DOCUMENTATION
    NAME
    1
    2 DESCRIPTION
    3 EXAMPLE
    3 CODE SNIPPET

    View full-size slide

  39. #ZombieLibrary
    CENTRALIZE YOUR CSS
    3a

    View full-size slide

  40. #ZombieLibrary
    DEFINE CSS STANDARDS
    3
    REFACTOR TO PERFECTION
    4

    View full-size slide

  41. #ZombieLibrary
    BREAK UP YOUR
    COMPONENTS

    View full-size slide

  42. #ZombieLibrary
    NAMESPACE
    THE CSS

    View full-size slide

  43. #ZombieLibrary
    FIND IN
    PROJECT IS
    YOUR FRIEND

    View full-size slide

  44. #ZombieLibrary
    REGEX SEARCH FOR CLASSES
    class\s*?=\s*?["'].*?table
    will find all instances where class=“ “ contains table

    View full-size slide

  45. #ZombieLibrary
    DON’T FORGET
    JAVASCRIPT!

    View full-size slide

  46. #ZombieLibrary
    GOVERN YOUR LIBRARY
    5

    View full-size slide

  47. #ZombieLibrary
    https://css-tricks.com/what-a-css-code-review-might-look-like/

    View full-size slide

  48. #ZombieLibrary
    https://medium.com/eightshapes-llc/team-models-for-scaling-a-design-system

    View full-size slide

  49. https://medium.com/eightshapes-llc/team-models-for-scaling-a-design-system-2cf9d03be6a0#.cod1997sc
    SOLITARY

    View full-size slide

  50. https://medium.com/eightshapes-llc/team-models-for-scaling-a-design-system-2cf9d03be6a0#.cod1997sc
    CENTRALIZED

    View full-size slide

  51. https://medium.com/eightshapes-llc/team-models-for-scaling-a-design-system-2cf9d03be6a0#.cod1997sc
    FEDERATED

    View full-size slide

  52. #ZombieLibrary
    PATTERN LIBRARY
    TOOLS
    http://www.smashingmagazine.com/2015/04/an-in-depth-overview-of-living-style-guide-tools/

    View full-size slide

  53. #ZombieLibrary
    CSS DOCUMENTATION
    1

    View full-size slide

  54. #ZombieLibrary
    1

    View full-size slide

  55. #ZombieLibrary
    STATIC SITE GENERATION
    2

    View full-size slide

  56. #ZombieLibrary

    View full-size slide

  57. #ZombieLibrary
    INTEGRATED
    3

    View full-size slide

  58. #ZombieLibrary

    View full-size slide

  59. #ZombieLibrary
    BETTER WAY
    THERE HAS TO BE A

    View full-size slide

  60. #ZombieLibrary

    View full-size slide

  61. #ZombieLibrary
    GET STARTED WITH
    PATTERN
    PACK

    View full-size slide

  62. #ZombieLibrary
    https://github.com/patternpack/patternpack-example-library

    View full-size slide

  63. #ZombieLibrary
    $ npm init
    $ git init

    View full-size slide

  64. #ZombieLibrary
    $ npm install grunt patternpack --save-dev

    View full-size slide

  65. #ZombieLibrary
    module.exports = function(grunt) {
    grunt.initConfig({
    patternpack: {
    run: {},
    build: {},
    release: {}
    }
    });
    grunt.loadNpmTasks('patternpack');
    grunt.registerTask('default', ['patternpack:run']);
    }
    gruntfile.js

    View full-size slide

  66. #ZombieLibrary
    $ grunt patternpack:run

    View full-size slide

  67. #ZombieLibrary

    View full-size slide

  68. #ZombieLibrary
    CREATE YOUR FIRST
    PATTERN

    View full-size slide

  69. #ZombieLibrary

    View full-size slide

  70. #ZombieLibrary

    View full-size slide

  71. #ZombieLibrary

    View full-size slide

  72. #ZombieLibrary

    View full-size slide

  73. #ZombieLibrary

    View full-size slide

  74. #ZombieLibrary

    View full-size slide

  75. #ZombieLibrary

    View full-size slide

  76. #ZombieLibrary

    View full-size slide

  77. #ZombieLibrary

    View full-size slide

  78. #ZombieLibrary
    UNLEASH YOUR
    CREATION

    View full-size slide

  79. #ZombieLibrary
    USE SEMANTIC VERSIONING
    FOR YOUR DESIGN SYSTEM

    View full-size slide

  80. #ZombieLibrary
    1.0.5
    major
    release
    minor
    release
    patch
    release

    View full-size slide

  81. #ZombieLibrary
    1.0.5
    major
    release
    minor
    release
    patch
    release
    Customize to your needs

    View full-size slide

  82. #ZombieLibrary
    $ grunt patternpack:release
    $ git push --follow-tags

    View full-size slide

  83. #ZombieLibrary
    BUILD YOUR STATIC SITE
    1
    INCREMENT YOUR VERSION
    2
    CREATE A NEW COMMIT
    3
    TAG THE COMMIT
    4

    View full-size slide

  84. #ZombieLibrary
    INTEGRATE INTO YOUR
    APPLICATION

    View full-size slide

  85. #ZombieLibrary
    SUPPORT FOR
    NPM &
    BOWER

    View full-size slide

  86. #ZombieLibrary
    $ npm install my-awesome-pattern-library

    View full-size slide

  87. #ZombieLibrary
    $ npm install https://user:[email protected]/user/my-
    awesome-library.git

    View full-size slide

  88. #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"
    }

    View full-size slide

  89. #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"
    }

    View full-size slide

  90. #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

    View full-size slide

  91. #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

    View full-size slide

  92. #ZombieLibrary

    View full-size slide

  93. #ZombieLibrary

    View full-size slide

  94. #ZombieLibrary

    View full-size slide

  95. http://patternpack.org/

    View full-size slide

  96. #ZombieLibrary
    DESIGN PROCESS
    RETHINKING THE

    View full-size slide

  97. #ZombieLibrary
    DISCOVER DESIGN
    DEVELOP
    TEST
    Design
    PatternPack

    View full-size slide

  98. INTERFACES
    FIGHT ZOMBIE

    View full-size slide

  99. #ZombieLibrary
    THANK YOU!
    Marcelo Somers
    @marcelosomers
    Slides
    h p://j.mp/zombie-library-cssdevconf
    PatternPack
    h p://pa ernpack.org/

    View full-size slide