Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

Fight the Zombie Pattern Library - CSS Dev Conf...

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
  2. #ZombieLibrary How do you keep living, knowing that’s what the

    world is like?” “ building interfaces
  3. #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
  4. Option List Group Seen On: • My Account » Account

    List • Send Money » Select Payment Option Desktop Mobile
  5. #ZombieLibrary module.exports = function(grunt) { grunt.initConfig({ patternpack: { run: {},

    build: {}, release: {} } }); grunt.loadNpmTasks('patternpack'); grunt.registerTask('default', ['patternpack:run']); } gruntfile.js
  6. #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" }