1.
presents
Front-end pattern libraries
Vinay Malankad & Maish Nichani
www.pebbleroad.com

2.
We are PebbleRoad
•
Singapore-based
Enterprise UX consultancy
•
Innovating since 2004
•
Team of specialists
•
Culture of innovation and
design leadership

3.
Pattern libraries
Tapestry
What it is
Why do we need one
What it is
How to use
What is the tech
How to install

4.
FE Pattern library
=
content
+
interaction
+
visual
+
code

5.
Title
Code
Usage notes
Presentation
http://patterns.alistapart.com/

6.
https://ux.mailchimp.com/patterns

7.
Why
UXUXFE
+
CMS
give prototype + psd
can’t recognise work
give html templates
new templates fail
give modular code
can’t screw up

8.
When
maintenance
UX
CMS
UX
UX

9.
Benefits
Production-quality
Modular
Reusable
Extendable
Smart!

10.
Tapestry
Interface
Core CSS + JavaScript

11.
Customise it!
Interface
Customise
Customise
Core CSS + JavaScript

12.
Tapestry demo
http://demos.pebbleroad.com/tapestry/src/
intro
patterns
+ pattern
- pattern
_tech
installation

13.
pages
Patterns
feedback + content
templates
feedback
components
tabs
elements
table

14.
Interface
JSON
Patterns

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

16.
Next steps
Unit testing of the app
Share a pattern
Pattern version history

17.
http://www.fivesimplesteps.com/products/front-end-style-guides

18.
A free service that saves you time in sharing
hard-to-spell or hard-to-understand info with
customer service reps.
!
www.copymyinfo.com

19.
www.pebbleroad.com