presents

Front-end pattern libraries
Vinay Malankad & Maish Nichani

www.pebbleroad.com
We are PebbleRoad
•

Singapore-based
Enterprise UX consultancy

•

Innovating since 2004

•

Team of specialists

•

Culture of innovation and
design leadership
Pattern libraries
Tapestry

What it is
Why do we need one
What it is
How to use
What is the tech
How to install
FE Pattern library
=
content
+
interaction
+
visual
+
code
Title

Code

Usage notes

Presentation

http://patterns.alistapart.com/
https://ux.mailchimp.com/patterns
Why

UXUXFE
+

CMS

give prototype + psd

can’t recognise work

give html templates

new templates fail

give modular code

can’t screw up
When

maintenance
UX

CMS
UX

UX
Benefits
Production-quality
Modular
Reusable
Extendable
Smart!
Tapestry
Interface

Core CSS + JavaScript
Customise it!
Interface

Customise
Customise

Core CSS + JavaScript
Tapestry demo
http://demos.pebbleroad.com/tapestry/src/

intro
patterns
+ pattern
- pattern
_tech
installation
pages

Patterns

feedback + content

templates

feedback

components

tabs

elements

table
Interface

JSON

Patterns
Installation
Dependency	
  -­‐	
  Gulp	
  (NodeJS)	
  

!

$ git clone https://github.com/PebbleRoad/tapestry.git

!

$ cd tapestry

!

$ npm install && bower install

!

$ gulp patterns

!

# Open http://localhost:8000 in your browser
Next steps
Unit testing of the app
Share a pattern
Pattern version history
http://www.fivesimplesteps.com/products/front-end-style-guides
A free service that saves you time in sharing
hard-to-spell or hard-to-understand info with
customer service reps.
!
www.copymyinfo.com
www.pebbleroad.com

Front-end Pattern Libraries