#RWDSummit

FIGHT
THE

ZOMBIE

PATTERN
LIBRARY
Responsive Web Design Summit 03.29.16

Marcelo Somers
Solution Architect, User Experience
@marcelosomers

#RWDSummit

Front-end style guides are a modular collection of all the elements in

your products user interface, together with code snippets for
developers to copy and paste as needed to implement those
elements. They include common UI components like buttons, forminput elements, navigation menus, modal overlays, and icons.
Lean UX

ZOMBIE

PATTERN LIBRARIES

#RWDSummit

s
e
c
a
f
r
e
t
n
i
g
n
i
d
l
i
u
b

How
do
you
keep
living,

knowing thats what

the world is like?

#RWDSummit

RETHINKING THE

DESIGN PROCESS

#RWDSummit

BUILD

SYSTEMS
NOT
PAGES
-Andy Clarke

http://stuandnonsense.co.uk/blog/about/walls_come_tumbling_down_presentation_slides_and_transcript/

#RWDSummit

BUILD A TINY

BOOTSTRAP
Mark Otto & Dave Rupert

https://speakerdeck.com/mdo/build-your-own-bootstrap

http://daverupert.com/2013/04/responsive-deliverables/

#RWDSummit

DESIGNING WITH PATTERNS

DESIGN

#RWDSummit

DESIGNING WITH PATTERNS

DESIGN

SLICE

#RWDSummit

DESIGNING WITH PATTERNS

DESIGN

SLICE

ASSEMBLE

#RWDSummit

DESIGN

TOOLS

#RWDSummit

#RWDSummit

#RWDSummit

#RWDSummit

#RWDSummit

#RWDSummit

#RWDSummit

WHERE THE DESIGN PROCESS

BREAKS DOWN

#RWDSummit

DESIGNERS
DISCOVER

DESIGN

DEVELOPERS
DEVELOP

TEST

#RWDSummit

TRADITIONAL HANDOFF IS

BROKEN

#RWDSummit

DISCOVER

DESIGN

TEST

DEVELOP

#RWDSummit

DESIGNING WITH PATTERNS

DESIGN

PATTERN
SLICE
LIBRARY ASSEMBLE

#RWDSummit

#RWDSummit

#RWDSummit

#RWDSummit

#RWDSummit

ELIMINATE

WASTE

#RWDSummit

THE

EVOLVING
DESIGNER

#RWDSummit

I can shift the bulk of my time and energy to

looking at the bigger picture. I can think more
widely about our users journey through our
product and give attention to more than
baseline functionality.
Katey Basye (Salesforce UX)

https://medium.com/salesforce-ux/how-the-salesforce-design-system-helped-me-onboard-as-a-new-product-designer-92b7d5f42237#.6brzoe1fu

#RWDSummit

WHERE DOES THE PATTERN LIBRARY

LIVE
IN YOUR PROCESS?

#RWDSummit

#RWDSummit

Governed

The pattern library process is built in to your organization

Automatic

STYLE GUIDE

The pattern library is a part of your app build process

MATURITY

MODEL

This is the chasm that is hard for organizations to cross

Manual

The pattern library has code, but must be manually updated

Static

A one-time PDF of your brand guidelines

Inconsistent

The absence of a design system

https://medium.com/@marcelosomers/a-maturity-model-for-design-systems-93f522c3ba

https://medium.com/@marcelosomers/chasing-the-holy-grail-bbc0b7cce365#.wvedzdvsx

#RWDSummit

GETTING
STARTED
(TODAY)

#RWDSummit

TAKE AN INVENTORY

Desktop

Option List Group

Seen On:
My Account Account List
Send Money Select Payment Option

Mobile

https://medium.com/eightshapes-llc/the-component-cut-up-workshop-1378ae110517#.c887jlrum

#RWDSummit

WHAT TO
DOCUMENT

BASE STYLES

COMPONENTS

PAGE TEMPLATES

#RWDSummit

https://www.nngroup.com/articles/front-end-style-guides/

#RWDSummit

2 STANDARDIZE

#RWDSummit

3 DOCUMENT

#RWDSummit

BASIC
DOCUMENTATION

NAME

DESCRIPTION

EXAMPLE

CODE SNIPPET

#RWDSummit

3a CENTRALIZE YOUR CSS

#RWDSummit

4 DEFINE CSS STANDARDS

5 REFACTOR TO PERFECTION

#RWDSummit

START FUNCTIONAL

http://www.basscss.com/

http://tachyons.io/

#RWDSummit

BREAK UP YOUR
COMPONENTS

https://medium.com/@ahmedelgabri/global-scope-namespacing-css-681bda44c43e#.5i17q1gwv

#RWDSummit

NAMESPACE
THE CSS
https://medium.com/@ahmedelgabri/global-scope-namespacing-css-681bda44c43e#.5i17q1gwv

#RWDSummit

FIND IN
PROJECT IS
YOUR FRIEND

#RWDSummit

REGEX SEARCH FOR CLASSES

class\s*?=\s*?["'].*?table
le
b
a
t
s
in
a
t
n
o
c

=
s
s
a
l
c
e
r
e
h
w
s
e
c
will find al instan

#RWDSummit

DONT FORGET
JAVASCRIPT!

#RWDSummit

6 GOVERN YOUR LIBRARY

#RWDSummit

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

#RWDSummit

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

SOLITARY

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

CENTRALIZED

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

FEDERATED

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

#RWDSummit

Effective organizational design is more than drawing boxes and

arrows, it flows from a thorough understanding of strategic
objectives, takes into consideration both the formal and
informal elements of the organizational units involved in the
redesign and weighs the potential impact on the rest of the
organization and its ability to fulfill strategic goals.
Competing by Design, Nadler and Tushman

#RWDSummit

Effective organizational design is more than drawing boxes and

arrows, it flows from a thorough understanding of strategic
objectives, takes into consideration both the formal and
informal elements of the organizational units involved in the
redesign and weighs the potential impact on the rest of the
organization and its ability to fulfill strategic goals.
Competing by Design, Nadler and Tushman

#RWDSummit

Effective organizational design is more than drawing boxes and

arrows, it flows from a thorough understanding of strategic
objectives, takes into consideration both the formal and
informal elements of the organizational units involved in the
redesign and weighs the potential impact on the rest of the
organization and its ability to fulfill strategic goals.
Competing by Design, Nadler and Tushman

#RWDSummit

Effective organizational design is more than drawing boxes and

arrows, it flows from a thorough understanding of strategic
objectives, takes into consideration both the formal and
informal elements of the organizational units involved in the
redesign and weighs the potential impact on the rest of the
organization and its ability to fulfill strategic goals.
Competing by Design, Nadler and Tushman

#RWDSummit

WHY ARE WE DOING THIS?

HOW WILL IT FIT IN OUR ORGANIZATION?

WHAT INVESTMENT ARE WE WILLING TO MAKE?

WHOS DOING THE WORK?

#RWDSummit

OPEN SOURCE
CULTURE

#RWDSummit

GREAT

DOCUMENTATION

#RWDSummit

MAKE IT

EASY TO CONTRIBUTE

#RWDSummit

FIND EASY

MISTAKES

#RWDSummit

EMBRACE

NON-DEVELOPERS

#RWDSummit

MAKE IT EASY TO

COMMUNICATE

#RWDSummit

OPEN & TRANSPARENT

ROADMAP

#RWDSummit

PATTERN LIBRARY

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

#RWDSummit

CSS DOCUMENTATION

#RWDSummit

#RWDSummit

2 STATIC SITE GENERATION

#RWDSummit

#RWDSummit

3 INTEGRATED

#RWDSummit

#RWDSummit

THERE HAS TO BE A

BETTER WAY

http://patternpack.org/

#RWDSummit

#ZombieLibrary

GET STARTED WITH

PATTERN

PACK

#ZombieLibrary

https://github.com/patternpack/patternpack-example-library

#ZombieLibrary

$ npm init
$ git init

#ZombieLibrary

$ npm install grunt patternpack --save-dev

#ZombieLibrary

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

#ZombieLibrary

$ grunt patternpack:run

#ZombieLibrary

#ZombieLibrary

CREATE YOUR FIRST

PATTERN

#ZombieLibrary

#ZombieLibrary

#ZombieLibrary

#ZombieLibrary

#ZombieLibrary

#ZombieLibrary

#ZombieLibrary

#ZombieLibrary

#ZombieLibrary

#ZombieLibrary

UNLEASH YOUR

CREATION

#ZombieLibrary

USE SEMANTIC VERSIONING

FOR YOUR DESIGN SYSTEM

#ZombieLibrary

1.0.5
major
release

minor
release

patch
release

#ZombieLibrary

1.0.5
Customize to your needs
major
release

minor
release

patch
release

#ZombieLibrary

$ grunt patternpack:release
$ git push --follow-tags

#ZombieLibrary

BUILD YOUR STATIC SITE

2 INCREMENT YOUR VERSION

3 CREATE A NEW COMMIT
4 TAG THE COMMIT

#ZombieLibrary

INTEGRATE INTO YOUR

APPLICATION

https://medium.com/@marcelosomers/chasing-the-holy-grail-bbc0b7cce365#.wvedzdvsx

#ZombieLibrary

SUPPORT FOR

NPM &

BOWER

#ZombieLibrary

$ npm install my-awesome-pattern-library

#ZombieLibrary

$ npm install https://user:pass@github.com/user/myawesome-library.git

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

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

USERNAME &
PASSWORD

#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

#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

#ZombieLibrary

#ZombieLibrary

#ZombieLibrary

http://patternpack.org/

#ZombieLibrary

THIS IS MORE THAN JUST A

TECH PROBLEM

FIGHT ZOMBIE

INTERFACES

MODULARIZE

DOCUMENT

SHARE

#ZombieLibrary

THANK YOU!
Marcelo Somers

Slides

@marcelosomers

http://j.mp/zombie-library-rwdsummit

PatternPack
http://patternpack.org/