This document introduces PebbleRoad's Tapestry front-end pattern library. It discusses what a pattern library is and why companies need them. It provides an overview of Tapestry, including the types of patterns, code samples, and how to customize and install it. Benefits of using Tapestry include production-quality, reusable code. It also presents additional resources for front-end style guides and a tool for sharing information with customer support.

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

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

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

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

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

22. www.pebbleroad.com